| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311 |
- <style>
- #table_time_selected1 tr {
- border: 1px solid rgb(102, 162, 243);
- }
- .plug-timer-grid th {
- line-height: 25px;
- }
- .group-creat .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>
- <template>
- <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
- <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-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" :maskClosable="false">
- <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">
- 确定
- </a-button>
- </template>
- </a-modal>
- </a-card>
- </template>
- <script>
- 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,
- Treeselect
- },
- data() {
- return {
- 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'
- // }
- },
- 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: {},
- filters: {},
- methods: {
- handleSubmit(e) {
- // this.$refs.population.handleSubmit()
- e.preventDefault()
- this.$refs.population.handleSubmit()
- 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/deleteDirectionalTemplate', { 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 => {
- 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() {
- // /kuaishou/batch/getDirectionalTemplate
- }
- }
- </script>
|