|
@@ -0,0 +1,810 @@
|
|
|
|
+<style>
|
|
|
|
+#table_time_selected1 tr {
|
|
|
|
+ border: 1px solid rgb(102, 162, 243);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.plug-timer-grid th {
|
|
|
|
+ line-height: 25px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.module-form .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;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<style scoped>
|
|
|
|
+ul {
|
|
|
|
+ padding-left: 0;
|
|
|
|
+}
|
|
|
|
+li {
|
|
|
|
+ list-style: none;
|
|
|
|
+}
|
|
|
|
+li:hover {
|
|
|
|
+ background: #f2f2f2;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<template>
|
|
|
|
+ <a-form :form="formAll" class="module-form" @submit="handleSubmit">
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="定向逻辑"
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="targeted" @change="radioChange">
|
|
|
|
+ <a-radio-button value="3">排除</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <div
|
|
|
|
+ :style="{
|
|
|
|
+ border: targeted == '4' ? '1px solid #f2f2f2' : '0',
|
|
|
|
+ padding: targeted == '4' ? '20px' : '0',
|
|
|
|
+ }"
|
|
|
|
+ v-clickoutside="targetedShow"
|
|
|
|
+ >
|
|
|
|
+ <div style="display: flex; margin-top: 15px" v-if="targeted == '4' || targeted == '3'">
|
|
|
|
+ <a-input
|
|
|
|
+ placeholder="请至少选择一个自定义人群"
|
|
|
|
+ @focus="
|
|
|
|
+ topMiddleNo = true
|
|
|
|
+ topMiddle = false
|
|
|
|
+ dataList = dataElse
|
|
|
|
+ "
|
|
|
|
+ v-model="keyValueNo"
|
|
|
|
+ @change="showTwo"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ style="background: white; padding: 10px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15)"
|
|
|
|
+ :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
|
|
|
|
+ v-show="topMiddleNo"
|
|
|
|
+ >
|
|
|
|
+ <a-table
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="dataList"
|
|
|
|
+ bordered
|
|
|
|
+ :pagination="false"
|
|
|
|
+ :scroll="{ y: 300, x: true }"
|
|
|
|
+ :rowSelection="{
|
|
|
|
+ selectedRowKeys: selectedRowKeysNo,
|
|
|
|
+ onChange: onSelectChangeNo,
|
|
|
|
+ getCheckboxProps: getCheckboxPropsNo,
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
|
|
|
|
+ <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
|
|
|
|
+ <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
|
|
|
|
+ </a-table>
|
|
|
|
+ <div style="text-align: right">
|
|
|
|
+ <a-button style="margin-right: 5px" @click="topMiddleNo = false">取消</a-button>
|
|
|
|
+ <a-button type="primary" @click="okSelectNo">确定</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="地区"
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group @change="regionChange" v-model="allForm.regionType" buttonStyle="solid">
|
|
|
|
+ <a-radio-button value="noLimit">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="limit">指定地区</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <div v-if="allForm.regionType == 'limit'" style="margin-top: 10px">
|
|
|
|
+ <select-region :checkData.sync="allForm.region" :dataValue="allForm.region" />
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="年龄"
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group v-model="allForm.ageType" buttonStyle="solid">
|
|
|
|
+ <a-radio-button value="noLimit">不限</a-radio-button>
|
|
|
|
+ <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
|
|
|
|
+ <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <div v-if="allForm.ageType == 'ageLimit'" style="margin-top: 5px">
|
|
|
|
+ <a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
|
|
|
|
+ <!-- <a-checkbox :value="0">0-11岁</a-checkbox>
|
|
|
|
+ <a-checkbox :value="12">12-17岁</a-checkbox> -->
|
|
|
|
+ <a-checkbox :value="18">18-23岁</a-checkbox>
|
|
|
|
+ <a-checkbox :value="24">24-30岁</a-checkbox>
|
|
|
|
+ <a-checkbox :value="31">31-40岁</a-checkbox>
|
|
|
|
+ <a-checkbox :value="41">41-49岁</a-checkbox>
|
|
|
|
+ <a-checkbox :value="50">50+</a-checkbox>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="allForm.ageType == 'ageCustom'">
|
|
|
|
+ <a-slider
|
|
|
|
+ range
|
|
|
|
+ :marks="marks"
|
|
|
|
+ :min="5"
|
|
|
|
+ :max="55"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'age',
|
|
|
|
+ {
|
|
|
|
+ rules: [{ required: true, message: '请选择年龄段' }, { validator: handleConfirmValue }],
|
|
|
|
+ initialValue: [10, 50],
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="性别"
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group
|
|
|
|
+ buttonStyle="solid"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'gender',
|
|
|
|
+ {
|
|
|
|
+ initialValue: 0,
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <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-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="最低版本"
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group buttonStyle="solid" v-model="allForm.platform_os">
|
|
|
|
+ <a-radio-button :value="0" v-if="getApp == '0'">不限</a-radio-button>
|
|
|
|
+ <a-radio-button :value="1" v-if="getApp == '0' || getApp == '1'">Android系统</a-radio-button>
|
|
|
|
+ <a-radio-button :value="2" v-if="getApp == '0' || getApp == '2'">IOS系统</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label=" "
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
|
+ v-if="allForm.platform_os == 1"
|
|
|
|
+ class="else-label"
|
|
|
|
+ style="margin-top: -16px"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'androidOsv',
|
|
|
|
+ {
|
|
|
|
+ initialValue: 3,
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <a-radio :value="3">不限</a-radio>
|
|
|
|
+ <a-radio :value="4">4X+</a-radio>
|
|
|
|
+ <a-radio :value="5">5x+</a-radio>
|
|
|
|
+ <a-radio :value="6">6x+</a-radio>
|
|
|
|
+ <a-radio :value="7">7x+</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label=" "
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
|
+ v-if="allForm.platform_os == 2"
|
|
|
|
+ class="else-label"
|
|
|
|
+ style="margin-top: -16px"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'iosOsv',
|
|
|
|
+ {
|
|
|
|
+ initialValue: 6,
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <a-radio :value="6">不限</a-radio>
|
|
|
|
+ <a-radio :value="7">7X+</a-radio>
|
|
|
|
+ <a-radio :value="8">8x+</a-radio>
|
|
|
|
+ <a-radio :value="9">9x+</a-radio>
|
|
|
|
+ <a-radio :value="10">10x+</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="过滤已转化用户"
|
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 15 }, sm: { span: 15 } }"
|
|
|
|
+ >
|
|
|
|
+ <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
|
|
|
|
+ <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-button :value="4">公司主体</a-radio-button>
|
|
|
|
+ <a-radio-button :value="5">APP</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-form>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getAction, postAction } from '@/api/manage'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
+import jq from 'jquery'
|
|
|
|
+
|
|
|
|
+import selectRegion from './selectRegion'
|
|
|
|
+import pick from 'lodash.pick'
|
|
|
|
+let dateQuantumRangeConst = ''
|
|
|
|
+const clickoutside = {
|
|
|
|
+ // 初始化指令
|
|
|
|
+ bind(el, binding, vnode) {
|
|
|
|
+ function documentHandler(e) {
|
|
|
|
+ // 这里判断点击的元素是否是本身,是本身,则返回
|
|
|
|
+ if (el.contains(e.target)) {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ // 判断指令中是否绑定了函数
|
|
|
|
+ if (binding.expression) {
|
|
|
|
+ // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
|
|
|
|
+ binding.value(e)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
|
|
|
|
+ el.__vueClickOutside__ = documentHandler
|
|
|
|
+ document.addEventListener('click', documentHandler)
|
|
|
|
+ },
|
|
|
|
+ update() {},
|
|
|
|
+ unbind(el, binding) {
|
|
|
|
+ // 解除事件监听
|
|
|
|
+ document.removeEventListener('click', el.__vueClickOutside__)
|
|
|
|
+ delete el.__vueClickOutside__
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const columns = [
|
|
|
|
+ {
|
|
|
|
+ title: '人群',
|
|
|
|
+ dataIndex: 'orientationName',
|
|
|
|
+ scopedSlots: { customRender: 'orientationName' },
|
|
|
|
+ width: 150,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '属性',
|
|
|
|
+ dataIndex: 'populationType',
|
|
|
|
+ filters: [
|
|
|
|
+ { text: '上传人群', value: '1' },
|
|
|
|
+ { text: '广告人群', value: '2' },
|
|
|
|
+ { text: '主题专区', value: '3' },
|
|
|
|
+ { text: '逻辑规则', value: '4' },
|
|
|
|
+ { text: '人群扩展', value: '5' },
|
|
|
|
+ { text: '平台定制', value: '6' },
|
|
|
|
+ { text: '定制付费', value: '7' },
|
|
|
|
+ { text: '网红粉丝类别', value: '8' },
|
|
|
|
+ { text: '内容付费行为', value: '9' },
|
|
|
|
+ { text: '移动应用安装', value: '10' },
|
|
|
|
+ { text: '快手使用活跃度', value: '11' },
|
|
|
|
+ { text: '行业分类', value: '12' },
|
|
|
|
+ { text: '商业兴趣', value: '13' },
|
|
|
|
+ { text: '固化标签', value: '14' },
|
|
|
|
+ { text: '行业偏好', value: '15' },
|
|
|
|
+ { text: '第三方标签', value: '16' },
|
|
|
|
+ { text: '产品关键词', value: '17' },
|
|
|
|
+ ],
|
|
|
|
+ onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
|
|
|
|
+ scopedSlots: { customRender: 'populationType' },
|
|
|
|
+ width: 150,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '创建时间',
|
|
|
|
+ dataIndex: 'putTime',
|
|
|
|
+ scopedSlots: { customRender: 'putTime' },
|
|
|
|
+ sorter: (a, b) => a.putTime - b.putTime,
|
|
|
|
+ },
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'BaseForm',
|
|
|
|
+ components: { selectRegion },
|
|
|
|
+ props: {
|
|
|
|
+ campaignId: {
|
|
|
|
+ type: String,
|
|
|
|
+ default() {
|
|
|
|
+ return null
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ platform: {
|
|
|
|
+ default() {
|
|
|
|
+ return null
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ populationData: {},
|
|
|
|
+ lol: {
|
|
|
|
+ type: String,
|
|
|
|
+ default() {
|
|
|
|
+ return '1'
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ filters: {
|
|
|
|
+ getDate(value) {
|
|
|
|
+ let date = new Date(value)
|
|
|
|
+ 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
|
|
|
|
+ return y + '-' + MM + '-' + d
|
|
|
|
+ },
|
|
|
|
+ platform(str) {
|
|
|
|
+ var data = {
|
|
|
|
+ 1: 'Android应用下载',
|
|
|
|
+ 2: 'Android网页游戏',
|
|
|
|
+ 3: 'iOS应用下载',
|
|
|
|
+ 4: 'iOS网页游戏',
|
|
|
|
+ }
|
|
|
|
+ return data[str]
|
|
|
|
+ },
|
|
|
|
+ population_type(str) {
|
|
|
|
+ var data = {
|
|
|
|
+ 1: '上传人群',
|
|
|
|
+ 2: '广告人群',
|
|
|
|
+ 3: '主题专区',
|
|
|
|
+ 4: '逻辑规则',
|
|
|
|
+ 5: '人群扩展',
|
|
|
|
+ 6: '平台定制',
|
|
|
|
+ 7: '定制付费',
|
|
|
|
+ 8: '网红粉丝类别',
|
|
|
|
+ 9: '内容付费行为',
|
|
|
|
+ 10: '移动应用安装',
|
|
|
|
+ 11: '快手使用活跃度',
|
|
|
|
+ 12: '行业分类',
|
|
|
|
+ 13: '商业兴趣',
|
|
|
|
+ 14: '固化标签',
|
|
|
|
+ 15: '行业偏好',
|
|
|
|
+ 16: '第三方标签',
|
|
|
|
+ 17: '产品关键词',
|
|
|
|
+ }
|
|
|
|
+ return data[str]
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ platform(n, o) {
|
|
|
|
+ if (n == 1 || n == 2) {
|
|
|
|
+ // platform_os
|
|
|
|
+ this.allForm.platform_os = 1
|
|
|
|
+ // this.form.setFieldsValue({ platform_os: '1' })
|
|
|
|
+ } else if (n == 3 || n == 4) {
|
|
|
|
+ this.allForm.platform_os = 2
|
|
|
|
+ // this.form.setFieldsValue({ platform_os: '2' })
|
|
|
|
+ } else {
|
|
|
|
+ this.allForm.platform_os = 0
|
|
|
|
+ // this.form.setFieldsValue({ platform_os: '0' })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ populationData: {
|
|
|
|
+ immediate: true, // immediate选项可以开启首次赋值监听
|
|
|
|
+ handler(n, oldVal) {
|
|
|
|
+ console.log(n)
|
|
|
|
+ if (n.allForm) {
|
|
|
|
+ this.allForm = n.allForm
|
|
|
|
+ this.allForm.noAgeBreak = n.noAgeBreak == '0' ? false : true
|
|
|
|
+ this.allForm.noGenderBreak = n.noGenderBreak == '0' ? false : true
|
|
|
|
+ this.allForm.noAreaBreak = n.noAreaBreak == '0' ? false : true
|
|
|
|
+ // this.selectedRowKeys = n.population ? n.population : []
|
|
|
|
+ this.selectedRowKeysNo = n.excludePopulation ? n.excludePopulation : []
|
|
|
|
+ this.optionsAll = n.appIds ? (typeof n.appIds == 'string' ? JSON.parse(n.appIds) : n.appIds) : []
|
|
|
|
+ this.targeted = '3'
|
|
|
|
+ this.people = n.excludePopulation ? '3' : n.population ? '3' : '2'
|
|
|
|
+ this.getPeople().then((res) => {
|
|
|
|
+ if (n.excludePopulation) {
|
|
|
|
+ this.keyValueNo = ''
|
|
|
|
+ this.selectedRowKeysValueNo = []
|
|
|
|
+ for (let i = 0; i < res.length; i++) {
|
|
|
|
+ for (let j = 0; j < n.excludePopulation.length; j++) {
|
|
|
|
+ if (res[i].orientationId == n.excludePopulation[j]) {
|
|
|
|
+ this.keyValueNo += res[i].orientationName + ' '
|
|
|
|
+ this.selectedRowKeysValueNo.push({
|
|
|
|
+ orientationId: res[i].orientationId,
|
|
|
|
+ orientationName: res[i].orientationName,
|
|
|
|
+ })
|
|
|
|
+ this.selectedRowKeysNo.push()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (n.population) {
|
|
|
|
+ this.keyValue = ''
|
|
|
|
+ this.selectedRowKeysValue = []
|
|
|
|
+ for (let i = 0; i < res.length; i++) {
|
|
|
|
+ for (let j = 0; j < n.population.length; j++) {
|
|
|
|
+ if (res[i].orientationId == n.population[j]) {
|
|
|
|
+ this.keyValue += res[i].orientationName + ' '
|
|
|
|
+ this.selectedRowKeysValue.push({
|
|
|
|
+ orientationId: res[i].orientationId,
|
|
|
|
+ orientationName: res[i].orientationName,
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.formAll.setFieldsValue(
|
|
|
|
+ pick(n, [
|
|
|
|
+ 'appInterest',
|
|
|
|
+ 'gender',
|
|
|
|
+ 'network',
|
|
|
|
+ 'agesRange',
|
|
|
|
+ 'age',
|
|
|
|
+ 'androidOsv',
|
|
|
|
+ 'iosOsv',
|
|
|
|
+ 'deviceBrand',
|
|
|
|
+ 'devicePrice',
|
|
|
|
+ 'filterConvertedLevel',
|
|
|
|
+ ])
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.formAll.resetFields()
|
|
|
|
+ this.selectedRowKeys = []
|
|
|
|
+ this.selectedRowKeysNo = []
|
|
|
|
+ this.selectedRowKeysValueNo = []
|
|
|
|
+ this.selectedRowKeysValue = []
|
|
|
|
+ this.targeted = '2'
|
|
|
|
+ this.people = '2'
|
|
|
|
+ this.allForm = {
|
|
|
|
+ regionType: 'noLimit',
|
|
|
|
+ region: [],
|
|
|
|
+ ageType: 'noLimit',
|
|
|
|
+ age: [],
|
|
|
|
+ device: '0',
|
|
|
|
+ price: '0',
|
|
|
|
+ appType: '0',
|
|
|
|
+ platform_os: 0,
|
|
|
|
+ isOpen: 0,
|
|
|
|
+ noAgeBreak: false,
|
|
|
|
+ noGenderBreak: false,
|
|
|
|
+ noAreaBreak: false,
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ checkArr(n, o) {
|
|
|
|
+ console.log(n, o)
|
|
|
|
+ this.optionsAll.push(...n)
|
|
|
|
+ this.optionsAll = [...new Set(this.optionsAll)]
|
|
|
|
+ if (n.length != o.length) {
|
|
|
|
+ if (n.length < o.length) {
|
|
|
|
+ var a = new Set(n)
|
|
|
|
+ var b = new Set(o)
|
|
|
|
+ var c = new Set([...b].filter((item) => !a.has(item))) // {1}
|
|
|
|
+ console.log(...c)
|
|
|
|
+ var d = this.optionsAll.indexOf(...c)
|
|
|
|
+ if (d > 0) {
|
|
|
|
+ this.optionsAll.splice(d, 1)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'allForm.isOpen': function (n, o) {
|
|
|
|
+ console.log(n, o)
|
|
|
|
+ if (n == 0) {
|
|
|
|
+ this.allForm.noAgeBreak = false
|
|
|
|
+ this.allForm.noGenderBreak = false
|
|
|
|
+ this.allForm.noAreaBreak = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ directives: { clickoutside },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ optionsAll: [],
|
|
|
|
+ formAll: this.$form.createForm(this),
|
|
|
|
+ marks: {
|
|
|
|
+ 5: '5岁',
|
|
|
|
+ 10: '10岁',
|
|
|
|
+ 15: '15岁',
|
|
|
|
+ 20: '20岁',
|
|
|
|
+ 25: '25岁',
|
|
|
|
+ 30: '30岁',
|
|
|
|
+ 35: '35岁',
|
|
|
|
+ 40: '40岁',
|
|
|
|
+ 45: '45岁',
|
|
|
|
+ 50: '50岁',
|
|
|
|
+ 55: '55岁',
|
|
|
|
+ },
|
|
|
|
+ step: 0,
|
|
|
|
+ loading: false,
|
|
|
|
+ checkArr: [],
|
|
|
|
+ appListValue: '',
|
|
|
|
+ checkAll: false,
|
|
|
|
+ allForm: {
|
|
|
|
+ regionType: 'noLimit',
|
|
|
|
+ region: [],
|
|
|
|
+ ageType: 'noLimit',
|
|
|
|
+ age: [],
|
|
|
|
+ device: '0',
|
|
|
|
+ price: '0',
|
|
|
|
+ appType: '0',
|
|
|
|
+ platform_os: 0,
|
|
|
|
+ isOpen: 0,
|
|
|
|
+ noAgeBreak: false,
|
|
|
|
+ noGenderBreak: false,
|
|
|
|
+ noAreaBreak: false,
|
|
|
|
+ people: '2',
|
|
|
|
+ targeted: '3',
|
|
|
|
+ topMiddle: false,
|
|
|
|
+ topMiddleNo: false,
|
|
|
|
+ keyValue: '',
|
|
|
|
+ keyValueNo: '',
|
|
|
|
+ },
|
|
|
|
+ options: [],
|
|
|
|
+ optionsAll: [],
|
|
|
|
+ optionProps: {
|
|
|
|
+ value: 'regionId',
|
|
|
|
+ label: 'name',
|
|
|
|
+ children: 'children',
|
|
|
|
+ multiple: true,
|
|
|
|
+ emitPath: false,
|
|
|
|
+ // checkStrictly: true
|
|
|
|
+ },
|
|
|
|
+ checkOptions: [],
|
|
|
|
+ businessOptions: [],
|
|
|
|
+ optionPropsApp: {
|
|
|
|
+ value: 'tagId',
|
|
|
|
+ label: 'tagName',
|
|
|
|
+ children: 'children',
|
|
|
|
+ multiple: true,
|
|
|
|
+ emitPath: false,
|
|
|
|
+ },
|
|
|
|
+ getApp: '0',
|
|
|
|
+ closeDialog: false,
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: false,
|
|
|
|
+ people: '2',
|
|
|
|
+ targeted: '3',
|
|
|
|
+ topMiddle: false,
|
|
|
|
+ topMiddleNo: false,
|
|
|
|
+ keyValue: '',
|
|
|
|
+ keyValueNo: '',
|
|
|
|
+ columns,
|
|
|
|
+ selectedRowKeys: [],
|
|
|
|
+ selectedRowKeysValue: [],
|
|
|
|
+ selectedRowKeysNo: [],
|
|
|
|
+ selectedRowKeysValueNo: [],
|
|
|
|
+ dataList: [],
|
|
|
|
+ dataElse: [],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ methods: {
|
|
|
|
+ getPeople() {
|
|
|
|
+ var data = ''
|
|
|
|
+ if (this.$route.path == '/creat/creatUnit') {
|
|
|
|
+ data = localStorage.getItem('campaignAccountId')
|
|
|
|
+ } else {
|
|
|
|
+ data = localStorage.getItem('accountId')
|
|
|
|
+ }
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ getAction('/kuaishou/batch/getPopulationList', { accountId: data }).then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ if (res.result) {
|
|
|
|
+ this.dataList = res.result.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ key: index,
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.dataElse = this.dataList
|
|
|
|
+ resolve(res.result)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ radioChange() {
|
|
|
|
+ this.selectedRowKeys = []
|
|
|
|
+ this.selectedRowKeysValue = []
|
|
|
|
+ this.selectedRowKeysNo = []
|
|
|
|
+ this.selectedRowKeysValueNo = []
|
|
|
|
+ this.keyValue = ''
|
|
|
|
+ this.keyValueNo = ''
|
|
|
|
+ },
|
|
|
|
+ onSelectChangeNo(selectedRowKeys, selectionRows) {
|
|
|
|
+ this.selectedRowKeysNo = selectedRowKeys
|
|
|
|
+ this.selectedRowKeysValueNo = selectionRows.map((item) => {
|
|
|
|
+ return { orientationId: item.orientationId, orientationName: item.orientationName }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getCheckboxPropsNo(record) {
|
|
|
|
+ return {
|
|
|
|
+ props: {
|
|
|
|
+ disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ okSelect() {
|
|
|
|
+ this.keyValue = ''
|
|
|
|
+ this.topMiddle = false
|
|
|
|
+ for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
|
|
|
|
+ this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ showTwo() {
|
|
|
|
+ // this.keyValueNo =orientationName
|
|
|
|
+ var data = this.keyValueNo.split(' ')
|
|
|
|
+ this.dataList = this.dataElse.filter((item) => {
|
|
|
|
+ return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getRegion(data) {
|
|
|
|
+ this.$refs.cascaderRegion.getCheckedNodes()
|
|
|
|
+ var dataName = this.$refs.cascaderRegion.getCheckedNodes()
|
|
|
|
+ var jsonArr = data
|
|
|
|
+ for (let i = 0; i < dataName.length; i++) {
|
|
|
|
+ for (let j = 0; j < data.length; j++) {
|
|
|
|
+ if (dataName[i].children.length > 0) {
|
|
|
|
+ if (data[j].substring(0, 2) == dataName[i].value) {
|
|
|
|
+ jsonArr.splice(j, 1)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleClose(e) {
|
|
|
|
+ this.closeDialog = false
|
|
|
|
+ },
|
|
|
|
+ targetedShow(e) {
|
|
|
|
+ this.topMiddleNo = false
|
|
|
|
+ },
|
|
|
|
+ handleSubmit() {
|
|
|
|
+ // e.preventDefault()
|
|
|
|
+ this.formAll.validateFields((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ // this.checkArr
|
|
|
|
+ if (values.age) {
|
|
|
|
+ values.min = values.age[0]
|
|
|
|
+ values.max = values.age[1]
|
|
|
|
+ }
|
|
|
|
+ var json = {}
|
|
|
|
+ if (this.allForm.appType == '2') {
|
|
|
|
+ json.appIds = this.optionsAll
|
|
|
|
+ }
|
|
|
|
+ if (this.allForm.regionType == 'limit') {
|
|
|
|
+ json.region = this.allForm.region.map((item) => {
|
|
|
|
+ return item.value
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ var jsonData = {}
|
|
|
|
+ if (this.people == '3') {
|
|
|
|
+ if (this.targeted == '2') {
|
|
|
|
+ jsonData.population = this.selectedRowKeysValue.map((item) => {
|
|
|
|
+ return item.orientationId
|
|
|
|
+ })
|
|
|
|
+ } else if (this.targeted == '3') {
|
|
|
|
+ jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
|
|
|
|
+ return item.orientationId
|
|
|
|
+ })
|
|
|
|
+ } else if (this.targeted == '4') {
|
|
|
|
+ jsonData.population = this.selectedRowKeysValue.map((item) => {
|
|
|
|
+ return item.orientationId
|
|
|
|
+ })
|
|
|
|
+ jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
|
|
|
|
+ return item.orientationId
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ jsonData = {}
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ var dataJson = {
|
|
|
|
+ ...values,
|
|
|
|
+ platformOs: this.allForm.platform_os,
|
|
|
|
+ isOpen: this.allForm.isOpen,
|
|
|
|
+ ...json,
|
|
|
|
+ noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
|
|
|
|
+ noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
|
|
|
|
+ noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
|
|
|
|
+ allForm: this.allForm,
|
|
|
|
+ ...jsonData,
|
|
|
|
+ }
|
|
|
|
+ this.$emit('update:populationData', dataJson)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
|
+ if (Math.abs(value[0] - value[1]) < 5) {
|
|
|
|
+ callback('自定义年龄段需要间隔大于5岁')
|
|
|
|
+ }
|
|
|
|
+ callback()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ regionChange() {
|
|
|
|
+ this.allForm.region = []
|
|
|
|
+ },
|
|
|
|
+ search(e) {},
|
|
|
|
+ // put() {
|
|
|
|
+ // var data = this.allForm.region.map((item) => {
|
|
|
|
+ // return item[1] + ''
|
|
|
|
+ // })
|
|
|
|
+ // var dataElse = data.map((item) => {
|
|
|
|
+ // return [item.substring(0, 2), item]
|
|
|
|
+ // })
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ filterOption(input, option) {
|
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
+ },
|
|
|
|
+ getData(className) {
|
|
|
|
+ return this.formAll.getFieldValue(className)
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ mounted: function () {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style type="text/css">
|
|
|
|
+.plug-timer-grid {
|
|
|
|
+ width: 100%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.plug-timer-grid td,
|
|
|
|
+.plug-timer-grid th {
|
|
|
|
+ border: 1px solid #97b4d1;
|
|
|
|
+ text-align: center; /*cursor:pointer;*/
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ line-height: 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.Selected {
|
|
|
|
+ background-color: rgb(102, 162, 243);
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.plug-timer-grid {
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ z-index: 4;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.plug-timer-grid thead tr {
|
|
|
|
+ display: table-row;
|
|
|
|
+ vertical-align: inherit;
|
|
|
|
+ border-color: inherit;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.group-creat table td {
|
|
|
|
+ height: 20px;
|
|
|
|
+ max-width: 5px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ transition: background 0.5s;
|
|
|
|
+ -webkit-transition: background 0.5s;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.plug-timer-grid tbody th {
|
|
|
|
+ width: 4%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.plug-timer-grid tbody tr td {
|
|
|
|
+ width: 2%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/*.clear{*/
|
|
|
|
+/* margin:20px 0px 20px 0px;*/
|
|
|
|
+/*}*/
|
|
|
|
+</style>
|