templateModal.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  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. <targeted-population ref="population" :populationData.sync="populationData" />
  53. </a-form>
  54. </a-spin>
  55. <template slot="footer">
  56. <!-- <a-button type="primary" @click="handleSubmit" :loading="loading"> 确定 </a-button> -->
  57. <a-button
  58. type="default"
  59. @click="
  60. () => {
  61. this.visible = false
  62. }
  63. "
  64. >
  65. 取消
  66. </a-button>
  67. <a-button type="primary" @click="handleSubmit" :loading="loading">
  68. {{ type == 'add' ? '确定' : '修改' }}
  69. </a-button>
  70. </template>
  71. </a-modal>
  72. </template>
  73. <script>
  74. import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
  75. import moment from 'moment'
  76. import { mapGetters } from 'vuex'
  77. import jq from 'jquery'
  78. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  79. import targetedPopulation from './targetedPopulation.vue'
  80. import pick from 'lodash.pick'
  81. export default {
  82. name: 'new-mould',
  83. components: {
  84. targetedPopulation,
  85. selectTable,
  86. },
  87. data() {
  88. return {
  89. visible: false,
  90. spinning: false,
  91. projectName: '',
  92. form: this.$form.createForm(this),
  93. projectId: '',
  94. populationData: {},
  95. accountId: '',
  96. templateId: undefined,
  97. type: 'add',
  98. loading: false,
  99. labelCol: { lg: { span: 7 }, sm: { span: 7 } },
  100. disabled: false,
  101. id:null
  102. }
  103. },
  104. computed: {},
  105. methods: {
  106. create(accountId, type) {
  107. this.disabled = false
  108. this.spinning = false
  109. this.visible = true
  110. this.type = type
  111. this.populationData = {}
  112. this.accountId = accountId
  113. },
  114. handleOk(item, type) {
  115. this.spinning = true
  116. this.visible = true
  117. this.type = type
  118. // var params = {}
  119. // params.id = item.id
  120. // this.templateId = item.id
  121. // this.projectName = item.projectName
  122. // this.projectId = item.projectId
  123. // getAction('/kuaishouDirectionalPackage/queryById', params).then((res) => {
  124. // if (res.success) {
  125. this.id = item.id;
  126. var dataJson = {
  127. ...item,
  128. }
  129. this.populationData = dataJson
  130. this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
  131. this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
  132. this.populationData.businessInterest = dataJson.businessInterest
  133. ? JSON.parse(dataJson.businessInterest)
  134. : null
  135. this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
  136. this.populationData.interestVideo = dataJson.interestVideo ? JSON.parse(dataJson.interestVideo) : null
  137. this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null
  138. this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
  139. this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
  140. this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
  141. this.populationData.behavior = dataJson.label
  142. this.populationData.interest = dataJson.interestLabel
  143. this.populationData.sceneType = dataJson.sceneType ? JSON.parse(dataJson.sceneType) : []
  144. this.populationData.allForm = {}
  145. this.populationData.allForm.regionType =
  146. dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
  147. this.populationData.allForm.region = dataJson.region
  148. // postAction('/kuaishou/batch/getRegionDetail', {
  149. // regionArr: dataJson.region
  150. // }).then(res => {
  151. // console.log(res, 11111)
  152. // if (res.success) {
  153. // this.populationData.allForm.region = res.result
  154. // }
  155. // })
  156. this.populationData.allForm.ageType =
  157. dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min>0 ? 'ageCustom' : 'noLimit'
  158. this.populationData.allForm.device = dataJson.deviceBrand && eval(dataJson.deviceBrand).length > 0 ? '1' : '0'
  159. this.populationData.allForm.price = dataJson.devicePrice && eval(dataJson.devicePrice).length > 0 ? '1' : '0'
  160. this.populationData.allForm.appType =
  161. dataJson.appInterest && eval(dataJson.appInterest).length > 0
  162. ? '1'
  163. : dataJson.appIds && eval(dataJson.appIds).length > 0
  164. ? '2'
  165. : '0'
  166. this.populationData.allForm.fansStar =
  167. dataJson.fansStar && eval(dataJson.fansStar).length > 0 ? '1' : '0'
  168. this.populationData.allForm.interestVideo =
  169. dataJson.interestVideo && eval(dataJson.interestVideo).length > 0 ? '1' : '0'
  170. this.populationData.allForm.platform_os = dataJson.platformOs
  171. this.populationData.allForm.businessInterestType = dataJson.businessInterestType
  172. this.populationData.allForm.isOpen = dataJson.isOpen
  173. this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
  174. this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
  175. this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
  176. this.populationData.allForm.behaviorInterest = dataJson.label=='[]' ? '1' : '0'
  177. this.populationData.allForm.checkArr =
  178. this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
  179. this.populationData.projectId = dataJson.projectId + ''
  180. this.disabled = true
  181. this.$nextTick(() => {
  182. this.spinning = false
  183. })
  184. },
  185. handleCancel(e) {
  186. this.visible = false
  187. },
  188. handleSubmit(e) {
  189. // this.$refs.population.handleSubmit()
  190. var data = JSON.parse(localStorage.getItem('materialDetail'))
  191. e.preventDefault()
  192. this.$refs.population.handleSubmit()
  193. this.$refs.population.formAll.validateFields((err, value) => {
  194. if (!err) {
  195. this.form.validateFieldsAndScroll((err, values) => {
  196. if (!err) {
  197. this.loading = true
  198. // this.loading = true
  199. var params = {
  200. ...this.populationData,
  201. videoGetId: data.id,
  202. signature: data.md5,
  203. id:this.id
  204. }
  205. params.label = params.behavior?JSON.stringify(params.behavior):'[]'
  206. params.interestLabel = params.interest?JSON.stringify(params.interest):'[]'
  207. console.log(this.populationData)
  208. if (this.populationData.allForm.regionType == 'limit') {
  209. if(this.populationData.allForm.region.length === 0) {
  210. this.$message.error('请选择地域');
  211. this.loading = false
  212. return
  213. }
  214. }
  215. if (this.type == 'add') {
  216. postAction('/kuaishouVideoDirectionalPackage/saveOrUpdate', params).then((res) => {
  217. if (res.success) {
  218. this.visible = false
  219. this.loading = false
  220. this.$emit('getData')
  221. } else {
  222. this.loading = false
  223. this.$message.error(res.message)
  224. }
  225. })
  226. } else if (this.type == 'edit') {
  227. postAction('/kuaishouVideoDirectionalPackage/saveOrUpdate', params).then((res) => {
  228. this.visible = false
  229. if (res.success) {
  230. this.loading = false
  231. this.$emit('getData')
  232. } else {
  233. this.loading = false
  234. this.$message.error(res.message)
  235. }
  236. })
  237. }
  238. }
  239. })
  240. }
  241. })
  242. },
  243. },
  244. }
  245. </script>