templateModal.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  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. .ant-form-item-required::before {
  24. display: inline-block;
  25. margin-right: 4px;
  26. color: #f5222d;
  27. font-size: 14px;
  28. font-family: SimSun, sans-serif;
  29. line-height: 1;
  30. content: '*';
  31. }
  32. </style>
  33. <style lang="scss" scoped>
  34. .require-check {
  35. /deep/ .ant-form-item-label {
  36. label::before {
  37. display: inline-block;
  38. margin-right: 4px;
  39. color: #f5222d;
  40. font-size: 14px;
  41. font-family: SimSun, sans-serif;
  42. line-height: 1;
  43. content: '*';
  44. }
  45. }
  46. }
  47. </style>
  48. <template>
  49. <a-modal v-model="visible" :title="type === 'add' ? '新建定向包' : '修改定向包'" :width="1100" v-if="visible">
  50. <a-spin :spinning="spinning">
  51. <a-form @submit="handleSubmit" :form="form">
  52. <a-row :gutter="24">
  53. <a-col :md="24" :sm="24" :xxl="24">
  54. <a-form-item
  55. label="账户ID"
  56. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  57. :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
  58. class="require-check"
  59. >
  60. <!-- <a-input v-model="accountId" :disabled="disabled"></a-input> -->
  61. {{ accountId }}
  62. </a-form-item>
  63. </a-col>
  64. </a-row>
  65. <a-form-item
  66. label="定向包名称"
  67. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  68. :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
  69. >
  70. <a-input
  71. v-decorator="['templateName', { rules: [{ required: true, message: '模板名称必填' }] }]"
  72. ></a-input>
  73. </a-form-item>
  74. <targeted-population
  75. ref="population"
  76. :populationData.sync="populationData"
  77. :accountId.sync="accountId"
  78. />
  79. </a-form>
  80. </a-spin>
  81. <template slot="footer">
  82. <!-- <a-button type="primary" @click="handleSubmit" :loading="loading"> 确定 </a-button> -->
  83. <a-button
  84. type="default"
  85. @click="
  86. () => {
  87. this.visible = false
  88. }
  89. "
  90. >
  91. 取消
  92. </a-button>
  93. <a-button type="primary" @click="handleSubmit" :loading="loading">
  94. {{ type == 'add' ? '确定' : '修改' }}
  95. </a-button>
  96. </template>
  97. </a-modal>
  98. </template>
  99. <script>
  100. import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
  101. import moment from 'moment'
  102. import { mapGetters } from 'vuex'
  103. import jq from 'jquery'
  104. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  105. import targetedPopulation from './targetedPopulation.vue'
  106. import pick from 'lodash.pick'
  107. export default {
  108. name: 'new-mould',
  109. components: {
  110. targetedPopulation,
  111. selectTable
  112. },
  113. data() {
  114. return {
  115. visible: false,
  116. spinning: false,
  117. projectName: '',
  118. form: this.$form.createForm(this),
  119. projectId: '',
  120. populationData: {},
  121. accountId: '',
  122. templateId: undefined,
  123. type: 'add',
  124. loading: false,
  125. labelCol: { lg: { span: 7 }, sm: { span: 7 } },
  126. disabled: false
  127. }
  128. },
  129. computed: {},
  130. methods: {
  131. create(accountId, type) {
  132. this.disabled = false
  133. this.spinning = false
  134. this.visible = true
  135. this.type = type
  136. this.populationData = {}
  137. this.accountId = accountId
  138. },
  139. handleOk(item, type) {
  140. this.spinning = true
  141. this.visible = true
  142. this.type = type
  143. var params = {}
  144. params.id = item.id
  145. this.accountId = item.accountId
  146. this.templateId = item.id
  147. getAction('/auto/aiKuaishouAccountAutoTarget/queryById', params).then(res => {
  148. if (res.success) {
  149. var dataJson = {
  150. ...res.result,
  151. templateName: res.result.targetName
  152. }
  153. this.populationData = dataJson
  154. this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
  155. this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
  156. this.populationData.businessInterest = dataJson.businessInterest
  157. ? JSON.parse(dataJson.businessInterest)
  158. : null
  159. this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
  160. this.populationData.interestVideo = dataJson.interestVideo
  161. ? JSON.parse(dataJson.interestVideo)
  162. : null
  163. this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null
  164. this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
  165. this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
  166. this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
  167. this.populationData.behavior = dataJson.label
  168. this.populationData.interest = dataJson.interestLabel
  169. this.populationData.sceneType = dataJson.sceneType ? JSON.parse(dataJson.sceneType) : []
  170. this.populationData.allForm = {}
  171. this.populationData.allForm.people =
  172. dataJson.population && dataJson.excludePopulation
  173. ? '3'
  174. : dataJson.population && !dataJson.excludePopulation
  175. ? '1'
  176. : !dataJson.population && dataJson.excludePopulation
  177. ? '2'
  178. : !dataJson.population && !dataJson.excludePopulation
  179. ? '0'
  180. : '0'
  181. this.populationData.allForm.tabKey =
  182. this.populationData.allForm.people == '0'
  183. ? '1'
  184. : this.populationData.allForm.people == '1'
  185. ? '1'
  186. : this.populationData.allForm.people == '2'
  187. ? '2'
  188. : '1'
  189. this.populationData.allForm.incluedSelectedRowKeys =
  190. dataJson.population && dataJson.population.length > 0 ? dataJson.population : []
  191. this.populationData.allForm.incluedSelectedKeys =
  192. dataJson.population && dataJson.population.length > 0 ? dataJson.population : []
  193. this.populationData.allForm.excludeSelectedKeys =
  194. dataJson.excludePopulation && dataJson.excludePopulation.length > 0
  195. ? dataJson.excludePopulation
  196. : []
  197. this.populationData.allForm.excludeSelectedRowKeys =
  198. dataJson.excludePopulation && dataJson.excludePopulation.length > 0
  199. ? dataJson.excludePopulation
  200. : []
  201. this.populationData.allForm.regionType =
  202. dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
  203. this.populationData.allForm.region = dataJson.region
  204. // postAction('/kuaishou/batch/getRegionDetail', {
  205. // regionArr: dataJson.region
  206. // }).then(res => {
  207. // console.log(res, 11111)
  208. // if (res.success) {
  209. // this.populationData.allForm.region = res.result
  210. // }
  211. // })
  212. this.populationData.allForm.ageType =
  213. dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min > 0 ? 'ageCustom' : 'noLimit'
  214. this.populationData.allForm.device =
  215. dataJson.deviceBrand && eval(dataJson.deviceBrand).length > 0 ? '1' : '0'
  216. this.populationData.allForm.price =
  217. dataJson.devicePrice && eval(dataJson.devicePrice).length > 0 ? '1' : '0'
  218. this.populationData.allForm.appType =
  219. dataJson.appInterest && eval(dataJson.appInterest).length > 0
  220. ? '1'
  221. : dataJson.appIds && eval(dataJson.appIds).length > 0
  222. ? '2'
  223. : '0'
  224. this.populationData.allForm.fansStar =
  225. dataJson.fansStar && eval(dataJson.fansStar).length > 0 ? '1' : '0'
  226. this.populationData.allForm.interestVideo =
  227. dataJson.interestVideo && eval(dataJson.interestVideo).length > 0 ? '1' : '0'
  228. this.populationData.allForm.platform_os = dataJson.platformOs
  229. this.populationData.allForm.businessInterestType = dataJson.businessInterestType
  230. this.populationData.allForm.isOpen = dataJson.isOpen
  231. this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
  232. this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
  233. this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
  234. this.populationData.allForm.behaviorInterest = dataJson.label && dataJson.label != '[]' ? '1' : '0'
  235. this.populationData.allForm.checkArr =
  236. this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
  237. this.populationData.projectId = dataJson.projectId + ''
  238. this.disabled = true
  239. this.$nextTick(() => {
  240. console.log(dataJson)
  241. this.form.setFieldsValue(pick(dataJson, ['templateName']))
  242. this.spinning = false
  243. })
  244. }
  245. })
  246. },
  247. handleCancel(e) {
  248. this.visible = false
  249. },
  250. handleSubmit(e) {
  251. // this.$refs.population.handleSubmit()
  252. e.preventDefault()
  253. this.$refs.population.handleSubmit()
  254. this.$refs.population.formAll.validateFields((err, value) => {
  255. if (this.populationData.allForm.appType == '2') {
  256. if (this.populationData.appIds.length == 0) {
  257. this.$message.error('APP名称未选择')
  258. }
  259. }
  260. if (!err) {
  261. this.form.validateFieldsAndScroll((err, values) => {
  262. if (!err) {
  263. // this.loading = true
  264. if (this.accountId) {
  265. var params = {
  266. ...this.populationData,
  267. targetName: values.templateName,
  268. accountId: this.accountId
  269. }
  270. params.label = params.behavior ? JSON.stringify(params.behavior) : '[]'
  271. params.interestLabel = params.interest ? JSON.stringify(params.interest) : '[]'
  272. if (this.type == 'add') {
  273. postAction('/auto/aiKuaishouAccountAutoTarget/addLocalTarget', params).then(res => {
  274. if (res.success) {
  275. this.visible = false
  276. this.loading = false
  277. this.$emit('getData')
  278. } else {
  279. this.loading = false
  280. this.$message.error(res.message)
  281. }
  282. })
  283. } else if (this.type == 'edit') {
  284. params.id = this.templateId
  285. postAction('/auto/aiKuaishouAccountAutoTarget/updateLocalTarget', params).then(
  286. res => {
  287. this.visible = false
  288. if (res.success) {
  289. this.loading = false
  290. this.$emit('getData')
  291. } else {
  292. this.loading = false
  293. this.$message.error(res.message)
  294. }
  295. }
  296. )
  297. }
  298. } else {
  299. this.$message.error('请选择项目')
  300. }
  301. }
  302. })
  303. }
  304. })
  305. }
  306. }
  307. }
  308. </script>