浏览代码

feature 人群包 页面

jiayufei 4 年之前
父节点
当前提交
a7c84ae137

+ 2 - 2
src/views/modules/account-config/account-config-server.js

@@ -1,2 +1,2 @@
-export const urlAcount = 'http://118.24.244.213:8080';
-// export const urlAcount = 'http://192.168.1.43:8080';
+// export const urlAcount = 'http://118.24.244.213:8080';
+export const urlAcount = 'http://192.168.1.43:8080';

+ 24 - 25
src/views/modules/account-config/components/configuration-modal.vue

@@ -306,17 +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 ref="direct" packtype="directional" multitype="alone"></directional-logic>
+                                <directional-logic ref="direct" packtype="directional" multitype="alone" :defaultlist="directionalData"></directional-logic>
                             </div>
                         </div>
                         <div v-if="configForm.adRetargetingTagsInclude === 'a' && configForm.directionalLogic === '2'" class="adver-position-radio">
                             <div style="width: 60%;">
-                                <directional-logic ref="exclude" packtype="exclude" multitype="alone"></directional-logic>
+                                <directional-logic ref="exclude" packtype="exclude" multitype="alone" :defaultlist="directionalData"></directional-logic>
                             </div>
                         </div>
                         <div v-if="configForm.adRetargetingTagsInclude === 'a' && configForm.directionalLogic === '3'" class="adver-position-radio">
                             <div style="width: 60%;">
-                                <directional-logic ref="twoway" packtype="twoway" multitype="all"></directional-logic>
+                                <directional-logic ref="twoway" packtype="twoway" multitype="all" :defaultlist="directionalData"></directional-logic>
                             </div>
                         </div>
                         <a-form-model-item label="媒体定向">
@@ -831,6 +831,7 @@ export default {
             }
         };
         return {
+            directionalData: [],
             selectPackageTabs: '1',
             adHideIfConvertedDataOption: [ // 过滤已转化用户option
                 {
@@ -1130,6 +1131,7 @@ export default {
                 this.handleGetCreativeClassification();
                 this.handleGetAdvertiserStrategy();
                 this.handleGetAdAudiencePackage();
+                this.handleDirectionalList();
             }
             else {
                 this.createOptions = [];
@@ -1152,31 +1154,28 @@ export default {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         moment,
+        handleDirectionalList() {
+            const paramsData = {
+                accountId: this.configForm.accountId
+            };
+            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getDMPCustomAudience', paramsData).then(result => {
+                if (result.code === 0) {
+                    console.log(result, 'result--8888888888888888888888888888888-result');
+                    result.result.forEach(item => {
+                        item.key = item.custom_audience_id;
+                    });
+                    this.directionalData = result.result;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
         handleDirectionalLogic(e) {
             console.log(e.target.value, 'e--e--e--e--e--e--e--e');
             const selectValue = e.target.value;
-            // if (selectValue === '1') {
-            //     this.$refs.exclude.tableSelectIds = [];
-            //     this.$refs.exclude.selectRightData = [];
-            //     this.$refs.twoway.tableSelectDirectIds = [];
-            //     this.$refs.twoway.tableSelectDirectData = [];
-            //     this.$refs.twoway.tableSelectExcludeIds = [];
-            //     this.$refs.twoway.tableSelectExcludeData = [];
-            // }
-            // else if (selectValue === '2') {
-            //     this.$refs.exclude.tableSelectIds = [];
-            //     this.$refs.exclude.selectRightData = [];
-            //     this.$refs.twoway.tableSelectDirectIds = [];
-            //     this.$refs.twoway.tableSelectDirectData = [];
-            //     this.$refs.twoway.tableSelectExcludeIds = [];
-            //     this.$refs.twoway.tableSelectExcludeData = [];
-            // }
-            // else if (selectValue === '3') {
-            //     this.$refs.direct.tableSelectIds = [];
-            //     this.$refs.direct.selectRightData = [];
-            //     this.$refs.exclude.tableSelectIds = [];
-            //     this.$refs.exclude.selectRightData = [];
-            // }
         },
         handleGetAdAudiencePackage() {
             const params = {

+ 124 - 46
src/views/modules/account-config/components/directional-logic/directional-logic.vue

@@ -2,13 +2,13 @@
     <div class="directional-logic-content">
         <div v-if="multitype === 'all'" class="tree-select-class">
             <div class="select-class-left">
-                <a-tabs v-model="selectPackageTabs">
+                <a-tabs v-model="selectPackageTabs" @change="handleTabsChange">
                     <a-tab-pane key="1" tab="定向池">
                         <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
                         <a-table
                             :columns="columns"
                             :data-source="tableDataAllDirect"
-                            :row-selection="{onChange: handleSelectionDirect, selectedRowKeys: tableSelectDirectIds}"
+                            :row-selection="rowSelectionAllDirect"
                             :scroll="{y: 300}"
                             :pagination="false"
                         >
@@ -19,7 +19,7 @@
                         <a-table
                             :columns="columns"
                             :data-source="tableDataAllExclude"
-                            :row-selection="{onChange: handleSelectionExclude, selectedRowKeys: tableSelectExcludeIds}"
+                            :row-selection="rowSelectionAllExclude"
                             :scroll="{y: 300}"
                             :pagination="false"
                         >
@@ -29,8 +29,7 @@
             </div>
             <div class="select-class-right">
                 <div class="class-left-header">
-                    已选({{ packtype === 'directional' ? '定向' : '排除'}})
-                    <span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
+                    已选<span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
                 </div>
                 <div class="class-left-content">
                     <a-tabs v-model="selectAllRightTabs">
@@ -48,7 +47,7 @@
                                             {{ item.name }}
                                         </a-tooltip>
                                     </p>
-                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'direct')" />
                                 </div>
                             </div>
                             <div v-else class="no-data-class">暂无数据</div>
@@ -67,7 +66,7 @@
                                             {{ item.name }}
                                         </a-tooltip>
                                     </p>
-                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'exclude')" />
                                 </div>
                             </div>
                             <div v-else class="no-data-class">暂无数据</div>
@@ -104,7 +103,7 @@
                                     {{ item.name }}
                                 </a-tooltip>
                             </p>
-                            <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                            <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'alone')" />
                         </div>
                     </div>
                     <div v-else class="no-data-class">暂无数据</div>
@@ -124,6 +123,12 @@ export default {
         multitype: {
             type: String,
             default: ''
+        },
+        defaultlist: {
+            type: Array,
+            default: () => {
+                return [];
+            }
         }
     },
     data() {
@@ -141,16 +146,16 @@ export default {
                 },
                 {
                     title: '属性',
-                    dataIndex: 'age',
-                    key: 'age',
+                    dataIndex: 'tag',
+                    key: 'tag',
                     width: '30%',
                     ellipsis: true
                 },
                 {
                     title: '创建时间',
-                    dataIndex: 'address',
+                    dataIndex: 'create_time',
                     width: '30%',
-                    key: 'address',
+                    key: 'create_time',
                     ellipsis: true
                 }
             ],
@@ -214,37 +219,80 @@ export default {
             ], // 全选-排除数据-copy
             tableSelectExcludeIds: [], // 全选-排除-table选中ID
             tableSelectExcludeData: [], // 全选-排除-右侧选中数据
-            tableDataAlone: [
-                {
-                    key: 1,
-                    name: '行业内人群包1234567',
-                    age: '系统推荐',
-                    address: '2020-12-12'
+            tableDataAlone: [],
+            updateTreeDataAlone: []
+        };
+    },
+    computed: {
+        rowSelectionAllDirect() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+                    this.tableSelectDirectIds = selectedRowKeys;
+                    this.tableSelectDirectData = selectedRows;
                 },
-                {
-                    key: 2,
-                    name: '行业内人群包98990890',
-                    age: '系统推荐',
-                    address: '2020-12-12'
-                }
-            ],
-            updateTreeDataAlone: [
-                {
-                    key: 1,
-                    name: '行业内人群包1234567',
-                    age: '系统推荐',
-                    address: '2020-12-12'
+                selectedRowKeys: this.tableSelectDirectIds,
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: this.tableSelectExcludeIds.includes(record.key),
+                        name: record.name,
+                        defaultChecked: this.tableSelectDirectIds.includes(record.key)
+                    }
+                })
+            };
+        },
+        rowSelectionAllExclude() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+                    this.tableSelectExcludeIds = selectedRowKeys;
+                    this.tableSelectExcludeData = selectedRows;
                 },
-                {
-                    key: 2,
-                    name: '行业内人群包98990890',
-                    age: '系统推荐',
-                    address: '2020-12-12'
-                }
-            ]
-        };
+                selectedRowKeys: this.tableSelectExcludeIds,
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: this.tableSelectDirectIds.includes(record.key),
+                        name: record.name,
+                        defaultChecked: this.tableSelectExcludeIds.includes(record.key)
+                    }
+                })
+            };
+        },
+        // allSelection() {
+        //     const {tableSelectExcludeIds} = this;
+        //     return {
+        //         handleDirectProps: record => ({
+        //             props: {
+        //                 disabled: tableSelectExcludeIds.includes(record.key),
+        //                 name: record.name
+        //             }
+        //         })
+        //     }
+        // },
+        // allSelectionTwo() {
+        //     const {tableSelectDirectIds} = this;
+        //     return {
+        //         handleExcludeProps: record => ({
+        //             props: {
+        //                 disabled: tableSelectDirectIds.includes(record.key),
+        //                 name: record.name
+        //             }
+        //         })
+        //     }
+        // }
     },
     watch: {
+        defaultlist(newVal) {
+            if (newVal) {
+                console.log(newVal, '----newVal--val');
+                this.tableDataAllDirect = newVal;
+                this.updateTableAllDirect = newVal;
+                this.tableDataAllExclude = newVal;
+                this.updateTableAllExclude = newVal;
+                this.tableDataAlone = newVal;
+                this.updateTreeDataAlone = newVal;
+            }
+        },
         packtype(newVal, oldVal) {
             console.log(newVal, 'new--new');
             if (newVal === 'directional') {
@@ -269,7 +317,23 @@ export default {
             }
         },
     },
+    mounted() {
+        this.tableDataAllDirect = this.defaultlist;
+        this.updateTableAllDirect = this.defaultlist;
+        this.tableDataAllExclude = this.defaultlist;
+        this.updateTableAllExclude = this.defaultlist;
+        this.tableDataAlone = this.defaultlist;
+        this.updateTreeDataAlone = this.defaultlist;
+    },
     methods: {
+        handleTabsChange(e) {
+            this.tableDataAllDirect = [];
+            this.tableDataAllExclude = [];
+            this.$nextTick(() => {
+                this.tableDataAllDirect = this.updateTableAllDirect;
+                this.tableDataAllExclude = this.updateTableAllExclude;
+            });
+        },
         handleSearchPack(e) {
             const value = e.target.value;
             let defaultList = [];
@@ -281,21 +345,35 @@ export default {
             this.tableDataAlone = defaultList;
         },
         handleRowSelection(selectedRowKeys, selectedRows) {
-            this.tableSelectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
+            this.tableSelectIds = selectedRowKeys;
             this.selectRightData = selectedRows;
         },
         handleSelectionDirect(selectedRowKeys, selectedRows) {
-            this.tableSelectDirectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
+            this.tableSelectDirectIds = selectedRowKeys;
             this.tableSelectDirectData = selectedRows;
         },
         handleSelectionExclude(selectedRowKeys, selectedRows) {
-            this.tableSelectExcludeIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
+            this.tableSelectExcludeIds = selectedRowKeys;
             this.tableSelectExcludeData = selectedRows;
         },
-        handleDelTree(list) {
-            let formData = this.selectRightData;
-            this.selectRightData = formData.filter(item => list.key !== item.key);
-            this.tableSelectIds = this.selectRightData.map(item => item.key);
+        handleDelTree(list, type, style) {
+            if (type === 'alone') {
+                let formData = this.selectRightData;
+                this.selectRightData = formData.filter(item => list.key !== item.key);
+                this.tableSelectIds = this.selectRightData.map(item => item.key);
+            }
+            else if (type === 'all') {
+                if (style === 'direct') {
+                    let directData = this.tableSelectDirectData;
+                    this.tableSelectDirectData = directData.filter(item => list.key !== item.key);
+                    this.tableSelectDirectIds = this.tableSelectDirectData.map(item => item.key);
+                }
+                else if (style === 'exclude') {
+                    let excludeData = this.tableSelectExcludeData;
+                    this.tableSelectExcludeData = excludeData.filter(item => list.key !== item.key);
+                    this.tableSelectExcludeIds = this.tableSelectExcludeData.map(item => item.key);
+                }
+            }
         },
         handleDelAloneAll(type) {
             if (type === 'alone') {