浏览代码

人群包模块 前端页面优化

jiayufei 4 年之前
父节点
当前提交
624da0b8fb

+ 50 - 36
src/views/modules/crowd-control/components/tree-select/tree-select.vue

@@ -20,6 +20,7 @@
                 </template>
                 </template>
                 <div class="example">
                 <div class="example">
                     <a-spin :spinning="spinning"/>
                     <a-spin :spinning="spinning"/>
+                    <span v-if="leftTreeNoData">暂无数据</span>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
@@ -36,7 +37,12 @@
             </div>
             </div>
             <div v-if="applyTypeOption.length" class="class-left-content">
             <div v-if="applyTypeOption.length" class="class-left-content">
                 <p v-for="item in applyTypeOption" class="left-content-p" :key="item.key">
                 <p v-for="item in applyTypeOption" class="left-content-p" :key="item.key">
-                    {{ item.title }}
+                    <a-tooltip placement="top">
+                        <template slot="title">
+                            <span>{{ item.title }}</span>
+                        </template>
+                        {{ item.title }}
+                    </a-tooltip>
                 </p>
                 </p>
             </div>
             </div>
             <div v-else class="no-data-class">暂无数据</div>
             <div v-else class="no-data-class">暂无数据</div>
@@ -51,24 +57,21 @@ export default {
     name: 'tree-select',
     name: 'tree-select',
     data() {
     data() {
         return {
         return {
-            expandedKeys: ['0-0-0', '0-0-1'],
+            expandedKeys: [],
             autoExpandParent: true,
             autoExpandParent: true,
             checkedKeys: [],
             checkedKeys: [],
             selectedKeys: [],
             selectedKeys: [],
             treeData: [],
             treeData: [],
             updateTreeData: [],
             updateTreeData: [],
             applyTypeOption: [],
             applyTypeOption: [],
-            selectRightData: new Set()
+            selectRightData: new Set(),
+            spinning: true,
+            leftTreeNoData: false
         };
         };
     },
     },
-    computed: {
-        spinning() {
-            return !this.treeData.length;
-        }
-    },
     watch: {
     watch: {
         applyTypeOption: {
         applyTypeOption: {
-            handler(newName, oldName) {
+            handler(newName) {
                 if (newName.length > 100) {
                 if (newName.length > 100) {
                     this.$message.error('最多不能超过100个');
                     this.$message.error('最多不能超过100个');
                     this.applyTypeOption = newName.splice(0, 99);
                     this.applyTypeOption = newName.splice(0, 99);
@@ -87,36 +90,48 @@ export default {
                 userId: this.userInfo().id,
                 userId: this.userInfo().id,
                 type: 'kuaishou',
                 type: 'kuaishou',
             }).then(result => {
             }).then(result => {
-                this.treeData = result.result.map((item) => {
-                    return {
-                        key: item.projectId + 'projectId',
-                        title: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
-                        children: item.accountList
-                        ? item.accountList.map((i) => {
-                            return {
-                                key: i.accountId,
-                                title:
-                                (i.userName.length == 2
-                                    ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
-                                    : i.userName.length == 3
-                                    ? i.userName + '\xa0\xa0\xa0\xa0'
-                                    : i.userName) +
-                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
-                                i.accountId +
-                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
-                                i.authName,
-                            }
-                        }) : []
-                    };
-                });
-                this.updateTreeData = [...this.treeData];
-                console.log(this.treeData, 'result--result');
+                if (result.result.length) {
+                    this.spinning = false;
+                    this.treeData = result.result.map(item => {
+                        return {
+                            key: item.projectId + 'projectId',
+                            title: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
+                            children: item.accountList
+                            ? item.accountList.map(i => {
+                                return {
+                                    key: i.accountId,
+                                    title:
+                                    (i.userName.length == 2
+                                        ? i.userName + '\xa0\xa0\xa0\xa0\xa0'
+                                        : i.userName.length == 3
+                                        ? i.userName + '\xa0\xa0\xa0\xa0'
+                                        : i.userName) +
+                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
+                                    i.accountId +
+                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
+                                    i.authName,
+                                }
+                            }) : []
+                        };
+                    });
+                    this.updateTreeData = [...this.treeData];
+                }
+                else {
+                    this.spinning = false;
+                    this.leftTreeNoData = true;
+                }
             });
             });
         },
         },
         onChange(e) {
         onChange(e) {
             const value = e.target.value;
             const value = e.target.value;
-            const cloneTreeData = JSON.parse(JSON.stringify(this.treeData));
-            this.treeData = value !== '' ? this.getNewTreeData(cloneTreeData, value) : [...this.updateTreeData];
+            this.treeData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
+            if (!this.treeData.length) {
+                this.spinning = false;
+                this.leftTreeNoData = true;
+            }
+            else {
+                this.leftTreeNoData = false;
+            }
         },
         },
         getNewTreeData(treeData, value) {
         getNewTreeData(treeData, value) {
             if (!treeData) {
             if (!treeData) {
@@ -165,7 +180,6 @@ export default {
                 }
                 }
                 else {
                 else {
                     if (checkedKeys.indexOf(item.key) !== -1) {
                     if (checkedKeys.indexOf(item.key) !== -1) {
-                        console.log(item, 'item');
                         this.selectRightData.add(item);
                         this.selectRightData.add(item);
                     }
                     }
                     else {
                     else {

+ 117 - 3
src/views/modules/crowd-control/crowd-control-service.js

@@ -5,8 +5,122 @@
 
 
 class AppMarketService {
 class AppMarketService {
     constructor() {}
     constructor() {}
-    
-    // 人群包类型
+
+    // 相关账户的table列表
+    setAcountColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'accountName',
+                width: '25%'
+            },
+            {
+                title: '所属项目',
+                dataIndex: 'projectName',
+                width: '15%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 原因的table列表
+    setCauseColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                width: '30%'
+            },
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                width: '30%'
+            },
+            {
+                title: '原因',
+                dataIndex: 'message',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 相关项目的table列表
+    setDepColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'accountName',
+                width: '30%'
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'age',
+                width: '15%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 状态枚举
+    setStatusTasks() {
+        return [
+            {
+                label: 0,
+                value: '计算中'
+            },
+            {
+                label: 1,
+                value: '已生效'
+            },
+            {
+                label: 2,
+                value: '已删除'
+            },
+            {
+                label: 3,
+                value: '推送中'
+            },
+            {
+                label: 4,
+                value: '已推送'
+            },
+            {
+                label: 5,
+                value: '计算失败'
+            },
+            {
+                label: 6,
+                value: '推送失败'
+            },
+            {
+                label: 7,
+                value: '已失效'
+            }
+        ]
+    }
+
+    // 上传人去报的校验规则
+    setPersonRules() {
+        return {
+            name: [
+                {required: true, message: '人群包名称不能为空', trigger: 'blur'},
+                {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
+            ],
+            resource: [
+                {required: true, message: '请选择匹配类型', trigger: 'change'}
+            ]
+        }
+    }
+
+    // 人群包类型枚举值
     setPopulationTypeTasks() {
     setPopulationTypeTasks() {
         return [
         return [
             {
             {
@@ -73,7 +187,7 @@ class AppMarketService {
         ]
         ]
     }
     }
 
 
-    // 匹配类型
+    // 匹配类型枚举值
     setMateTypeTasks() {
     setMateTypeTasks() {
         return [
         return [
             {
             {

+ 43 - 157
src/views/modules/crowd-control/crowd-control.vue

@@ -148,6 +148,7 @@
                     <div class="acount-title-right">
                     <div class="acount-title-right">
                         <a-radio-group default-value="a" button-style="solid">
                         <a-radio-group default-value="a" button-style="solid">
                             <a-radio-button value="a">效果</a-radio-button>
                             <a-radio-button value="a">效果</a-radio-button>
+                            <a-radio-button value="b" disabled>品牌</a-radio-button>
                         </a-radio-group>
                         </a-radio-group>
                     </div>
                     </div>
                 </div>
                 </div>
@@ -242,117 +243,14 @@ export default {
             confirmLoading: false,
             confirmLoading: false,
             mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
             mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
             populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
             populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
-            statusTasks: [ // 状态
-                {
-                    label: 0,
-                    value: '计算中'
-                },
-                {
-                    label: 1,
-                    value: '已生效'
-                },
-                {
-                    label: 2,
-                    value: '已删除'
-                },
-                {
-                    label: 3,
-                    value: '推送中'
-                },
-                {
-                    label: 4,
-                    value: '已推送'
-                },
-                {
-                    label: 5,
-                    value: '计算失败'
-                },
-                {
-                    label: 6,
-                    value: '推送失败'
-                },
-                {
-                    label: 7,
-                    value: '已失效'
-                }
-            ],
-            acountTasks: [ // 账户列表
-                {
-                    label: '123',
-                    value: '123'
-                },
-                {
-                    label: '444',
-                    value: 'frfr'
-                }
-            ],
+            statusTasks: AppMarketService.setStatusTasks(), // 状态枚举
             relaxStatus: '',
             relaxStatus: '',
             causeData: [], // 原因的table列表数据,
             causeData: [], // 原因的table列表数据,
-            depData: [ // 相关项目的table列表数据
-                {
-                    name: '1111',
-                    age: '222',
-                    address: '33333'
-                }
-            ],
-            acountData: [ // 相关账户的table列表数据
-                {
-                    name: '1111',
-                    age: '222',
-                    address: '33333'
-                }
-            ],
-            acountColumns: [ // 相关账户的table列表
-                {
-                    title: '项目名称',
-                    dataIndex: 'name',
-                    width: '25%'
-                },
-                {
-                    title: '所属项目',
-                    dataIndex: 'age',
-                    width: '15%'
-                },
-                {
-                    title: '人群包数量',
-                    dataIndex: 'address',
-                    width: '40%'
-                }
-            ],
-            depColumns: [ // 相关项目的table列表
-                {
-                    title: '项目名称',
-                    dataIndex: 'name',
-                    width: '25%'
-                },
-                {
-                    title: '账户数量',
-                    dataIndex: 'age',
-                    width: '15%'
-                },
-                {
-                    title: '人群包数量',
-                    dataIndex: 'address',
-                    width: '40%'
-                }
-            ],
-            causeColumns: [ // 原因的table列表
-                {
-                    title: '项目名称',
-                    dataIndex: 'projectName',
-                    width: '30%'
-                },
-                {
-                    title: '账户名称',
-                    dataIndex: 'accountName',
-                    width: '30%'
-                },
-                {
-                    title: '原因',
-                    dataIndex: 'message',
-                    width: '40%'
-                }
-            ],
+            depData: [], // 相关项目的table列表数据,
+            acountData: [], // 相关账户的table列表数据,
+            acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
+            depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
+            causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
             dataSource: [],
             dataSource: [],
             columns: [
             columns: [
                 {
                 {
@@ -427,15 +325,7 @@ export default {
                 name: '',
                 name: '',
                 resource: ''
                 resource: ''
             },
             },
-            personRules: {
-                name: [
-                    {required: true, message: '人群包名称不能为空', trigger: 'blur'},
-                    {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
-                ],
-                resource: [
-                    {required: true, message: '请选择匹配类型', trigger: 'change'}
-                ]
-            },
+            personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
             tablePag: {
             tablePag: {
                 page: 1,
                 page: 1,
                 size: 10
                 size: 10
@@ -457,12 +347,12 @@ export default {
     },
     },
     methods: {
     methods: {
         onShowSizeChange(current, pageSize) {
         onShowSizeChange(current, pageSize) {
-            const params = this.form.getFieldsValue();
+            const paramsData = this.form.getFieldsValue();
             this.tablePag = {
             this.tablePag = {
                 page: current,
                 page: current,
                 size: pageSize
                 size: pageSize
             };
             };
-            this.handleGetTableList(params);
+            this.handleGetTableList(paramsData);
         },
         },
         handleCauseSizeChange(current, pageSize) {
         handleCauseSizeChange(current, pageSize) {
             this.causePag = {
             this.causePag = {
@@ -472,14 +362,14 @@ export default {
             this.handleCauseTableData();
             this.handleCauseTableData();
         },
         },
         handleGetTableList(data) {
         handleGetTableList(data) {
-            const params = {
+            const paramsData = {
                 orientationName: data.name,
                 orientationName: data.name,
                 accountName: this.acountId,
                 accountName: this.acountId,
                 status: data.status,
                 status: data.status,
                 pageNo: this.tablePag.page,
                 pageNo: this.tablePag.page,
                 pageSize: this.tablePag.size
                 pageSize: this.tablePag.size
             };
             };
-            getAction('/kuaishouCrowdPack/queryPageList', params).then(result => {
+            getAction('/kuaishouCrowdPack/queryPageList', paramsData).then(result => {
                 if (result.code === 200) {
                 if (result.code === 200) {
                     this.dataSource = result.result.list || [];
                     this.dataSource = result.result.list || [];
                     this.totalAll = result.result.total || 0;
                     this.totalAll = result.result.total || 0;
@@ -504,20 +394,20 @@ export default {
                 onCancel() {}
                 onCancel() {}
             });
             });
         },
         },
-        handleAcountRelaxTable(txt) {
-            const params = {
-                orientationId: this.acountRelaxDetail.orientationId,
+        handleAcountRelaxTable() {
+            const paramsData = {
+                signature: this.acountRelaxDetail.signature,
                 accountId: this.acountRelaxDetail.accountId,
                 accountId: this.acountRelaxDetail.accountId,
-                type: txt === 'dep' ? 1 : 2
+                type: this.relaxStatus === 'dep' ? 1 : 2
             };
             };
-            getAction('/kuaishouCrowdPack/queryRel', params).then(result => {
+            getAction('/kuaishouCrowdPack/queryRel', paramsData).then(result => {
                 if (result.code === 200) {
                 if (result.code === 200) {
                     console.log(result, 'result----relax');
                     console.log(result, 'result----relax');
-                    if (txt === 'dep') {
-                        this.depData = result.result;
+                    if (this.relaxStatus === 'dep') {
+                        this.depData = result.result.list;
                     }
                     }
-                    else if (txt === 'acount') {
-                        this.acountData = result.result;
+                    else if (this.relaxStatus === 'acount') {
+                        this.acountData = result.result.list;
                     }
                     }
                 }
                 }
             }).catch(error => {
             }).catch(error => {
@@ -532,7 +422,7 @@ export default {
                 this.relaxStatus = 'acount';
                 this.relaxStatus = 'acount';
             }
             }
             this.acountRelaxDetail = recd;
             this.acountRelaxDetail = recd;
-            this.handleAcountRelaxTable(txt);
+            this.handleAcountRelaxTable();
             this.relaxVisible = true;
             this.relaxVisible = true;
         },
         },
         handleRelaxCancel() {
         handleRelaxCancel() {
@@ -545,7 +435,7 @@ export default {
         },
         },
         handleCauseTableData() {
         handleCauseTableData() {
             const paramsData = {
             const paramsData = {
-                accountId: this.causeDetailData.accountId,
+                orientationId: this.causeDetailData.orientationId,
                 pageNo: this.causePag.page,
                 pageNo: this.causePag.page,
                 pageSize: this.causePag.size
                 pageSize: this.causePag.size
             };
             };
@@ -588,12 +478,12 @@ export default {
         },
         },
         beforeUpload(file) {
         beforeUpload(file) {
             const isZip = file.type.includes('zip') || file.type.includes('text');
             const isZip = file.type.includes('zip') || file.type.includes('text');
+            const fileOvesize = file.size > (1024 * 1024 * 1024);
             if (!isZip) {
             if (!isZip) {
                 this.fileList = [];
                 this.fileList = [];
                 this.$message.error('只能上传zip格式的文件或者txt文件');
                 this.$message.error('只能上传zip格式的文件或者txt文件');
                 return false;
                 return false;
             }
             }
-            const fileOvesize = file.size > (1024 * 1024 * 1024);
             if (fileOvesize) {
             if (fileOvesize) {
                 this.$message.error('文件大小不能超过1G');
                 this.$message.error('文件大小不能超过1G');
                 return;
                 return;
@@ -601,23 +491,24 @@ export default {
             this.cosUpload(file);
             this.cosUpload(file);
         },
         },
         cosUpload(file) {
         cosUpload(file) {
-            var that = this;
+            let that = this;
             let date = new Date();
             let date = new Date();
             let y = date.getFullYear();
             let y = date.getFullYear();
             let MM = date.getMonth() + 1;
             let MM = date.getMonth() + 1;
-            MM = MM < 10 ? '0' + MM : MM
+            MM = MM < 10 ? '0' + MM : MM;
             let d = date.getDate();
             let d = date.getDate();
-            d = d < 10 ? '0' + d : d
-            var timeElse = new Date().getTime();
-            var arr = file.name.split('.');
-            var str = '';
+            d = d < 10 ? '0' + d : d;
+            let timeElse = new Date().getTime();
+            let arr = file.name.split('.');
+            let str = '';
             for (let i = 0; i < arr.length; i++) {
             for (let i = 0; i < arr.length; i++) {
-                if (i == arr.length - 1) {
+                if (i === arr.length - 1) {
                 }
                 }
                 else {
                 else {
-                    if (i == arr.length - 2) {
+                    if (i === arr.length - 2) {
                         str += arr[i];
                         str += arr[i];
-                    } else {
+                    }
+                    else {
                         str += arr[i] + '.';
                         str += arr[i] + '.';
                     }
                     }
                 }
                 }
@@ -625,32 +516,29 @@ export default {
             cos.putObject(
             cos.putObject(
                 {
                 {
                     Bucket: 'media-1301855440',
                     Bucket: 'media-1301855440',
-                    /* 必须 */
                     Region: 'ap-chongqing',
                     Region: 'ap-chongqing',
-                    /* 存储桶所在地域,必须字段 */
+                    // 存储桶所在地域,必须字段
                     Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
                     Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
-                    /* 必须 */
                     StorageClass: 'STANDARD',
                     StorageClass: 'STANDARD',
                     Body: file // 上传文件对象
                     Body: file // 上传文件对象
                 },
                 },
                 function (err, data) {
                 function (err, data) {
                     if (err) {
                     if (err) {
                         that.$message.error('上传失败!!!' + err);
                         that.$message.error('上传失败!!!' + err);
-                        return
+                        return;
                     }
                     }
                     that.loadingElse = false;
                     that.loadingElse = false;
-                        that.fileList.push({
-                            uid: file.name,
-                            name: file.name,
-                            status: 'done',
-                            url: '//' + data.Location,
-                        });
+                    that.fileList.push({
+                        uid: file.name,
+                        name: file.name,
+                        status: 'done',
+                        url: '//' + data.Location
+                    });
                     if (that.fileList.length > 1) {
                     if (that.fileList.length > 1) {
                         that.fileList = that.fileList.slice(-1);
                         that.fileList = that.fileList.slice(-1);
                     }
                     }
-                    console.log(that.fileList, '8888888---最终的输出结果');
                 }
                 }
-            )
+            );
         },
         },
         handleQueryList(event) {
         handleQueryList(event) {
             event.preventDefault();
             event.preventDefault();
@@ -679,7 +567,6 @@ export default {
                     this.handleUploadRuleForm();
                     this.handleUploadRuleForm();
                 }
                 }
                 else {
                 else {
-                    console.log('error submit!!');
                     return false;
                     return false;
                 }
                 }
             });
             });
@@ -693,7 +580,6 @@ export default {
             };
             };
             postAction('/kuaishouCrowdPack/uploadCrowdPack', paramsData).then(result => {
             postAction('/kuaishouCrowdPack/uploadCrowdPack', paramsData).then(result => {
                 if (result.code === 200) {
                 if (result.code === 200) {
-                    console.log(result, 'resuylt---upload');
                     this.personVisible = false;
                     this.personVisible = false;
                     this.handleGetTableList({});
                     this.handleGetTableList({});
                 }
                 }

+ 2 - 2
vue.config.js

@@ -77,10 +77,10 @@ module.exports = {
         // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8806', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8806', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
+        // target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
-        //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+         target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目