123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500 |
- <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>
|