Ver código fonte

feature 人群包 页面

jiayufei 4 anos atrás
pai
commit
683d7a700c

+ 7 - 2
src/views/modules/account-config/components/configuration-modal.vue

@@ -306,12 +306,17 @@
                         </a-form-model-item>
                         <div v-if="configForm.adRetargetingTagsInclude === 'a' && configForm.directionalLogic === '1'" class="adver-position-radio">
                             <div style="width: 60%;">
-                                <directional-logic packtype="directional"></directional-logic>
+                                <directional-logic packtype="directional" multitype="alone"></directional-logic>
                             </div>
                         </div>
                         <div v-if="configForm.adRetargetingTagsInclude === 'a' && configForm.directionalLogic === '2'" class="adver-position-radio">
                             <div style="width: 60%;">
-                                <directional-logic packtype="exclude"></directional-logic>
+                                <directional-logic packtype="exclude" multitype="alone"></directional-logic>
+                            </div>
+                        </div>
+                        <div v-if="configForm.adRetargetingTagsInclude === 'a' && configForm.directionalLogic === '3'" class="adver-position-radio">
+                            <div style="width: 60%;">
+                                <directional-logic packtype="exclude" multitype="all"></directional-logic>
                             </div>
                         </div>
                         <a-form-model-item label="媒体定向">

+ 3 - 0
src/views/modules/account-config/components/directional-logic/directional-logic.less

@@ -39,6 +39,9 @@
                 padding: 0 10px;
                 height: 348px;
                 overflow-y: auto;
+                /deep/ .ant-tabs-nav-container {
+                    margin-left: 0 !important;
+                }
                 .apply-right-tree {
                     display: flex;
                     justify-content: space-between;

+ 56 - 1
src/views/modules/account-config/components/directional-logic/directional-logic.vue

@@ -1,6 +1,55 @@
 <template>
     <div class="directional-logic-content">
-        <div>
+        <div v-if="multitype === 'all'" class="tree-select-class">
+            <div class="select-class-left">
+                <a-tabs v-model="selectPackageTabs">
+                    <a-tab-pane key="1" tab="定向池">
+                        <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
+                        <a-table
+                            :columns="columns"
+                            :data-source="tableData"
+                            :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
+                            :scroll="{y: 300}"
+                            :pagination="false"
+                        >
+                        </a-table>
+                    </a-tab-pane>
+                    <a-tab-pane key="2" tab="排除池">
+                        <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
+                        <a-table
+                            :columns="columns"
+                            :data-source="tableData"
+                            :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
+                            :scroll="{y: 300}"
+                            :pagination="false"
+                        >
+                        </a-table>
+                    </a-tab-pane>
+                </a-tabs>
+            </div>
+            <div class="select-class-right">
+                <div class="class-left-header">
+                    已选({{ packtype === 'directional' ? '定向' : '排除'}})
+                </div>
+                <div class="class-left-content">
+                    <a-tabs v-model="selectAllRightTabs">
+                        <a-tab-pane key="3">
+                            <span slot="tab">
+                                定向(0)
+                            </span>
+                            定向
+                        </a-tab-pane>
+                        <a-tab-pane key="4">
+                            <span slot="tab">
+                                排除(0)
+                            </span>
+                            排除
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+            </div>
+        </div>
+        <div v-else>
             <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
             <div class="tree-select-class">
                 <div class="select-class-left">
@@ -43,10 +92,16 @@ export default {
         packtype: {
             type: String,
             default: ''
+        },
+        multitype: {
+            type: String,
+            default: ''
         }
     },
     data() {
         return {
+            selectPackageTabs: '1',
+            selectAllRightTabs: '3',
             selectRightData: [],
             tableSelectIds: [],
             columns: [