newMould.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <style>
  2. #table_time_selected1 tr {
  3. border: 1px solid rgb(102, 162, 243);
  4. }
  5. .plug-timer-grid th {
  6. line-height: 25px;
  7. }
  8. .group-creat .ant-form-item-required::before {
  9. display: inline-block;
  10. margin-right: 4px;
  11. color: #f5222d;
  12. font-size: 14px;
  13. font-family: SimSun, sans-serif;
  14. line-height: 1;
  15. content: '';
  16. }
  17. .else-label .ant-form-item-label label::after {
  18. content: '';
  19. position: relative;
  20. top: -0.5px;
  21. margin: 0 8px 0 2px;
  22. }
  23. </style>
  24. <template>
  25. <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
  26. <a-row class="image-list-heading vm-panel">
  27. <a-col :span="24" style="display:flex">
  28. <Treeselect :appId.sync="appId" :multiple="false" style="margin:8px 0px" />
  29. <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
  30. </a-col>
  31. </a-row>
  32. <a-button type="primary" @click=";(visible = true), (populationData = {}), (active = 'add')" :disabled="!appId">
  33. 创建模板
  34. </a-button>
  35. <a-row style="margin-top:15px">
  36. <a-table size="middle" :columns="columns" :dataSource="dataList" bordered :pagination="ipagination">
  37. <span slot="action" slot-scope="text, record">
  38. <a @click="handleEdit(record)">编辑</a>
  39. <a-divider type="vertical" />
  40. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  41. <a>删除</a>
  42. </a-popconfirm>
  43. </span>
  44. </a-table>
  45. </a-row>
  46. <a-modal v-model="visible" title="广告组创建信息" :width="900" v-if="visible" :maskClosable="false">
  47. <a-form-item
  48. label="模板名称"
  49. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  50. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  51. >
  52. <a-input placeholder="请输入模板名称" v-model="name" style="width:100%;position:relative;" />
  53. </a-form-item>
  54. <targeted-population ref="population" :populationData.sync="populationData"></targeted-population>
  55. <template slot="footer">
  56. <a-button key="submit" type="primary" @click="handleSubmit">
  57. 确定
  58. </a-button>
  59. </template>
  60. </a-modal>
  61. </a-card>
  62. </template>
  63. <script>
  64. import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
  65. import moment from 'moment'
  66. import { mapGetters } from 'vuex'
  67. import jq from 'jquery'
  68. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  69. import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'
  70. export default {
  71. name: 'new-mould',
  72. components: {
  73. targetedPopulation,
  74. Treeselect
  75. },
  76. data() {
  77. return {
  78. dataList: [],
  79. name: '',
  80. columns: [
  81. {
  82. title: '模板名称',
  83. align: 'center',
  84. dataIndex: 'templateName',
  85. scopedSlots: { customRender: 'templateName' }
  86. },
  87. {
  88. title: '创建时间',
  89. align: 'center',
  90. dataIndex: 'createTime',
  91. scopedSlots: { customRender: 'createTime' }
  92. },
  93. {
  94. title: '操作',
  95. align: 'center',
  96. dataIndex: 'action',
  97. scopedSlots: { customRender: 'action' }
  98. }
  99. ],
  100. appId: '',
  101. populationData: {
  102. // platform_os: '1',
  103. // is_open: '0',
  104. // gender: '1',
  105. // network: '1',
  106. // interest_video: [2, 3],
  107. // ages_range: ['12', '41'],
  108. // device_brand: ['2', '9'],
  109. // device_price: ['5', '9'],
  110. // fans_star: [2, 3, 4, 5],
  111. // app_interest: [3, 4],
  112. // android_osv: '4',
  113. // business_interest_type: '2',
  114. // business_interest: [34328, 34330],
  115. // no_age_break: 0,
  116. // no_gender_break: 0,
  117. // no_area_break: 0,
  118. // region: [
  119. // 11,
  120. // 12,
  121. // 13,
  122. // 14,
  123. // 15,
  124. // 21,
  125. // 22,
  126. // 23,
  127. // 31,
  128. // 32,
  129. // 33,
  130. // 34,
  131. // 35,
  132. // 36,
  133. // 37,
  134. // 41,
  135. // 42,
  136. // 43,
  137. // 44,
  138. // 45,
  139. // 46,
  140. // 50,
  141. // 51,
  142. // 52,
  143. // 53,
  144. // 54,
  145. // 61,
  146. // 62,
  147. // 63,
  148. // 64,
  149. // 65,
  150. // 71,
  151. // 81,
  152. // 82
  153. // ],
  154. // allForm: {
  155. // regionType: 'limit',
  156. // region: [
  157. // { label: '北京', value: 11 },
  158. // { label: '天津', value: 12 },
  159. // { label: '河北', value: 13 },
  160. // { label: '山西', value: 14 },
  161. // { label: '内蒙古', value: 15 },
  162. // { label: '辽宁', value: 21 },
  163. // { label: '吉林', value: 22 },
  164. // { label: '黑龙江', value: 23 },
  165. // { label: '上海', value: 31 },
  166. // { label: '江苏', value: 32 },
  167. // { label: '浙江', value: 33 },
  168. // { label: '安徽', value: 34 },
  169. // { label: '福建', value: 35 },
  170. // { label: '江西', value: 36 },
  171. // { label: '山东', value: 37 },
  172. // { label: '河南', value: 41 },
  173. // { label: '湖北', value: 42 },
  174. // { label: '湖南', value: 43 },
  175. // { label: '广东', value: 44 },
  176. // { label: '广西', value: 45 },
  177. // { label: '海南', value: 46 },
  178. // { label: '重庆', value: 50 },
  179. // { label: '四川', value: 51 },
  180. // { label: '贵州', value: 52 },
  181. // { label: '云南', value: 53 },
  182. // { label: '西藏', value: 54 },
  183. // { label: '陕西', value: 61 },
  184. // { label: '甘肃', value: 62 },
  185. // { label: '青海', value: 63 },
  186. // { label: '宁夏', value: 64 },
  187. // { label: '新疆', value: 65 },
  188. // { label: '台湾', value: 71 },
  189. // { label: '香港', value: 81 },
  190. // { label: '澳门', value: 82 }
  191. // ],
  192. // ageType: 'ageLimit',
  193. // ages_range: [],
  194. // age: [],
  195. // device: '1',
  196. // price: '1',
  197. // appType: '1',
  198. // fansStar: '1',
  199. // interestVideo: '1'
  200. // }
  201. },
  202. active: 'add',
  203. editId: '',
  204. visible: false,
  205. ipagination: {
  206. current: 1,
  207. pageSize: 10,
  208. showTotal: (total, range) => {
  209. return range[0] + '-' + range[1] + ' 共' + total + '条'
  210. },
  211. showQuickJumper: true,
  212. onChange: current => {
  213. // 切换分页时的回调,
  214. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  215. this.ipagination.current = current
  216. this.addUser()
  217. },
  218. total: 0
  219. }
  220. }
  221. },
  222. computed: {},
  223. filters: {},
  224. methods: {
  225. handleSubmit(e) {
  226. // this.$refs.population.handleSubmit()
  227. e.preventDefault()
  228. this.$refs.population.handleSubmit()
  229. var data = this.populationData
  230. console.log(JSON.stringify(data))
  231. if (this.active == 'add') {
  232. postAction('/kuaishou/batch/addDirectionalTemplate', {
  233. accountId: this.appId,
  234. templateName: this.name,
  235. templateContent: JSON.stringify(this.populationData)
  236. }).then(res => {
  237. console.log(res)
  238. if (res.success) {
  239. this.visible = false
  240. this.populationData = {}
  241. this.name = ''
  242. this.addUser()
  243. }
  244. })
  245. } else if (this.active == 'edit') {
  246. putAction('/kuaishou/batch/editDirectionalTemplate', {
  247. id: this.editId,
  248. templateName: this.name,
  249. templateContent: JSON.stringify(this.populationData)
  250. }).then(res => {
  251. console.log(res)
  252. if (res.success) {
  253. this.visible = false
  254. this.populationData = {}
  255. this.name = ''
  256. this.addUser()
  257. }
  258. })
  259. }
  260. },
  261. getData(className) {
  262. return this.form.getFieldValue(className)
  263. },
  264. handleEdit(item) {
  265. this.active = 'edit'
  266. this.editId = item.id
  267. this.name = item.templateName
  268. this.populationData = JSON.parse(item.templateContent)
  269. this.visible = true
  270. },
  271. handleDelete(id) {
  272. deleteAction('/kuaishou/batch/deleteDirectionalTemplate', { id: id }).then(res => {
  273. if (res.success) {
  274. this.$message.success('删除成功')
  275. this.addUser()
  276. } else {
  277. this.$message.error(res.message)
  278. }
  279. })
  280. },
  281. addUser() {
  282. this.loading = true
  283. this.dataList = []
  284. var params = {}
  285. params.accountId = this.appId + ''
  286. if (this.appId) {
  287. getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
  288. if (res.success) {
  289. this.dataList = res.result.map((item, index) => {
  290. return {
  291. ...item,
  292. key: index
  293. }
  294. })
  295. this.ipagination.total = res.result.length
  296. }
  297. })
  298. } else {
  299. this.$message.error('请选择账户')
  300. }
  301. }
  302. },
  303. mounted: function() {
  304. // /kuaishou/batch/getDirectionalTemplate
  305. }
  306. }
  307. </script>