|
@@ -0,0 +1,500 @@
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "crowd-control";
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div class="crowd-control-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" label="账户"
|
|
|
+ :colon="false"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-decorator="['acount']"
|
|
|
+ placeholder="请选择"
|
|
|
+ mode="multiple"
|
|
|
+ :max-tag-count="1"
|
|
|
+ :max-tag-text-length="3"
|
|
|
+ allow-clear :options="acountTasks"
|
|
|
+ show-arrow
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ class="grid-form-item grid-form-type" label="状态"
|
|
|
+ :colon="false"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-decorator="['status']"
|
|
|
+ placeholder="请选择"
|
|
|
+ mode="multiple"
|
|
|
+ :max-tag-count="1"
|
|
|
+ :max-tag-text-length="3"
|
|
|
+ allow-clear :options="statusTasks"
|
|
|
+ show-arrow
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item class="form-handle-btn">
|
|
|
+ <a-button type="default" class="resetClass" @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
|
|
|
+ rowKey="id"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :pagination="ipagination"
|
|
|
+ :loading="loading"
|
|
|
+ @change="handleTableChange"
|
|
|
+ >
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a @click="handleEdit(record)">推送</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a @click="handleDelete(record)">删除</a>
|
|
|
+ </span>
|
|
|
+ <span slot="cause" slot-scope="text, record">
|
|
|
+ <span class="cause-text-class" @click="handleCause">{{ text }}</span>
|
|
|
+ </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">
|
|
|
+ <a-radio v-for="item in resourceOption" :key="item.id" :value="item.id">{{ 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="请输入人群包名称"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="选择账户" prop="region">
|
|
|
+ <a-select v-model="personForm.region" placeholder="请选择广告账户">
|
|
|
+ <a-select-option value="shanghai">
|
|
|
+ Zone one
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="beijing">
|
|
|
+ Zone two
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="上传人群包">
|
|
|
+ <a-upload
|
|
|
+ name="file"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ >
|
|
|
+ <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"
|
|
|
+ dialogClass="push-modal"
|
|
|
+ @ok="handlePushSure"
|
|
|
+ @cancel="handlePushCancel"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="acount-title">
|
|
|
+ <div class="acount-title-left">已选人群包</div>
|
|
|
+ <div class="acount-title-right">推送平台</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-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <tree-select @applyType="handleApplyType"></tree-select>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ <a-modal
|
|
|
+ title="相关项目"
|
|
|
+ v-if="causeVisible"
|
|
|
+ :visible="causeVisible"
|
|
|
+ :confirm-loading="causeConfirmLoading"
|
|
|
+ dialogClass="cause-modal"
|
|
|
+ @ok="handleCauseSure"
|
|
|
+ @cancel="handleCauseCancel"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <a-table :columns="causeColumns" :data-source="causeData" bordered>
|
|
|
+ <template>
|
|
|
+ {{ text }}
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ <a-modal
|
|
|
+ title="相关项目"
|
|
|
+ v-if="relaxVisible"
|
|
|
+ :visible="relaxVisible"
|
|
|
+ :confirm-loading="relaxConfirmLoading"
|
|
|
+ dialogClass="relax-modal"
|
|
|
+ @ok="handleRelaxSure"
|
|
|
+ @cancel="handleRelaxCancel"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="acount-title">
|
|
|
+ <div class="acount-title-left">人群包名称</div>
|
|
|
+ <div class="acount-title-right">推送平台</div>
|
|
|
+ </div>
|
|
|
+ <div class="acount-title push-plate">
|
|
|
+ <div class="acount-title-left">目标账户</div>
|
|
|
+ <div class="acount-title-right">推送平台</div>
|
|
|
+ </div>
|
|
|
+ <template v-if="relaxStatus === 'dep'">
|
|
|
+ <a-table :columns="depColumns" :data-source="causeData" bordered>
|
|
|
+ <template>
|
|
|
+ {{ text }}
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </template>
|
|
|
+ <template v-if="relaxStatus === 'acount'">
|
|
|
+ <a-table :columns="acountColumns" :data-source="causeData" bordered>
|
|
|
+ <template>
|
|
|
+ {{ text }}
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin';
|
|
|
+import TreeSelect from './components/tree-select';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'crowd-control',
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ components: {
|
|
|
+ TreeSelect
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ resourceOption: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ value: '北京'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ value: '上海'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ fileList: [],
|
|
|
+ relaxVisible: false,
|
|
|
+ relaxConfirmLoading: false,
|
|
|
+ pushVisible: false,
|
|
|
+ pushConfirmLoading: false,
|
|
|
+ causeVisible: false,
|
|
|
+ causeConfirmLoading: false,
|
|
|
+ labelCol: { span: 4 },
|
|
|
+ wrapperCol: { span: 14 },
|
|
|
+ personVisible: false,
|
|
|
+ confirmLoading: false,
|
|
|
+ statusTasks: [],
|
|
|
+ acountTasks: [],
|
|
|
+ url: {
|
|
|
+ list: "/sys/role/list",
|
|
|
+ delete: "/sys/role/delete",
|
|
|
+ deleteBatch: "/sys/role/deleteBatch",
|
|
|
+ exportXlsUrl: "/sys/role/exportXls",
|
|
|
+ importExcelUrl: "sys/role/importExcel",
|
|
|
+ },
|
|
|
+ relaxStatus: '',
|
|
|
+ causeData: [
|
|
|
+ {
|
|
|
+ name: '1111',
|
|
|
+ age: '222',
|
|
|
+ address: '33333'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ depData: [], // table 相关项目点击数据
|
|
|
+ countData: [], // table相关账户点击数据
|
|
|
+ acountColumns: [
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: '25%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属项目',
|
|
|
+ dataIndex: 'age',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人群包数量',
|
|
|
+ dataIndex: 'address',
|
|
|
+ width: '40%'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ depColumns: [
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: '25%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户数量',
|
|
|
+ dataIndex: 'age',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人群包数量',
|
|
|
+ dataIndex: 'address',
|
|
|
+ width: '40%'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ causeColumns: [
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: '25%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户名称',
|
|
|
+ dataIndex: 'age',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '原因',
|
|
|
+ dataIndex: 'address',
|
|
|
+ width: '40%'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '人群包名称',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'roleName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人群包类型',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'roleCode'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '匹配类型',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'description'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上传时间',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '覆盖数量',
|
|
|
+ dataIndex: 'updateTime',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'updateTime1',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '原因',
|
|
|
+ dataIndex: 'roleName1',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'cause' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '目标账户',
|
|
|
+ dataIndex: 'updateTime2',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '相关项目',
|
|
|
+ dataIndex: 'roleName',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'depRelax' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '相关账户',
|
|
|
+ dataIndex: 'roleName',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'acountRelax' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ personForm: {
|
|
|
+ name: '',
|
|
|
+ region: undefined,
|
|
|
+ resource: ''
|
|
|
+ },
|
|
|
+ personRules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: 'Please input Activity name', trigger: 'blur' },
|
|
|
+ { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
|
|
|
+ resource: [
|
|
|
+ { required: true, message: 'Please select activity resource', trigger: 'change' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.form = this.$form.createForm(this);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleDelete(data) {
|
|
|
+ this.$confirm({
|
|
|
+ title: '删除提示',
|
|
|
+ content: '确定要删除这一条吗?',
|
|
|
+ onOk() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
|
|
|
+ }).catch(() => console.log('Oops errors!'));
|
|
|
+ },
|
|
|
+ onCancel() {},
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleAcountRelax(txt, recd) {
|
|
|
+ if (txt === 'dep') {
|
|
|
+ this.relaxStatus = 'dep';
|
|
|
+ }
|
|
|
+ else if (txt === 'acount') {
|
|
|
+ this.relaxStatus = 'acount';
|
|
|
+ }
|
|
|
+ this.relaxVisible = true;
|
|
|
+ },
|
|
|
+ handleRelaxCancel() {
|
|
|
+ console.log('相关项目关闭弹窗');
|
|
|
+ this.relaxVisible = false;
|
|
|
+ },
|
|
|
+ handleRelaxSure() {
|
|
|
+ console.log('相关项目确认弹窗');
|
|
|
+ },
|
|
|
+ handleCause() {
|
|
|
+ console.log('错误原因的弹窗');
|
|
|
+ this.causeVisible = true;
|
|
|
+ },
|
|
|
+ handleApplyType(list) {
|
|
|
+ console.log(list, '最后的tree-select的右侧数据');
|
|
|
+ },
|
|
|
+ handleEdit(val) {
|
|
|
+ console.log(val, 'val');
|
|
|
+ this.pushVisible = true;
|
|
|
+ },
|
|
|
+ handleCauseSure() {
|
|
|
+ console.log('错误原因确认按钮');
|
|
|
+ },
|
|
|
+ handleCauseCancel() {
|
|
|
+ console.log('错误原因取消按钮');
|
|
|
+ this.causeVisible = false;
|
|
|
+ },
|
|
|
+ handlePushSure() {
|
|
|
+ console.log('推送确认按钮');
|
|
|
+ },
|
|
|
+ handlePushCancel() {
|
|
|
+ console.log('推送取消按钮');
|
|
|
+ this.pushVisible = false;
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ this.fileList = [...this.fileList, file];
|
|
|
+ this.fileList = this.fileList.slice(-1);
|
|
|
+ console.log(this.fileList, '8888888');
|
|
|
+ const isZip = file.type.includes('zip') || file.type.includes('text');
|
|
|
+ if (!isZip) {
|
|
|
+ this.fileList = [];
|
|
|
+ this.$message.error('只能上传zip格式的文件或者txt文件 ');
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ handleQueryList(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ const paramsData = this.form.getFieldsValue();
|
|
|
+ console.log(paramsData, 'paramsData');
|
|
|
+ },
|
|
|
+ handleResetForm() {
|
|
|
+ this.form.resetFields();
|
|
|
+ },
|
|
|
+ handleUploadPerson() {
|
|
|
+ console.log('上传人群包');
|
|
|
+ this.personVisible = true;
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.personVisible = false;
|
|
|
+ },
|
|
|
+ handleOk() {
|
|
|
+ console.log('弹窗确认');
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ console.log(4444);
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!');
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ console.log('弹窗关闭');
|
|
|
+ this.personVisible = false;
|
|
|
+ this.$refs.ruleForm.resetFields();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|