|
@@ -261,36 +261,223 @@ li:hover {
|
|
|
v-if="getData('platform_os') == '1' && allForm.appType == '2'"
|
|
|
class="else-label"
|
|
|
>
|
|
|
- {{ getData('app_ids') }}
|
|
|
- <div style="position:relative;">
|
|
|
- <a-input placeholder="请输入搜索内容" @change="getAppAll" style="width:100%;position:relative;" />
|
|
|
+ <div style="position:relative;" v-clickoutside="handleClose">
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ @change="getAppAll"
|
|
|
+ @focus="getAppAll"
|
|
|
+ style="width:100%;position:relative;"
|
|
|
+ />
|
|
|
<div
|
|
|
style="width:100%;position:absolute;z-index:10;height:200px;background:white;overflow:auto;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
|
|
|
- v-show="optionsApp.length > 0"
|
|
|
+ v-if="closeDialog"
|
|
|
>
|
|
|
<ul>
|
|
|
- <li><a-checkbox style="float:left" @change="onCheckAllChange"></a-checkbox>全选</li>
|
|
|
- <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
|
- <li v-for="item of optionsApp" :key="item.app_id">
|
|
|
- <a-checkbox :value="item.app_id" style="float:left"></a-checkbox>{{ item.app_name }}
|
|
|
+ <li style="padding:0 10px">
|
|
|
+ <a-checkbox
|
|
|
+ style="float:left;margin:0 5px"
|
|
|
+ @change="onCheckAllChange"
|
|
|
+ :indeterminate="indeterminate"
|
|
|
+ :checked="checkAll"
|
|
|
+ ></a-checkbox
|
|
|
+ >全选
|
|
|
+ </li>
|
|
|
+ <a-checkbox-group @change="onChange" v-model="checkArr" class="home-card" style="width:100%">
|
|
|
+ <li style="padding:0 10px;width:100%;" v-for="item of optionsApp" :key="item.app_id">
|
|
|
+ <a-checkbox :value="item.app_id" style="float:left;margin:0 5px"></a-checkbox>{{ item.app_name }}
|
|
|
</li>
|
|
|
</a-checkbox-group>
|
|
|
</ul>
|
|
|
</div>
|
|
|
+ <div style="width:100%" v-if="checkArr.length > 0">
|
|
|
+ <a-button @click="clearAll">清空</a-button>
|
|
|
+ <br />
|
|
|
+ <a-tag v-for="item of checkArr" :key="item" closable :afterClose="() => log(item)">
|
|
|
+ {{ showAppName(item) }}
|
|
|
+ </a-tag>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
- label="APP行为"
|
|
|
+ label="商业兴趣"
|
|
|
:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
:wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
- v-if="getData('platform_os') == '1'"
|
|
|
>
|
|
|
- <a-radio-group buttonStyle="solid" v-model="allForm.appType" @change="getAppType">
|
|
|
+ <a-radio-group
|
|
|
+ buttonStyle="solid"
|
|
|
+ @change="businessInterest"
|
|
|
+ v-decorator="[
|
|
|
+ 'business_interest_type',
|
|
|
+ {
|
|
|
+ initialValue: '0'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
<a-radio-button value="0">不限</a-radio-button>
|
|
|
- <a-radio-button value="1">按分类</a-radio-button>
|
|
|
- <a-radio-button value="2">按APP名称</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 } }"
|
|
|
+ class="else-label"
|
|
|
+ v-if="getData('business_interest_type') == '2'"
|
|
|
+ >
|
|
|
+ {{ getData('business_interest') }}
|
|
|
+ <a-select
|
|
|
+ mode="multiple"
|
|
|
+ style="width: 100%"
|
|
|
+ optionFilterProp="children"
|
|
|
+ showSearch
|
|
|
+ :filterOption="filterOption"
|
|
|
+ v-decorator="['business_interest', { rules: [{ required: true, message: '请选择商业兴趣' }] }]"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in businessOptions" :key="item.tagId" :value="item.tagId">{{
|
|
|
+ item.tagName
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </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"
|
|
|
+ @change="businessInterest"
|
|
|
+ v-decorator="[
|
|
|
+ 'network',
|
|
|
+ {
|
|
|
+ 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-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.fansStar" @change="fansStar">
|
|
|
+ <a-radio-button value="0">不限</a-radio-button>
|
|
|
+ <a-radio-button value="1">网红类别</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 } }"
|
|
|
+ class="else-label"
|
|
|
+ v-if="allForm.fansStar == '1'"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ mode="multiple"
|
|
|
+ style="width: 100%"
|
|
|
+ optionFilterProp="children"
|
|
|
+ showSearch
|
|
|
+ :filterOption="filterOption"
|
|
|
+ v-decorator="['fans_star', { rules: [{ required: true, message: '请选择网红类别' }] }]"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in fansStarOptions" :key="item.tagId" :value="item.tagId">{{
|
|
|
+ item.tagName
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </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.interestVideo" @change="interestVideo">
|
|
|
+ <a-radio-button value="0">不限</a-radio-button>
|
|
|
+ <a-radio-button value="1">视频标签</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 } }"
|
|
|
+ class="else-label"
|
|
|
+ v-if="allForm.interestVideo == '1'"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ mode="multiple"
|
|
|
+ style="width: 100%"
|
|
|
+ optionFilterProp="children"
|
|
|
+ showSearch
|
|
|
+ :filterOption="filterOption"
|
|
|
+ v-decorator="['interest_video', { rules: [{ required: true, message: '请选择视频标签' }] }]"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in interestVideoOptions" :key="item.tagId" :value="item.tagId">{{
|
|
|
+ item.tagName
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </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-decorator="[
|
|
|
+ 'is_open',
|
|
|
+ {
|
|
|
+ initialValue: '0'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ @change="interestVideo"
|
|
|
+ >
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
+ <a-radio-button value="1">开启</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 } }"
|
|
|
+ class="else-label"
|
|
|
+ v-if="getData('is_open') == '1'"
|
|
|
+ >
|
|
|
+ <a-checkbox
|
|
|
+ :disabled="allForm.ageType != 'ageCustom'"
|
|
|
+ v-decorator="[
|
|
|
+ 'no_age_break',
|
|
|
+ {
|
|
|
+ initialValue: false
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >不可突破年龄</a-checkbox
|
|
|
+ >
|
|
|
+ <a-checkbox
|
|
|
+ :disabled="getData('gender') == '0'"
|
|
|
+ v-decorator="[
|
|
|
+ 'no_gender_break',
|
|
|
+ {
|
|
|
+ initialValue: false
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >不可突破性别</a-checkbox
|
|
|
+ >
|
|
|
+ <a-checkbox
|
|
|
+ :disabled="allForm.regionType != 'limit'"
|
|
|
+ v-decorator="[
|
|
|
+ 'no_area_break',
|
|
|
+ {
|
|
|
+ initialValue: false
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >不可突破地域</a-checkbox
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
</a-form>
|
|
|
</template>
|
|
|
|
|
@@ -301,6 +488,31 @@ import { mapGetters } from 'vuex'
|
|
|
import jq from 'jquery'
|
|
|
|
|
|
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__
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
export default {
|
|
|
name: 'BaseForm',
|
|
@@ -313,6 +525,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ directives: { clickoutside },
|
|
|
data() {
|
|
|
return {
|
|
|
form: this.$form.createForm(this),
|
|
@@ -344,7 +557,9 @@ export default {
|
|
|
age: [],
|
|
|
device: '0',
|
|
|
price: '0',
|
|
|
- appType: '0'
|
|
|
+ appType: '0',
|
|
|
+ fansStar: '0',
|
|
|
+ interestVideo: '0'
|
|
|
},
|
|
|
options: [],
|
|
|
optionsAll: [],
|
|
@@ -355,33 +570,83 @@ export default {
|
|
|
multiple: true
|
|
|
},
|
|
|
optionsApp: [],
|
|
|
+ checkOptions: [],
|
|
|
+ businessOptions: [],
|
|
|
+ fansStarOptions: [],
|
|
|
+ interestVideoOptions: [],
|
|
|
optionPropsApp: {
|
|
|
value: 'tagId',
|
|
|
label: 'tagName',
|
|
|
children: 'children',
|
|
|
multiple: true
|
|
|
},
|
|
|
- getApp: '0'
|
|
|
+ getApp: '0',
|
|
|
+ closeDialog: false,
|
|
|
+ indeterminate: false,
|
|
|
+ checkAll: false
|
|
|
}
|
|
|
},
|
|
|
- computed: {
|
|
|
- count() {}
|
|
|
- },
|
|
|
+ computed: {},
|
|
|
methods: {
|
|
|
- onChangeCheck(checkedList) {
|
|
|
- if (checkedList.length == 0) {
|
|
|
+ showAppName(appId) {
|
|
|
+ var data = this.checkOptions.filter(item => {
|
|
|
+ return item.app_id == appId
|
|
|
+ })
|
|
|
+ return data[0].app_name
|
|
|
+ },
|
|
|
+ log(appId) {
|
|
|
+ var index = this.checkArr.findIndex(item => item === appId)
|
|
|
+ this.checkArr.splice(index, 1)
|
|
|
+ if (this.checkArr.length == 0) {
|
|
|
+ this.indeterminate = false
|
|
|
this.checkAll = false
|
|
|
}
|
|
|
},
|
|
|
- onCheckAllChange() {
|
|
|
- if (this.checkAll) {
|
|
|
- this.checkArr = []
|
|
|
- } else {
|
|
|
- this.checkArr = this.optionsApp.map(item => {
|
|
|
+ handleClose(e) {
|
|
|
+ this.closeDialog = false
|
|
|
+ },
|
|
|
+ clearAll() {
|
|
|
+ this.checkArr = []
|
|
|
+ this.indeterminate = false
|
|
|
+ this.checkAll = false
|
|
|
+ },
|
|
|
+ onChange(checkedList) {
|
|
|
+ this.indeterminate =
|
|
|
+ !!checkedList.length &&
|
|
|
+ checkedList.length <
|
|
|
+ this.optionsApp.map(item => {
|
|
|
+ return item.app_id
|
|
|
+ }).length
|
|
|
+ this.checkAll =
|
|
|
+ checkedList.length ===
|
|
|
+ this.optionsApp.map(item => {
|
|
|
return item.app_id
|
|
|
- })
|
|
|
+ }).length
|
|
|
+ },
|
|
|
+ onCheckAllChange(e) {
|
|
|
+ Object.assign(this, {
|
|
|
+ checkArr: e.target.checked
|
|
|
+ ? this.optionsApp.map(item => {
|
|
|
+ return item.app_id
|
|
|
+ })
|
|
|
+ : [],
|
|
|
+ indeterminate: false,
|
|
|
+ checkAll: e.target.checked
|
|
|
+ })
|
|
|
+ if (this.checkArr.length > 20) {
|
|
|
+ this.$message.error('最多选择20个APP行为')
|
|
|
+ this.checkArr = []
|
|
|
+ this.indeterminate = false
|
|
|
+ this.checkAll = false
|
|
|
}
|
|
|
- this.checkAll = !this.checkAll
|
|
|
+ // if (this.checkAll) {
|
|
|
+ // this.checkArr = []
|
|
|
+ // } else {
|
|
|
+ // this.checkArr = this.optionsApp.map(item => {
|
|
|
+ // return item.app_id
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // this.checkAll = !this.checkAll
|
|
|
},
|
|
|
handleSubmit(e) {
|
|
|
e.preventDefault()
|
|
@@ -391,29 +656,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- getAppList(value) {
|
|
|
- console.log(value)
|
|
|
- if (value == undefined) {
|
|
|
- this.getApp = '0'
|
|
|
- } else {
|
|
|
- let params = {}
|
|
|
- params.accountId = localStorage.getItem('accountId')
|
|
|
- params.appId = value
|
|
|
- getAction('/kuaishou/batch/getAppList', params).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- console.log(res.result[0].platform)
|
|
|
- if (res.result[0].platform == '1' || res.result[0].platform == '2') {
|
|
|
- this.form.setFieldsValue({ platform_os: '1' })
|
|
|
- this.getApp = '1'
|
|
|
- } else if (res.result[0].platform == '3' || res.result[0].platform == '4') {
|
|
|
- this.form.setFieldsValue({ platform_os: '2' })
|
|
|
- this.getApp = '2'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
handleConfirmValue(rule, value, callback) {
|
|
|
console.log(value)
|
|
|
if (Math.abs(value[0] - value[1]) < 5) {
|
|
@@ -421,8 +663,19 @@ export default {
|
|
|
}
|
|
|
callback()
|
|
|
},
|
|
|
+ manyValidator(rule, value, callback) {
|
|
|
+ if (value.length > 20) {
|
|
|
+ callback('最多只能选择20个选项')
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
regionChange() {
|
|
|
this.allForm.region = []
|
|
|
+ getAction('/kuaishou/batch/getRegion').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.options = res.result
|
|
|
+ this.optionsAll = res.result
|
|
|
+ })
|
|
|
},
|
|
|
ageChange() {
|
|
|
this.allForm.ages_range = []
|
|
@@ -440,15 +693,24 @@ export default {
|
|
|
},
|
|
|
getAppAll(e) {
|
|
|
console.log(e.target.value)
|
|
|
+
|
|
|
if (e.target.value !== '') {
|
|
|
getAction('/kuaishou/batch/getAppSearch', {
|
|
|
accountId: localStorage.getItem('accountId'),
|
|
|
appName: e.target.value
|
|
|
}).then(res => {
|
|
|
- this.optionsApp = res.result
|
|
|
+ if (res.result) {
|
|
|
+ this.optionsApp = res.result
|
|
|
+ this.checkOptions.push(...res.result)
|
|
|
+ this.closeDialog = true
|
|
|
+ } else {
|
|
|
+ this.optionsApp = []
|
|
|
+ this.closeDialog = false
|
|
|
+ }
|
|
|
})
|
|
|
} else {
|
|
|
this.optionsApp = []
|
|
|
+ this.closeDialog = false
|
|
|
}
|
|
|
},
|
|
|
getAppType(e) {
|
|
@@ -463,11 +725,37 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ businessInterest(e) {
|
|
|
+ if (e.target.value == '2') {
|
|
|
+ this.getDataType('BUSINESS_INTEREST', 'businessOptions')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fansStar(e) {
|
|
|
+ if (e.target.value == '1') {
|
|
|
+ this.getDataType('FANS_STAR', 'fansStarOptions')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ interestVideo(e) {
|
|
|
+ if (e.target.value == '1') {
|
|
|
+ this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterOption(input, option) {
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ },
|
|
|
+ getDataType(type, dataList) {
|
|
|
+ getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this[dataList] = res.result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
getData(className) {
|
|
|
return this.form.getFieldValue(className)
|
|
|
}
|
|
|
},
|
|
|
- mounted: function() {
|
|
|
+ activated: function() {
|
|
|
getAction('/kuaishou/batch/getRegion').then(res => {
|
|
|
console.log(res)
|
|
|
this.options = res.result
|