Prechádzať zdrojové kódy

人群包管理接口联调

jiayufei 4 rokov pred
rodič
commit
6b143dddf7

+ 0 - 182
src/views/modules/crowd-control/components/tree-select.vue

@@ -1,182 +0,0 @@
-<template>
-    <div class="tree-select-class">
-        <div class="select-class-left">
-            <div class="class-left-header">
-                选择分享的账户名称
-            </div>
-            <div class="class-left-content">
-                <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
-                <template>
-                    <a-tree
-                        v-model="checkedKeys"
-                        checkable
-                        :expanded-keys="expandedKeys"
-                        :auto-expand-parent="autoExpandParent"
-                        :selected-keys="selectedKeys"
-                        :tree-data="treeData"
-                        @check="onCheck"
-                        @expand="onExpand"
-                    >
-                        <template slot="title" slot-scope="{ title }">
-                            <span v-if="title.indexOf(searchValue) > -1">
-                            {{ title.substr(0, title.indexOf(searchValue)) }}
-                            <span style="color: #f50">{{ searchValue }}</span>
-                            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
-                            </span>
-                            <span v-else>{{ title }}</span>
-                        </template>
-                    </a-tree>
-                </template>
-            </div>
-        </div>
-        <div class="select-class-right">
-            <div class="class-left-header">
-                已选 ({{ applyTypeOption.length ? applyTypeOption.length : 0}}/100)
-            </div>
-            <div v-if="applyTypeOption.length" class="class-left-content">
-                <p v-for="item in applyTypeOption" :key="item.key">
-                    {{ item.title }}
-                </p>
-            </div>
-            <div v-else class="no-data-class">暂无数据</div>
-        </div>
-    </div>
-</template>
-<script>
-const treeData = [
-  {
-    title: '0-0',
-    key: '0-0',
-    children: [
-      {
-        title: '0-0-0',
-        key: '0-0-0',
-        children: [
-          { title: '0-0-0-0', key: '0-0-0-0' },
-          { title: '0-0-0-1', key: '0-0-0-1' },
-          { title: '0-0-0-2', key: '0-0-0-2' },
-        ],
-      },
-      {
-        title: '0-0-1',
-        key: '0-0-1',
-        children: [
-          { title: '0-0-1-0', key: '0-0-1-0' },
-          { title: '0-0-1-1', key: '0-0-1-1' },
-          { title: '0-0-1-2', key: '0-0-1-2' },
-        ],
-      },
-      {
-        title: '0-0-2',
-        key: '0-0-2',
-      },
-    ],
-  },
-  {
-    title: '0-1',
-    key: '0-1',
-    children: [
-      { title: '0-1-0-0', key: '0-1-0-0' },
-      { title: '0-1-0-1', key: '0-1-0-1' },
-      { title: '0-1-0-2', key: '0-1-0-2' },
-    ],
-  },
-  {
-    title: '0-2',
-    key: '0-2',
-  },
-];
-export default {
-    name: 'tree-select',
-    data() {
-        return {
-            expandedKeys: ['0-0-0', '0-0-1'],
-            autoExpandParent: true,
-            checkedKeys: [],
-            selectedKeys: [],
-            treeData,
-            applyTypeOption: [],
-            selectRightData: new Set(),
-            dataList: [],
-            searchValue: ''
-        };
-    },
-    mounted() {
-        this.generateList(treeData);
-    },
-    methods: {
-        onChange(e) {
-            console.log(e, this.dataList, '------');
-            const value = e.target.value;
-            const expandedKeys = this.dataList
-                .map(item => {
-                    if (item.title.indexOf(value) > -1) {
-                        return this.getParentKey(item.key, treeData);
-                    }
-                    return null;
-                })
-                .filter((item, i, self) => item && self.indexOf(item) === i);
-            console.log(expandedKeys, 'expandedKeys');
-            Object.assign(this, {
-                expandedKeys,
-                searchValue: value,
-                autoExpandParent: true,
-            });
-        },
-        generateList(data) {
-            for (let i = 0; i < data.length; i++) {
-                const node = data[i];
-                const key = node.key;
-                this.dataList.push({ key, title: key });
-                if (node.children) {
-                    this.generateList(node.children);
-                }
-            }
-        },
-        getParentKey(key, tree) {
-            let parentKey;
-            for (let i = 0; i < tree.length; i++) {
-                const node = tree[i];
-                if (node.children) {
-                    if (node.children.some(item => item.key === key)) {
-                        parentKey = node.key;
-                    } else if (this.getParentKey(key, node.children)) {
-                        parentKey = this.getParentKey(key, node.children);
-                    }
-                }
-            }
-            return parentKey;
-        },
-        onExpand(expandedKeys) {
-            this.expandedKeys = expandedKeys;
-            this.autoExpandParent = false;
-        },
-        onCheck(checkedKeys) {
-            console.log('onCheck--11', checkedKeys);
-            this.checkedKeys = checkedKeys;
-            this.nodes(treeData, checkedKeys);
-            this.applyTypeOption = [...this.selectRightData];
-            this.$emit('applyType', this.applyTypeOption);
-        },
-        nodes(data, checkedKeys) {
-            data.forEach(item => {
-                if (item.children) {
-                    this.nodes(item.children, checkedKeys);
-                }
-                else {
-                    if (checkedKeys.indexOf(item.key) !== -1) {
-                        console.log(item, 'item');
-                        this.selectRightData.add(item);
-                    }
-                    else {
-                        this.selectRightData.delete(item);
-                    }
-                }
-            })
-        }
-    },
-};
-</script>
-<style lang="less" scoped>
-@import 'tree-select';
-</style>

+ 12 - 1
src/views/modules/crowd-control/components/tree-select.less

@@ -7,6 +7,10 @@
         background-color: #ccc;
         text-indent: 10px;
     }
+    .input-search {
+        width: 200px;
+        margin: 10px;
+    }
     .select-class-left {
         width: 60%;
         height: 400px;
@@ -15,6 +19,10 @@
             overflow-y: auto;
             height: 340px;
         }
+        .example {
+            text-align: center;
+            line-height: 200px;
+        }
     }
     .select-class-right {
         width: 35%;
@@ -22,10 +30,13 @@
         border: 1px solid #ccc;
         .class-left-content {
             padding: 0 10px;
-            p {
+            .left-content-p {
                 height: 25px;
                 line-height: 25px;
                 margin: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
         }
         .no-data-class {

+ 172 - 0
src/views/modules/crowd-control/components/tree-select/tree-select.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="tree-select-class">
+        <div class="select-class-left">
+            <div class="class-left-header">
+                选择分享的账户名称
+            </div>
+            <div class="class-left-content">
+                <a-input-search class="input-search" placeholder="Search" @change="onChange" />
+                <template>
+                    <a-tree
+                        v-model="checkedKeys"
+                        checkable
+                        :expanded-keys="expandedKeys"
+                        :auto-expand-parent="autoExpandParent"
+                        :selected-keys="selectedKeys"
+                        :tree-data="treeData"
+                        @check="onCheck"
+                        @expand="onExpand"
+                    />
+                </template>
+                <div class="example">
+                    <a-spin :spinning="spinning"/>
+                </div>
+            </div>
+        </div>
+        <div class="select-class-right">
+            <div class="class-left-header">
+                已选 ({{ applyTypeOption.length ? applyTypeOption.length : 0}}/100)
+                <a-popover placement="topRight">
+                    <template slot="content">
+                        <p>1、输入账户超出推送范围,请检查是否同主体账户</p>
+                        <p>2、有效账户将不会重复推送,请登录该账户查看使用</p>
+                    </template>
+                    <span><a-icon type="question-circle" /></span>
+                </a-popover>
+            </div>
+            <div v-if="applyTypeOption.length" class="class-left-content">
+                <p v-for="item in applyTypeOption" class="left-content-p" :key="item.key">
+                    {{ item.title }}
+                </p>
+            </div>
+            <div v-else class="no-data-class">暂无数据</div>
+        </div>
+    </div>
+</template>
+<script>
+import {mapGetters} from 'vuex';
+import {postAction} from '@/api/manage';
+
+export default {
+    name: 'tree-select',
+    data() {
+        return {
+            expandedKeys: ['0-0-0', '0-0-1'],
+            autoExpandParent: true,
+            checkedKeys: [],
+            selectedKeys: [],
+            treeData: [],
+            updateTreeData: [],
+            applyTypeOption: [],
+            selectRightData: new Set()
+        };
+    },
+    computed: {
+        spinning() {
+            return !this.treeData.length;
+        }
+    },
+    mounted() {
+        this.getAccountId();
+    },
+    methods: {
+        ...mapGetters(['userInfo']),
+        getAccountId() {
+            postAction('/ctop/projectMember/participateListByMediaId', {
+                userId: this.userInfo().id,
+                type: 'kuaishou',
+            }).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');
+            });
+        },
+        onChange(e) {
+            const value = e.target.value;
+            const cloneTreeData = JSON.parse(JSON.stringify(this.treeData));
+            console.log(cloneTreeData, this.treeData, '---------');
+            this.treeData = value !== '' ? this.getNewTreeData(cloneTreeData, value) : [...this.updateTreeData];
+        },
+        getNewTreeData(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            let newTreeData = new Array();
+            let node = null;
+            let children = null;
+            let text = '';
+            for (let i = 0; i < treeData.length; i++) { // 多个根节点开始遍历
+                node = treeData[i];
+                if (node.children) {
+                    children = node.children;
+                }
+                text = node.title;
+                if (text.indexOf(value) > -1) {
+                    newTreeData.push(node);
+                    continue;
+                } else {
+                    if (children) {
+                        let newNodes = this.getNewTreeData(node.children, value);
+                        if (newNodes.length > 0) {
+                            node.children = newNodes;
+                            newTreeData.push(node);
+                        }
+                    }
+                }
+
+            }
+            return newTreeData;
+        },
+        onExpand(expandedKeys) {
+            this.expandedKeys = expandedKeys;
+            this.autoExpandParent = false;
+        },
+        onCheck(checkedKeys) {
+            this.checkedKeys = checkedKeys;
+            this.nodes(this.treeData, checkedKeys);
+            this.applyTypeOption = [...this.selectRightData];
+            this.$emit('applyType', this.applyTypeOption);
+        },
+        nodes(data, checkedKeys) {
+            data.forEach(item => {
+                if (item.children) {
+                    this.nodes(item.children, checkedKeys);
+                }
+                else {
+                    if (checkedKeys.indexOf(item.key) !== -1) {
+                        console.log(item, 'item');
+                        this.selectRightData.add(item);
+                    }
+                    else {
+                        this.selectRightData.delete(item);
+                    }
+                }
+            })
+        }
+    },
+};
+</script>
+<style lang="less" scoped>
+    @import 'tree-select';
+</style>

+ 105 - 0
src/views/modules/crowd-control/crowd-control-service.js

@@ -0,0 +1,105 @@
+/**
+ * @file 人群包管理基础服务
+ * @author jiayufei(jiayufei@c-top.com.cn)
+ */
+
+class AppMarketService {
+    constructor() {}
+    // 人群包类型
+    setPopulationTypeTasks() {
+        return [
+            {
+                label: 1,
+                value: '上传人群'
+            }, {
+                label: 2,
+                value: '广告人群'
+            }, {
+                label: 3,
+                value: '主题专区'
+            }, {
+                label: 4,
+                value: '逻辑规则'
+            }, {
+                label: 5,
+                value: '人群扩展'
+            }, {
+                label: 6,
+                value: '平台制定'
+            }, {
+                label: 7,
+                value: '定制付费'
+            }, {
+                label: 8,
+                value: '网红粉丝类别'
+            }, {
+                label: 9,
+                value: '内容付费行为'
+            }, {
+                label: 10,
+                value: '移动应用安装'
+            }, {
+                label: 11,
+                value: '快手使用活跃度'
+            }, {
+                label: 12,
+                value: '行业分类'
+            }, {
+                label: 13,
+                value: '商业兴趣'
+            }, {
+                label: 14,
+                value: '固话标签'
+            }, {
+                label: 15,
+                value: '行业偏好'
+            }, {
+                label: 16,
+                value: '第三方标签'
+            }, {
+                label: 17,
+                value: '产品关键词'
+            }, {
+                label: 19,
+                value: '应用渗透率'
+            }, {
+                label: 22,
+                value: '指定网红'
+            }, {
+                label: 23,
+                value: '行业分类'
+            }
+        ]
+    }
+
+    // 匹配类型
+    setMateTypeTasks() {
+        return [
+            {
+                label: 1,
+                value: 'IMEI'
+            }, {
+                label: 2,
+                value: 'IDFA'
+            }, {
+                label: 3,
+                value: 'IMEI_MD5'
+            }, {
+                label: 4,
+                value: 'IDFA_MD5'
+            }, {
+                label: 5,
+                value: '手机号-MD5'
+            }, {
+                label: 7,
+                value: 'OAID'
+            }, {
+                label: 8,
+                value: 'OAID_MD5'
+            }
+        ]
+    }
+
+}
+
+export default new AppMarketService();

+ 14 - 6
src/views/modules/crowd-control/crowd-control.less

@@ -21,6 +21,17 @@
     .cause-text-class {
         cursor: pointer;
     }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+    .acount-search-class {
+        width: 200% !important;
+    }
+    .grid-form-type {
+        margin-left: 210px;
+    }
 }
 /deep/ .push-modal {
     width: 600px !important;
@@ -48,12 +59,9 @@
     }
     /deep/ .ant-form-item-control-wrapper {
         width: 80%;
-        // .ant-form-item-control {
-        //     width: 200px;
-        // }
-        // .upload-txt-rules {
-        //     width: 100%;
-        // }
+    }
+    .acount-search-class {
+        width: 100% !important;
     }
 }
 /deep/ .cause-modal {

+ 295 - 122
src/views/modules/crowd-control/crowd-control.vue

@@ -1,6 +1,3 @@
-<style lang="less" scoped>
-    @import "crowd-control";
-</style>
 <template>
     <div class="crowd-control-content">
         <div class="control-con-header">
@@ -23,15 +20,7 @@
                         class="grid-form-item" label="账户"
                         :colon="false"
                     >
-                        <a-select
-                            v-decorator="['acount']"
-                            placeholder="请选择"
-                            mode="multiple"
-                            :max-tag-count="1"
-                            :max-tag-text-length="3"
-                            allow-clear :options="acountTasks"
-                            show-arrow
-                        />
+                        <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
                     </a-form-item>
                     <a-form-item
                         class="grid-form-item grid-form-type" label="状态"
@@ -40,12 +29,12 @@
                         <a-select
                             v-decorator="['status']"
                             placeholder="请选择"
-                            mode="multiple"
-                            :max-tag-count="1"
-                            :max-tag-text-length="3"
-                            allow-clear :options="statusTasks"
-                            show-arrow
-                        />
+                            allow-clear
+                        >
+                            <a-select-option v-for="item in statusTasks" :key="item.label">
+                                {{ item.value }}
+                            </a-select-option>
+                        </a-select>
                     </a-form-item>
                     <a-form-item class="form-handle-btn">
                         <a-button type="default" class="resetClass" @click="handleResetForm">重置</a-button>
@@ -60,12 +49,9 @@
                 ref="table"
                 size="middle"
                 bordered
-                rowKey="id"
                 :columns="columns"
                 :dataSource="dataSource"
-                :pagination="ipagination"
-                :loading="loading"
-                @change="handleTableChange"
+                :pagination="false"
             >
                 <span slot="action" slot-scope="text, record">
                     <a @click="handleEdit(record)">推送</a>
@@ -73,7 +59,7 @@
                     <a @click="handleDelete(record)">删除</a>
                 </span>
                 <span slot="cause" slot-scope="text, record">
-                    <span class="cause-text-class" @click="handleCause">{{ text }}</span>
+                    <a class="cause-text-class" @click="handleCause">{{ text }}</a>
                 </span>
                 <span slot="depRelax" slot-scope="text, record">
                     <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
@@ -82,6 +68,16 @@
                     <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
                 </span>
             </a-table>
+            <a-pagination
+                class="pagin-table-class"
+                :total="totalAll"
+                :show-total="total => `共 ${totalAll} 条`"
+                size="small"
+                show-size-changer
+                show-quick-jumper
+                @change="onShowSizeChange"
+                @showSizeChange="onShowSizeChange"
+            />
         </div>
         <a-modal
             v-if="personVisible"
@@ -102,7 +98,7 @@
                 >
                     <a-form-model-item label="匹配类型" prop="resource">
                         <a-radio-group v-model="personForm.resource">
-                            <a-radio v-for="item in resourceOption" :key="item.id" :value="item.id">{{ item.value }}</a-radio>
+                            <a-radio v-for="item in mateTypeTasks" :key="item.label" :value="item.label">{{ item.value }}</a-radio>
                         </a-radio-group>
                     </a-form-model-item>
                     <a-form-model-item ref="name" label="人群包名称" prop="name">
@@ -111,15 +107,8 @@
                             placeholder="请输入人群包名称"
                         />
                     </a-form-model-item>
-                    <a-form-model-item label="选择账户" prop="region">
-                        <a-select v-model="personForm.region" placeholder="请选择广告账户">
-                            <a-select-option value="shanghai">
-                            Zone one
-                            </a-select-option>
-                            <a-select-option value="beijing">
-                            Zone two
-                            </a-select-option>
-                        </a-select>
+                    <a-form-model-item label="选择账户">
+                        <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
                     </a-form-model-item>
                     <a-form-model-item label="上传人群包">
                         <a-upload
@@ -127,7 +116,7 @@
                             :file-list="fileList"
                             :before-upload="beforeUpload"
                         >
-                            <a-button> <a-icon type="upload" />文件上传</a-button>
+                            <a-button><a-icon type="upload" />文件上传</a-button>
                         </a-upload>
                         <p class="upload-txt-rules">1、文件格式:支持上传*.txt(utf-8)文本;也支持将单个/多个*.txt文件经过Zip格式压缩上传</p>
                         <p class="upload-txt-rules">2、文件大小:单个文件大小不能超过1G</p>
@@ -141,14 +130,14 @@
             v-if="pushVisible"
             :visible="pushVisible"
             :confirm-loading="pushConfirmLoading"
-            dialogClass="push-modal"
+            dialog-class="push-modal"
             @ok="handlePushSure"
             @cancel="handlePushCancel"
         >
             <div>
                 <div class="acount-title">
                     <div class="acount-title-left">已选人群包</div>
-                    <div class="acount-title-right">推送平台</div>
+                    <div class="acount-title-right">{{ tableSelectList.orientationName }}</div>
                 </div>
                 <div class="acount-title push-plate">
                     <div class="acount-title-left">推送平台</div>
@@ -166,7 +155,7 @@
             v-if="causeVisible"
             :visible="causeVisible"
             :confirm-loading="causeConfirmLoading"
-            dialogClass="cause-modal"
+            dialog-class="cause-modal"
             @ok="handleCauseSure"
             @cancel="handleCauseCancel"
         >
@@ -183,28 +172,28 @@
             v-if="relaxVisible"
             :visible="relaxVisible"
             :confirm-loading="relaxConfirmLoading"
-            dialogClass="relax-modal"
+            dialog-class="relax-modal"
             @ok="handleRelaxSure"
             @cancel="handleRelaxCancel"
         >
             <div>
                 <div class="acount-title">
                     <div class="acount-title-left">人群包名称</div>
-                    <div class="acount-title-right">推送平台</div>
+                    <div class="acount-title-right">{{ acountRelaxDetail.orientationName }}</div>
                 </div>
                 <div class="acount-title push-plate">
                     <div class="acount-title-left">目标账户</div>
-                    <div class="acount-title-right">推送平台</div>
+                    <div class="acount-title-right">{{ acountRelaxDetail.accountName }}</div>
                 </div>
                 <template v-if="relaxStatus === 'dep'">
-                    <a-table :columns="depColumns" :data-source="causeData" bordered>
+                    <a-table :columns="depColumns" :data-source="depData" bordered>
                         <template>
                             {{ text }}
                         </template>
                     </a-table>
                 </template>
                 <template v-if="relaxStatus === 'acount'">
-                    <a-table :columns="acountColumns" :data-source="causeData" bordered>
+                    <a-table :columns="acountColumns" :data-source="acountData" bordered>
                         <template>
                             {{ text }}
                         </template>
@@ -215,27 +204,29 @@
     </div>
 </template>
 <script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin';
-import TreeSelect from './components/tree-select';
+import TreeSelect from './components/tree-select/tree-select';
+import {getAction, postAction} from '@/api/manage';
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
+import AppMarketService from './crowd-control-service';
 
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
 export default {
     name: 'crowd-control',
-    mixins: [JeecgListMixin],
     components: {
-        TreeSelect
+        TreeSelect,
+        AcountSearch
     },
     data() {
+        let that = this;
         return {
-            resourceOption: [
-                {
-                    id: 1,
-                    value: '北京'
-                },
-                {
-                    id: 2,
-                    value: '上海'
-                }
-            ],
+            acountId: undefined, // 搜索的账户ID
+            uploadAcountIds: '',
+            totalAll: 10,
+            finallyRightTree: [],
             fileList: [],
             relaxVisible: false,
             relaxConfirmLoading: false,
@@ -243,30 +234,79 @@ export default {
             pushConfirmLoading: false,
             causeVisible: false,
             causeConfirmLoading: false,
-            labelCol: { span: 4 },
-            wrapperCol: { span: 14 },
+            labelCol: {span: 4},
+            wrapperCol: {span: 14},
             personVisible: false,
             confirmLoading: false,
-            statusTasks: [],
-            acountTasks: [],
-            url: {
-                list: "/sys/role/list",
-                delete: "/sys/role/delete",
-                deleteBatch: "/sys/role/deleteBatch",
-                exportXlsUrl: "/sys/role/exportXls",
-                importExcelUrl: "sys/role/importExcel",
-            },
+            mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
+            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'
+                }
+            ],
             relaxStatus: '',
-            causeData: [
+            causeData: [ // 原因的table列表数据
                 {
                     name: '1111',
                     age: '222',
                     address: '33333'
                 }
             ],
-            depData: [], // table 相关项目点击数据
-            countData: [], // table相关账户点击数据
-            acountColumns: [
+            depData: [ // 相关项目的table列表数据
+                {
+                    name: '1111',
+                    age: '222',
+                    address: '33333'
+                }
+            ],
+            acountData: [ // 相关账户的table列表数据
+                {
+                    name: '1111',
+                    age: '222',
+                    address: '33333'
+                }
+            ],
+            acountColumns: [ // 相关账户的table列表
                 {
                     title: '项目名称',
                     dataIndex: 'name',
@@ -283,7 +323,7 @@ export default {
                     width: '40%'
                 }
             ],
-            depColumns: [
+            depColumns: [ // 相关项目的table列表
                 {
                     title: '项目名称',
                     dataIndex: 'name',
@@ -300,7 +340,7 @@ export default {
                     width: '40%'
                 }
             ],
-            causeColumns: [
+            causeColumns: [ // 原因的table列表
                 {
                     title: '项目名称',
                     dataIndex: 'name',
@@ -317,88 +357,130 @@ export default {
                     width: '40%'
                 }
             ],
+            dataSource: [],
             columns: [
                 {
                     title: '人群包名称',
-                    align:"center",
-                    dataIndex: 'roleName'
+                    align: 'center',
+                    dataIndex: 'orientationName'
                 },
                 {
                     title: '人群包类型',
-                    align:"center",
-                    dataIndex: 'roleCode'
+                    align: 'center',
+                    dataIndex: 'populationType',
+                    customRender(t) {
+                        return that.populationTypeTasks.find(item => item.label === Number(t)).value || '-';
+                    }
                 },
                 {
                     title: '匹配类型',
-                    align:"center",
-                    dataIndex: 'description'
+                    align: 'center',
+                    dataIndex: 'type',
+                    customRender(t) {
+                        return that.mateTypeTasks.find(item => item.label === t).value || '-';
+                    }
                 },
                 {
                     title: '上传时间',
-                    dataIndex: 'createTime',
-                    align:"center"
+                    dataIndex: 'statDate',
+                    align: 'center'
                 },
                 {
                     title: '覆盖数量',
-                    dataIndex: 'updateTime',
-                    align:"center"
+                    dataIndex: 'coverNum',
+                    align: 'center'
                 },
                 {
                     title: '状态',
-                    dataIndex: 'updateTime1',
-                    align:"center"
+                    dataIndex: 'status',
+                    align: 'center',
+                    customRender(t) {
+                        return that.statusTasks.find(item => item.label === t).value || '-';
+                    }
                 },
                 {
                     title: '原因',
-                    dataIndex: 'roleName1',
+                    dataIndex: 'statusStr',
                     align: 'center',
-                    scopedSlots: { customRender: 'cause' }
+                    scopedSlots: {customRender: 'cause'}
                 },
                 {
                     title: '目标账户',
-                    dataIndex: 'updateTime2',
+                    dataIndex: 'accountName',
                     align: 'center'
                 },
                 {
                     title: '相关项目',
-                    dataIndex: 'roleName',
+                    dataIndex: 'projectCount',
                     align: 'center',
-                    scopedSlots: { customRender: 'depRelax' }
+                    scopedSlots: {customRender: 'depRelax'}
                 },
                 {
                     title: '相关账户',
-                    dataIndex: 'roleName',
+                    dataIndex: 'accountCount',
                     align: 'center',
-                    scopedSlots: { customRender: 'acountRelax' }
+                    scopedSlots: {customRender: 'acountRelax'}
                 },
                 {
                     title: '操作',
                     dataIndex: 'action',
                     align: 'center',
-                    scopedSlots: { customRender: 'action' }
+                    scopedSlots: {customRender: 'action'}
                 }
             ],
             personForm: {
                 name: '',
-                region: undefined,
                 resource: ''
             },
             personRules: {
                 name: [
-                    { required: true, message: 'Please input Activity name', trigger: 'blur' },
-                    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+                    {required: true, message: '人群包名称不能为空', trigger: 'blur'},
+                    {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
                 ],
-                region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                 resource: [
-                    { required: true, message: 'Please select activity resource', trigger: 'change' },
+                    {required: true, message: '请选择匹配类型', trigger: 'change'}
                 ]
-            }
-        }
+            },
+            tablePag: {
+                page: 1,
+                size: 10
+            },
+            tableSelectList: {},
+            acountRelaxDetail: {}
+        };
     },
     created() {
         this.form = this.$form.createForm(this);
     },
+    mounted() {
+        this.handleGetTableList({});
+    },
     methods: {
+        onShowSizeChange(current, pageSize) {
+            this.tablePag = {
+                page: current,
+                size: pageSize
+            };
+            const params = this.form.getFieldsValue();
+            this.handleGetTableList(params);
+        },
+        handleGetTableList(data) {
+            const params = {
+                orientationName: data.name,
+                accountName: this.acountId,
+                status: data.status,
+                pageNo: this.tablePag.page,
+                pageSize: this.tablePag.size
+            };
+            getAction('/kuaishouCrowdPack/queryPageList', params).then(result => {
+                if (result.code === 200) {
+                    this.dataSource = result.result.list || [];
+                    this.totalAll = result.result.total || 0;
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
         handleDelete(data) {
             this.$confirm({
                 title: '删除提示',
@@ -408,7 +490,7 @@ export default {
                         setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                     }).catch(() => console.log('Oops errors!'));
                 },
-                onCancel() {},
+                onCancel() {}
             });
         },
         handleAcountRelax(txt, recd) {
@@ -418,82 +500,173 @@ export default {
             else if (txt === 'acount') {
                 this.relaxStatus = 'acount';
             }
+            this.acountRelaxDetail = recd;
             this.relaxVisible = true;
         },
         handleRelaxCancel() {
-            console.log('相关项目关闭弹窗');
             this.relaxVisible = false;
         },
         handleRelaxSure() {
             console.log('相关项目确认弹窗');
         },
         handleCause() {
-            console.log('错误原因的弹窗');
             this.causeVisible = true;
         },
         handleApplyType(list) {
-            console.log(list, '最后的tree-select的右侧数据');
+            this.finallyRightTree = list;
         },
         handleEdit(val) {
-            console.log(val, 'val');
+            this.tableSelectList = val;
             this.pushVisible = true;
         },
         handleCauseSure() {
             console.log('错误原因确认按钮');
         },
         handleCauseCancel() {
-            console.log('错误原因取消按钮');
             this.causeVisible = false;
         },
         handlePushSure() {
-            console.log('推送确认按钮');
+            const paramsData = {
+                accountIds: this.finallyRightTree.map(item => item.key),
+                orientationId: this.tableSelectList.orientationId,
+                accountId: this.tableSelectList.accountId
+            };
+            postAction('/kuaishouCrowdPack/accountPush', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.pushVisible = false;
+                    this.handleGetTableList({});
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
         },
         handlePushCancel() {
-            console.log('推送取消按钮');
             this.pushVisible = false;
         },
         beforeUpload(file) {
-            this.fileList = [...this.fileList, file];
-            this.fileList = this.fileList.slice(-1);
-            console.log(this.fileList, '8888888');
             const isZip = file.type.includes('zip') || file.type.includes('text');
             if (!isZip) {
                 this.fileList = [];
-                this.$message.error('只能上传zip格式的文件或者txt文件 ');
+                this.$message.error('只能上传zip格式的文件或者txt文件');
+                return false;
+            }
+            const fileOvesize = file.size > (1024 * 1024);
+            if (fileOvesize) {
+                this.$message.error('文件大小不能超过1G');
+                return;
+            }
+            else {
+                this.cosUpload(file);
             }
-            return false;
+        },
+        cosUpload(file) {
+            var that = this;
+            let date = new Date();
+            let y = date.getFullYear();
+            let MM = date.getMonth() + 1;
+            MM = MM < 10 ? '0' + MM : MM
+            let d = date.getDate();
+            d = d < 10 ? '0' + d : d
+            var timeElse = new Date().getTime();
+            var arr = file.name.split('.');
+            var str = '';
+            for (let i = 0; i < arr.length; i++) {
+                if (i == arr.length - 1) {
+                }
+                else {
+                    if (i == arr.length - 2) {
+                        str += arr[i];
+                    } else {
+                        str += arr[i] + '.';
+                    }
+                }
+            }
+            cos.putObject(
+                {
+                    Bucket: 'media-1301855440',
+                    /* 必须 */
+                    Region: 'ap-chongqing',
+                    /* 存储桶所在地域,必须字段 */
+                    Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
+                    /* 必须 */
+                    StorageClass: 'STANDARD',
+                    Body: file // 上传文件对象
+                },
+                function (err, data) {
+                    if (err) {
+                        that.$message.error('上传失败!!!' + err);
+                        return
+                    }
+                    that.loadingElse = false;
+                        that.fileList.push({
+                            uid: file.name,
+                            name: file.name,
+                            status: 'done',
+                            url: '//' + data.Location,
+                        });
+                    if (that.fileList.length > 1) {
+                        that.fileList = that.fileList.slice(-1);
+                    }
+                    console.log(that.fileList, '8888888---最终的输出结果');
+                }
+            )
         },
         handleQueryList(event) {
             event.preventDefault();
             const paramsData = this.form.getFieldsValue();
-            console.log(paramsData, 'paramsData');
+            this.handleGetTableList(paramsData);
         },
         handleResetForm() {
             this.form.resetFields();
+            this.acountId = undefined;
+            this.handleGetTableList({});
         },
         handleUploadPerson() {
-            console.log('上传人群包');
             this.personVisible = true;
         },
-        handleCancel() {
-            this.personVisible = false;
-        },
         handleOk() {
             this.$refs.ruleForm.validate(valid => {
-                console.log(4444);
                 if (valid) {
-                    alert('submit!');
-                } else {
+                    if (!this.uploadAcountIds) {
+                        this.$message.error('请选择账户');
+                        return;
+                    }
+                    if (!this.fileList.length) {
+                        this.$message.error('请上传文件');
+                        return;
+                    }
+                    this.handleUploadRuleForm();
+                }
+                else {
                     console.log('error submit!!');
                     return false;
                 }
             });
         },
+        handleUploadRuleForm() {
+            const paramsData = {
+                type: this.personForm.resource,
+                orientationName: this.personForm.name,
+                accountId: this.uploadAcountIds,
+                url: this.fileList[0].url
+            };
+            postAction('/kuaishouCrowdPack/uploadCrowdPack', paramsData).then(result => {
+                if (result.code === 200) {
+                    console.log(result, 'resuylt---upload');
+                    this.personVisible = false;
+                    this.handleGetTableList({});
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
         handleCancel() {
-            console.log('弹窗关闭');
             this.personVisible = false;
             this.$refs.ruleForm.resetFields();
         }
     }
 };
 </script>
+<style lang="less" scoped>
+    @import "crowd-control";
+</style>