소스 검색

feature 人群包 页面

jiayufei 4 년 전
부모
커밋
316a04a5dd

+ 2 - 2
src/utils/request.js

@@ -15,9 +15,9 @@ else if (process.env.NODE_ENV == 'debug') {
 } 
 else if (process.env.NODE_ENV == 'production') { 
   
-  axios.defaults.baseURL = 'http://apipre.tjyourong.com.cn/jeecg-boot';//预生产
+  // axios.defaults.baseURL = 'http://apipre.tjyourong.com.cn/jeecg-boot';//预生产
   // axios.defaults.baseURL = 'http://139.186.165.84:8806/jeecg-boot';     
-  // axios.defaults.baseURL = 'http://api.tjyourong.com.cn/jeecg-boot';//生产环境
+  axios.defaults.baseURL = 'http://api.tjyourong.com.cn/jeecg-boot';//生产环境
 }
 const service = axios.create({
 //   baseURL: '/jeecg-boot', // api base_url

+ 1 - 0
src/views/modules/account-config/components/configuration-modal.less

@@ -199,6 +199,7 @@
             }
             .adver-position-radio {
                 margin-left: 140px;
+                margin-bottom: 15px;
                 .creative-label-content {
                     width: 400px;
                     height: 200px;

+ 30 - 4
src/views/modules/account-config/components/configuration-modal.vue

@@ -298,7 +298,7 @@
                             </a-radio-group>
                         </a-form-model-item>
                         <a-form-model-item v-if="configForm.adRetargetingTagsInclude === 'a'" label="定向逻辑">
-                            <a-radio-group v-model="configForm.directionalLogic" button-style="solid">
+                            <a-radio-group v-model="configForm.directionalLogic" button-style="solid" @change="handleDirectionalLogic">
                                 <a-radio-button value="1">定向</a-radio-button>
                                 <a-radio-button value="2">排除</a-radio-button>
                                 <a-radio-button value="3">同时定向排除</a-radio-button>
@@ -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 packtype="directional" multitype="alone"></directional-logic>
+                                <directional-logic ref="direct" 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" multitype="alone"></directional-logic>
+                                <directional-logic ref="exclude" 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>
+                                <directional-logic ref="twoway" packtype="twoway" multitype="all"></directional-logic>
                             </div>
                         </div>
                         <a-form-model-item label="媒体定向">
@@ -1152,6 +1152,32 @@ export default {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         moment,
+        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 = {
                 accountId: this.configForm.accountId

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

@@ -7,11 +7,16 @@
         display: flex;
         justify-content: space-between;
         .class-left-header {
+            display: flex;
+            justify-content: space-between;
             height: 50px;
             line-height: 50px;
             background-color: #fafafa;
             border-bottom: 1px solid #eee;
             text-indent: 10px;
+            .clear-all-tab {
+                margin-right: 10px;
+            }
         }
         .no-data-class {
             height: 340px;

+ 146 - 13
src/views/modules/account-config/components/directional-logic/directional-logic.vue

@@ -7,8 +7,8 @@
                         <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
                         <a-table
                             :columns="columns"
-                            :data-source="tableData"
-                            :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
+                            :data-source="tableDataAllDirect"
+                            :row-selection="{onChange: handleSelectionDirect, selectedRowKeys: tableSelectDirectIds}"
                             :scroll="{y: 300}"
                             :pagination="false"
                         >
@@ -18,8 +18,8 @@
                         <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
                         <a-table
                             :columns="columns"
-                            :data-source="tableData"
-                            :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
+                            :data-source="tableDataAllExclude"
+                            :row-selection="{onChange: handleSelectionExclude, selectedRowKeys: tableSelectExcludeIds}"
                             :scroll="{y: 300}"
                             :pagination="false"
                         >
@@ -30,20 +30,47 @@
             <div class="select-class-right">
                 <div class="class-left-header">
                     已选({{ packtype === 'directional' ? '定向' : '排除'}})
+                    <span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
                 </div>
                 <div class="class-left-content">
                     <a-tabs v-model="selectAllRightTabs">
                         <a-tab-pane key="3">
                             <span slot="tab">
-                                定向(0)
+                                定向({{ tableSelectDirectIds.length || 0 }}
                             </span>
-                            定向
+                            <div v-if="tableSelectDirectData.length" class="class-left-content">
+                                <div class="apply-right-tree" v-for="item in tableSelectDirectData" :key="item.key">
+                                    <p class="left-content-p">
+                                        <a-tooltip placement="left">
+                                            <template slot="title">
+                                                <span>{{ item.name }}</span>
+                                            </template>
+                                            {{ item.name }}
+                                        </a-tooltip>
+                                    </p>
+                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                                </div>
+                            </div>
+                            <div v-else class="no-data-class">暂无数据</div>
                         </a-tab-pane>
                         <a-tab-pane key="4">
                             <span slot="tab">
-                                排除(0)
+                                排除({{ tableSelectExcludeIds.length || 0 }}
                             </span>
-                            排除
+                            <div v-if="tableSelectExcludeData.length" class="class-left-content">
+                                <div class="apply-right-tree" v-for="item in tableSelectExcludeData" :key="item.key">
+                                    <p class="left-content-p">
+                                        <a-tooltip placement="left">
+                                            <template slot="title">
+                                                <span>{{ item.name }}</span>
+                                            </template>
+                                            {{ item.name }}
+                                        </a-tooltip>
+                                    </p>
+                                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                                </div>
+                            </div>
+                            <div v-else class="no-data-class">暂无数据</div>
                         </a-tab-pane>
                     </a-tabs>
                 </div>
@@ -55,7 +82,7 @@
                 <div class="select-class-left">
                     <a-table
                         :columns="columns"
-                        :data-source="tableData"
+                        :data-source="tableDataAlone"
                         :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
                         :scroll="{y: 300}"
                         :pagination="false"
@@ -65,6 +92,7 @@
                 <div class="select-class-right">
                     <div class="class-left-header">
                         已选({{ packtype === 'directional' ? '定向' : '排除'}})
+                        <span class="clear-all-tab"><a @click="handleDelAloneAll('alone')">清空</a></span>
                     </div>
                     <div v-if="selectRightData.length" class="class-left-content">
                         <div class="apply-right-tree" v-for="item in selectRightData" :key="item.key">
@@ -126,7 +154,67 @@ export default {
                     ellipsis: true
                 }
             ],
-            tableData: [
+            tableDataAllDirect: [
+                {
+                    key: 1,
+                    name: '求大城市能促进快下班',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                },
+                {
+                    key: 2,
+                    name: '好处费对该回复啊花开待夏',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                }
+            ], // 全选-定向数据
+            updateTableAllDirect: [
+                {
+                    key: 1,
+                    name: '求大城市能促进快下班',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                },
+                {
+                    key: 2,
+                    name: '好处费对该回复啊花开待夏',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                }
+            ], // 全选-定向数据-copy
+            tableSelectDirectIds: [], // 全选-定向-table选中ID
+            tableSelectDirectData: [], // 全选-定向-右侧选中数据
+            tableDataAllExclude: [
+                {
+                    key: 1,
+                    name: '差不多不是',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                },
+                {
+                    key: 2,
+                    name: '很高的一位杰克逊的本质',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                }
+            ], // 全选-排除数据
+            updateTableAllExclude: [
+                {
+                    key: 1,
+                    name: '差不多不是',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                },
+                {
+                    key: 2,
+                    name: '很高的一位杰克逊的本质',
+                    age: '系统推荐',
+                    address: '2020-12-12'
+                }
+            ], // 全选-排除数据-copy
+            tableSelectExcludeIds: [], // 全选-排除-table选中ID
+            tableSelectExcludeData: [], // 全选-排除-右侧选中数据
+            tableDataAlone: [
                 {
                     key: 1,
                     name: '行业内人群包1234567',
@@ -140,7 +228,7 @@ export default {
                     address: '2020-12-12'
                 }
             ],
-            updateTreeData: [
+            updateTreeDataAlone: [
                 {
                     key: 1,
                     name: '行业内人群包1234567',
@@ -156,25 +244,70 @@ export default {
             ]
         };
     },
+    watch: {
+        packtype(newVal, oldVal) {
+            console.log(newVal, 'new--new');
+            if (newVal === 'directional') {
+                this.tableSelectIds = [];
+                this.selectRightData = [];
+                this.tableSelectDirectIds = [];
+                this.tableSelectDirectData = [];
+                this.tableSelectExcludeIds = [];
+                this.tableSelectExcludeData = [];
+            }
+            else if (newVal === 'exclude') {
+                this.tableSelectIds = [];
+                this.selectRightData = [];
+                this.tableSelectDirectIds = [];
+                this.tableSelectDirectData = [];
+                this.tableSelectExcludeIds = [];
+                this.tableSelectExcludeData = [];
+            }
+            else if (newVal === 'twoway') {
+                this.tableSelectIds = [];
+                this.selectRightData = [];
+            }
+        },
+    },
     methods: {
         handleSearchPack(e) {
             const value = e.target.value;
             let defaultList = [];
-            this.updateTreeData.forEach(item => {
+            this.updateTreeDataAlone.forEach(item => {
                 if (item.name && item.name.indexOf(value) !== -1) {
                     defaultList.push(item);
                 }
             });
-            this.tableData = defaultList;
+            this.tableDataAlone = defaultList;
         },
         handleRowSelection(selectedRowKeys, selectedRows) {
             this.tableSelectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
             this.selectRightData = selectedRows;
         },
+        handleSelectionDirect(selectedRowKeys, selectedRows) {
+            this.tableSelectDirectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
+            this.tableSelectDirectData = selectedRows;
+        },
+        handleSelectionExclude(selectedRowKeys, selectedRows) {
+            this.tableSelectExcludeIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
+            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);
+        },
+        handleDelAloneAll(type) {
+            if (type === 'alone') {
+                this.selectRightData = [];
+                this.tableSelectIds = [];
+            }
+            else if (type === 'all') {
+                this.tableSelectDirectIds = [];
+                this.tableSelectDirectData = [];
+                this.tableSelectExcludeIds = [];
+                this.tableSelectExcludeData = [];
+            }
         }
     }
 }