|
@@ -24,11 +24,37 @@
|
|
|
</style>
|
|
|
<template>
|
|
|
<a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
|
|
|
- <a-button type="primary" @click="visible = true">
|
|
|
+ <a-row class="image-list-heading vm-panel">
|
|
|
+ <a-col :span="24" style="display:flex">
|
|
|
+ <Treeselect :appId.sync="appId" :multiple="false" style="margin:8px 0px" />
|
|
|
+ <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-button type="primary" @click=";(visible = true), (populationData = {}), (active = 'add')" :disabled="!appId">
|
|
|
创建模板
|
|
|
</a-button>
|
|
|
- <a-modal v-model="visible" title="广告组创建信息" :width="900">
|
|
|
- <targeted-population ref="population" :populationData.sync="populationData" v-if="visible"></targeted-population>
|
|
|
+ <a-row style="margin-top:15px">
|
|
|
+ <a-table size="middle" :columns="columns" :dataSource="dataList" bordered :pagination="ipagination">
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a @click="handleEdit(record)">编辑</a>
|
|
|
+
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
|
|
+ <a>删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </a-row>
|
|
|
+ <a-modal v-model="visible" title="广告组创建信息" :width="900" v-if="visible">
|
|
|
+ <a-form-item
|
|
|
+ label="模板名称"
|
|
|
+ :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
|
|
|
+ :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
|
|
|
+ >
|
|
|
+ <a-input placeholder="请输入模板名称" v-model="name" style="width:100%;position:relative;" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <targeted-population ref="population" :populationData.sync="populationData"></targeted-population>
|
|
|
<template slot="footer">
|
|
|
<a-button key="submit" type="primary" @click="handleSubmit">
|
|
|
确定
|
|
@@ -39,122 +65,162 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getAction, postAction } from '@/api/manage'
|
|
|
+import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
|
|
|
import moment from 'moment'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import jq from 'jquery'
|
|
|
-
|
|
|
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
|
|
|
import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'
|
|
|
export default {
|
|
|
name: 'new-mould',
|
|
|
components: {
|
|
|
- targetedPopulation
|
|
|
+ targetedPopulation,
|
|
|
+ Treeselect
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- populationData: {
|
|
|
- platform_os: '1',
|
|
|
- is_open: '0',
|
|
|
- gender: '1',
|
|
|
- network: '1',
|
|
|
- interest_video: [2, 3],
|
|
|
- ages_range: ['12', '41'],
|
|
|
- device_brand: ['2', '9'],
|
|
|
- device_price: ['5', '9'],
|
|
|
- fans_star: [2, 3, 4, 5],
|
|
|
- app_interest: [3, 4],
|
|
|
- android_osv: '4',
|
|
|
- business_interest_type: '2',
|
|
|
- business_interest: [34328, 34330],
|
|
|
- no_age_break: 0,
|
|
|
- no_gender_break: 0,
|
|
|
- no_area_break: 0,
|
|
|
- region: [
|
|
|
- 11,
|
|
|
- 12,
|
|
|
- 13,
|
|
|
- 14,
|
|
|
- 15,
|
|
|
- 21,
|
|
|
- 22,
|
|
|
- 23,
|
|
|
- 31,
|
|
|
- 32,
|
|
|
- 33,
|
|
|
- 34,
|
|
|
- 35,
|
|
|
- 36,
|
|
|
- 37,
|
|
|
- 41,
|
|
|
- 42,
|
|
|
- 43,
|
|
|
- 44,
|
|
|
- 45,
|
|
|
- 46,
|
|
|
- 50,
|
|
|
- 51,
|
|
|
- 52,
|
|
|
- 53,
|
|
|
- 54,
|
|
|
- 61,
|
|
|
- 62,
|
|
|
- 63,
|
|
|
- 64,
|
|
|
- 65,
|
|
|
- 71,
|
|
|
- 81,
|
|
|
- 82
|
|
|
- ],
|
|
|
-
|
|
|
- allForm: {
|
|
|
- regionType: 'limit',
|
|
|
- region: [
|
|
|
- { label: '北京', value: 11 },
|
|
|
- { label: '天津', value: 12 },
|
|
|
- { label: '河北', value: 13 },
|
|
|
- { label: '山西', value: 14 },
|
|
|
- { label: '内蒙古', value: 15 },
|
|
|
- { label: '辽宁', value: 21 },
|
|
|
- { label: '吉林', value: 22 },
|
|
|
- { label: '黑龙江', value: 23 },
|
|
|
- { label: '上海', value: 31 },
|
|
|
- { label: '江苏', value: 32 },
|
|
|
- { label: '浙江', value: 33 },
|
|
|
- { label: '安徽', value: 34 },
|
|
|
- { label: '福建', value: 35 },
|
|
|
- { label: '江西', value: 36 },
|
|
|
- { label: '山东', value: 37 },
|
|
|
- { label: '河南', value: 41 },
|
|
|
- { label: '湖北', value: 42 },
|
|
|
- { label: '湖南', value: 43 },
|
|
|
- { label: '广东', value: 44 },
|
|
|
- { label: '广西', value: 45 },
|
|
|
- { label: '海南', value: 46 },
|
|
|
- { label: '重庆', value: 50 },
|
|
|
- { label: '四川', value: 51 },
|
|
|
- { label: '贵州', value: 52 },
|
|
|
- { label: '云南', value: 53 },
|
|
|
- { label: '西藏', value: 54 },
|
|
|
- { label: '陕西', value: 61 },
|
|
|
- { label: '甘肃', value: 62 },
|
|
|
- { label: '青海', value: 63 },
|
|
|
- { label: '宁夏', value: 64 },
|
|
|
- { label: '新疆', value: 65 },
|
|
|
- { label: '台湾', value: 71 },
|
|
|
- { label: '香港', value: 81 },
|
|
|
- { label: '澳门', value: 82 }
|
|
|
- ],
|
|
|
- ageType: 'ageLimit',
|
|
|
- ages_range: [],
|
|
|
- age: [],
|
|
|
- device: '1',
|
|
|
- price: '1',
|
|
|
- appType: '1',
|
|
|
- fansStar: '1',
|
|
|
- interestVideo: '1'
|
|
|
+ dataList: [],
|
|
|
+ name: '',
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '模板名称',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'templateName',
|
|
|
+ scopedSlots: { customRender: 'templateName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ scopedSlots: { customRender: 'createTime' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
}
|
|
|
+ ],
|
|
|
+ appId: '',
|
|
|
+ populationData: {
|
|
|
+ // platform_os: '1',
|
|
|
+ // is_open: '0',
|
|
|
+ // gender: '1',
|
|
|
+ // network: '1',
|
|
|
+ // interest_video: [2, 3],
|
|
|
+ // ages_range: ['12', '41'],
|
|
|
+ // device_brand: ['2', '9'],
|
|
|
+ // device_price: ['5', '9'],
|
|
|
+ // fans_star: [2, 3, 4, 5],
|
|
|
+ // app_interest: [3, 4],
|
|
|
+ // android_osv: '4',
|
|
|
+ // business_interest_type: '2',
|
|
|
+ // business_interest: [34328, 34330],
|
|
|
+ // no_age_break: 0,
|
|
|
+ // no_gender_break: 0,
|
|
|
+ // no_area_break: 0,
|
|
|
+ // region: [
|
|
|
+ // 11,
|
|
|
+ // 12,
|
|
|
+ // 13,
|
|
|
+ // 14,
|
|
|
+ // 15,
|
|
|
+ // 21,
|
|
|
+ // 22,
|
|
|
+ // 23,
|
|
|
+ // 31,
|
|
|
+ // 32,
|
|
|
+ // 33,
|
|
|
+ // 34,
|
|
|
+ // 35,
|
|
|
+ // 36,
|
|
|
+ // 37,
|
|
|
+ // 41,
|
|
|
+ // 42,
|
|
|
+ // 43,
|
|
|
+ // 44,
|
|
|
+ // 45,
|
|
|
+ // 46,
|
|
|
+ // 50,
|
|
|
+ // 51,
|
|
|
+ // 52,
|
|
|
+ // 53,
|
|
|
+ // 54,
|
|
|
+ // 61,
|
|
|
+ // 62,
|
|
|
+ // 63,
|
|
|
+ // 64,
|
|
|
+ // 65,
|
|
|
+ // 71,
|
|
|
+ // 81,
|
|
|
+ // 82
|
|
|
+ // ],
|
|
|
+ // allForm: {
|
|
|
+ // regionType: 'limit',
|
|
|
+ // region: [
|
|
|
+ // { label: '北京', value: 11 },
|
|
|
+ // { label: '天津', value: 12 },
|
|
|
+ // { label: '河北', value: 13 },
|
|
|
+ // { label: '山西', value: 14 },
|
|
|
+ // { label: '内蒙古', value: 15 },
|
|
|
+ // { label: '辽宁', value: 21 },
|
|
|
+ // { label: '吉林', value: 22 },
|
|
|
+ // { label: '黑龙江', value: 23 },
|
|
|
+ // { label: '上海', value: 31 },
|
|
|
+ // { label: '江苏', value: 32 },
|
|
|
+ // { label: '浙江', value: 33 },
|
|
|
+ // { label: '安徽', value: 34 },
|
|
|
+ // { label: '福建', value: 35 },
|
|
|
+ // { label: '江西', value: 36 },
|
|
|
+ // { label: '山东', value: 37 },
|
|
|
+ // { label: '河南', value: 41 },
|
|
|
+ // { label: '湖北', value: 42 },
|
|
|
+ // { label: '湖南', value: 43 },
|
|
|
+ // { label: '广东', value: 44 },
|
|
|
+ // { label: '广西', value: 45 },
|
|
|
+ // { label: '海南', value: 46 },
|
|
|
+ // { label: '重庆', value: 50 },
|
|
|
+ // { label: '四川', value: 51 },
|
|
|
+ // { label: '贵州', value: 52 },
|
|
|
+ // { label: '云南', value: 53 },
|
|
|
+ // { label: '西藏', value: 54 },
|
|
|
+ // { label: '陕西', value: 61 },
|
|
|
+ // { label: '甘肃', value: 62 },
|
|
|
+ // { label: '青海', value: 63 },
|
|
|
+ // { label: '宁夏', value: 64 },
|
|
|
+ // { label: '新疆', value: 65 },
|
|
|
+ // { label: '台湾', value: 71 },
|
|
|
+ // { label: '香港', value: 81 },
|
|
|
+ // { label: '澳门', value: 82 }
|
|
|
+ // ],
|
|
|
+ // ageType: 'ageLimit',
|
|
|
+ // ages_range: [],
|
|
|
+ // age: [],
|
|
|
+ // device: '1',
|
|
|
+ // price: '1',
|
|
|
+ // appType: '1',
|
|
|
+ // fansStar: '1',
|
|
|
+ // interestVideo: '1'
|
|
|
+ // }
|
|
|
},
|
|
|
- visible: false
|
|
|
+ active: 'add',
|
|
|
+ editId: '',
|
|
|
+ visible: false,
|
|
|
+ ipagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
+ },
|
|
|
+ showQuickJumper: true,
|
|
|
+ onChange: current => {
|
|
|
+ // 切换分页时的回调,
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
+ this.ipagination.current = current
|
|
|
+ this.addUser()
|
|
|
+ },
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
@@ -164,12 +230,83 @@ export default {
|
|
|
// this.$refs.population.handleSubmit()
|
|
|
e.preventDefault()
|
|
|
this.$refs.population.handleSubmit()
|
|
|
- console.log(JSON.stringify(this.populationData))
|
|
|
+ var data = this.populationData
|
|
|
+ console.log(JSON.stringify(data))
|
|
|
+ if (this.active == 'add') {
|
|
|
+ postAction('/kuaishou/batch/addDirectionalTemplate', {
|
|
|
+ accountId: this.appId,
|
|
|
+ templateName: this.name,
|
|
|
+ templateContent: JSON.stringify(this.populationData)
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.visible = false
|
|
|
+ this.populationData = {}
|
|
|
+ this.name = ''
|
|
|
+ this.addUser()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.active == 'edit') {
|
|
|
+ putAction('/kuaishou/batch/editDirectionalTemplate', {
|
|
|
+ id: this.editId,
|
|
|
+ templateName: this.name,
|
|
|
+ templateContent: JSON.stringify(this.populationData)
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.visible = false
|
|
|
+ this.populationData = {}
|
|
|
+ this.name = ''
|
|
|
+ this.addUser()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
getData(className) {
|
|
|
return this.form.getFieldValue(className)
|
|
|
+ },
|
|
|
+ handleEdit(item) {
|
|
|
+ this.active = 'edit'
|
|
|
+ this.editId = item.id
|
|
|
+ this.name = item.templateName
|
|
|
+ this.populationData = JSON.parse(item.templateContent)
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ handleDelete(id) {
|
|
|
+ deleteAction('/kuaishou/batch/deleteeditDirectionalTemplate', { id: id }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.addUser()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addUser() {
|
|
|
+ this.loading = true
|
|
|
+ this.dataList = []
|
|
|
+ var params = {}
|
|
|
+ params.accountId = this.appId + ''
|
|
|
+ if (this.appId) {
|
|
|
+ getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.dataList = res.result.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ipagination.total = res.result.length
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error('请选择账户')
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- mounted: function() {}
|
|
|
+ mounted: function() {
|
|
|
+ // /kuaishou/batch/getDirectionalTemplate
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|