templateModal.vue 9.6 KB

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