|
@@ -37,6 +37,112 @@ li:hover {
|
|
<template>
|
|
<template>
|
|
<a-form :form="form" class="module-form" @submit="handleSubmit">
|
|
<a-form :form="form" class="module-form" @submit="handleSubmit">
|
|
<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="people" @change="getPeople">
|
|
|
|
+ <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-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ v-if="people == '3'"
|
|
|
|
+ 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="2">定向</a-radio-button>
|
|
|
|
+ <a-radio-button value="3">排除</a-radio-button>
|
|
|
|
+ <a-radio-button value="4">同时定向排除</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ <div
|
|
|
|
+ :style="{
|
|
|
|
+ border: targeted == '4' ? '1px solid #f2f2f2' : '0',
|
|
|
|
+ padding: targeted == '4' ? '20px' : '0'
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <div style="display:flex;margin-top:15px" v-if="targeted == '4' || targeted == '2'">
|
|
|
|
+ <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">定向池:</span>
|
|
|
|
+ <a-input
|
|
|
|
+ placeholder="请至少选择一个自定义人群"
|
|
|
|
+ @focus="
|
|
|
|
+ topMiddle = true
|
|
|
|
+ topMiddleNo = false
|
|
|
|
+ "
|
|
|
|
+ v-model="keyValue"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
|
|
|
|
+ :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
|
|
|
|
+ v-show="topMiddle"
|
|
|
|
+ >
|
|
|
|
+ <a-table
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="dataList"
|
|
|
|
+ bordered
|
|
|
|
+ :pagination="false"
|
|
|
|
+ :scroll="{ y: 300 }"
|
|
|
|
+ :rowSelection="{
|
|
|
|
+ selectedRowKeys: selectedRowKeys,
|
|
|
|
+ onChange: onSelectChange,
|
|
|
|
+ getCheckboxProps: getCheckboxProps
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
|
|
|
|
+ <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
|
|
|
|
+ <span slot="createTime" slot-scope="text">{{ text | getDate }}</span>
|
|
|
|
+ </a-table>
|
|
|
|
+ <div style="text-align:right">
|
|
|
|
+ <a-button style="margin-right:5px" @click="topMiddle = false">取消</a-button>
|
|
|
|
+ <a-button type="primary" @click="okSelect">确定</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="display:flex;margin-top:15px" v-if="targeted == '4' || targeted == '3'">
|
|
|
|
+ <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">排除池:</span>
|
|
|
|
+ <a-input
|
|
|
|
+ placeholder="请至少选择一个自定义人群"
|
|
|
|
+ @focus="
|
|
|
|
+ topMiddleNo = true
|
|
|
|
+ topMiddle = false
|
|
|
|
+ "
|
|
|
|
+ v-model="keyValueNo"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(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 }"
|
|
|
|
+ :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="createTime" 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="地区"
|
|
label="地区"
|
|
:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
|
|
@@ -73,13 +179,13 @@ li:hover {
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
<div v-if="allForm.ageType == 'ageLimit'">
|
|
<div v-if="allForm.ageType == 'ageLimit'">
|
|
<a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
|
|
<a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
|
|
- <a-checkbox value="0">0-11岁</a-checkbox>
|
|
|
|
- <a-checkbox value="12">12-27岁</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 :value="0">0-11岁</a-checkbox>
|
|
|
|
+ <a-checkbox :value="12">12-27岁</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>
|
|
</a-checkbox-group>
|
|
</div>
|
|
</div>
|
|
<div v-if="allForm.ageType == 'ageCustom'">
|
|
<div v-if="allForm.ageType == 'ageCustom'">
|
|
@@ -108,13 +214,13 @@ li:hover {
|
|
v-decorator="[
|
|
v-decorator="[
|
|
'gender',
|
|
'gender',
|
|
{
|
|
{
|
|
- initialValue: '0'
|
|
|
|
|
|
+ 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="0">不限</a-radio-button>
|
|
|
|
+ <a-radio-button :value="1">女性</a-radio-button>
|
|
|
|
+ <a-radio-button :value="2">男性</a-radio-button>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item
|
|
<a-form-item
|
|
@@ -139,15 +245,15 @@ li:hover {
|
|
v-decorator="[
|
|
v-decorator="[
|
|
'androidOsv',
|
|
'androidOsv',
|
|
{
|
|
{
|
|
- initialValue: '3'
|
|
|
|
|
|
+ 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 :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-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item
|
|
<a-form-item
|
|
@@ -161,15 +267,15 @@ li:hover {
|
|
v-decorator="[
|
|
v-decorator="[
|
|
'iosOsv',
|
|
'iosOsv',
|
|
{
|
|
{
|
|
- initialValue: '6'
|
|
|
|
|
|
+ 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 :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-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item
|
|
<a-form-item
|
|
@@ -187,17 +293,17 @@ li:hover {
|
|
v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
|
|
v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
|
|
style="width:120%"
|
|
style="width:120%"
|
|
>
|
|
>
|
|
- <a-checkbox value="1">OPPO</a-checkbox>
|
|
|
|
- <a-checkbox value="2">VIVO</a-checkbox>
|
|
|
|
- <a-checkbox value="3">华为</a-checkbox>
|
|
|
|
- <a-checkbox value="4">小米</a-checkbox>
|
|
|
|
- <a-checkbox value="5">荣耀</a-checkbox>
|
|
|
|
- <a-checkbox value="6">三星</a-checkbox>
|
|
|
|
- <a-checkbox value="7">金立</a-checkbox>
|
|
|
|
- <a-checkbox value="8">魅族</a-checkbox>
|
|
|
|
- <a-checkbox value="9">乐视</a-checkbox>
|
|
|
|
- <a-checkbox value="10">其他</a-checkbox>
|
|
|
|
- <a-checkbox value="11" v-if="allForm.platform_os == '0'">苹果</a-checkbox>
|
|
|
|
|
|
+ <a-checkbox :value="1">OPPO</a-checkbox>
|
|
|
|
+ <a-checkbox :value="2">VIVO</a-checkbox>
|
|
|
|
+ <a-checkbox :value="3">华为</a-checkbox>
|
|
|
|
+ <a-checkbox :value="4">小米</a-checkbox>
|
|
|
|
+ <a-checkbox :value="5">荣耀</a-checkbox>
|
|
|
|
+ <a-checkbox :value="6">三星</a-checkbox>
|
|
|
|
+ <a-checkbox :value="7">金立</a-checkbox>
|
|
|
|
+ <a-checkbox :value="8">魅族</a-checkbox>
|
|
|
|
+ <a-checkbox :value="9">乐视</a-checkbox>
|
|
|
|
+ <a-checkbox :value="10">其他</a-checkbox>
|
|
|
|
+ <a-checkbox :value="11" v-if="allForm.platform_os == '0'">苹果</a-checkbox>
|
|
</a-checkbox-group>
|
|
</a-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -215,16 +321,16 @@ li:hover {
|
|
v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
|
|
v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
|
|
style="width:120%"
|
|
style="width:120%"
|
|
>
|
|
>
|
|
- <a-checkbox value="1">1500以下</a-checkbox>
|
|
|
|
- <a-checkbox value="2">1501~2000</a-checkbox>
|
|
|
|
- <a-checkbox value="3">2001~2500</a-checkbox>
|
|
|
|
- <a-checkbox value="4">2501~3000</a-checkbox>
|
|
|
|
- <a-checkbox value="5">3001~3500</a-checkbox>
|
|
|
|
- <a-checkbox value="6">3501~4000</a-checkbox>
|
|
|
|
- <a-checkbox value="7">4001~4500</a-checkbox>
|
|
|
|
- <a-checkbox value="8">4501~5000</a-checkbox>
|
|
|
|
- <a-checkbox value="9">5001~5500</a-checkbox>
|
|
|
|
- <a-checkbox value="10">5500以上</a-checkbox>
|
|
|
|
|
|
+ <a-checkbox :value="1">1500以下</a-checkbox>
|
|
|
|
+ <a-checkbox :value="2">1501~2000</a-checkbox>
|
|
|
|
+ <a-checkbox :value="3">2001~2500</a-checkbox>
|
|
|
|
+ <a-checkbox :value="4">2501~3000</a-checkbox>
|
|
|
|
+ <a-checkbox :value="5">3001~3500</a-checkbox>
|
|
|
|
+ <a-checkbox :value="6">3501~4000</a-checkbox>
|
|
|
|
+ <a-checkbox :value="7">4001~4500</a-checkbox>
|
|
|
|
+ <a-checkbox :value="8">4501~5000</a-checkbox>
|
|
|
|
+ <a-checkbox :value="9">5001~5500</a-checkbox>
|
|
|
|
+ <a-checkbox :value="10">5500以上</a-checkbox>
|
|
</a-checkbox-group>
|
|
</a-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -344,13 +450,13 @@ li:hover {
|
|
v-decorator="[
|
|
v-decorator="[
|
|
'network',
|
|
'network',
|
|
{
|
|
{
|
|
- initialValue: '0'
|
|
|
|
|
|
+ initialValue: 0
|
|
}
|
|
}
|
|
]"
|
|
]"
|
|
>
|
|
>
|
|
- <a-radio-button value="0">不限</a-radio-button>
|
|
|
|
- <a-radio-button value="1">Wi-Fi</a-radio-button>
|
|
|
|
- <a-radio-button value="2">移动网络</a-radio-button>
|
|
|
|
|
|
+ <a-radio-button :value="0">不限</a-radio-button>
|
|
|
|
+ <a-radio-button :value="1">Wi-Fi</a-radio-button>
|
|
|
|
+ <a-radio-button :value="2">移动网络</a-radio-button>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
@@ -487,6 +593,51 @@ const clickoutside = {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+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: 'createTime',
|
|
|
|
+ scopedSlots: { customRender: 'createTime' },
|
|
|
|
+ sorter: (a, b) => a.createTime - b.createTime
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
name: 'BaseForm',
|
|
name: 'BaseForm',
|
|
components: { selectRegion },
|
|
components: { selectRegion },
|
|
@@ -504,6 +655,48 @@ export default {
|
|
},
|
|
},
|
|
populationData: {}
|
|
populationData: {}
|
|
},
|
|
},
|
|
|
|
+ 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: {
|
|
watch: {
|
|
platform(n, o) {
|
|
platform(n, o) {
|
|
console.log(n, o)
|
|
console.log(n, o)
|
|
@@ -519,53 +712,96 @@ export default {
|
|
// this.form.setFieldsValue({ platform_os: '0' })
|
|
// this.form.setFieldsValue({ platform_os: '0' })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- populationData(n, o) {
|
|
|
|
- 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.$nextTick(() => {
|
|
|
|
- this.form.setFieldsValue(
|
|
|
|
- pick(n, [
|
|
|
|
- 'businessInterestType',
|
|
|
|
- 'fansStar',
|
|
|
|
- 'interestVideo',
|
|
|
|
- 'appInterest',
|
|
|
|
- 'gender',
|
|
|
|
- 'network',
|
|
|
|
- 'agesRange',
|
|
|
|
- 'androidOsv',
|
|
|
|
- 'iosOsv',
|
|
|
|
- 'deviceBrand',
|
|
|
|
- 'devicePrice',
|
|
|
|
- 'businessInterest'
|
|
|
|
- ])
|
|
|
|
- )
|
|
|
|
- // }, 100)
|
|
|
|
- // setTimeout(() => {
|
|
|
|
- // console.log(this.populationData)
|
|
|
|
- // this.form.setFieldsValue(pick(this.populationData, ['app_interest', 'business_interest']))
|
|
|
|
- // }, 100)
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- this.form.resetFields()
|
|
|
|
- this.allForm = {
|
|
|
|
- regionType: 'noLimit',
|
|
|
|
- region: [],
|
|
|
|
- ageType: 'noLimit',
|
|
|
|
- age: [],
|
|
|
|
- device: '0',
|
|
|
|
- price: '0',
|
|
|
|
- appType: '0',
|
|
|
|
- fansStar: '0',
|
|
|
|
- interestVideo: '0',
|
|
|
|
- platform_os: '0',
|
|
|
|
- businessInterestType: '0',
|
|
|
|
- isOpen: '0',
|
|
|
|
- noAgeBreak: false,
|
|
|
|
- noGenderBreak: false,
|
|
|
|
- noAreaBreak: false
|
|
|
|
|
|
+ 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.targeted = n.excludePopulation ? (n.population ? '4' : '3') : '2'
|
|
|
|
+ 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.form.setFieldsValue(
|
|
|
|
+ pick(n, [
|
|
|
|
+ 'fansStar',
|
|
|
|
+ 'interestVideo',
|
|
|
|
+ 'appInterest',
|
|
|
|
+ 'gender',
|
|
|
|
+ 'network',
|
|
|
|
+ 'agesRange',
|
|
|
|
+ 'androidOsv',
|
|
|
|
+ 'iosOsv',
|
|
|
|
+ 'deviceBrand',
|
|
|
|
+ 'devicePrice',
|
|
|
|
+ 'businessInterest'
|
|
|
|
+ ])
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.form.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',
|
|
|
|
+ fansStar: '0',
|
|
|
|
+ interestVideo: '0',
|
|
|
|
+ platform_os: '0',
|
|
|
|
+ businessInterestType: '0',
|
|
|
|
+ isOpen: '0',
|
|
|
|
+ noAgeBreak: false,
|
|
|
|
+ noGenderBreak: false,
|
|
|
|
+ noAreaBreak: false
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -606,7 +842,13 @@ export default {
|
|
isOpen: '0',
|
|
isOpen: '0',
|
|
noAgeBreak: false,
|
|
noAgeBreak: false,
|
|
noGenderBreak: false,
|
|
noGenderBreak: false,
|
|
- noAreaBreak: false
|
|
|
|
|
|
+ noAreaBreak: false,
|
|
|
|
+ people: '2',
|
|
|
|
+ targeted: '2',
|
|
|
|
+ topMiddle: false,
|
|
|
|
+ topMiddleNo: false,
|
|
|
|
+ keyValue: '',
|
|
|
|
+ keyValueNo: ''
|
|
},
|
|
},
|
|
options: [],
|
|
options: [],
|
|
optionsAll: [],
|
|
optionsAll: [],
|
|
@@ -634,11 +876,90 @@ export default {
|
|
getApp: '0',
|
|
getApp: '0',
|
|
closeDialog: false,
|
|
closeDialog: false,
|
|
indeterminate: false,
|
|
indeterminate: false,
|
|
- checkAll: false
|
|
|
|
|
|
+ checkAll: false,
|
|
|
|
+ people: '2',
|
|
|
|
+ targeted: '2',
|
|
|
|
+ topMiddle: false,
|
|
|
|
+ topMiddleNo: false,
|
|
|
|
+ keyValue: '',
|
|
|
|
+ keyValueNo: '',
|
|
|
|
+ columns,
|
|
|
|
+ selectedRowKeys: [],
|
|
|
|
+ selectedRowKeysValue: [],
|
|
|
|
+ selectedRowKeysNo: [],
|
|
|
|
+ selectedRowKeysValueNo: [],
|
|
|
|
+ dataList: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
computed: {},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ getPeople() {
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.dataList = res.result.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ key: index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ resolve(res.result)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ radioChange() {
|
|
|
|
+ this.selectedRowKeys = []
|
|
|
|
+ this.selectedRowKeysValue = []
|
|
|
|
+ this.selectedRowKeysNo = []
|
|
|
|
+ this.selectedRowKeysValueNo = []
|
|
|
|
+ this.keyValue = ''
|
|
|
|
+ this.keyValueNo = ''
|
|
|
|
+ },
|
|
|
|
+ onSelectChange(selectedRowKeys, selectionRows) {
|
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
|
+ console.log(selectionRows)
|
|
|
|
+ this.selectedRowKeysValue = selectionRows.map(item => {
|
|
|
|
+ return { orientationId: item.orientationId, orientationName: item.orientationName }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getCheckboxProps(record) {
|
|
|
|
+ return {
|
|
|
|
+ props: {
|
|
|
|
+ disabled: this.selectedRowKeysValueNo.some(item => item.orientationId === record.orientationId)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onSelectChangeNo(selectedRowKeys, selectionRows) {
|
|
|
|
+ this.selectedRowKeysNo = selectedRowKeys
|
|
|
|
+ console.log(selectionRows)
|
|
|
|
+ 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 + ' '
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ okSelectNo() {
|
|
|
|
+ this.keyValueNo = ''
|
|
|
|
+ this.topMiddleNo = false
|
|
|
|
+ for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
|
|
|
|
+ this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + ' '
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
getAge(e) {
|
|
getAge(e) {
|
|
this.allForm.noAgeBreak = e.target.checked
|
|
this.allForm.noAgeBreak = e.target.checked
|
|
},
|
|
},
|
|
@@ -726,6 +1047,7 @@ export default {
|
|
},
|
|
},
|
|
handleSubmit() {
|
|
handleSubmit() {
|
|
// e.preventDefault()
|
|
// e.preventDefault()
|
|
|
|
+ console.log(this.selectedRowKeysValue)
|
|
this.form.validateFields((err, values) => {
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
if (!err) {
|
|
console.log('Received values of form: ', values)
|
|
console.log('Received values of form: ', values)
|
|
@@ -739,6 +1061,25 @@ export default {
|
|
return item.value
|
|
return item.value
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+ var jsonData = {}
|
|
|
|
+ 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 = {
|
|
var dataJson = {
|
|
...values,
|
|
...values,
|
|
platformOs: this.allForm.platform_os,
|
|
platformOs: this.allForm.platform_os,
|
|
@@ -748,7 +1089,8 @@ export default {
|
|
noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
|
|
noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
|
|
noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
|
|
noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
|
|
noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
|
|
noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
|
|
- allForm: this.allForm
|
|
|
|
|
|
+ allForm: this.allForm,
|
|
|
|
+ ...jsonData
|
|
}
|
|
}
|
|
console.log(dataJson)
|
|
console.log(dataJson)
|
|
this.$emit('update:populationData', dataJson)
|
|
this.$emit('update:populationData', dataJson)
|
|
@@ -854,44 +1196,80 @@ export default {
|
|
return this.form.getFieldValue(className)
|
|
return this.form.getFieldValue(className)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
mounted: function() {
|
|
mounted: function() {
|
|
this.getDataType('APP_INTEREST', 'optionsAppActive')
|
|
this.getDataType('APP_INTEREST', 'optionsAppActive')
|
|
this.getDataType('BUSINESS_INTEREST', 'businessOptions')
|
|
this.getDataType('BUSINESS_INTEREST', 'businessOptions')
|
|
this.getDataType('FANS_STAR', 'fansStarOptions')
|
|
this.getDataType('FANS_STAR', 'fansStarOptions')
|
|
this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
|
|
this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
|
|
- if (this.populationData.allForm) {
|
|
|
|
- this.allForm = this.populationData.allForm
|
|
|
|
- this.allForm.noAgeBreak = this.allForm.noAgeBreak == '0' ? false : true
|
|
|
|
- this.allForm.noGenderBreak = this.allForm.noGenderBreak == '0' ? false : true
|
|
|
|
- this.allForm.noAreaBreak = this.allForm.noAreaBreak == '0' ? false : true
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- // setTimeout(() => {
|
|
|
|
- console.log(this.populationData)
|
|
|
|
|
|
|
|
- this.form.setFieldsValue(
|
|
|
|
- pick(this.populationData, [
|
|
|
|
- 'businessInterestType',
|
|
|
|
- 'fansStar',
|
|
|
|
- 'interestVideo',
|
|
|
|
- 'appInterest',
|
|
|
|
- 'gender',
|
|
|
|
- 'network',
|
|
|
|
- 'agesRange',
|
|
|
|
- 'androidOsv',
|
|
|
|
- 'iosOsv',
|
|
|
|
- 'deviceBrand',
|
|
|
|
- 'devicePrice',
|
|
|
|
- 'businessInterest'
|
|
|
|
- ])
|
|
|
|
- )
|
|
|
|
- // }, 100)
|
|
|
|
- // setTimeout(() => {
|
|
|
|
- // console.log(this.populationData)
|
|
|
|
- // this.form.setFieldsValue(pick(this.populationData, ['app_interest', 'business_interest']))
|
|
|
|
- // }, 100)
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
|
|
+ // if (this.populationData.allForm) {
|
|
|
|
+ // this.allForm = this.populationData.allForm
|
|
|
|
+ // this.allForm.noAgeBreak = this.allForm.noAgeBreak == '0' ? false : true
|
|
|
|
+ // this.allForm.noGenderBreak = this.allForm.noGenderBreak == '0' ? false : true
|
|
|
|
+ // this.allForm.noAreaBreak = this.allForm.noAreaBreak == '0' ? false : true
|
|
|
|
+
|
|
|
|
+ // this.selectedRowKeys = this.populationData.population ? this.populationData.population : []
|
|
|
|
+ // this.selectedRowKeysNo = this.populationData.excludePopulation ? this.populationData.excludePopulation : []
|
|
|
|
+ // this.selectedRowKeysValueNo = []
|
|
|
|
+ // this.selectedRowKeysValue = []
|
|
|
|
+ // this.keyValueNo = ''
|
|
|
|
+ // this.targeted = this.populationData.excludePopulation ? (this.populationData.population ? '4' : '3') : '2'
|
|
|
|
+ // this.people = this.populationData.excludePopulation ? '3' : this.populationData.population ? '3' : '2'
|
|
|
|
+ // this.getPeople().then(res => {
|
|
|
|
+ // if (this.populationData.excludePopulation) {
|
|
|
|
+ // for (let i = 0; i < res.length; i++) {
|
|
|
|
+ // for (let j = 0; j < this.populationData.excludePopulation.length; j++) {
|
|
|
|
+ // if (res[i].orientationId == this.populationData.excludePopulation[j]) {
|
|
|
|
+ // this.keyValueNo += res[i].orientationName + ' '
|
|
|
|
+ // this.selectedRowKeysValueNo.push({
|
|
|
|
+ // orientationId: res[i].orientationId,
|
|
|
|
+ // orientationName: res[i].orientationName
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // if (this.populationData.population) {
|
|
|
|
+ // for (let i = 0; i < res.length; i++) {
|
|
|
|
+ // for (let j = 0; j < this.populationData.population.length; j++) {
|
|
|
|
+ // if (res[i].orientationId == this.populationData.population[j]) {
|
|
|
|
+ // this.keyValue += res[i].orientationName + ' '
|
|
|
|
+ // this.selectedRowKeysValue.push({
|
|
|
|
+ // orientationId: res[i].orientationId,
|
|
|
|
+ // orientationName: res[i].orientationName
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+
|
|
|
|
+ // this.$nextTick(() => {
|
|
|
|
+ // // setTimeout(() => {
|
|
|
|
+
|
|
|
|
+ // this.form.setFieldsValue(
|
|
|
|
+ // pick(this.populationData, [
|
|
|
|
+ // 'businessInterestType',
|
|
|
|
+ // 'fansStar',
|
|
|
|
+ // 'interestVideo',
|
|
|
|
+ // 'appInterest',
|
|
|
|
+ // 'gender',
|
|
|
|
+ // 'network',
|
|
|
|
+ // 'agesRange',
|
|
|
|
+ // 'androidOsv',
|
|
|
|
+ // 'iosOsv',
|
|
|
|
+ // 'deviceBrand',
|
|
|
|
+ // 'devicePrice',
|
|
|
|
+ // 'businessInterest'
|
|
|
|
+ // ])
|
|
|
|
+ // )
|
|
|
|
+ // // }, 100)
|
|
|
|
+ // // setTimeout(() => {
|
|
|
|
+ // // console.log(this.populationData)
|
|
|
|
+ // // this.form.setFieldsValue(pick(this.populationData, ['app_interest', 'business_interest']))
|
|
|
|
+ // // }, 100)
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|