Parcourir la source

合并快手代码

朱鑫波 il y a 4 ans
Parent
commit
15233a7f3e
26 fichiers modifiés avec 7344 ajouts et 188 suppressions
  1. 61 0
      src/filters.js
  2. 2 2
      src/views/modules/Statistics/components/Treeselect.vue
  3. 67 19
      src/views/modules/Statistics/components/selectPagination.vue
  4. 677 0
      src/views/modules/autoLaunch/application/application.vue
  5. 65 0
      src/views/modules/autoLaunch/application/components/tree-select.less
  6. 272 0
      src/views/modules/autoLaunch/application/components/tree-select.vue
  7. 205 0
      src/views/modules/autoLaunch/application/directional-service.js
  8. 110 0
      src/views/modules/autoLaunch/application/directional.less
  9. 429 0
      src/views/modules/autoLaunch/directional/components/selectRegion.vue
  10. 1414 0
      src/views/modules/autoLaunch/directional/components/targetedPopulation.vue
  11. 291 0
      src/views/modules/autoLaunch/directional/components/templateModal.vue
  12. 71 0
      src/views/modules/autoLaunch/directional/components/tree-select.less
  13. 302 0
      src/views/modules/autoLaunch/directional/components/tree-select.vue
  14. 213 0
      src/views/modules/autoLaunch/directional/directional-service.js
  15. 113 0
      src/views/modules/autoLaunch/directional/directional.less
  16. 1036 0
      src/views/modules/autoLaunch/directional/directional.vue
  17. 58 0
      src/views/modules/autoLaunch/material-pool/material.vue
  18. 65 0
      src/views/modules/autoLaunch/url/components/tree-select.less
  19. 272 0
      src/views/modules/autoLaunch/url/components/tree-select.vue
  20. 213 0
      src/views/modules/autoLaunch/url/url-service.js
  21. 113 0
      src/views/modules/autoLaunch/url/url.less
  22. 984 0
      src/views/modules/autoLaunch/url/url.vue
  23. 47 28
      src/views/modules/crowd-control/crowd-control-service.js
  24. 5 2
      src/views/modules/crowd-control/crowd-control.less
  25. 258 136
      src/views/modules/crowd-control/crowd-control.vue
  26. 1 1
      vue.config.js

+ 61 - 0
src/filters.js

@@ -360,6 +360,67 @@ const filters = {
             4: 'iOS网页游戏'
         }
         return data[str]
+    },
+    // 人群包定向
+    customCrowdHandler(val){
+        let str=''
+        switch (val) {
+            case 1:
+                str='上传人群'
+                break;
+            case 2:
+                str='广告人群'
+                break;
+            case 3:
+                str='主题专区'
+                break;
+            case 4:
+                str='逻辑规则'
+                break;
+            case 5:
+                str='人群扩展'
+                break;
+            case 6:
+                str='平台定制'
+                break;
+            case 7:
+                str='定制付费'
+                break;
+            case 8:
+                str='网红粉丝类别'
+                break;
+            case 9:
+                str='内容付费行为'
+                break;
+            case 10:
+                str='移动应用安装'
+                break;
+            case 11:
+                str='快手使用活跃度'
+                break;
+            case 12:
+                str='行业分类'
+                break;
+            case 13:
+                str='商业兴趣'
+                break;
+            case 14:
+                str='固化标签'
+                break;
+            case 15:
+                str='行业偏好'
+                break;
+            case 16:
+                str='第三方标签'
+                break;
+            case 17:
+                str='产品关键词'
+                break;
+        
+            default:
+                break;
+        }
+        return str
     }
 
 }

+ 2 - 2
src/views/modules/Statistics/components/Treeselect.vue

@@ -201,9 +201,9 @@ export default {
                       return {
                         id: i.accountId,
                         label:
-                          (i.userName && i.userName.length == 2
+                          (i.userName&&i.userName.length == 2
                             ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
-                            : i.userName && i.userName.length == 3
+                            : i.userName&&i.userName.length == 3
                             ? i.userName + '\xa0\xa0\xa0\xa0'
                             : i.userName) +
                           '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +

+ 67 - 19
src/views/modules/Statistics/components/selectPagination.vue

@@ -20,37 +20,68 @@
   text-align: center;
 }
 </style>
+<style lang="scss" scoped>
+.require-check {
+  /deep/ .ant-form-item-label {
+    label::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #f5222d;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
+  }
+}
+</style>
 <template>
   <a-form-item
     label="项目名称"
     :label-col="labelCol"
     :wrapper-col="wrapperCol"
     v-clickoutside="handleClose"
-    style="width:100%"
+    style="width: 100%"
     class="select-table"
+    :class="{'require-check':requireCheck} "
   >
-    <a-input placeholder="请选择项目" @focus="topMiddle = true" v-model="keyValue" @change="getData" />
+    <a-input
+      placeholder="请选择项目名称"
+      @focus="topMiddle = true"
+      v-model="keyValue"
+      @change="getData"
+      :disabled="disabled"
+    />
     <div
       v-show="topMiddle"
       v-infinite-scroll="handleInfiniteOnLoad"
-      style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:relative;z-index:1000"
+      style="
+        background: white;
+        padding: 10px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        position: absolute;
+        z-index: 1000;
+        width: 100%;
+      "
       class="demo-infinite-container"
       :infinite-scroll-disabled="busy"
       :infinite-scroll-distance="80"
     >
       <a-list :data-source="data">
         <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
-          <a-list-item-meta :description="'广告主名称:'+item.advertiserName">
+          <a-list-item-meta :description="'广告主名称:' + item.advertiserName">
             <a slot="title">项目名称:{{ item.projectName }}</a>
           </a-list-item-meta>
           <div>
-            {{item.mediaId == '1'
-            ? '头条'
-            : item.mediaId == '2'
-            ? '快手'
-            : item.mediaId == '3'
-            ? '头条内广'
-            : '快手内广'}}
+            {{
+              item.mediaId == '1'
+                ? '头条'
+                : item.mediaId == '2'
+                ? '快手'
+                : item.mediaId == '3'
+                ? '头条内广'
+                : '快手内广'
+            }}
           </div>
         </a-list-item>
         <div v-if="loading && !busy" class="demo-loading-container">
@@ -98,7 +129,7 @@ export default {
   directives: { clickoutside, infiniteScroll },
   props: {
     projectId: {
-      type: String,
+      type: [String, Number],
       default() {
         return ''
       },
@@ -108,6 +139,27 @@ export default {
       default() {
         return ''
       },
+    },
+    labelCol: {
+      type: Object,
+      default() {
+        return {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        }
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    requireCheck: {
+      type: Boolean,
+      default() {
+        return false
+      },
     }
   },
 
@@ -135,10 +187,6 @@ export default {
       },
       loading: false,
       busy: false,
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 5 },
-      },
       wrapperCol: {
         xs: { span: 24 },
         sm: { span: 12 },
@@ -198,13 +246,13 @@ export default {
       })
     },
     getData() {
-      if(this.keyValue == ''){
-        this.$emit('update:projectId', "")
+      if (this.keyValue == '') {
+        this.$emit('update:projectId', '')
       }
       this.ipagination.current = 1
       getAction('/ctop/projectMember/participateListV2', {
         userId: this.userInfo().id,
-        pageNo:  this.ipagination.current,
+        pageNo: this.ipagination.current,
         projectName: this.keyValue,
       }).then((res) => {
         if (res.code == 0) {

+ 677 - 0
src/views/modules/autoLaunch/application/application.vue

@@ -0,0 +1,677 @@
+<template>
+    <div class="directional-content">
+        <div class="control-con-header">
+            <a-form
+                class="grid-form" layout="inline"
+                :form="form"
+                hide-required-mark
+                @submit="handleQueryList"
+            >
+                <a-row class="grid-form-options">
+                    <a-form-item
+                        class="grid-form-item"
+                        label="名称"
+                        :colon="false"
+                    >
+                        <a-input
+                            v-decorator="['name']" type="text"
+                            placeholder="请输入"
+                        />
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item grid-form-item-account" label="账户"
+                        :colon="false"
+                    >
+                        <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="平台"
+                        :colon="false"
+                    >
+                        <a-select
+                            v-decorator="['status']"
+                            placeholder="请选择"
+                            allow-clear
+                        >
+                            <a-select-option v-for="item in platform" :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="reset-class" @click="handleResetForm">重置</a-button>
+                        <a-button type="primary" html-type="submit">查询</a-button>
+                    </a-form-item>
+                </a-row>
+            </a-form>
+            <a-button type="primary" class="upload-person" @click="handleUploadPerson">
+                新建定向包
+            </a-button>
+        </div>
+        <div class="control-con-table">
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                :columns="columns"
+                :dataSource="dataSource"
+                :pagination="ipagination"
+                :loading="dataLoading"
+            >
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleEdit(record)">推送</a>
+                    <a-divider type="vertical" />
+                    <a @click="handleEdit(record)">编辑</a>
+                    <a-divider type="vertical" />
+                    <a @click="handleDelete(record)">删除</a>
+                </span>
+
+                <span slot="accountCount" slot-scope="text, record">
+                    <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
+                </span>
+                <span slot="actionMore" slot-scope="text, record">
+                    <a @click="handleDelete(record)">推送历史</a>
+                </span>
+                
+                <span slot="cause" slot-scope="text, record">
+                    <a class="cause-text-class" @click="handleCause(record)">失败原因</a>
+                </span>
+                <span slot="depRelax" slot-scope="text, record">
+                    <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
+                </span>
+                <span slot="acountRelax" slot-scope="text, record">
+                    <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
+                </span>
+            </a-table>
+        </div>
+        <a-modal
+            v-if="personVisible"
+            title="上传人群包"
+            class="person-modal"
+            :visible="personVisible"
+            :confirm-loading="confirmLoading"
+            @ok="handleOk"
+            @cancel="handleCancel"
+        >
+            <div>
+                <a-form-model
+                    ref="ruleForm"
+                    :model="personForm"
+                    :rules="personRules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item label="匹配类型" prop="resource">
+                        <a-radio-group v-model="personForm.resource" :disabled="personResourceDisabled">
+                            <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">
+                        <a-input
+                            v-model="personForm.name"
+                            placeholder="请输入人群包名称"
+                            :disabled="personNameDisabled"
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="选择账户" class="grid-form-item-account">
+                        <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
+                    </a-form-model-item>
+                    <a-form-model-item label="上传人群包">
+                        <a-upload
+                            name="file"
+                            :file-list="fileList"
+                            :before-upload="beforeUpload"
+                            @change="handleChange"
+                        >
+                            <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>
+                        <p class="upload-txt-rules">3、内容编排:每行一条记录</p>
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+        <a-modal
+            title="推送账户"
+            v-if="pushVisible"
+            :visible="pushVisible"
+            :confirm-loading="pushConfirmLoading"
+            dialog-class="push-modal"
+            @ok="handlePushSure"
+            @cancel="handlePushCancel"
+        >
+            <div>
+                <div class="acount-title">
+                    <div class="acount-title-left">已选人群包</div>
+                    <div class="acount-title-right">{{ tableSelectList.orientationName }} (ID: {{ tableSelectList.id }})</div>
+                </div>
+                <div class="acount-title push-plate">
+                    <div class="acount-title-left">推送平台</div>
+                    <div class="acount-title-right">
+                        <a-radio-group default-value="a" button-style="solid">
+                            <a-radio-button value="a">效果</a-radio-button>
+                            <a-radio-button value="b" disabled>品牌</a-radio-button>
+                        </a-radio-group>
+                    </div>
+                </div>
+                <tree-select @applyType="handleApplyType"></tree-select>
+            </div>
+        </a-modal>
+        <a-modal
+            title="失败原因"
+            v-if="causeVisible"
+            :visible="causeVisible"
+            :confirm-loading="causeConfirmLoading"
+            :footer="null"
+            dialog-class="cause-modal"
+            @cancel="handleCauseCancel"
+        >
+            <div>
+                <div class="cause-modal-table-class">
+                    <a-table :columns="causeColumns" :data-source="causeData" bordered :pagination="false"></a-table>
+                </div>
+                <a-pagination
+                    class="pagin-table-class"
+                    :total="totalAllCause"
+                    size="small"
+                    @change="handleCauseSizeChange"
+                />
+            </div>
+        </a-modal>   
+        <a-modal
+            :title="relaxStatus === 'dep' ? '相关项目' : '相关账户'"
+            v-if="relaxVisible"
+            :visible="relaxVisible"
+            :confirm-loading="relaxConfirmLoading"
+            :footer="null"
+            dialog-class="relax-modal"
+            @cancel="handleRelaxCancel"
+            rowKey="index"
+        >
+            <div>
+                <div class="acount-title">
+                    <div class="acount-title-left">人群包名称</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">{{ acountRelaxDetail.accountName }}</div>
+                </div>
+                <template v-if="relaxStatus === 'dep'">
+                    <a-table :columns="depColumns" :data-source="depData" bordered>
+                    </a-table>
+                </template>
+                <template v-if="relaxStatus === 'acount'">
+                    <a-table :columns="acountColumns" :data-source="acountData" bordered></a-table>
+                </template>
+            </div>
+        </a-modal>
+    </div>
+</template>
+<script>
+import TreeSelect from './components/tree-select';
+import {getAction, postAction} from '@/api/manage';
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
+import AppMarketService from './directional-service';
+import BMF from 'browser-md5-file';
+
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
+export default {
+    name: 'directional',
+    components: {
+        TreeSelect,
+        AcountSearch
+    },
+    data() {
+        let that = this;
+        return {
+            dataLoading: false,
+            personResourceDisabled: false,
+            personNameDisabled: false,
+            totalAllCause: 0,
+            acountId: undefined, // 搜索的账户ID
+            uploadAcountIds: '',
+            totalAll: 10,
+            finallyRightTree: [],
+            fileList: [],
+            relaxVisible: false,
+            relaxConfirmLoading: false,
+            pushVisible: false,
+            pushConfirmLoading: false,
+            causeVisible: false,
+            causeConfirmLoading: false,
+            labelCol: {span: 4},
+            wrapperCol: {span: 14},
+            personVisible: false,
+            confirmLoading: false,
+            mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
+            populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
+            platform: AppMarketService.setPlatform(), // 状态枚举
+            relaxStatus: '',
+            causeData: [], // 原因的table列表数据,
+            depData: [], // 相关项目的table列表数据,
+            acountData: [], // 相关账户的table列表数据,
+            acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
+            depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
+            causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
+            dataSource: [],
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger:false,
+                pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current;
+                    this.ipagination.pageSize= pageSize;
+                }
+            },
+            columns: [
+                {
+                    title: '定向包名称',
+                    align: 'center',
+                    width: 200,
+                    ellipsis: true,
+                    dataIndex: 'templateName'
+                },
+                {
+                    title: '所属项目',
+                    align: 'center',
+                    dataIndex: 'populationType',
+                    customRender(t) {
+                        return t ? that.populationTypeTasks.find(item => item.label === Number(t)).value : '-';
+                    }
+                },
+                {
+                    title: '系统平台',
+                    align: 'center',
+                    dataIndex: 'platformOs'
+                },
+                {
+                    title: '修改时间',
+                    dataIndex: 'updateTime',
+                    align: 'center'
+                },
+                {
+                    title: '相关账户',
+                    dataIndex: 'accountCount',
+                    scopedSlots: {customRender: 'accountCount'},
+                    align: 'center'
+                },
+                {
+                    title: '相关组',
+                    dataIndex: 'unitCount',
+                    align: 'center'
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: 'center',
+                    scopedSlots: {customRender: 'action'}
+                },
+                {
+                    title: '更多',
+                    dataIndex: 'actionMore',
+                    align: 'center',
+                    scopedSlots: {customRender: 'actionMore'},
+                    ellipsis: true
+                },
+            ],
+            personForm: {
+                name: '',
+                resource: ''
+            },
+            personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
+            tablePag: {
+                page: 1,
+                size: 10
+            },
+            // table 原因的分页
+            causePag: {
+                page: 1,
+                size: 10
+            },
+            tableSelectList: {},
+            acountRelaxDetail: {},
+            causeDetailData: {}
+        };
+    },
+    created() {
+        this.form = this.$form.createForm(this);
+    },
+    mounted() {
+        this.handleGetTableList({});
+    },
+    methods: {
+        onShowSizeChange(current, pageSize) {
+            const paramsData = this.form.getFieldsValue();
+            this.tablePag = {
+                page: current,
+                size: pageSize
+            };
+            this.handleGetTableList(paramsData);
+        },
+        handleCauseSizeChange(current, pageSize) {
+            this.causePag = {
+                page: current,
+                size: pageSize
+            };
+            this.handleCauseTableData();
+        },
+        handleGetTableList(data) {
+            const paramsData = {
+                templateName: data.name,
+                projectId: this.acountId,
+                platformOs: data.status,
+                pageNo: this.tablePag.page,
+                pageSize: this.tablePag.size
+            };
+            this.dataSource = []
+            this.dataLoading = true;
+            getAction('/kuaishouDirectionalPackage/queryList', paramsData).then(result => {
+                this.dataLoading = false;
+                if (result.code === 200) {
+                    this.dataSource = result.result.list || [];
+                    this.totalAll = result.result.total || 0;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                this.dataLoading = false;
+                console.log(error, 'eeee');
+            });
+        },
+        handleDelete(data) {
+            let that = this
+            this.$confirm({
+                title: '删除提示',
+                content: '确定要删除这一条吗?',
+                onOk() {
+                    getAction('/kuaishouCrowdPack/delete', {id: data.id}).then(result => {
+                        if (result.code === 200) {
+                            that.handleGetTableList({});
+                            that.$message.success('删除成功');
+                        }
+                        else {
+                            that.$message.error(result.message);
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                    });
+                }
+            });
+        },
+        handleAcountRelaxTable() {
+            const paramsData = {
+                signature: this.acountRelaxDetail.signature,
+                accountId: this.acountRelaxDetail.accountId,
+                type: this.relaxStatus === 'dep' ? 1 : 2
+            };
+            getAction('/kuaishouCrowdPack/queryRel', paramsData).then(result => {
+                if (result.code === 200) {
+                    if (this.relaxStatus === 'dep') {
+                        this.depData = result.result.list;
+                    }
+                    else if (this.relaxStatus === 'acount') {
+                        this.acountData = result.result.list;
+                    }
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleAcountRelax(txt, recd) {
+            // if (txt === 'dep') {
+            //     this.relaxStatus = 'dep';
+            // }
+            // else if (txt === 'acount') {
+            //     this.relaxStatus = 'acount';
+            // }
+            // this.acountRelaxDetail = recd;
+            // this.handleAcountRelaxTable();
+            this.relaxVisible = true;
+        },
+        handleRelaxCancel() {
+            this.relaxVisible = false;
+        },
+        handleCause(list) {
+            this.causeVisible = true;
+            this.causeDetailData = list;
+            this.handleCauseTableData();
+        },
+        handleCauseTableData() {
+            const paramsData = {
+                signature: this.causeDetailData.signature,
+                pageNo: this.causePag.page,
+                pageSize: this.causePag.size
+            };
+            getAction('/kuaishouCrowdPack/queryFailReason', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.causeData = result.result.list || [];
+                    this.totalAllCause = result.result.total || 0;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleApplyType(list) {
+            this.finallyRightTree = list;
+        },
+        handleEdit(val) {
+            this.tableSelectList = val;
+            this.pushVisible = true;
+        },
+        handleCauseCancel() {
+            this.causeVisible = false;
+        },
+        handlePushSure() {
+            const paramsData = {
+                accountIds: this.finallyRightTree.map(item => item.key),
+                signature: this.tableSelectList.signature,
+                accountId: this.tableSelectList.accountId
+            };
+            postAction('/kuaishouCrowdPack/accountPush', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.pushVisible = false;
+                    this.handleGetTableList({});
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeeeeee');
+            });
+        },
+        handlePushCancel() {
+            this.pushVisible = false;
+        },
+        beforeUpload(file) {
+            this.cosUpload(file);
+        },
+        handleMd5(file) {
+            let bmf = new BMF();
+            let that = this;
+            return new Promise(function (resolve, reject) {
+                bmf.md5(file, (err, md5) => {
+                    getAction('/kuaishouCrowdPack/checkCrowdPackage', {signature: md5}).then(result => {
+                        if (result.code === 200) {
+                            that.personNameDisabled = false;
+                            that.personResourceDisabled = false;
+                            resolve();
+                        }
+                        else if (result.code === 201) {
+                            that.$message.error(result.message);
+                            that.personForm.name = result.result.orientationName;
+                            that.personForm.resource = result.result.type;
+                            that.personNameDisabled = true;
+                            that.personResourceDisabled = true;
+                            reject();
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                        reject();
+                    });
+                })
+            })
+        },
+        handleChange(info) {
+            this.fileList = info.fileList;
+        },
+        cosUpload(file) {
+            let 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;
+            let timeElse = new Date().getTime();
+            let arr = file.name.split('.');
+            let 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);
+                    }
+                    const isZip = file.type.includes('zip') || file.type.includes('text');
+                    const fileOvesize = file.size > (1024 * 1024 * 1024);
+                    if (!isZip) {
+                        that.$message.error('只能上传zip格式的文件或者txt文件');
+                        return;
+                    }
+                    if (fileOvesize) {
+                        that.$message.error('文件大小不能超过1G');
+                        return;
+                    }
+                    that.handleMd5(file);
+                }
+            );
+        },
+        handleQueryList(event) {
+            event.preventDefault();
+            const paramsData = this.form.getFieldsValue();
+            this.handleGetTableList(paramsData);
+        },
+        handleResetForm() {
+            this.form.resetFields();
+            this.acountId = undefined;
+            this.handleGetTableList({});
+        },
+        handleUploadPerson() {
+            this.personVisible = true;
+        },
+        handleOk() {
+            this.$refs.ruleForm.validate(valid => {
+                if (valid) {
+                    if (!this.uploadAcountIds) {
+                        this.$message.error('请选择账户');
+                        return;
+                    }
+                    if (!this.fileList.length) {
+                        this.$message.error('请上传文件');
+                        return;
+                    }
+                    this.confirmLoading = true
+                    this.handleUploadRuleForm();
+                }
+                else {
+                    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 => {
+                this.confirmLoading = false
+                if (result.code === 200) {
+                    this.personVisible = false;
+                    this.personResourceDisabled = false;
+                    this.personNameDisabled = false;
+                    this.$message.success('上传成功');
+                    this.handleGetTableList({});
+                    this.fileList = [];
+                    this.personForm.name = '';
+                    this.personForm.resource = '';
+                    this.uploadAcountIds = undefined;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleCancel() {
+            this.confirmLoading = false
+            this.personVisible = false;
+            this.personResourceDisabled = false;
+            this.personNameDisabled = false;
+            this.$refs.ruleForm.resetFields();
+            this.uploadAcountIds = '';
+            this.personForm.name = '';
+            this.personForm.resource = '';
+            this.fileList = [];
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "directional";
+</style>

+ 65 - 0
src/views/modules/autoLaunch/application/components/tree-select.less

@@ -0,0 +1,65 @@
+
+.tree-select-content {
+    .input-search {
+        width: 240px;
+        margin: 10px 0 10px 0;
+    }
+    .tree-select-class {
+        display: flex;
+        justify-content: space-between;
+        .class-left-header {
+            height: 50px;
+            line-height: 50px;
+            background-color: #f9fafd;
+            border-bottom: 1px solid #eee;
+            text-indent: 10px;
+        }
+        .select-class-left {
+            width: 60%;
+            height: 400px;
+            border: 1px solid #eee;
+            .class-left-content {
+                overflow-y: auto;
+                height: 340px;
+            }
+            .example {
+                text-align: center;
+                line-height: 200px;
+            }
+        }
+        .select-class-right {
+            width: 35%;
+            height: 400px;
+            border: 1px solid #eee;
+            .class-left-content {
+                padding: 0 10px;
+                height: 348px;
+                overflow-y: auto;
+                .apply-right-tree {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: baseline;
+                    .left-content-p {
+                        display: inline-block;
+                        width: 85%;
+                        height: 25px;
+                        line-height: 25px;
+                        margin: 0;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .delete-type-class {
+                        color: #1890ff;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .no-data-class {
+                height: 340px;
+                line-height: 340px;
+                text-align: center;
+            }
+        }
+    }
+}

+ 272 - 0
src/views/modules/autoLaunch/application/components/tree-select.vue

@@ -0,0 +1,272 @@
+<template>
+    <div class="tree-select-content">
+        <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" />
+        <div class="tree-select-class">
+            <div class="select-class-left">
+                <div class="class-left-header">选择分享的账户名称</div>
+                <div class="class-left-content">
+                    <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"/>
+                        <span v-if="leftTreeNoData">暂无数据</span>
+                    </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">
+                    <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.key">
+                        <p class="left-content-p">
+                            <a-tooltip placement="left">
+                                <template slot="title">
+                                    <span>{{ item.title }}</span>
+                                </template>
+                                {{ item.title }}
+                            </a-tooltip>
+                        </p>
+                        <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                    </div>
+                </div>
+                <div v-else class="no-data-class">暂无数据</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {mapGetters} from 'vuex';
+import {postAction} from '@/api/manage';
+
+export default {
+    name: 'tree-select',
+    data() {
+        return {
+            expandedKeys: [],
+            autoExpandParent: true,
+            checkedKeys: [],
+            selectedKeys: [],
+            treeData: [],
+            updateTreeData: [],
+            applyTypeOption: [],
+            selectRightData: new Set(),
+            spinning: true,
+            leftTreeNoData: false
+        };
+    },
+    mounted() {
+        this.getAccountId();
+    },
+    methods: {
+        ...mapGetters(['userInfo']),
+        getAccountId() {
+            postAction('/ctop/projectMember/participateListByMediaId', {
+                userId: this.userInfo().id,
+                type: 'kuaishou'
+            }).then(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;
+                }
+            });
+        },
+        handleDelTree(list) {
+            const defaultTypeOption = JSON.parse(JSON.stringify(this.applyTypeOption));
+            const defaultCheckKey = JSON.parse(JSON.stringify(this.checkedKeys));
+            const len = defaultTypeOption.length;
+            const keysLen = defaultCheckKey.length;
+            for(let i = len - 1; i >= 0; i--) {
+                if(defaultTypeOption[i].key === list.key) {
+                    defaultTypeOption.splice(i, 1);
+                }
+            }
+            this.applyTypeOption = defaultTypeOption;
+            this.selectRightData = new Set(defaultTypeOption);
+            const txt = this.handleDelFindId(this.treeData, list.key);
+            const lastIndex = defaultCheckKey.findIndex(item => item === txt);
+            let value = null;
+            if (lastIndex > -1) {
+                value = defaultCheckKey.findIndex(item => item === txt);
+                for(let i = keysLen - 1; i >= 0; i--) {
+                    if(defaultCheckKey[i] === list.key) {
+                        defaultCheckKey.splice(i, 1);
+                    }
+                }
+            }
+            else {
+                value = defaultCheckKey.findIndex(item => item === list.key);
+            }
+            defaultCheckKey.splice(value, 1);
+            this.checkedKeys = defaultCheckKey;
+        },
+        onChange(e) {
+            const value = e.target.value;
+            this.treeData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
+            if (!this.treeData.length) {
+                this.spinning = false;
+                this.leftTreeNoData = true;
+            }
+            else {
+                this.leftTreeNoData = false;
+            }
+        },
+        handleDelFindId(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            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.key;
+                    for (let j = 0; j < children.length; j++) {
+                        if (children[j].key === value) {
+                            return text;
+                        }
+                    }
+                }
+            }
+        },
+        // 根据关键词查询所有相关的tree节点
+        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;
+        },
+        // 去重的方法
+        Es6duplicate(arr, type) {
+            if (!arr.length){
+                return arr;
+            }
+            else {
+                if (type) {
+                    let obj = {};
+                    let newArr = arr.reduce((cur, next) => {
+                        obj[next.key] ? '' : obj[next.key] = true && cur.push(next);
+                        return cur;
+                    }, []);
+                    return newArr;
+                }
+                else {
+                    return Array.from(new Set(arr));
+                }
+            }
+        },
+        onCheck(checkedKeys) {
+            // this.checkedKeys = checkedKeys;
+            this.nodes(this.treeData, checkedKeys);
+            const filterCheckKey = this.checkedKeys.filter(item=>typeof item ==='number');
+            let filterCheckKeySet = new Set(filterCheckKey);
+            let selectRightDataSet = new Set(this.selectRightData);
+            let difference = new Set([...selectRightDataSet].filter((item) => !filterCheckKeySet.has(item.key)));
+            this.selectRightData.delete(...difference);
+            this.applyTypeOption = this.Es6duplicate([...this.selectRightData], 'key');
+            const changeSelectData = this.applyTypeOption.map(item => item.key);
+            this.checkedKeys = changeSelectData;
+              
+            if (this.applyTypeOption.length > 100) {
+                const lastOptionKey = this.applyTypeOption[99].key;
+                const lastIndex = changeSelectData.findIndex(item => item === lastOptionKey);
+                this.checkedKeys = changeSelectData.slice(0, lastIndex + 1);
+                this.applyTypeOption = [...this.selectRightData].slice(0, 100);
+            }
+            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) {
+                        this.selectRightData.add(item);
+                    }
+                    else {
+                        this.selectRightData.delete(item);
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import 'tree-select';
+</style>

+ 205 - 0
src/views/modules/autoLaunch/application/directional-service.js

@@ -0,0 +1,205 @@
+/**
+ * @file 人群包管理基础服务
+ * @author jiayufei(jiayufei@c-top.com.cn)
+ */
+
+ class AppMarketService {
+    constructor() {}
+
+    // 相关账户的table列表
+    setAcountColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                width: '30%'
+            },
+            {
+                title: '所属项目',
+                dataIndex: 'projectName',
+                width: '30%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '20%'
+            },
+            {
+                title: '状态',
+                dataIndex: 'statusStr',
+                width: '20%'
+            }
+        ]
+    }
+
+    // 原因的table列表
+    setCauseColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                width: '30%'
+            },
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                width: '30%'
+            },
+            {
+                title: '原因',
+                dataIndex: 'message',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 相关项目的table列表
+    setDepColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                width: '40%'
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                width: '20%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '20%'
+            }
+        ]
+    }
+
+    // 状态枚举
+    setPlatform() {
+        return [
+            {
+                label: 0,
+                value: '不限'
+            },
+            {
+                label: 1,
+                value: 'Android'
+            },
+            {
+                label: 2,
+                value: 'IOS'
+            }
+        ]
+    }
+
+    // 上传人去报的校验规则
+    setPersonRules() {
+        return {
+            name: [
+                {required: true, message: '人群包名称不能为空', trigger: 'blur'},
+                {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
+            ],
+            resource: [
+                {required: true, message: '请选择匹配类型', trigger: 'change'}
+            ]
+        }
+    }
+
+    // 人群包类型枚举值
+    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();

+ 110 - 0
src/views/modules/autoLaunch/application/directional.less

@@ -0,0 +1,110 @@
+.directional-content {
+    background: #fff;
+    height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        /deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
+            width: 200px !important;
+        }
+        .reset-class {
+            margin-right: 10px !important;
+        }
+        .upload-person {
+            position: absolute;
+            right: 10px;
+            top: 0;
+        }
+    }
+    .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;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+.person-modal {
+    width: 500px;
+    /deep/ .ant-form-item {
+        display: flex;
+    }
+    /deep/ .ant-form-item-label {
+        width: 20%;
+    }
+    /deep/ .ant-form-item-control-wrapper {
+        width: 80%;
+    }
+    .acount-search-class {
+        width: 100% !important;
+    }
+    .upload-txt-rules {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        line-height: 1.5;
+    }
+    /deep/ .ant-radio-group {
+        line-height: 30px;
+    }
+}
+/deep/ .cause-modal {
+    width: 600px !important;
+    .cause-modal-table-class {
+        height: 500px;
+        overflow-y: auto;
+    }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+}
+/deep/ .relax-modal {
+    width: 600px !important;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+
+.grid-form-item-account {
+    /deep/ .ant-form-item-control {
+        line-height: inherit;
+    }
+}
+
+

+ 429 - 0
src/views/modules/autoLaunch/directional/components/selectRegion.vue

@@ -0,0 +1,429 @@
+<style scoped>
+  .transfer {
+    display: flex;
+  }
+
+  .transfer .transfer-box {
+    width: 350px;
+    height: 250px;
+    border: 1px solid #dadfe3;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    box-sizing: border-box;
+    margin-right: 25px;
+  }
+
+  .content-box {
+    min-width: 174px;
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid #dadfe3;
+  }
+
+  .content-box .content-title {
+    width: 100%;
+    background: #f8f9fa;
+    border-bottom: 1px solid #dadfe3;
+    padding: 5px 15px;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 30px;
+  }
+
+  .content-box .content {
+    width: 100%;
+    height: 85%;
+    overflow: auto;
+  }
+
+  .content-box .content p:hover {
+    background: #edf1f5;
+    cursor: pointer;
+  }
+
+  .content-box .content p:hover span {
+    display: inline-block;
+  }
+
+  .content-box .content p span {
+    display: none;
+  }
+
+  p {
+    padding: 5px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #f2f2f2;
+  }
+
+  .backgroundOnly {
+    background: #edf1f5;
+  }
+</style>
+<style>
+  .transfer .ant-checkbox-group {
+    width: 100px;
+    overflow-x: hidden;
+  }
+
+  .transfer .ant-checkbox-group-item {
+    display: inline-block;
+    margin-right: 8px;
+    width: 100%;
+  }
+</style>
+
+<template>
+  <div class="transfer">
+    <div class="transfer-box">
+      <div class="content-box">
+        <p class="content-title">省份</p>
+        <div class="content" style="position:relative">
+          <!-- <div style="position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.5)"
+            v-if="loading"></div> -->
+          <p><input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选</p>
+
+          <p v-for="(item, index) of province" :key="item.value" :class="{ backgroundOnly: provinceIndex == index }">
+            <input class="checkItem" type="checkbox" :value="item.value" :id="item.value" v-model="checkMatched"
+              @change="checkOne(item, index)" />
+            <span @click="showCity(item, index)" style="color:black;display:inline-block;margin-left:5px;width:80%">{{
+              item.label
+            }}</span>
+          </p>
+        </div>
+      </div>
+      <div class="content-box" :style="{ borderRight: !showClass ? '0px' : '1px solid #dadfe3' }" v-show="showCityData">
+        <p class="content-title">城市</p>
+        <div class="content">
+          <!-- <p>
+            <input
+              type="checkbox"
+              class="select_all"
+              @change="checkAllBoxCity"
+              v-model="checkAllCity"
+            /> 全选
+          </p>-->
+          <p v-for="(item, index) of city" :key="item.id" :class="{ backgroundOnly: cityIndex == index }">
+            <input class="checkItem" type="checkbox" :value="item.value" :id="item.value" v-model="checkMatchedCity"
+              @change="checkOneCity(item, index)" />
+            {{ item.label }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="transfer-box" style="width:176px">
+      <div class="content-box">
+        <p class="content-title">
+          已选
+          <span style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+            @click="clear">清空</span>
+        </p>
+        <div class="content">
+          <p v-for="(item, index) of checkData" :key="index">
+            {{ item.label }}
+            <!-- <span
+              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+              @click="detele(item,index)"
+            >删除</span>-->
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    JeecgListMixin
+  } from '@/mixins/JeecgListMixin'
+  import {
+    getProvince,
+    postAction
+  } from '@/api/manage'
+  import $ from 'jquery'
+  export default {
+    name: 'ByteDanceUserOrientationTemplateList',
+    components: {},
+    props: ['dataValue'],
+    data() {
+      return {
+        showClass: false,
+        showCityData: false,
+        checkData: [],
+        checkMatched: [],
+        province: [],
+        city: [],
+        area: [],
+        CityData: '/kuaishou/batch/getRegion',
+        provinceIndex: null,
+        cityIndex: null,
+        checkAll: false,
+        checkMatchedCity: [],
+        checkAllCity: false,
+        nowProvince: null,
+        loading: false
+      }
+    },
+    computed: {},
+    mounted() {
+      this.$nextTick(() => {
+        this.getData().then(() => {
+            console.log(this.dataValue)
+          if (this.dataValue.length>0&&this.dataValue[0].value) {
+            return
+          } else {
+            postAction('/kuaishou/batch/getRegionDetail', {
+              regionArr: this.dataValue
+            }).then(res => {
+              if (res.success) {
+                //   this.populationData.allForm.region = res.result
+                this.checkData = res.result
+                this.checkMatched = res.result.map(item => {
+                  return item.value
+                })
+                this.checkMatchedCity = res.result.map(item => {
+                  return item.value
+                })
+                this.$emit('update:checkData', this.checkData)
+              }
+            })
+          }
+
+          //   if (this.dataValue.length > 0) {
+
+          //   }
+        })
+
+      })
+    },
+    watch: {
+      dataValue: {
+        deep: true,
+        immediate: true, // immediate选项可以开启首次赋值监听
+        handler(n, o) {
+          if (n.length > 0 && n[0].value) {
+            // this.getData().then(() => {
+            console.log(1)
+            //   if (n.length > 0) {
+            this.$nextTick(() => {
+              this.checkData = n
+              this.checkMatched = n.map(item => {
+                return item.value
+              })
+              this.checkMatchedCity = n.map(item => {
+                return item.value
+              })
+              this.$emit('update:checkData', this.checkData)
+            })
+            //   }
+            // })
+
+          }
+
+        }
+      }
+    },
+    methods: {
+      getData() {
+        this.loading = true
+        var that = this
+        return new Promise(function (resolve, reject) {
+          getProvince(that.CityData, {
+            level: 1
+          }).then(res => {
+            if (res.code == '0') {
+              //   this.province.push(...res.result.records)
+              that.province = res.result.map(item => {
+                return {
+                  label: item.name,
+                  value: item.regionId
+                }
+              })
+              that.province = that.province.filter(item => {
+                return item.label != '台湾' && item.label != '香港' && item.label != '澳门'
+              })
+              that.loading = false
+              resolve()
+            }
+          })
+        })
+
+      },
+      showCity(item, index) {
+        this.city = []
+        this.showCityData = false
+        this.showClass = false
+        this.provinceIndex = index
+        this.cityIndex = null
+        this.nowProvince = item
+        this.checkMatchedCity = []
+        getProvince(this.CityData, {
+          parent: item.value
+        }).then(res => {
+          if (res.code == '0') {
+            this.city = res.result.map(item => {
+              return {
+                label: item.name,
+                value: item.regionId
+              }
+            })
+            if (this.checkMatched.indexOf(item.value) != -1) {
+              this.checkAllCity = true
+              this.checkMatchedCity = this.city.map(item => {
+                return item.value
+              })
+            } else {
+              this.checkMatchedCity = this.checkData.map(item => {
+                return item.value
+              })
+            }
+            //   this.city.push(...res.result.records)
+            this.showCityData = true
+          }
+        })
+      },
+      checkAllBox() {
+        this.checkMatched = []
+        this.checkData = []
+        if (this.checkAll) {
+          this.checkMatched = this.province.map(item => {
+            return item.value
+          })
+          this.checkData.push(...this.province)
+        } else {
+          this.checkMatched = []
+          this.checkData = []
+          this.checkMatchedCity = []
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkOne(item, index) {
+        if (this.checkMatched.indexOf(item.value) == -1) {
+          var index1 = this.checkData.findIndex(v => v.value === item.value)
+          this.checkData.splice(index1, 1)
+          if (this.nowProvince) {
+            if (this.nowProvince.value == item.value) {
+              this.checkMatchedCity = []
+            }
+          }
+        } else {
+          this.checkData.push(item)
+          var data = []
+          getProvince(this.CityData, {
+            parent: item.value
+          }).then(res => {
+            if (res.code == '0') {
+              data = res.result.map(item => {
+                return {
+                  label: item.name,
+                  value: item.regionId
+                }
+              })
+              for (var i = 0; i < this.checkData.length; i++) {
+                for (let j = 0; j < data.length; j++) {
+                  if (this.checkData[i].value == data[j].value) {
+                    this.checkData.splice(i, 1)
+                  }
+                }
+              }
+            }
+          })
+
+          if (this.nowProvince) {
+            if (item.value == this.nowProvince.value) {
+              this.checkMatchedCity = this.city.map(item => {
+                return item.value
+              })
+            }
+          }
+        }
+        if (this.checkMatched.length == this.province.length) {
+          this.checkAll = true
+        } else {
+          this.checkAll = false
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkAllBoxCity() {
+        this.checkMatchedCity = []
+        if (this.checkAllCity) {
+          this.checkMatchedCity = this.city.map(item => {
+            return item.value
+          })
+          this.checkMatched.push(this.nowProvince.value)
+          this.checkData.push(this.nowProvince)
+        } else {
+          this.checkMatchedCity = []
+          var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+          var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+          this.checkData.splice(index, 1)
+          this.checkMatched.splice(index1, 1)
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkOneCity(item, index) {
+        var allCity = this.checkMatchedCity.filter(v => {
+          return v.toString().slice(0, 2) == this.nowProvince.value
+        })
+
+        if (allCity.length == this.city.length) {
+          this.checkMatched.push(this.nowProvince.value)
+          this.checkData.push(this.nowProvince)
+          for (var i = 0; i < allCity.length; i++) {
+            for (var j = 0; j < this.checkData.length; j++) {
+              if (allCity[i] == this.checkData[j].value) {
+                this.checkData.splice(j, 1)
+                j--
+              }
+            }
+          }
+        }
+        if (this.checkMatchedCity.indexOf(item.value) != -1) {
+          if (allCity.length != this.city.length) {
+            this.checkData.push(item)
+          }
+          if (this.checkMatched.length == this.province.length) {
+            this.checkAll = true
+          } else {
+            this.checkAll = false
+          }
+        } else {
+          if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+            var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+            var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+            this.checkData.splice(index1, 1)
+            this.checkMatched.splice(index2, 1)
+            this.checkAll = false
+            var data = this.city.filter(v => {
+              return v.value != item.value
+            })
+            this.checkData.push(...data)
+          } else {
+            var index1 = this.checkData.findIndex(v => v.value === item.value)
+            this.checkData.splice(index1, 1)
+          }
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      clear() {
+        this.checkData = []
+        this.checkMatched = []
+        this.checkMatchedCity = []
+        this.checkAll = false
+        this.$emit('update:checkData', this.checkData)
+      },
+      detele(item, index) {
+        //   if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+        var index1 = this.checkMatched.findIndex(v => v === item.value)
+        var index2 = this.checkData.findIndex(v => v.value === item.value)
+        this.checkData.splice(index2, 1)
+        this.checkMatched.splice(index1, 1)
+        this.checkAll = false
+        //   } else {
+        //   }
+
+        this.$emit('update:checkData', this.checkData)
+      }
+    }
+  }
+</script>

Fichier diff supprimé car celui-ci est trop grand
+ 1414 - 0
src/views/modules/autoLaunch/directional/components/targetedPopulation.vue


+ 291 - 0
src/views/modules/autoLaunch/directional/components/templateModal.vue

@@ -0,0 +1,291 @@
+<style>
+#table_time_selected1 tr {
+  border: 1px solid rgb(102, 162, 243);
+}
+
+.plug-timer-grid th {
+  line-height: 25px;
+}
+
+.group-creat .ant-form-item-required::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '';
+}
+
+.else-label .ant-form-item-label label::after {
+  content: '';
+  position: relative;
+  top: -0.5px;
+  margin: 0 8px 0 2px;
+}
+.ant-form-item-required::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '*';
+}
+</style>
+<style lang="scss" scoped>
+.require-check {
+  /deep/ .ant-form-item-label {
+    label::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #f5222d;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
+  }
+}
+</style>
+<template>
+  <a-modal v-model="visible" :title="type === 'add' ? '新建定向包' : '修改定向包'" :width="1100" v-if="visible">
+    <a-spin :spinning="spinning">
+      <a-form @submit="handleSubmit" :form="form">
+        <a-row :gutter="24">
+          <a-col :md="24" :sm="24" :xxl="24">
+            <selectTable
+              :projectId.sync="projectId"
+              :labelCol="labelCol"
+              :disabled="disabled"
+              :requireCheck="true"
+              v-if="!disabled"
+            ></selectTable>
+            <a-form-item
+              v-else
+              label="项目名称"
+              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+              :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
+              class="require-check"
+            >
+              <a-input v-model="projectName" :disabled="disabled"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item
+          label="定向包名称"
+          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+          :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
+        >
+          <a-input
+            v-decorator="['templateName', { rules: [{ required: true, message: '模板名称必填' }] }]"
+            :disabled="type == 'look'"
+          ></a-input>
+        </a-form-item>
+
+        <targeted-population ref="population" :populationData.sync="populationData" />
+      </a-form>
+    </a-spin>
+    <template slot="footer">
+      <!-- <a-button type="primary" @click="handleSubmit" :loading="loading"> 确定 </a-button> -->
+      <a-button
+        type="default"
+        @click="
+          () => {
+            this.visible = false
+          }
+        "
+      >
+        取消
+      </a-button>
+      <a-button type="primary" @click="handleSubmit" :loading="loading">
+        {{ type == 'add' ? '确定' : '修改' }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
+import moment from 'moment'
+import { mapGetters } from 'vuex'
+import jq from 'jquery'
+import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
+import targetedPopulation from './targetedPopulation.vue'
+import pick from 'lodash.pick'
+export default {
+  name: 'new-mould',
+  components: {
+    targetedPopulation,
+    selectTable,
+  },
+  data() {
+    return {
+      visible: false,
+      spinning: false,
+      projectName: '',
+      form: this.$form.createForm(this),
+      projectId: '',
+      populationData: {},
+      accountId: '',
+      templateId: undefined,
+      type: 'add',
+      loading: false,
+      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
+      disabled: false,
+    }
+  },
+  computed: {},
+  methods: {
+    create(accountId, type) {
+      this.disabled = false
+      this.spinning = false
+      this.visible = true
+      this.type = type
+      this.populationData = {}
+      this.accountId = accountId
+    },
+    handleOk(item, type) {
+      this.spinning = true
+      this.visible = true
+      this.type = type
+      var params = {}
+      params.id = item.id
+      this.templateId = item.id
+      this.projectName = item.projectName
+      this.projectId = item.projectId
+      getAction('/kuaishouDirectionalPackage/queryById', params).then((res) => {
+        if (res.success) {
+          var dataJson = {
+            ...res.result,
+          }
+
+          this.populationData = dataJson
+
+          this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
+          this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
+          this.populationData.businessInterest = dataJson.businessInterest
+            ? JSON.parse(dataJson.businessInterest)
+            : null
+          this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
+          this.populationData.interestVideo = dataJson.interestVideo ? JSON.parse(dataJson.interestVideo) : null
+          this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null
+
+          this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
+          this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
+          this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
+
+          this.populationData.behavior = dataJson.label
+          this.populationData.interest = dataJson.interestLabel
+
+          this.populationData.sceneType = dataJson.sceneType ? JSON.parse(dataJson.sceneType) : []
+          this.populationData.allForm = {}
+          this.populationData.allForm.regionType =
+            dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
+
+          this.populationData.allForm.region = dataJson.region
+          // postAction('/kuaishou/batch/getRegionDetail', {
+          //   regionArr: dataJson.region
+          // }).then(res => {
+          //   console.log(res, 11111)
+          //   if (res.success) {
+          //     this.populationData.allForm.region = res.result
+          //   }
+          // })
+
+          this.populationData.allForm.ageType =
+            dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min>0 ? 'ageCustom' : 'noLimit'
+          this.populationData.allForm.device = dataJson.deviceBrand && eval(dataJson.deviceBrand).length > 0 ? '1' : '0'
+          this.populationData.allForm.price = dataJson.devicePrice && eval(dataJson.devicePrice).length > 0 ? '1' : '0'
+          this.populationData.allForm.appType =
+            dataJson.appInterest && eval(dataJson.appInterest).length > 0
+              ? '1'
+              : dataJson.appIds && eval(dataJson.appIds).length > 0
+              ? '2'
+              : '0'
+          this.populationData.allForm.fansStar =
+            dataJson.fansStar && eval(dataJson.fansStar).length > 0 ? '1' : '0'
+          this.populationData.allForm.interestVideo =
+            dataJson.interestVideo && eval(dataJson.interestVideo).length > 0 ? '1' : '0'
+          this.populationData.allForm.platform_os = dataJson.platformOs
+          this.populationData.allForm.businessInterestType = dataJson.businessInterestType
+          this.populationData.allForm.isOpen = dataJson.isOpen
+          this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
+          this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
+          this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
+          this.populationData.allForm.behaviorInterest = dataJson.label ? '1' : '0'
+          this.populationData.allForm.checkArr =
+            this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
+          this.populationData.projectId = dataJson.projectId + ''
+
+          this.disabled = true
+
+          this.$nextTick(() => {
+            console.log(dataJson)
+            this.form.setFieldsValue(pick(dataJson, ['templateName']))
+            this.spinning = false
+          })
+        }
+      })
+    },
+    handleCancel(e) {
+      this.visible = false
+    },
+    handleSubmit(e) {
+      //   this.$refs.population.handleSubmit()
+
+      e.preventDefault()
+      this.$refs.population.handleSubmit()
+      this.$refs.population.formAll.validateFields((err, value) => {
+        if (this.populationData.allForm.appType == '2') {
+          if (this.populationData.appIds.length == 0) {
+            this.$message.error('APP名称未选择')
+          }
+        }
+        if (!err) {
+          this.form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+              // this.loading = true
+              if (this.projectId) {
+                var params = {
+                  ...this.populationData,
+                  templateName: values.templateName,
+                  projectId: this.projectId,
+                }
+                params.label = JSON.stringify(params.behavior)
+                params.interestLabel = JSON.stringify(params.interest)
+                if (this.type == 'add') {
+                  postAction('/kuaishouDirectionalPackage/createDirectionalPackage', params).then((res) => {
+                    if (res.success) {
+                      this.visible = false
+                      this.loading = false
+                      this.$emit('getData')
+                    } else {
+                      this.loading = false
+                      this.$message.error(res.message)
+                    }
+                  })
+                } else if (this.type == 'edit') {
+                  params.id = this.templateId
+                  postAction('/kuaishouDirectionalPackage/updateDirectionalPackage', params).then((res) => {
+                    this.visible = false
+                    if (res.success) {
+                      this.loading = false
+                      this.$emit('getData')
+                    } else {
+                      this.loading = false
+                      this.$message.error(res.message)
+                    }
+                  })
+                }
+              } else {
+                this.$message.error('请选择项目')
+              }
+            }
+          })
+        }
+      })
+    },
+  },
+}
+</script>

+ 71 - 0
src/views/modules/autoLaunch/directional/components/tree-select.less

@@ -0,0 +1,71 @@
+
+.tree-select-content {
+    .input-search {
+        width: 240px;
+        margin: 10px 0 10px 0;
+    }
+    .tree-select-class {
+        display: flex;
+        justify-content: space-between;
+        .class-left-header {
+            height: 50px;
+            line-height: 50px;
+            background-color: #f9fafd;
+            border-bottom: 1px solid #eee;
+            text-indent: 10px;
+        }
+        .select-class-left {
+            width: 60%;
+            height: 400px;
+            border: 1px solid #eee;
+            .class-left-content {
+                overflow-y: auto;
+                height: 340px;
+                position: relative;
+                .pagin-table-class {
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                }
+            }
+            .example {
+                text-align: center;
+                line-height: 200px;
+            }
+        }
+        .select-class-right {
+            width: 35%;
+            height: 400px;
+            border: 1px solid #eee;
+            .class-left-content {
+                padding: 0 10px;
+                height: 348px;
+                overflow-y: auto;
+                .apply-right-tree {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: baseline;
+                    .left-content-p {
+                        display: inline-block;
+                        width: 85%;
+                        height: 25px;
+                        line-height: 25px;
+                        margin: 0;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .delete-type-class {
+                        color: #1890ff;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .no-data-class {
+                height: 340px;
+                line-height: 340px;
+                text-align: center;
+            }
+        }
+    }
+}

+ 302 - 0
src/views/modules/autoLaunch/directional/components/tree-select.vue

@@ -0,0 +1,302 @@
+<template>
+    <div class="tree-select-content">
+        <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" />
+        <div class="tree-select-class">
+            <div class="select-class-left">
+                <div class="class-left-header">选择分享的账户名称</div>
+                <div class="class-left-content">
+                    <template>
+                        <a-tree
+                            v-model="checkedKeys"
+                            checkable
+                            :expanded-keys="expandedKeys"
+                            :auto-expand-parent="autoExpandParent"
+                            :selected-keys="selectedKeys"
+                            :tree-data="treeData"
+                            @check="onCheck"
+                            @expand="onExpand"
+                        />
+                        <!-- <a-pagination
+                            class="pagin-table-class"
+                            :total="totalAll"
+                            :show-total="total => `共 ${totalAll} 条`"
+                            size="small"
+                            @change="onShowSizeChange"
+                            @showSizeChange="onShowSizeChange"
+                        /> -->
+                    </template>
+                    <div class="example">
+                        <a-spin :spinning="spinning"/>
+                        <span v-if="leftTreeNoData">暂无数据</span>
+                    </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">
+                    <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.key">
+                        <p class="left-content-p">
+                            <a-tooltip placement="left">
+                                <template slot="title">
+                                    <span>{{ item.title }}</span>
+                                </template>
+                                {{ item.title }}
+                            </a-tooltip>
+                        </p>
+                        <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                    </div>
+                </div>
+                <div v-else class="no-data-class">暂无数据</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {mapGetters} from 'vuex';
+import {postAction,getAction} from '@/api/manage';
+
+export default {
+    name: 'tree-select',
+    props: {
+        projectId: {
+            type: [String,Number],
+            default() {
+                return null
+            },
+        },
+        templateId: {
+            type: [String,Number],
+            default() {
+                return null
+            },
+        },
+        httpSrc: {
+            type: String,
+            default() {
+                return '/kuaishouDirectionalPackage/getAccountByProjectId'
+            }
+        }
+    },
+    data() {
+        return {
+            totalAll: 20,
+            expandedKeys: [],
+            autoExpandParent: true,
+            checkedKeys: [],
+            selectedKeys: [],
+            treeData: [],
+            updateTreeData: [],
+            applyTypeOption: [],
+            selectRightData: new Set(),
+            spinning: true,
+            leftTreeNoData: false,
+            tablePag: {
+                page: 1,
+                size: 100
+            },
+        };
+    },
+    mounted() {
+        this.getAccountId();
+    },
+    methods: {
+        ...mapGetters(['userInfo']),
+        onShowSizeChange(current, pageSize) {
+            this.tablePag = {
+                page: current,
+                size: pageSize
+            };
+            this.getAccountId();
+        },
+        getAccountId() {
+            getAction(this.httpSrc, {
+                projectId: this.projectId,
+                id: this.templateId,
+                pageNo: this.tablePag.page,
+                pageSize: this.tablePag.size
+            }).then(result => {
+                if (result.result.list.length) {
+                    this.spinning = false;
+                    this.treeData = result.result.list.map(item => {
+                        return {
+                            key: item.accountId,
+                            title: item.authName,
+                            disabled: item.state === 1,
+                            children: null
+                        };
+                    });
+                    this.updateTreeData = [...this.treeData];
+                    this.totalAll = result.result.total || 0;
+                }
+                else {
+                    this.spinning = false;
+                    this.leftTreeNoData = true;
+                }
+            });
+        },
+        handleDelTree(list) {
+            const defaultTypeOption = JSON.parse(JSON.stringify(this.applyTypeOption));
+            const defaultCheckKey = JSON.parse(JSON.stringify(this.checkedKeys));
+            const len = defaultTypeOption.length;
+            const keysLen = defaultCheckKey.length;
+            for(let i = len - 1; i >= 0; i--) {
+                if(defaultTypeOption[i].key === list.key) {
+                    defaultTypeOption.splice(i, 1);
+                }
+            }
+            this.applyTypeOption = defaultTypeOption;
+            this.selectRightData = new Set(defaultTypeOption);
+            const txt = this.handleDelFindId(this.treeData, list.key);
+            const lastIndex = defaultCheckKey.findIndex(item => item === txt);
+            let value = null;
+            if (lastIndex > -1) {
+                value = defaultCheckKey.findIndex(item => item === txt);
+                for(let i = keysLen - 1; i >= 0; i--) {
+                    if(defaultCheckKey[i] === list.key) {
+                        defaultCheckKey.splice(i, 1);
+                    }
+                }
+            }
+            else {
+                value = defaultCheckKey.findIndex(item => item === list.key);
+            }
+            defaultCheckKey.splice(value, 1);
+            this.checkedKeys = defaultCheckKey;
+        },
+        onChange(e) {
+            const value = e.target.value;
+            this.treeData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
+            if (!this.treeData.length) {
+                this.spinning = false;
+                this.leftTreeNoData = true;
+            }
+            else {
+                this.leftTreeNoData = false;
+            }
+        },
+        handleDelFindId(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            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.key;
+                    for (let j = 0; j < children.length; j++) {
+                        if (children[j].key === value) {
+                            return text;
+                        }
+                    }
+                }
+            }
+        },
+        // 根据关键词查询所有相关的tree节点
+        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;
+        },
+        // 去重的方法
+        Es6duplicate(arr, type) {
+            if (!arr.length){
+                return arr;
+            }
+            else {
+                if (type) {
+                    let obj = {};
+                    let newArr = arr.reduce((cur, next) => {
+                        obj[next.key] ? '' : obj[next.key] = true && cur.push(next);
+                        return cur;
+                    }, []);
+                    return newArr;
+                }
+                else {
+                    return Array.from(new Set(arr));
+                }
+            }
+        },
+        onCheck(checkedKeys) {
+            // this.checkedKeys = checkedKeys;
+            console.log(checkedKeys)
+            this.nodes(this.treeData, checkedKeys);
+            const filterCheckKey = this.checkedKeys.filter(item=>typeof item ==='number');
+            let filterCheckKeySet = new Set(filterCheckKey);
+            let selectRightDataSet = new Set(this.selectRightData);
+            let difference = new Set([...selectRightDataSet].filter((item) => !filterCheckKeySet.has(item.key)));
+            this.selectRightData.delete(...difference);
+            this.applyTypeOption = this.Es6duplicate([...this.selectRightData], 'key');
+            const changeSelectData = this.applyTypeOption.map(item => item.key);
+            this.checkedKeys = changeSelectData;
+              
+            if (this.applyTypeOption.length > 100) {
+                const lastOptionKey = this.applyTypeOption[99].key;
+                const lastIndex = changeSelectData.findIndex(item => item === lastOptionKey);
+                this.checkedKeys = changeSelectData.slice(0, lastIndex + 1);
+                this.applyTypeOption = [...this.selectRightData].slice(0, 100);
+            }
+            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) {
+                        this.selectRightData.add(item);
+                    }
+                    else {
+                        this.selectRightData.delete(item);
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import 'tree-select';
+</style>

+ 213 - 0
src/views/modules/autoLaunch/directional/directional-service.js

@@ -0,0 +1,213 @@
+/**
+ * @file 人群包管理基础服务
+ * @author jiayufei(jiayufei@c-top.com.cn)
+ */
+
+ class AppMarketService {
+    constructor() {}
+
+    // 相关账户的table列表
+    setAcountColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                width: '50%',
+                align: 'center'
+            },
+            {
+                title: '编辑',
+                dataIndex: 'action',
+                scopedSlots: {customRender: 'action'},
+                width: '50%',
+                align: 'center'
+            }
+        ]
+    }
+
+    // 原因的table列表
+    setCauseColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                width: '25%',
+                align: 'center'
+            },
+            {
+                title: '推送结果',
+                dataIndex: 'result',
+                width: '25%',
+                align: 'center'
+            },
+            {
+                title: '失败原因',
+                dataIndex: 'message',
+                width: '25%',
+                align: 'center',
+                customRender(t) {
+                    if(t === 'OK') {
+                        return '-';
+                    }
+                    else {
+                        return t;
+                    }
+                }
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                scopedSlots: {customRender: 'action'},
+                width: '25%',
+                align: 'center'
+            }
+        ]
+    }
+
+    // 相关项目的table列表
+    setDepColumns() {
+        return [
+            {
+                title: '广告组名称',
+                dataIndex: 'unitName',
+                width: '50%',
+                align: 'center'
+            },
+            {
+                title: '所属账户',
+                dataIndex: 'authName',
+                width: '50%',
+                align: 'center'
+            }
+        ]
+    }
+
+    // 状态枚举
+    setPlatform() {
+        return [
+            {
+                label: 0,
+                value: '不限'
+            },
+            {
+                label: 1,
+                value: 'Android'
+            },
+            {
+                label: 2,
+                value: 'IOS'
+            }
+        ]
+    }
+
+    // 上传人去报的校验规则
+    setPersonRules() {
+        return {
+            name: [
+                {required: true, message: '人群包名称不能为空', trigger: 'blur'},
+                {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
+            ],
+            resource: [
+                {required: true, message: '请选择匹配类型', trigger: 'change'}
+            ]
+        }
+    }
+
+    // 人群包类型枚举值
+    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();

+ 113 - 0
src/views/modules/autoLaunch/directional/directional.less

@@ -0,0 +1,113 @@
+.directional-content {
+    background: #fff;
+    // height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .middle-button {
+        margin: 0 8px;
+    }
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        /deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
+            width: 200px !important;
+        }
+        .reset-class {
+            margin-right: 10px !important;
+        }
+        .upload-person {
+            position: absolute;
+            right: 10px;
+            top: 0;
+        }
+    }
+    .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;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+.person-modal {
+    width: 500px;
+    /deep/ .ant-form-item {
+        display: flex;
+    }
+    /deep/ .ant-form-item-label {
+        width: 20%;
+    }
+    /deep/ .ant-form-item-control-wrapper {
+        width: 80%;
+    }
+    .acount-search-class {
+        width: 100% !important;
+    }
+    .upload-txt-rules {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        line-height: 1.5;
+    }
+    /deep/ .ant-radio-group {
+        line-height: 30px;
+    }
+}
+/deep/ .cause-modal {
+    width: 600px !important;
+    .cause-modal-table-class {
+        height: 500px;
+        overflow-y: auto;
+    }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+}
+/deep/ .relax-modal {
+    width: 600px !important;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+
+.grid-form-item-account {
+    /deep/ .ant-form-item-control {
+        line-height: inherit;
+    }
+}
+
+

Fichier diff supprimé car celui-ci est trop grand
+ 1036 - 0
src/views/modules/autoLaunch/directional/directional.vue


+ 58 - 0
src/views/modules/autoLaunch/material-pool/material.vue

@@ -0,0 +1,58 @@
+<template>
+    <a-card
+        style="width:100%"
+        :tab-list="tabListNoTitle"
+        :active-tab-key="currentTabComponent"
+        @tabChange="key => onTabChange(key)"
+    >
+        <component v-bind:is="currentTabComponent"></component>
+    </a-card>
+        
+    
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+    components:{
+        directional: () => import('../directional/directional'),
+        person: () => import('@/views/modules/crowd-control/crowd-control.vue'),
+        url: () => import('../url/url'),
+        application: () => import('../application/application'),
+    },
+    data() {
+        return {
+            currentTabComponent:'directional',//当前加载的组件名称
+            tabListNoTitle: [
+                {
+                    key: 'directional',
+                    tab: '定向包管理',
+                },
+                {
+                    key: 'person',
+                    tab: '人群包管理',
+                },
+                {
+                    key: 'url',
+                    tab: '落地页管理',
+                },
+                // {
+                //     key: 'application',
+                //     tab: '应用包管理',
+                // },
+            ], 
+        }
+    },
+    methods: {
+        onTabChange(key, type) {
+            this.currentTabComponent = key;
+        },
+    },
+    created() {
+        this.currentTabComponent = 'directional';
+    }
+   
+}
+
+</script>

+ 65 - 0
src/views/modules/autoLaunch/url/components/tree-select.less

@@ -0,0 +1,65 @@
+
+.tree-select-content {
+    .input-search {
+        width: 240px;
+        margin: 10px 0 10px 0;
+    }
+    .tree-select-class {
+        display: flex;
+        justify-content: space-between;
+        .class-left-header {
+            height: 50px;
+            line-height: 50px;
+            background-color: #f9fafd;
+            border-bottom: 1px solid #eee;
+            text-indent: 10px;
+        }
+        .select-class-left {
+            width: 60%;
+            height: 400px;
+            border: 1px solid #eee;
+            .class-left-content {
+                overflow-y: auto;
+                height: 340px;
+            }
+            .example {
+                text-align: center;
+                line-height: 200px;
+            }
+        }
+        .select-class-right {
+            width: 35%;
+            height: 400px;
+            border: 1px solid #eee;
+            .class-left-content {
+                padding: 0 10px;
+                height: 348px;
+                overflow-y: auto;
+                .apply-right-tree {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: baseline;
+                    .left-content-p {
+                        display: inline-block;
+                        width: 85%;
+                        height: 25px;
+                        line-height: 25px;
+                        margin: 0;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .delete-type-class {
+                        color: #1890ff;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .no-data-class {
+                height: 340px;
+                line-height: 340px;
+                text-align: center;
+            }
+        }
+    }
+}

+ 272 - 0
src/views/modules/autoLaunch/url/components/tree-select.vue

@@ -0,0 +1,272 @@
+<template>
+    <div class="tree-select-content">
+        <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" />
+        <div class="tree-select-class">
+            <div class="select-class-left">
+                <div class="class-left-header">选择分享的账户名称</div>
+                <div class="class-left-content">
+                    <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"/>
+                        <span v-if="leftTreeNoData">暂无数据</span>
+                    </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">
+                    <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.key">
+                        <p class="left-content-p">
+                            <a-tooltip placement="left">
+                                <template slot="title">
+                                    <span>{{ item.title }}</span>
+                                </template>
+                                {{ item.title }}
+                            </a-tooltip>
+                        </p>
+                        <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                    </div>
+                </div>
+                <div v-else class="no-data-class">暂无数据</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {mapGetters} from 'vuex';
+import {postAction} from '@/api/manage';
+
+export default {
+    name: 'tree-select',
+    data() {
+        return {
+            expandedKeys: [],
+            autoExpandParent: true,
+            checkedKeys: [],
+            selectedKeys: [],
+            treeData: [],
+            updateTreeData: [],
+            applyTypeOption: [],
+            selectRightData: new Set(),
+            spinning: true,
+            leftTreeNoData: false
+        };
+    },
+    mounted() {
+        this.getAccountId();
+    },
+    methods: {
+        ...mapGetters(['userInfo']),
+        getAccountId() {
+            postAction('/ctop/projectMember/participateListByMediaId', {
+                userId: this.userInfo().id,
+                type: 'kuaishou'
+            }).then(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;
+                }
+            });
+        },
+        handleDelTree(list) {
+            const defaultTypeOption = JSON.parse(JSON.stringify(this.applyTypeOption));
+            const defaultCheckKey = JSON.parse(JSON.stringify(this.checkedKeys));
+            const len = defaultTypeOption.length;
+            const keysLen = defaultCheckKey.length;
+            for(let i = len - 1; i >= 0; i--) {
+                if(defaultTypeOption[i].key === list.key) {
+                    defaultTypeOption.splice(i, 1);
+                }
+            }
+            this.applyTypeOption = defaultTypeOption;
+            this.selectRightData = new Set(defaultTypeOption);
+            const txt = this.handleDelFindId(this.treeData, list.key);
+            const lastIndex = defaultCheckKey.findIndex(item => item === txt);
+            let value = null;
+            if (lastIndex > -1) {
+                value = defaultCheckKey.findIndex(item => item === txt);
+                for(let i = keysLen - 1; i >= 0; i--) {
+                    if(defaultCheckKey[i] === list.key) {
+                        defaultCheckKey.splice(i, 1);
+                    }
+                }
+            }
+            else {
+                value = defaultCheckKey.findIndex(item => item === list.key);
+            }
+            defaultCheckKey.splice(value, 1);
+            this.checkedKeys = defaultCheckKey;
+        },
+        onChange(e) {
+            const value = e.target.value;
+            this.treeData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
+            if (!this.treeData.length) {
+                this.spinning = false;
+                this.leftTreeNoData = true;
+            }
+            else {
+                this.leftTreeNoData = false;
+            }
+        },
+        handleDelFindId(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            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.key;
+                    for (let j = 0; j < children.length; j++) {
+                        if (children[j].key === value) {
+                            return text;
+                        }
+                    }
+                }
+            }
+        },
+        // 根据关键词查询所有相关的tree节点
+        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;
+        },
+        // 去重的方法
+        Es6duplicate(arr, type) {
+            if (!arr.length){
+                return arr;
+            }
+            else {
+                if (type) {
+                    let obj = {};
+                    let newArr = arr.reduce((cur, next) => {
+                        obj[next.key] ? '' : obj[next.key] = true && cur.push(next);
+                        return cur;
+                    }, []);
+                    return newArr;
+                }
+                else {
+                    return Array.from(new Set(arr));
+                }
+            }
+        },
+        onCheck(checkedKeys) {
+            // this.checkedKeys = checkedKeys;
+            this.nodes(this.treeData, checkedKeys);
+            const filterCheckKey = this.checkedKeys.filter(item=>typeof item ==='number');
+            let filterCheckKeySet = new Set(filterCheckKey);
+            let selectRightDataSet = new Set(this.selectRightData);
+            let difference = new Set([...selectRightDataSet].filter((item) => !filterCheckKeySet.has(item.key)));
+            this.selectRightData.delete(...difference);
+            this.applyTypeOption = this.Es6duplicate([...this.selectRightData], 'key');
+            const changeSelectData = this.applyTypeOption.map(item => item.key);
+            this.checkedKeys = changeSelectData;
+              
+            if (this.applyTypeOption.length > 100) {
+                const lastOptionKey = this.applyTypeOption[99].key;
+                const lastIndex = changeSelectData.findIndex(item => item === lastOptionKey);
+                this.checkedKeys = changeSelectData.slice(0, lastIndex + 1);
+                this.applyTypeOption = [...this.selectRightData].slice(0, 100);
+            }
+            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) {
+                        this.selectRightData.add(item);
+                    }
+                    else {
+                        this.selectRightData.delete(item);
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import 'tree-select';
+</style>

+ 213 - 0
src/views/modules/autoLaunch/url/url-service.js

@@ -0,0 +1,213 @@
+/**
+ * @file 人群包管理基础服务
+ * @author jiayufei(jiayufei@c-top.com.cn)
+ */
+
+ class AppMarketService {
+    constructor() {}
+
+    // 相关账户的table列表
+    setAcountColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                width: '50%',
+                align: 'center'
+            },
+            {
+                title: '落地页数量',
+                dataIndex: 'count',
+                scopedSlots: {customRender: 'count'},
+                width: '50%',
+                align: 'center'
+            }
+        ]
+    }
+
+    // 原因的table列表
+    setCauseColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                width: '25%',
+                align: 'center'
+            },
+            {
+                title: '推送结果',
+                dataIndex: 'result',
+                width: '25%',
+                align: 'center'
+            },
+            {
+                title: '失败原因',
+                dataIndex: 'message',
+                width: '25%',
+                align: 'center',
+                customRender(t) {
+                    if(t === 'OK') {
+                        return '-';
+                    }
+                    else {
+                        return t;
+                    }
+                }
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                scopedSlots: {customRender: 'action'},
+                width: '25%',
+                align: 'center'
+            }
+        ]
+    }
+
+    // 相关项目的table列表
+    setDepColumns() {
+        return [
+            {
+                title: '广告组名称',
+                dataIndex: 'unitName',
+                width: '50%',
+                align: 'center'
+            },
+            {
+                title: '所属账户',
+                dataIndex: 'authName',
+                width: '50%',
+                align: 'center'
+            }
+        ]
+    }
+
+    // 状态枚举
+    setPlatform() {
+        return [
+            {
+                label: 0,
+                value: '不限'
+            },
+            {
+                label: 1,
+                value: 'Android'
+            },
+            {
+                label: 2,
+                value: 'IOS'
+            }
+        ]
+    }
+
+    // 上传人去报的校验规则
+    setPersonRules() {
+        return {
+            name: [
+                {required: true, message: '人群包名称不能为空', trigger: 'blur'},
+                {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
+            ],
+            resource: [
+                {required: true, message: '请选择匹配类型', trigger: 'change'}
+            ]
+        }
+    }
+
+    // 人群包类型枚举值
+    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();

+ 113 - 0
src/views/modules/autoLaunch/url/url.less

@@ -0,0 +1,113 @@
+.directional-content {
+    background: #fff;
+    // height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .middle-button {
+        margin: 0 8px;
+    }
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        /deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
+            width: 200px !important;
+        }
+        .reset-class {
+            margin-right: 10px !important;
+        }
+        .upload-person {
+            position: absolute;
+            right: 10px;
+            top: 0;
+        }
+    }
+    .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;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+.person-modal {
+    width: 500px;
+    /deep/ .ant-form-item {
+        display: flex;
+    }
+    /deep/ .ant-form-item-label {
+        width: 20%;
+    }
+    /deep/ .ant-form-item-control-wrapper {
+        width: 80%;
+    }
+    .acount-search-class {
+        width: 100% !important;
+    }
+    .upload-txt-rules {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        line-height: 1.5;
+    }
+    /deep/ .ant-radio-group {
+        line-height: 30px;
+    }
+}
+/deep/ .cause-modal {
+    width: 600px !important;
+    .cause-modal-table-class {
+        height: 500px;
+        overflow-y: auto;
+    }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+}
+/deep/ .relax-modal {
+    width: 600px !important;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+
+.grid-form-item-account {
+    /deep/ .ant-form-item-control {
+        line-height: inherit;
+    }
+}
+
+

+ 984 - 0
src/views/modules/autoLaunch/url/url.vue

@@ -0,0 +1,984 @@
+<template>
+    <div class="directional-content">
+        <div class="table-page-search-wrapper">
+            <a-form layout="inline"  :form="form"
+                hide-required-mark :selfUpdate="true" 
+                @submit="handleQueryList">
+                <a-row :gutter="24">
+                    <a-col :md="8" :sm="8" :xxl="6">
+                        <!-- <a-form-item label="项目名称"> -->
+                        <selectTable :projectId.sync="projectId" ref="selectTable" :requireCheck="false"></selectTable>
+                    </a-col>
+                    <a-col :md="8" :sm="8" :xxl="6">
+                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                            <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
+                            <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button">重置</a-button>
+                        </span>
+                        
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+        <div class="control-con-table">
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                :columns="columns"
+                :dataSource="dataSource"
+                :pagination="ipagination"
+                :loading="dataLoading"
+            >
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handlePush(record)">推送</a>
+                    <a-divider type="vertical" />
+                    <a @click="handleEdit(record)">编辑</a>
+                    <a-divider type="vertical" />
+                    <a @click="handleDelete(record)">删除</a>
+                </span>
+
+                <span slot="accountCount" slot-scope="text, record">
+                    <a @click="handleAcountRelax('account', record)">{{ text }}</a>
+                </span>
+                <span slot="unitCount" slot-scope="text, record">
+                    <a @click="handleAcountRelax('unit', record)">{{ text }}</a>
+                </span>
+                
+                <span slot="actionMore" slot-scope="text, record">
+                    <a @click="handleCause(record)">推送历史</a>
+                </span>
+            </a-table>
+        </div>
+        <a-modal
+            title="推送账户"
+            v-if="pushVisible"
+            :visible="pushVisible"
+            :confirm-loading="pushConfirmLoading"
+            dialog-class="push-modal"
+            @ok="handlePushSure"
+            @cancel="handlePushCancel"
+            okText="下一步"
+        >
+            <div>
+                <div class="acount-title">
+                    <div class="acount-title-left">已选定向包</div>
+                    <div class="acount-title-right">{{ tableSelectList.templateName }}</div>
+                </div>
+                <div class="acount-title push-plate">
+                    <div class="acount-title-left">推送平台</div>
+                    <div class="acount-title-right">{{ tableSelectList.platformOs }}</div>
+                </div>
+                <tree-select @applyType="handleApplyType" :projectId="tableSelectList.projectId" :templateId="tableSelectList.id"></tree-select>
+            </div>
+        </a-modal>
+        <a-modal
+            title="为定向包设置自定义人群"
+            v-if="setPersonVisible"
+            :visible="setPersonVisible"
+            :confirm-loading="setPersonLoading"
+            dialog-class="push-modal"
+            @ok="handleSetPerson"
+            @cancel="handlePersonCancel"
+        >
+             <!-- @change="handleChange" -->
+            <el-collapse v-model="activeKey" accordion>
+                <el-collapse-item :name="item.key" :key="index" v-for="(item ,index) in finallyRightTree">
+                    <template slot="title">
+                        <h2>{{item.title}}</h2>
+                    </template>
+                    <a-form  
+                        :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+                    >
+                        <div class="acount-title">
+                            <div class="acount-title-left">自定义人群</div>
+                            <div class="acount-title-right"> 
+                                <a-radio-group v-model="item.people" buttonStyle="solid" @change="checkPerson(item)">
+                                    <a-radio-button value="0">不限</a-radio-button>
+                                    <a-radio-button value="1">定向</a-radio-button>                           
+                                    <a-radio-button value="2">排除</a-radio-button>                           
+                                    <a-radio-button value="3">同时定向排除</a-radio-button>                           
+                                </a-radio-group>
+                            </div>
+                        </div>
+                        <div class="dingxiang_paichu" v-if="item.people!='0'" style="width:100%">
+                            <a-tabs v-model="item.tabKey" @change="retargetAccountId(item.key)"  >
+                                <a-tab-pane key="1" tab="定向池" v-if="item.people!='2'">
+                                    <a-table
+                                        :columns="retargetColumns"
+                                        :row-key="record => record.key"
+                                        :data-source="retargetDataAll"                                        
+                                        :loading="loading"
+                                        style="width:100%;margin:15px 0"
+                                        :pagination='false'
+                                        @change="retargetTableChange"
+                                        :scroll="{ y: 250 }"
+                                        :row-selection="rowSelectionMin"
+                                        bordered
+                                    >
+                                        <template slot="name" slot-scope="name"> {{ name }} </template>
+                                        <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
+                                    </a-table>
+                                </a-tab-pane>
+                                <a-tab-pane key="2" tab="排除池" v-if="item.people!='1'">
+                                    <a-table
+                                        :columns="retargetColumns"
+                                        :row-key="record => record.key"
+                                        :data-source="retargetDataAll"                                        
+                                        :loading="loading"
+                                        style="width:100%;margin:15px 0"
+                                        :pagination='false'
+                                        @change="retargetTableChange"
+                                        :scroll="{ y: 250 }"
+                                        :row-selection="rowSelectionMax"
+                                        bordered
+                                    >
+                                        <template slot="name" slot-scope="name"> {{ name }} </template>
+                                        <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
+                                    </a-table>
+                                </a-tab-pane>
+                            </a-tabs>
+                                
+                        </div>  
+                    </a-form>
+                </el-collapse-item>
+            </el-collapse>
+        </a-modal>
+        <a-modal
+            title="推送历史"
+            v-if="causeVisible"
+            :visible="causeVisible"
+            :confirm-loading="causeConfirmLoading"
+            :footer="null"
+            dialog-class="cause-modal"
+            @cancel="handleCauseCancel"
+        >
+            <div>
+                <div class="cause-modal-table-class">
+                    <a-select
+                        style="width:200px;margin-bottom:10px"
+                        v-model="resultHistory"
+                        placeholder="请选择"
+                        allow-clear
+                    >
+                        <a-select-option :value="1">推送成功</a-select-option>
+                        <a-select-option :value="0">推送失败</a-select-option>
+                    </a-select>
+                    <a-table :columns="causeColumns" :data-source="causeData" bordered :pagination="false">
+                        <span slot="action" slot-scope="text, record">
+                            <a-popconfirm
+                                title="是否重新推送?"
+                                ok-text="是"
+                                cancel-text="否"
+                                @confirm="handleAgian(record)"
+                            >
+                                <a :disabled="record.result==='推送成功'">重新推送</a>
+                            </a-popconfirm>
+                            
+                        </span>
+                    </a-table>
+                </div>
+                <a-pagination
+                    class="pagin-table-class"
+                    :total="totalAllCause"
+                    size="small"
+                    @change="handleCauseSizeChange"
+                />
+            </div>
+        </a-modal>   
+        <a-modal
+            :title="relaxStatus === 'unit' ? '相关组' : '相关账户'"
+            v-if="relaxVisible"
+            :visible="relaxVisible"
+            :confirm-loading="relaxConfirmLoading"
+            :footer="null"
+            dialog-class="relax-modal"
+            @cancel="handleRelaxCancel"
+            rowKey="index"
+        >
+            <div v-if="relaxStatus === 'account'">
+                <a-table :columns="acountColumns" :data-source="acountData" bordered :pagination="accountIpagination">
+                </a-table>
+            </div>
+            <div v-else>
+                <AcountSearch :appId.sync="unitAccountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:300px " />   
+                <a-table :columns="depColumns" :data-source="acountData" bordered :pagination="accountIpagination">
+                </a-table>
+            </div>
+        </a-modal>
+        <a-modal
+            :title="'编辑自定义人群(' + personName + ')'"
+            :visible="personNameVisible"
+            @ok="handleAddPopulation"
+            dialog-class="relax-modal"
+            @cancel="handleCancelPerson"
+            :loading="personLoading"
+            rowKey="index">
+            <a-form  
+                :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+            >
+                <a-form-item label="定向包名称">
+                    <a-input
+                        disabled
+                        :default-value="(personDetail ? personDetail.templateName : '-') "
+                        placeholder="请输入"
+                    />
+                </a-form-item>
+                <a-form-item label="账户名称">
+                    <a-input
+                        disabled
+                        :default-value="(personDetail ? personDetail.authName : '-') "
+                        placeholder="请输入"
+                    />
+                </a-form-item>
+                <a-form-item label="自定义人群">
+                    <a-radio-group v-model="people" buttonStyle="solid" @change="customCrowdChange">
+                        <a-radio-button value="0">不限</a-radio-button>
+                        <a-radio-button value="1">定向</a-radio-button>                           
+                        <a-radio-button value="2">排除</a-radio-button>                           
+                        <a-radio-button value="3">同时定向排除</a-radio-button>                           
+                    </a-radio-group>
+                </a-form-item>
+                <div class="dingxiang_paichu" v-if="people!='0'" style="width:100%">
+                    <a-tabs v-model="tabKey" @change="retargetTabChange"  >
+                        <a-tab-pane key="1" tab="定向池" v-if="people!='2'">
+                            <a-table
+                                :columns="retargetColumns"
+                                :row-key="record => record.key"
+                                :data-source="retargetDataAll"                                        
+                                :loading="loading"
+                                style="width:100%;margin:15px 0"
+                                :pagination='false'
+                                @change="retargetTableChange"
+                                :scroll="{ y: 250 }"
+                                :row-selection="rowSelection"
+                                bordered
+                            >
+                                <template slot="name" slot-scope="name"> {{ name }} </template>
+                                <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
+                            </a-table>
+                        </a-tab-pane>
+                        <a-tab-pane key="2" tab="排除池" v-if="people!='1'">
+                            <a-table
+                                :columns="retargetColumns"
+                                :row-key="record => record.key"
+                                :data-source="retargetDataAll"                                        
+                                :loading="loading"
+                                style="width:100%;margin:15px 0"
+                                :pagination='false'
+                                @change="retargetTableChange"
+                                :scroll="{ y: 250 }"
+                                :row-selection="rowSelection2"
+                                bordered
+                            >
+                                <template slot="name" slot-scope="name"> {{ name }} </template>
+                                <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
+                            </a-table>
+                        </a-tab-pane>
+                    </a-tabs>
+                        
+                </div>  
+            </a-form>
+        </a-modal>
+    </div>
+</template>
+<script>
+import TreeSelect from './components/tree-select';
+import {getAction, postAction} from '@/api/manage';
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
+import AppMarketService from './url-service';
+import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
+import BMF from 'browser-md5-file';
+let retargetColumns=[
+    {
+        title: '人群包',
+        dataIndex: 'name',
+        sorter: true,
+        width: '40%',
+        scopedSlots: { customRender: 'name' },
+    },
+    {
+    title: '属性',
+      dataIndex: 'populationType',
+      scopedSlots: {
+        customRender: 'populationType'
+      },
+      width: 200
+    },
+    {
+        title: '所属账号',
+        dataIndex: 'accountId',
+        sorter: true,
+        width: '40%',
+        scopedSlots: { customRender: 'accountId' },
+    },
+    
+]
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
+export default {
+    name: 'directional',
+    components: {
+        TreeSelect,
+        AcountSearch,
+        selectTable,
+    },
+    data() {
+        let that = this;
+        return {
+            //自定义人群参数
+            personLoading: false,
+            retargetColumns,
+            retargetData: [],
+            retargetDataAll: [],
+            loading: false,
+            customCrowd: 'NONE',//自定义人群 选择的值
+            selectedRowKeys: [],
+            incluedSelectedRowKeys: [],
+            incluedSelectedKeys: [],
+            excludeSelectedKeys: [],
+            excludeSelectedRowKeys: [],
+            //自定义人群参数结束
+            resultHistory: null,
+            unitAccountId: "",
+            activeKey: "",
+            setPersonVisible: false,
+            setPersonLoading: false,
+            tabKey:'1',
+            people: '0',
+            peopleList: [],
+            dataElse: [],
+            personName: "",
+            personNameVisible: false,
+            personDetail: null,
+            dataLoading: false,
+            personResourceDisabled: false,
+            personNameDisabled: false,
+            totalAllCause: 0,
+            projectId: undefined, // 搜索的账户ID
+            uploadAcountIds: '',
+            totalAll: 10,
+            finallyRightTree: [],
+            fileList: [],
+            relaxVisible: false,
+            relaxConfirmLoading: false,
+            pushVisible: false,
+            pushConfirmLoading: false,
+            causeVisible: false,
+            causeConfirmLoading: false,
+            labelCol: {span: 4},
+            wrapperCol: {span: 14},
+            confirmLoading: false,
+            mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
+            populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
+            platform: AppMarketService.setPlatform(), // 状态枚举
+            relaxStatus: '',
+            relaxData: null,
+            causeData: [], // 原因的table列表数据,
+            depData: [], // 相关项目的table列表数据,
+            acountData: [], // 相关账户的table列表数据,
+            acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
+            depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
+            causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
+            dataSource: [],
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger:false,
+                pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current;
+                    this.ipagination.pageSize= pageSize;
+                    this.handleGetTableList()
+                }
+            },
+            accountIpagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger:false,
+                pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.accountIpagination.current = current;
+                    this.accountIpagination.pageSize= pageSize;
+                    this.handleAcountRelax(this.relaxStatus  ,this.relaxData)
+                }
+            },
+            columns: [
+                {
+                    title: '落地页名称',
+                    align: 'center',
+                    width: 200,
+                    ellipsis: true,
+                    dataIndex: 'landpageName'
+                },
+                {
+                    title: '所属项目',
+                    align: 'center',
+                    dataIndex: 'projectName',
+                    customRender(t) {
+                        if(t) {
+                            return t
+                        }
+                        else {
+                            return '-'
+                        }
+                    }
+                },
+                {
+                    title: '所属账户',
+                    align: 'center',
+                    dataIndex: 'authName',
+                    customRender(t) {
+                        if(t) {
+                            return t
+                        }
+                        else {
+                            return '-'
+                        }
+                    }
+                },
+                {
+                    title: '修改时间',
+                    dataIndex: 'landpageUpdateTime',
+                    align: 'center'
+                },
+                {
+                    title: '相关账户',
+                    dataIndex: 'accountCount',
+                    scopedSlots: {customRender: 'accountCount'},
+                    align: 'center'
+                },
+                {
+                    title: '相关组',
+                    dataIndex: 'unitCount',
+                     scopedSlots: {customRender: 'unitCount'},
+                    align: 'center'
+                }
+            ],
+            personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
+            tablePag: {
+                page: 1,
+                size: 10
+            },
+            // table 原因的分页
+            causePag: {
+                page: 1,
+                size: 10
+            },
+            tableSelectList: {},
+            acountRelaxDetail: {},
+            causeDetailData: {},
+            editPerson: null,
+        };
+    },
+    watch: {
+        unitAccountId: function(n,o) {
+            if(this.relaxVisible){
+                this.handleAcountRelax(this.relaxStatus  ,this.relaxData)
+            }
+        },
+        resultHistory: function(n,o) {
+            this.handleCauseTableData(this.tableSelectList.id);
+        },
+    },
+    computed: {
+        hasSelected() {
+            return this.selectedRowKeys.length > 0;
+        },
+        rowSelection() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    this.incluedSelectedRowKeys = selectedRowKeys;
+                    this.incluedSelectedKeys = selectedRows
+                },
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1,  
+                        name: record.name,
+                        defaultChecked:this.incluedSelectedRowKeys.indexOf(record.key)>-1
+                    },
+                }),
+            };
+        },
+        rowSelection2() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    this.excludeSelectedRowKeys = selectedRowKeys;
+                    this.excludeSelectedKeys = selectedRows;
+                },
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, 
+                        name: record.name,
+                        defaultChecked:this.excludeSelectedRowKeys.indexOf(record.key)>-1
+                    },
+                }),
+            };
+        },
+        rowSelectionMin() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
+                    this.finallyRightTree[index].incluedSelectedRowKeys = selectedRowKeys;
+                    this.finallyRightTree[index].incluedSelectedKeys = selectedRows;
+                },
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].excludeSelectedRowKeys.indexOf(record.key)>-1,  
+                        name: record.name,
+                        defaultChecked:this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].incluedSelectedRowKeys.indexOf(record.key)>-1
+                    },
+                }),
+            };
+        },
+        rowSelectionMax() {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
+                    this.finallyRightTree[index].excludeSelectedRowKeys = selectedRowKeys;
+                    this.finallyRightTree[index].excludeSelectedKeys = selectedRows;
+                },
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].incluedSelectedRowKeys.indexOf(record.key)>-1, 
+                        name: record.name,
+                        defaultChecked:this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].excludeSelectedRowKeys.indexOf(record.key)>-1
+                    },
+                }),
+            };
+        },
+    },
+    created() {
+        this.form = this.$form.createForm(this);
+    },
+    mounted() {
+        this.handleGetTableList({});
+    },
+    methods: {
+        onSelectExcludePerson(selectedRowKeys, selectedRows) {
+            
+            let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
+            this.finallyRightTree[index].incluedSelectedRowKeys = selectedRowKeys;
+            this.finallyRightTree[index].incluedSelectedKeys = selectedRows;
+        },
+        onSelectPerson(selectedRowKeys, selectedRows) {
+            let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
+            this.finallyRightTree[index].excludeSelectedRowKeys = selectedRowKeys;
+            this.finallyRightTree[index].excludeSelectedKeys = selectedRows;
+        },
+        // 自定义人群的改变
+        retargetTableChange(pagination, filters, sorter){
+            // //console.log(pagination);
+        },
+        checkPerson(item) {
+            if(item.people === '1' || item.people === '2'){
+                this.retargetAccountId(item.key);
+                item.tabKey = item.people
+            }
+            else if(item.people === '3'){
+                this.retargetAccountId(item.key);
+                item.tabKey='1'
+            }
+            this.$nextTick(() => {
+                item.incluedSelectedRowKeys = [];
+                item.incluedSelectedKeys = [];
+                item.excludeSelectedKeys = [];
+                item.excludeSelectedRowKeys = [];
+            })
+        },
+        // 自定义人群的--同时定向排除tab切换事件
+        retargetAccountId(accountId){
+            //console.log()
+            this.retargetDataAll=[];
+            this.loading=true;
+            
+            getAction('/kuaishou/batch/getPopulationList',{
+                accountId:accountId
+            }).then((res)=>{
+                // //console.log(res)
+                this.loading=false;
+                if(res.success){
+                    res.result.forEach((ele)=>{
+                        ele.key=ele.orientationId;
+                        ele.id= ele.orientationId;
+                        ele.name=ele.orientationName+"("+ele.orientationId+")";
+                        // ele.accountName=this.accountInfo.title
+                        ele.accountId=accountId;      
+                    })
+                    // this.retargetData=res.data;
+                    this.retargetDataAll=[...this.retargetDataAll,...res.result];
+                    
+                }
+            })
+        },
+        customCrowdChange(e){
+            //console.log(e);
+            
+           
+            if(e.target.value=='1' || e.target.value=='2'){
+                this.retargetTabChange();
+                this.tabKey=e.target.value
+            }else if(e.target.value=='3'){
+                this.retargetTabChange();
+                this.tabKey='1'
+            }
+            this.$nextTick(() => {
+                this.incluedSelectedRowKeys = [];
+                this.incluedSelectedKeys = [];
+                this.excludeSelectedKeys = [];
+                this.excludeSelectedRowKeys = [];
+            })
+        },
+        // 自定义人群的--同时定向排除tab切换事件
+        retargetTabChange(){
+            //console.log()
+            this.retargetDataAll=[];
+            this.loading=true;
+            
+            getAction('/kuaishou/batch/getPopulationList',{
+                accountId:this.personDetail.accountId
+            }).then((res)=>{
+                // //console.log(res)
+                this.loading=false;
+                if(res.success){
+                    res.result.forEach((ele)=>{
+                        ele.key=ele.orientationId   
+                        ele.id= ele.orientationId 
+                        ele.name=ele.orientationName+"("+ele.orientationId+")"
+                        // ele.accountName=this.accountInfo.title
+                        ele.accountId=this.personDetail.accountId           
+                    })
+                    // this.retargetData=res.data;
+                    this.retargetDataAll=[...this.retargetDataAll,...res.result];
+                    
+                }
+            })
+        },
+        getPeople() {
+            var data = ''
+            return new Promise((resolve, reject) => {
+                getAction('/kuaishou/batch/getPopulationList', { accountId: this.personDetail.accountId }).then((res) => {
+                if (res.success) {
+                    if (res.result) {
+                        this.peopleList = res.result.map((item, index) => {
+                            return {
+                                ...item,
+                                key: index,
+                            }
+                        })
+                        this.dataElse = this.peopleList
+                        resolve(res.result)
+                    }
+                }
+                })
+            })
+        },
+        handleCancelPerson() {
+            this.personNameVisible = false;
+        },
+        handleEditPerson(val) {
+            this.personNameVisible = true;
+            this.relaxVisible = false;
+            this.personDetail = val;
+            this.personName = val.authName;
+            let params = {};
+            params.accountId = val.accountId;
+            params.templateId = val.templateId;
+            getAction('/kuaishouDirectionalPackage/queryPopulationById' ,params).then(res => {
+                if(res.success) {
+                    this.retargetAccountId(val.accountId);
+                    this.editPerson = res.result;
+                    if(res.result.population&&res.result.excludePopulation){
+                        this.people = '3';
+                    }
+                    else if(res.result.population && !res.result.excludePopulation){
+                        this.people = '1';
+                    }
+                    else if(!res.result.population&&!res.result.excludePopulation){
+                        this.people = '0';
+                    }
+                    else{
+                        this.people = '2';
+                    }
+                    this.incluedSelectedRowKeys = res.result.population ? res.result.population : [];
+                    this.excludeSelectedRowKeys = res.result.excludePopulation ? res.result.excludePopulation : [];
+                }
+            })
+        },
+        handleAddPopulation() {
+            this.personLoading = true;
+            let params = {};
+            params.accountId = this.personDetail.accountId;
+            if(this.people == '0') {
+
+            }
+            else if(this.people == '1') {
+                params.population = this.incluedSelectedRowKeys;
+            }
+            else if(this.people == '2') {
+                params.excludePopulation = this.excludeSelectedRowKeys;
+            }
+            else {
+                params.population = this.incluedSelectedRowKeys;
+                params.excludePopulation = this.excludeSelectedRowKeys;
+            }
+            postAction('/kuaishouDirectionalPackage/editPopulation', params).then(res => {
+                if(res.success) {
+                    this.personLoading = false;
+                    this.$message.success('人群包修改成功');
+                    this.handleCancelPerson()
+                }
+                else {
+                    this.personLoading = false;
+                    this.$message.error(res.message);
+                }
+            }).catch(error => {
+
+            })
+
+
+        },
+        getTemplateList() {
+            this.form.resetFields();
+            this.projectId = undefined;
+            this.handleGetTableList({});
+        },
+        addNewTemplate(accountId) {
+            this.$refs.templateModal.create(null, 'add')
+        },
+        handleCauseSizeChange(current, pageSize) {
+            this.causePag = {
+                page: current,
+                size: pageSize
+            };
+            this.handleCauseTableData();
+        },
+        handleGetTableList(data) {
+            const paramsData = {
+                projectId: this.projectId,
+                pageNo:  this.ipagination.current,
+                pageSize: this.ipagination.pageSize
+            };
+            this.dataSource = []
+            this.dataLoading = true;
+            getAction('/kuaishouLandpagePackage/list', paramsData).then(result => {
+                this.dataLoading = false;
+                if (result.code === 200) {
+                    this.dataSource = result.result.list || [];
+                    this.ipagination.total = result.result.total || 0;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                this.dataLoading = false;
+                console.log(error, 'eeee');
+            });
+        },
+        handleDelete(data) {
+            let that = this
+            this.$confirm({
+                title: '删除提示',
+                content: '是否删除该定向包?',
+                onOk() {
+                    getAction('/kuaishouDirectionalPackage/delete', {id: data.id}).then(result => {
+                        if (result.code === 200) {
+                            that.handleGetTableList({});
+                            that.$message.success('删除成功');
+                        }
+                        else {
+                            that.$message.error(result.message);
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                    });
+                }
+            });
+        },
+        handleAcountRelax(txt, recd) {
+            this.relaxStatus = txt;
+            this.relaxData = recd;
+            this.relaxVisible = true;
+            let params = {};
+            let url = "";
+            params.siteId = recd.siteId;
+           
+            params.pageNo = this.accountIpagination.current;
+            params.pageSize = this.accountIpagination.pageSize;
+            if(txt === 'unit') {
+                params.accountId = this.unitAccountId;
+                url = "/kuaishouLandpagePackage/getRelatedGroups";
+            }
+            else {
+                url = "/kuaishouLandpagePackage/getRelatedAccounts";
+            }
+            
+            // acountData
+            getAction(url, params).then( res => {
+                if(res.success) {
+                    this.acountData = res.result.list;
+                    this.accountIpagination.total = res.result.total;
+                }
+            })
+        },
+        handleRelaxCancel() {
+            this.unitAccountId = ''
+            this.relaxVisible = false;
+        },
+        handleCause(list) {
+            this.causeVisible = true;
+            this.handleCauseTableData(list.id);
+            this.tableSelectList = list;
+        },
+        handleCauseTableData(id) {
+            const paramsData = {
+                id: id,
+                pageNo: this.causePag.page,
+                pageSize: this.causePag.size,
+                status: this.resultHistory
+            };
+            postAction('/kuaishouDirectionalPackage/queryPushResults', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.causeData = result.result.list || [];
+                    this.totalAllCause = result.result.total || 0;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleApplyType(list) {
+            if(list.length > 0) {
+                this.finallyRightTree = list.map(item => {
+                    return {
+                        ...item,
+                        incluedSelectedRowKeys: [],
+                        incluedSelectedKeys: [],
+                        excludeSelectedKeys: [],
+                        excludeSelectedRowKeys: [],
+                        people: '0',
+                        tabKey: '1'
+                    }
+                });
+            }
+            else {
+                this.finallyRightTree = []
+            }
+            
+        },
+        handleEdit(val) {
+            this.$refs.templateModal.handleOk(val, 'edit')
+        },
+        handlePush(val) {
+            this.finallyRightTree = [];
+            this.tableSelectList = val;
+            this.pushVisible = true;
+        },
+        handleCauseCancel() {
+            this.causeVisible = false;
+        },
+        handleAgian(val) {
+            this.finallyRightTree = [];
+            this.finallyRightTree.push({
+                key: val.accountId,
+                title: val.authName,
+                incluedSelectedRowKeys: [],
+                incluedSelectedKeys: [],
+                excludeSelectedKeys: [],
+                excludeSelectedRowKeys: [],
+                people: '0',
+                tabKey: '1'
+            });
+            this.causeVisible = false;
+            this.handlePushSure();
+        },
+        handleSetPerson() {
+            this.setPersonLoading = true;
+            // this.finallyRightTree
+            let params = {};
+            params.id = this.tableSelectList.id;
+            params.datas = this.finallyRightTree.map(item => {
+                return {
+                    accountId: item.key,
+                    population: item.people === '0' ? []: item.people === '1' || item.people === '3' ? item.incluedSelectedRowKeys : [],
+                    excludePopulation: item.people === '0' ? []: item.people === '2' || item.people === '3' ? item.excludeSelectedRowKeys : [],
+                }
+            })
+            postAction('/kuaishouDirectionalPackage/pushDirectionalPackage' ,params).then(res => {
+                this.setPersonLoading = false;
+                if(res.success) {
+                    this.$message.success('推送中,请稍候')
+                    this.handlePersonCancel()
+                }
+                else {
+                    this.$message.error(res.result)
+                }
+            }).catch(error => {
+
+            })
+            
+        },
+        handlePersonCancel() {
+            this.setPersonVisible = false;
+        },
+        handlePushSure() {
+            if(this.finallyRightTree.length > 0) {
+                this.pushVisible = false;
+                this.setPersonVisible = true;
+                this.activeKey = this.finallyRightTree[0].key
+            }
+            else {
+                this.$message.error("请选择要分享的账户")
+            }
+            
+        },
+        handlePushCancel() {
+            this.pushVisible = false;
+        },
+        beforeUpload(file) {
+            this.cosUpload(file);
+        },
+        handleChange(info) {
+            this.fileList = info.fileList;
+        },
+        handleQueryList(event) {
+            this.ipagination.current = 1;
+            event.preventDefault();
+            const paramsData = this.form.getFieldsValue();
+            this.handleGetTableList(paramsData);
+        },
+        handleResetForm() {
+            this.ipagination.current = 1;
+            this.form.resetFields();
+            this.projectId = undefined;
+            this.handleGetTableList({});
+            this.$refs.selectTable.keyValue = "";
+            this.$refs.selectTable.getData()
+        },
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "url";
+</style>

+ 47 - 28
src/views/modules/crowd-control/crowd-control-service.js

@@ -11,23 +11,27 @@ class AppMarketService {
         return [
             {
                 title: '账户名称',
-                dataIndex: 'accountName',
-                width: '30%'
+                dataIndex: 'authName',
+                width: '30%',
+                align: 'center'
             },
             {
-                title: '所属项目',
-                dataIndex: 'projectName',
-                width: '30%'
+                title: '覆盖数量',
+                dataIndex: 'coverNum',
+                width: '30%',
+                align: 'center'
             },
             {
                 title: '人群包数量',
-                dataIndex: 'count',
-                width: '20%'
+                dataIndex: 'populationCount',
+                width: '20%',
+                align: 'center'
             },
             {
                 title: '状态',
                 dataIndex: 'statusStr',
-                width: '20%'
+                width: '20%',
+                align: 'center'
             }
         ]
     }
@@ -36,40 +40,55 @@ class AppMarketService {
     setCauseColumns() {
         return [
             {
-                title: '项目名称',
-                dataIndex: 'projectName',
-                width: '30%'
+                title: '账户名称',
+                dataIndex: 'authName',
+                width: '25%',
+                align: 'center'
             },
             {
-                title: '账户名称',
-                dataIndex: 'accountName',
-                width: '30%'
+                title: '推送结果',
+                dataIndex: 'result',
+                width: '25%',
+                align: 'center'
             },
             {
-                title: '原因',
+                title: '失败原因',
                 dataIndex: 'message',
-                width: '40%'
+                width: '25%',
+                align: 'center',
+                customRender(t) {
+                    if(t === 'OK') {
+                        return '-';
+                    }
+                    else {
+                        return t;
+                    }
+                }
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                scopedSlots: {customRender: 'action'},
+                width: '25%',
+                align: 'center'
             }
         ]
     }
 
-    // 相关项目的table列表
+    // 相关的table列表
     setDepColumns() {
         return [
             {
-                title: '项目名称',
-                dataIndex: 'projectName',
-                width: '40%'
+                title: '广告组名称',
+                dataIndex: 'unitName',
+                width: '50%',
+                align: 'center'
             },
             {
-                title: '账户数量',
-                dataIndex: 'accountCount',
-                width: '20%'
-            },
-            {
-                title: '人群包数量',
-                dataIndex: 'count',
-                width: '20%'
+                title: '所属账户',
+                dataIndex: 'authName',
+                width: '50%',
+                align: 'center'
             }
         ]
     }

+ 5 - 2
src/views/modules/crowd-control/crowd-control.less

@@ -1,13 +1,16 @@
 .crowd-control-content {
     background: #fff;
-    height: calc(100vh - 137px);
+    // height: calc(100vh - 137px);
     padding: 20px;
     overflow-y: auto;
+    .middle-button {
+        margin: 0 8px;
+    }
     .control-con-header {
         margin-bottom: 20px;
         position: relative;
         /deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
-            width: 200px !important;
+            width: 100% !important;
         }
         .reset-class {
             margin-right: 10px !important;

+ 258 - 136
src/views/modules/crowd-control/crowd-control.vue

@@ -1,52 +1,40 @@
 <template>
     <div class="crowd-control-content">
-        <div class="control-con-header">
+        <div class="table-page-search-wrapper">
             <a-form
-                class="grid-form" layout="inline"
+                layout="inline"
                 :form="form"
                 hide-required-mark
                 @submit="handleQueryList"
             >
-                <a-row class="grid-form-options">
-                    <a-form-item
-                        class="grid-form-item"
-                        label="名称"
-                        :colon="false"
-                    >
-                        <a-input
-                            v-decorator="['name']" type="text"
-                            placeholder="请输入"
-                        />
-                    </a-form-item>
-                    <a-form-item
-                        class="grid-form-item grid-form-item-account" label="账户"
-                        :colon="false"
-                    >
-                        <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="状态"
-                        :colon="false"
-                    >
-                        <a-select
-                            v-decorator="['status']"
-                            placeholder="请选择"
-                            allow-clear
+                <a-row :gutter="24">
+                    <a-col :md="8" :sm="8" :xxl="6">
+                        <selectTable :projectId.sync="projectId" ref="selectTable" :requireCheck="false"></selectTable>
+                    </a-col>
+                    <a-col :md="8" :sm="8" :xxl="6">
+                        <a-form-item
+                            label="名称"
                         >
-                            <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="reset-class" @click="handleResetForm">重置</a-button>
-                        <a-button type="primary" html-type="submit">查询</a-button>
-                    </a-form-item>
+                            <a-input
+                                v-decorator="['name']" type="text"
+                                placeholder="请输入"
+                            />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :md="8" :sm="8" :xxl="6">
+                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                            <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
+                            <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button">重置</a-button>
+                             <a-button type="primary" @click="handleUploadPerson">
+                                上传人群包
+                            </a-button>
+                           
+                        </span>
+                        
+                    </a-col>
                 </a-row>
             </a-form>
-            <a-button type="primary" class="upload-person" @click="handleUploadPerson">
-                上传人群包
-            </a-button>
+            
         </div>
         <div class="control-con-table">
             <a-table
@@ -58,15 +46,19 @@
                 :pagination="false"
             >
                 <span slot="action" slot-scope="text, record">
-                    <a @click="handleEdit(record)" :disabled="record.status !== 4">推送</a>
+                    <a @click="handleEdit(record)">推送</a>
                     <a-divider type="vertical" />
                     <a @click="handleDelete(record)">删除</a>
                 </span>
+                                
+                <span slot="actionMore" slot-scope="text, record">
+                    <a @click="handleHistory(record)">推送历史</a>
+                </span>
                 <span slot="cause" slot-scope="text, record">
                     <a class="cause-text-class" @click="handleCause(record)">失败原因</a>
                 </span>
                 <span slot="depRelax" slot-scope="text, record">
-                    <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
+                    <a @click="handleAcountRelax('unit', record)">{{ text }}</a>
                 </span>
                 <span slot="acountRelax" slot-scope="text, record">
                     <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
@@ -77,7 +69,6 @@
                 :total="totalAll"
                 :show-total="total => `共 ${totalAll} 条`"
                 size="small"
-                show-size-changer
                 show-quick-jumper
                 @change="onShowSizeChange"
                 @showSizeChange="onShowSizeChange"
@@ -100,21 +91,30 @@
                     :label-col="labelCol"
                     :wrapper-col="wrapperCol"
                 >
-                    <a-form-model-item label="匹配类型" prop="resource">
-                        <a-radio-group v-model="personForm.resource" :disabled="personResourceDisabled">
-                            <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">
+                    <selectTable
+                        :projectId.sync="uploadProjectId"
+                        :labelCol="labelCol"
+                        :disabled="disabled"
+                        :requireCheck="true"
+                        v-if="!disabled"
+                    ></selectTable>
+                     <a-form-model-item ref="name" label="人群包名称" prop="name">
                         <a-input
                             v-model="personForm.name"
                             placeholder="请输入人群包名称"
                             :disabled="personNameDisabled"
                         />
                     </a-form-model-item>
-                    <a-form-model-item label="选择账户" class="grid-form-item-account">
-                        <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
+                    <a-form-model-item label="匹配类型" prop="resource">
+                        <a-radio-group v-model="personForm.resource" :disabled="personResourceDisabled">
+                            <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 label="选择账户" class="grid-form-item-account">
+                        <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
+                    </a-form-model-item> -->
+
                     <a-form-model-item label="上传人群包">
                         <a-upload
                             name="file"
@@ -156,7 +156,7 @@
                         </a-radio-group>
                     </div>
                 </div>
-                <tree-select @applyType="handleApplyType"></tree-select>
+                <tree-select :httpSrc="src" @applyType="handleApplyType" :projectId="tableSelectList.projectId" :templateId="tableSelectList.id"></tree-select>
             </div>
         </a-modal>
         <a-modal
@@ -181,7 +181,7 @@
             </div>
         </a-modal>   
         <a-modal
-            :title="relaxStatus === 'dep' ? '相关项目' : '相关账户'"
+            :title="relaxStatus === 'unit' ? '相关组' : '相关账户'"
             v-if="relaxVisible"
             :visible="relaxVisible"
             :confirm-loading="relaxConfirmLoading"
@@ -190,29 +190,57 @@
             @cancel="handleRelaxCancel"
         >
             <div>
-                <div class="acount-title">
-                    <div class="acount-title-left">人群包名称</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">{{ acountRelaxDetail.accountName }}</div>
-                </div>
-                <template v-if="relaxStatus === 'dep'">
-                    <a-table :columns="depColumns" :data-source="depData" bordered>
+                <template v-if="relaxStatus === 'unit'">
+                    <AcountSearch :appId.sync="unitAccountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:300px " />   
+                    <a-table :columns="depColumns" :data-source="depData" bordered :pagination="accountIpagination">
                     </a-table>
                 </template>
                 <template v-if="relaxStatus === 'acount'">
-                    <a-table :columns="acountColumns" :data-source="acountData" bordered></a-table>
+                    <a-table :columns="acountColumns" :data-source="acountData" bordered :pagination="accountIpagination"></a-table>
                 </template>
             </div>
         </a-modal>
+
+        <a-modal
+            title="推送历史"
+            v-if="historyVisible"
+            :visible="historyVisible"
+            :confirm-loading="causeConfirmLoading"
+            :footer="null"
+            dialog-class="cause-modal"
+            @cancel="historyVisible = false"
+        >
+            <div>
+                <div class="cause-modal-table-class">
+                    <a-table :columns="causeColumns" :data-source="historyData" bordered :pagination="false">
+                        <span slot="action" slot-scope="text, record">
+                            <a-popconfirm
+                                title="是否重新推送?"
+                                ok-text="是"
+                                cancel-text="否"
+                                @confirm="handleAgian(record)"
+                            >
+                                <a :disabled="record.result==='推送成功'">重新推送</a>
+                            </a-popconfirm>
+                            
+                        </span>
+                    </a-table>
+                </div>
+                <a-pagination
+                    class="pagin-table-class"
+                    :total="totalAllHistory"
+                    size="small"
+                    @change="handleHistorySizeChange"
+                />
+            </div>
+        </a-modal>   
     </div>
 </template>
 <script>
-import TreeSelect from './components/tree-select/tree-select';
+import TreeSelect from '@/views/modules/autoLaunch/directional/components/tree-select.vue';
 import {getAction, postAction} from '@/api/manage';
 import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
+import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
 import AppMarketService from './crowd-control-service';
 import BMF from 'browser-md5-file';
 
@@ -225,16 +253,21 @@ export default {
     name: 'crowd-control',
     components: {
         TreeSelect,
-        AcountSearch
+        AcountSearch,
+        selectTable
     },
     data() {
         let that = this;
         return {
+            src: '/kuaishouPopulationPackage/getAccountByProjectId',
+            unitAccountId: '',
             personResourceDisabled: false,
             personNameDisabled: false,
             totalAllCause: 0,
             acountId: undefined, // 搜索的账户ID
+            projectId: null,
             uploadAcountIds: '',
+            uploadProjectId: '',
             totalAll: 10,
             finallyRightTree: [],
             fileList: [],
@@ -268,63 +301,54 @@ export default {
                     dataIndex: 'orientationName'
                 },
                 {
-                    title: '人群包类型',
-                    align: 'center',
-                    dataIndex: 'populationType',
-                    customRender(t) {
-                        return t ? that.populationTypeTasks.find(item => item.label === Number(t)).value : '-';
-                    }
-                },
-                {
                     title: '匹配类型',
                     align: 'center',
                     dataIndex: 'typeStr'
                 },
                 {
-                    title: '上传时间',
+                    title: '创建时间',
                     dataIndex: 'statDate',
                     align: 'center'
                 },
                 {
-                    title: '覆盖数量',
-                    dataIndex: 'coverNum',
-                    align: 'center'
-                },
-                {
-                    title: '状态',
-                    dataIndex: 'statusStr',
-                    align: 'center'
-                },
-                {
-                    title: '原因',
-                    dataIndex: '',
+                    title: '关联项目',
+                    dataIndex: 'projectName',
                     align: 'center',
-                    scopedSlots: {customRender: 'cause'}
+                    ellipsis: true,
+                    customRender(t) {
+                        if(t) {
+                            return t
+                        }
+                        else {
+                            return '-'
+                        }
+                    }
                 },
                 {
-                    title: '目标账户',
-                    dataIndex: 'accountName',
+                    title: '相关账户',
+                    dataIndex: 'accountCount',
                     align: 'center',
-                    ellipsis: true
+                    scopedSlots: {customRender: 'acountRelax'}
                 },
                 {
-                    title: '相关项目',
-                    dataIndex: 'projectCount',
+                    title: '相关',
+                    dataIndex: 'unitCount',
                     align: 'center',
                     scopedSlots: {customRender: 'depRelax'}
                 },
                 {
-                    title: '相关账户',
-                    dataIndex: 'accountCount',
-                    align: 'center',
-                    scopedSlots: {customRender: 'acountRelax'}
-                },
-                {
                     title: '操作',
                     dataIndex: 'action',
                     align: 'center',
                     scopedSlots: {customRender: 'action'}
-                }
+                },
+                {
+                    title: '更多',
+                    dataIndex: 'actionMore',
+                    align: 'center',
+                    scopedSlots: {customRender: 'actionMore'},
+                    ellipsis: true
+                },
             ],
             personForm: {
                 name: '',
@@ -340,11 +364,45 @@ export default {
                 page: 1,
                 size: 10
             },
+            historyPag: {
+                page: 1,
+                size: 10
+            },
             tableSelectList: {},
             acountRelaxDetail: {},
-            causeDetailData: {}
+            causeDetailData: {},
+            historyData: [],
+            totalAllHistory: 0,
+            historySelectList: null,
+            historyVisible: false,
+            accountIpagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger:false,
+                pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.accountIpagination.current = current;
+                    this.accountIpagination.pageSize= pageSize;
+                    this.handleAcountRelax(this.relaxStatus  ,this.acountRelaxDetail)
+                }
+            },
         };
     },
+    watch: {
+        unitAccountId: function(n,o) {
+            if(this.relaxVisible){
+                this.handleAcountRelax(this.relaxStatus  ,this.acountRelaxDetail)
+            }
+        },
+    },
     created() {
         this.form = this.$form.createForm(this);
     },
@@ -352,6 +410,53 @@ export default {
         this.handleGetTableList({});
     },
     methods: {
+        handleAgian(val) {
+            let params = {};
+            params.id = val.id;
+            params.accountIds = [val.accountId];
+            postAction('/kuaishouPopulationPackage/push' ,params).then(res => {
+                if(res.success) {
+                    this.$message.success(res.message);
+                    this.historyVisible = false;
+                    this.handleGetTableList({});
+                }
+                else {
+                    this.$message.error(res.message);
+                }
+            })
+
+        },
+        handleHistorySizeChange(current, pageSize) {
+            this.historyPag = {
+                page: current,
+                size: pageSize
+            };
+            this.handleHistoryTableData(this.historySelectList.id);
+        },
+        handleHistory(list) {
+            this.historyVisible = true;
+            this.handleHistoryTableData(list.id);
+            this.historySelectList = list;
+        },
+        handleHistoryTableData(id) {
+            const paramsData = {
+                id: id,
+                pageNo: this.historyPag.page,
+                pageSize: this.historyPag.size,
+                status: this.resultHistory
+            };
+            getAction('/kuaishouPopulationPackage/queryPushHistory', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.historyData = result.result.list || [];
+                    this.totalAllHistory = result.result.total || 0;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
         onShowSizeChange(current, pageSize) {
             const paramsData = this.form.getFieldsValue();
             this.tablePag = {
@@ -370,13 +475,13 @@ export default {
         handleGetTableList(data) {
             const paramsData = {
                 orientationName: data.name,
-                accountId: this.acountId,
+                projectId: this.projectId,
                 status: data.status,
                 pageNo: this.tablePag.page,
                 pageSize: this.tablePag.size
             };
             this.dataSource = []
-            getAction('/kuaishouCrowdPack/queryPageList', paramsData).then(result => {
+            getAction('/kuaishouPopulationPackage/list', paramsData).then(result => {
                 if (result.code === 200) {
                     this.dataSource = result.result.list || [];
                     this.totalAll = result.result.total || 0;
@@ -394,7 +499,7 @@ export default {
                 title: '删除提示',
                 content: '确定要删除这一条吗?',
                 onOk() {
-                    getAction('/kuaishouCrowdPack/delete', {id: data.id}).then(result => {
+                    getAction('/kuaishouPopulationPackage/delete', {id: data.id}).then(result => {
                         if (result.code === 200) {
                             that.handleGetTableList({});
                             that.$message.success('删除成功');
@@ -409,19 +514,24 @@ export default {
             });
         },
         handleAcountRelaxTable() {
-            const paramsData = {
-                signature: this.acountRelaxDetail.signature,
-                accountId: this.acountRelaxDetail.accountId,
-                type: this.relaxStatus === 'dep' ? 1 : 2
-            };
-            getAction('/kuaishouCrowdPack/queryRel', paramsData).then(result => {
+            let url = this.relaxStatus === 'unit' ? '/kuaishouPopulationPackage/getRelatedGroups' : '/kuaishouPopulationPackage/getRelatedAccounts'
+            let paramsData = {};
+            paramsData.id = this.acountRelaxDetail.id;
+            paramsData.pageNo = this.accountIpagination.current;
+            paramsData.pageSize = this.accountIpagination.pageSize;
+            if(this.relaxStatus === 'unit') {
+                paramsData.accountId = this.unitAccountId;
+            }
+                
+            getAction(url, paramsData).then(result => {
                 if (result.code === 200) {
-                    if (this.relaxStatus === 'dep') {
+                    if (this.relaxStatus === 'unit') {
                         this.depData = result.result.list;
                     }
                     else if (this.relaxStatus === 'acount') {
                         this.acountData = result.result.list;
                     }
+                     this.accountIpagination.current = result.result.total;
                 }
                 else {
                     this.$message.error(result.message);
@@ -431,8 +541,8 @@ export default {
             });
         },
         handleAcountRelax(txt, recd) {
-            if (txt === 'dep') {
-                this.relaxStatus = 'dep';
+            if (txt === 'unit') {
+                this.relaxStatus = 'unit';
             }
             else if (txt === 'acount') {
                 this.relaxStatus = 'acount';
@@ -442,6 +552,7 @@ export default {
             this.relaxVisible = true;
         },
         handleRelaxCancel() {
+            this.unitAccountId = '';
             this.relaxVisible = false;
         },
         handleCause(list) {
@@ -478,22 +589,31 @@ export default {
             this.causeVisible = false;
         },
         handlePushSure() {
-            const paramsData = {
-                accountIds: this.finallyRightTree.map(item => item.key),
-                signature: this.tableSelectList.signature,
-                accountId: this.tableSelectList.accountId
-            };
-            postAction('/kuaishouCrowdPack/accountPush', paramsData).then(result => {
-                if (result.code === 200) {
-                    this.pushVisible = false;
-                    this.handleGetTableList({});
-                }
-                else {
-                    this.$message.error(result.message);
-                }
-            }).catch(error => {
-                console.log(error, 'eeeeeee');
-            });
+            if(this.finallyRightTree.length > 0) {
+                this.pushConfirmLoading = true;
+                const paramsData = {
+                    accountIds: this.finallyRightTree.map(item => item.key),
+                    id: this.tableSelectList.id
+                };
+                postAction('/kuaishouPopulationPackage/push', paramsData).then(result => {
+                    this.pushConfirmLoading = false;
+                    if (result.code === 200) {
+                        this.pushVisible = false;
+                        this.handleGetTableList({});
+                        this.$message.success('推送成功')
+                    }
+                    else {
+                        this.$message.error(result.message);
+                    }
+                }).catch(error => {
+                    this.pushConfirmLoading = false;
+                    console.log(error, 'eeeeeee');
+                });
+            }
+            else {
+                this.$message.error("请选择要推送的账户")
+            }
+           
         },
         handlePushCancel() {
             this.pushVisible = false;
@@ -506,7 +626,7 @@ export default {
             let that = this;
             return new Promise(function (resolve, reject) {
                 bmf.md5(file, (err, md5) => {
-                    getAction('/kuaishouCrowdPack/checkCrowdPackage', {signature: md5}).then(result => {
+                    getAction('kuaishouPopulationPackage/checkPopulationPackage', {signature: md5}).then(result => {
                         if (result.code === 200) {
                             that.personNameDisabled = false;
                             that.personResourceDisabled = false;
@@ -598,8 +718,10 @@ export default {
         },
         handleResetForm() {
             this.form.resetFields();
-            this.acountId = undefined;
+            this.projectId = undefined;
             this.handleGetTableList({});
+            this.$refs.selectTable.keyValue = "";
+            this.$refs.selectTable.getData()
         },
         handleUploadPerson() {
             this.personVisible = true;
@@ -607,8 +729,8 @@ export default {
         handleOk() {
             this.$refs.ruleForm.validate(valid => {
                 if (valid) {
-                    if (!this.uploadAcountIds) {
-                        this.$message.error('请选择账户');
+                    if (!this.uploadProjectId) {
+                        this.$message.error('请选择项目');
                         return;
                     }
                     if (!this.fileList.length) {
@@ -627,10 +749,10 @@ export default {
             const paramsData = {
                 type: this.personForm.resource,
                 orientationName: this.personForm.name,
-                accountId: this.uploadAcountIds,
+                projectId: this.uploadProjectId,
                 url: this.fileList[0].url
             };
-            postAction('/kuaishouCrowdPack/uploadCrowdPack', paramsData).then(result => {
+            postAction('/kuaishouPopulationPackage/add', paramsData).then(result => {
                 this.confirmLoading = false
                 if (result.code === 200) {
                     this.personVisible = false;
@@ -641,7 +763,7 @@ export default {
                     this.fileList = [];
                     this.personForm.name = '';
                     this.personForm.resource = '';
-                    this.uploadAcountIds = undefined;
+                    this.uploadProjectId = undefined;
                 }
                 else {
                     this.$message.error(result.message);
@@ -656,7 +778,7 @@ export default {
             this.personResourceDisabled = false;
             this.personNameDisabled = false;
             this.$refs.ruleForm.resetFields();
-            this.uploadAcountIds = '';
+            this.uploadProjectId = '';
             this.personForm.name = '';
             this.personForm.resource = '';
             this.fileList = [];

+ 1 - 1
vue.config.js

@@ -77,7 +77,7 @@ module.exports = {
         // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8806', //请求本地 需要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:8081', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
         //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目