targetedPopulation.vue 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417
  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. .module-form .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. <style scoped>
  25. ul {
  26. padding-left: 0;
  27. }
  28. li {
  29. list-style: none;
  30. }
  31. li:hover {
  32. background: #f2f2f2;
  33. }
  34. </style>
  35. <template>
  36. <a-form :form="formAll" class="module-form" @submit="handleSubmit" :hideRequiredMark="true">
  37. <a-form-item
  38. label="地区"
  39. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  40. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  41. >
  42. <a-radio-group @change="regionChange" v-model="allForm.regionType" buttonStyle="solid">
  43. <a-radio-button value="noLimit">不限</a-radio-button>
  44. <a-radio-button value="limit">指定地区</a-radio-button>
  45. </a-radio-group>
  46. <div v-if="allForm.regionType == 'limit'" style="margin-top: 10px">
  47. <select-region :checkData.sync="allForm.region" :dataValue="allForm.region" />
  48. </div>
  49. </a-form-item>
  50. <a-form-item
  51. label="年龄"
  52. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  53. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  54. >
  55. <a-radio-group v-model="allForm.ageType" buttonStyle="solid">
  56. <a-radio-button value="noLimit">不限</a-radio-button>
  57. <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
  58. <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
  59. </a-radio-group>
  60. <div v-if="allForm.ageType == 'ageLimit'" style="margin-top: 5px">
  61. <a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
  62. <!-- <a-checkbox :value="0">0-11岁</a-checkbox>
  63. <a-checkbox :value="12">12-17岁</a-checkbox> -->
  64. <a-checkbox :value="18">18-23岁</a-checkbox>
  65. <a-checkbox :value="24">24-30岁</a-checkbox>
  66. <a-checkbox :value="31">31-40岁</a-checkbox>
  67. <a-checkbox :value="41">41-49岁</a-checkbox>
  68. <a-checkbox :value="50">50+</a-checkbox>
  69. </a-checkbox-group>
  70. </div>
  71. <div v-if="allForm.ageType == 'ageCustom'">
  72. <a-slider
  73. range
  74. :marks="marks"
  75. :min="5"
  76. :max="55"
  77. v-decorator="[
  78. 'age',
  79. {
  80. rules: [{ required: true, message: '请选择年龄段' }, { validator: handleConfirmValue }],
  81. initialValue: [10, 50],
  82. },
  83. ]"
  84. />
  85. </div>
  86. </a-form-item>
  87. <a-form-item
  88. label="性别"
  89. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  90. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  91. >
  92. <a-radio-group
  93. buttonStyle="solid"
  94. v-decorator="[
  95. 'gender',
  96. {
  97. initialValue: 0,
  98. },
  99. ]"
  100. >
  101. <a-radio-button :value="0">不限</a-radio-button>
  102. <a-radio-button :value="1">女性</a-radio-button>
  103. <a-radio-button :value="2">男性</a-radio-button>
  104. </a-radio-group>
  105. </a-form-item>
  106. <a-form-item
  107. label="行为意向"
  108. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  109. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  110. >
  111. <a-radio-group buttonStyle="solid" v-model="allForm.behaviorInterest">
  112. <a-radio-button value="0">不限</a-radio-button>
  113. <a-radio-button value="1">自定义</a-radio-button>
  114. </a-radio-group>
  115. <br />
  116. 行为意向旨在帮助广告主精准定向用户
  117. </a-form-item>
  118. <a-form-item
  119. label="行为场景"
  120. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  121. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  122. class="else-label"
  123. v-if="allForm.behaviorInterest === '1'"
  124. >
  125. <a-select
  126. mode="multiple"
  127. style="width: 100%"
  128. optionFilterProp="children"
  129. showSearch
  130. :filterOption="filterOption"
  131. v-decorator="[
  132. 'sceneType',
  133. { rules: [{ required: true, message: '请选择行为场景' }], initialValue: [1, 2, 4] },
  134. ]"
  135. >
  136. <a-select-option :value="1">社区</a-select-option>
  137. <a-select-option :value="2">APP</a-select-option>
  138. <a-select-option :value="4">推广</a-select-option>
  139. </a-select>
  140. </a-form-item>
  141. <a-form-item
  142. label=" "
  143. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  144. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  145. class="else-label"
  146. v-if="allForm.behaviorInterest === '1'"
  147. >
  148. <a-select
  149. style="width: 30%"
  150. optionFilterProp="children"
  151. showSearch
  152. :filterOption="filterOption"
  153. v-decorator="['timeType', { rules: [{ required: true, message: '请选择行为场景' }], initialValue: 4 }]"
  154. >
  155. <a-select-option :value="0">7天</a-select-option>
  156. <a-select-option :value="1">15天</a-select-option>
  157. <a-select-option :value="2">30天</a-select-option>
  158. <a-select-option :value="3">90天</a-select-option>
  159. <a-select-option :value="4">180天</a-select-option>
  160. </a-select>
  161. 天内发生行为的用户
  162. </a-form-item>
  163. <a-form-item
  164. label="行为强度"
  165. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  166. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  167. v-if="allForm.behaviorInterest === '1'"
  168. >
  169. <a-radio-group
  170. buttonStyle="solid"
  171. v-decorator="['strengthType', { rules: [{ required: true, message: '行为强度必选' }], initialValue: 0 }]"
  172. >
  173. <a-radio-button :value="0">不限</a-radio-button>
  174. <a-radio-button :value="1">高强度</a-radio-button>
  175. </a-radio-group>
  176. </a-form-item>
  177. <a-form-item
  178. label="行为定向选择"
  179. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  180. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  181. v-if="allForm.behaviorInterest === '1'"
  182. >
  183. <el-cascader
  184. style="width:100%"
  185. :options="behaviorData"
  186. @change="getAllData"
  187. :props="{ multiple: true,value:'id',label:'name',emitPath:false }"
  188. v-decorator="['behavior', { rules: [{ required: true, message: '行为意向必选' }]}]"
  189. collapse-tags
  190. clearable></el-cascader>
  191. </a-form-item>
  192. <a-form-item
  193. label="意向定向选择"
  194. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  195. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  196. v-if="allForm.behaviorInterest === '1'"
  197. >
  198. <el-cascader
  199. style="width:100%"
  200. :options="interestData"
  201. @change="getAllData"
  202. :props="{ multiple: true,value:'id',label:'name',emitPath:false }"
  203. v-decorator="['interest']"
  204. collapse-tags
  205. clearable></el-cascader>
  206. </a-form-item>
  207. <a-form-item
  208. label="最低版本"
  209. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  210. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  211. >
  212. <a-radio-group buttonStyle="solid" v-model="allForm.platform_os">
  213. <a-radio-button :value="0" v-if="getApp == '0'">不限</a-radio-button>
  214. <a-radio-button :value="1" v-if="getApp == '0' || getApp == '1'">Android系统</a-radio-button>
  215. <a-radio-button :value="2" v-if="getApp == '0' || getApp == '2'">IOS系统</a-radio-button>
  216. </a-radio-group>
  217. </a-form-item>
  218. <a-form-item
  219. label=" "
  220. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  221. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  222. v-if="allForm.platform_os == 1"
  223. class="else-label"
  224. style="margin-top: -16px"
  225. >
  226. <a-radio-group
  227. v-decorator="[
  228. 'androidOsv',
  229. {
  230. initialValue: 3,
  231. },
  232. ]"
  233. >
  234. <a-radio :value="3">不限</a-radio>
  235. <a-radio :value="4">4X+</a-radio>
  236. <a-radio :value="5">5x+</a-radio>
  237. <a-radio :value="6">6x+</a-radio>
  238. <a-radio :value="7">7x+</a-radio>
  239. <a-radio :value="8">8x+</a-radio>
  240. <a-radio :value="9">9x+</a-radio>
  241. <a-radio :value="10">10x+</a-radio>
  242. </a-radio-group>
  243. </a-form-item>
  244. <a-form-item
  245. label=" "
  246. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  247. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  248. v-if="allForm.platform_os == 2"
  249. class="else-label"
  250. style="margin-top: -16px"
  251. >
  252. <a-radio-group
  253. v-decorator="[
  254. 'iosOsv',
  255. {
  256. initialValue: 6,
  257. },
  258. ]"
  259. >
  260. <a-radio :value="6">不限</a-radio>
  261. <a-radio :value="7">7X+</a-radio>
  262. <a-radio :value="8">8x+</a-radio>
  263. <a-radio :value="9">9x+</a-radio>
  264. <a-radio :value="10">10x+</a-radio>
  265. </a-radio-group>
  266. </a-form-item>
  267. <a-form-item
  268. v-if="allForm.platform_os != 2"
  269. label="设备品牌"
  270. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  271. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  272. >
  273. <a-radio-group buttonStyle="solid" v-model="allForm.device">
  274. <a-radio-button value="0">不限</a-radio-button>
  275. <a-radio-button value="1">选择品牌</a-radio-button>
  276. </a-radio-group>
  277. <div v-if="allForm.device == '1'" style="width: 120%; margin-top: 15px">
  278. <a-checkbox-group
  279. v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
  280. style="width: 120%"
  281. >
  282. <a-checkbox :value="1" style="margin-bottom: 8px">OPPO</a-checkbox>
  283. <a-checkbox :value="2" style="margin-bottom: 8px">VIVO</a-checkbox>
  284. <a-checkbox :value="3" style="margin-bottom: 8px">华为</a-checkbox>
  285. <a-checkbox :value="4" style="margin-bottom: 8px">小米</a-checkbox>
  286. <a-checkbox :value="5" style="margin-bottom: 8px">荣耀</a-checkbox>
  287. <a-checkbox :value="6" style="margin-bottom: 8px">三星</a-checkbox>
  288. <a-checkbox :value="7" style="margin-bottom: 8px">金立</a-checkbox>
  289. <a-checkbox :value="8" style="margin: 0 0 8px 0">魅族</a-checkbox>
  290. <a-checkbox :value="9" style="margin-bottom: 8px">乐视</a-checkbox>
  291. <a-checkbox :value="10" style="margin-bottom: 8px">其他</a-checkbox>
  292. <a-checkbox :value="11" v-if="allForm.platform_os == 0" style="margin-bottom: 8px">苹果</a-checkbox>
  293. </a-checkbox-group>
  294. </div>
  295. </a-form-item>
  296. <a-form-item
  297. label="设备价格"
  298. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  299. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  300. >
  301. <a-radio-group buttonStyle="solid" v-model="allForm.price">
  302. <a-radio-button value="0">不限</a-radio-button>
  303. <a-radio-button value="1">选择价格</a-radio-button>
  304. </a-radio-group>
  305. <div v-if="allForm.price == '1'" style="width: 120%; margin-top: 10px">
  306. <a-checkbox-group
  307. v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
  308. style="width: 120%"
  309. >
  310. <a-checkbox :value="1" style="margin-bottom: 8px">1500以下</a-checkbox>
  311. <a-checkbox :value="2" style="margin-bottom: 8px">1501~2000</a-checkbox>
  312. <a-checkbox :value="3" style="margin-bottom: 8px">2001~2500</a-checkbox>
  313. <a-checkbox :value="4" style="margin-bottom: 8px">2501~3000</a-checkbox>
  314. <a-checkbox :value="5" style="margin-left: 0; margin-bottom: 8px">3001~3500</a-checkbox>
  315. <a-checkbox :value="6" style="margin-bottom: 8px">3501~4000</a-checkbox>
  316. <a-checkbox :value="7" style="margin-bottom: 8px">4001~4500</a-checkbox>
  317. <a-checkbox :value="8" style="margin-bottom: 8px">4501~5000</a-checkbox>
  318. <a-checkbox :value="9" style="margin-left: 0; margin-bottom: 8px">5001~5500</a-checkbox>
  319. <a-checkbox :value="10" style="margin-bottom: 8px">5500以上</a-checkbox>
  320. </a-checkbox-group>
  321. </div>
  322. </a-form-item>
  323. <a-form-item
  324. label="APP行为"
  325. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  326. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  327. v-if="allForm.platform_os == 1 && allForm.platform_os && lol == '1'"
  328. >
  329. <a-radio-group buttonStyle="solid" v-model="allForm.appType" @change="getAppType">
  330. <a-radio-button value="0">不限</a-radio-button>
  331. <a-radio-button value="1">按分类</a-radio-button>
  332. <a-radio-button value="2">按APP名称</a-radio-button>
  333. </a-radio-group>
  334. </a-form-item>
  335. <a-form-item
  336. label=" "
  337. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  338. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  339. v-if="allForm.platform_os == 1 && allForm.appType == '1' && lol == '1'"
  340. class="else-label"
  341. >
  342. <a-select
  343. mode="multiple"
  344. style="width: 100%"
  345. optionFilterProp="children"
  346. showSearch
  347. :filterOption="filterOption"
  348. v-decorator="['appInterest', { rules: [{ required: true, message: '请选择APP行为' }] }]"
  349. >
  350. <a-select-option v-for="item in optionsAppActive" :key="item.tagId" :value="item.tagId">{{
  351. item.tagName
  352. }}</a-select-option>
  353. </a-select>
  354. </a-form-item>
  355. <a-form-item
  356. label=" "
  357. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  358. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  359. v-if="allForm.platform_os == 1 && allForm.appType == '2' && lol == '1'"
  360. class="else-label"
  361. >
  362. <div style="position: relative" v-clickoutside="handleClose">
  363. <a-input
  364. placeholder="请输入搜索内容"
  365. @change="getAppAll"
  366. @focus="getAppAllElse"
  367. style="width: 100%; position: relative"
  368. v-model="appListValue"
  369. />
  370. <div
  371. style="
  372. width: 100%;
  373. position: absolute;
  374. z-index: 10;
  375. height: 200px;
  376. background: white;
  377. overflow: auto;
  378. box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  379. "
  380. v-if="closeDialog"
  381. >
  382. <ul>
  383. <li style="padding: 0 10px">
  384. <a-checkbox
  385. style="float: left; margin: 0 5px"
  386. @change="onCheckAllChange"
  387. :indeterminate="indeterminate"
  388. :checked="checkAll"
  389. ></a-checkbox
  390. >全选
  391. </li>
  392. <a-checkbox-group @change="onChange" v-model="checkArr" class="home-card" style="width: 100%">
  393. <li style="padding: 0 10px; width: 100%" v-for="item of optionsApp" :key="item.appId">
  394. <a-checkbox :value="item.appId" style="float: left; margin: 0 5px"></a-checkbox>{{ item.appName }}
  395. </li>
  396. </a-checkbox-group>
  397. </ul>
  398. </div>
  399. <div style="width: 100%" v-if="optionsAll.length > 0">
  400. <a-tag v-for="item of optionsAll" :key="item" closable :afterClose="() => log(item)">
  401. {{ showAppName(item) ? showAppName(item) : item }}
  402. </a-tag>
  403. </div>
  404. </div>
  405. </a-form-item>
  406. <a-form-item
  407. label="商业兴趣"
  408. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  409. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  410. v-if="lol == '1'"
  411. >
  412. <a-radio-group buttonStyle="solid" @change="businessInterest" v-model="allForm.businessInterestType">
  413. <a-radio-button :value="0">不限</a-radio-button>
  414. <a-radio-button :value="1">智能推荐</a-radio-button>
  415. <a-radio-button :value="2">兴趣标签</a-radio-button>
  416. </a-radio-group>
  417. <br />
  418. <span v-if="allForm.businessInterestType == 1"
  419. >商业兴趣定向会根据您的投放计划,智能精选出最匹配人群,帮助您获取更满足投放意图的人群,以达到最好的投放效果。</span
  420. >
  421. </a-form-item>
  422. <a-form-item
  423. label=" "
  424. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  425. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  426. class="else-label"
  427. v-if="allForm.businessInterestType == 2 && lol == '1'"
  428. >
  429. <a-select
  430. mode="multiple"
  431. style="width: 100%"
  432. optionFilterProp="children"
  433. showSearch
  434. :filterOption="filterOption"
  435. v-decorator="['businessInterest', { rules: [{ required: true, message: '请选择商业兴趣' }] }]"
  436. >
  437. <a-select-option v-for="item in businessOptions" :key="item.tagId" :value="item.tagId">{{
  438. item.tagName
  439. }}</a-select-option>
  440. </a-select>
  441. </a-form-item>
  442. <a-form-item
  443. label="网络环境"
  444. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  445. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  446. >
  447. <a-radio-group
  448. buttonStyle="solid"
  449. v-decorator="[
  450. 'network',
  451. {
  452. initialValue: 0,
  453. },
  454. ]"
  455. >
  456. <a-radio-button :value="0">不限</a-radio-button>
  457. <a-radio-button :value="1">Wi-Fi</a-radio-button>
  458. <a-radio-button :value="2">移动网络</a-radio-button>
  459. </a-radio-group>
  460. </a-form-item>
  461. <a-form-item
  462. label="网红粉丝"
  463. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  464. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  465. v-if="lol == '1'"
  466. >
  467. <a-radio-group buttonStyle="solid" v-model="allForm.fansStar" @change="fansStar">
  468. <a-radio-button value="0">不限</a-radio-button>
  469. <a-radio-button value="1">网红类别</a-radio-button>
  470. </a-radio-group>
  471. </a-form-item>
  472. <a-form-item
  473. label=" "
  474. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  475. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  476. class="else-label"
  477. v-if="allForm.fansStar == '1' && lol == '1'"
  478. >
  479. <a-select
  480. mode="multiple"
  481. style="width: 100%"
  482. optionFilterProp="children"
  483. showSearch
  484. :filterOption="filterOption"
  485. v-decorator="['fansStar', { rules: [{ required: true, message: '请选择网红类别' }] }]"
  486. >
  487. <a-select-option v-for="item in fansStarOptions" :key="item.tagId" :value="item.tagId">{{
  488. item.tagName
  489. }}</a-select-option>
  490. </a-select>
  491. </a-form-item>
  492. <a-form-item
  493. label="兴趣视频用户"
  494. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  495. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  496. v-if="lol == '1'"
  497. >
  498. <a-radio-group buttonStyle="solid" v-model="allForm.interestVideo" @change="interestVideo">
  499. <a-radio-button value="0">不限</a-radio-button>
  500. <a-radio-button value="1">视频标签</a-radio-button>
  501. </a-radio-group>
  502. </a-form-item>
  503. <a-form-item
  504. label=" "
  505. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  506. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  507. class="else-label"
  508. v-if="allForm.interestVideo == '1' && lol == '1'"
  509. >
  510. <a-select
  511. mode="multiple"
  512. style="width: 100%"
  513. optionFilterProp="children"
  514. showSearch
  515. showArrow
  516. :filterOption="filterOption"
  517. v-decorator="['interestVideo', { rules: [{ required: true, message: '请选择视频标签' }] }]"
  518. >
  519. <a-select-option v-for="item in interestVideoOptions" :key="item.tagId" :value="item.tagId">{{
  520. item.tagName
  521. }}</a-select-option>
  522. </a-select>
  523. </a-form-item>
  524. <a-form-item
  525. label="过滤已转化用户"
  526. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  527. :wrapperCol="{ lg: { span: 15 }, sm: { span: 15 } }"
  528. >
  529. <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
  530. <a-radio-button :value="0">不限</a-radio-button>
  531. <a-radio-button :value="1">广告组</a-radio-button>
  532. <a-radio-button :value="2">广告计划</a-radio-button>
  533. <a-radio-button :value="3">本账户</a-radio-button>
  534. <a-radio-button :value="4">公司主体</a-radio-button>
  535. <a-radio-button :value="5">APP</a-radio-button>
  536. </a-radio-group>
  537. </a-form-item>
  538. <a-form-item
  539. label="智能扩量"
  540. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  541. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  542. v-if="lol == '1'"
  543. >
  544. <a-radio-group buttonStyle="solid" v-model="allForm.isOpen">
  545. <a-radio-button :value="0">关闭</a-radio-button>
  546. <a-radio-button :value="1">开启</a-radio-button>
  547. </a-radio-group>
  548. </a-form-item>
  549. <a-form-item
  550. label=" "
  551. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  552. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  553. class="else-label"
  554. v-if="allForm.isOpen == 1 && lol == '1'"
  555. >
  556. <a-checkbox :disabled="allForm.ageType == 'noLimit'" :checked="allForm.noAgeBreak" @change="getAge"
  557. >不可突破年龄</a-checkbox
  558. >
  559. <a-checkbox :disabled="getData('gender') == '0'" :checked="allForm.noGenderBreak" @change="getGender"
  560. >不可突破性别</a-checkbox
  561. >
  562. <a-checkbox
  563. :disabled="allForm.regionType != 'limit' || allForm.region.length == 0"
  564. :checked="allForm.noAreaBreak"
  565. @change="getArea"
  566. >不可突破地域</a-checkbox
  567. >
  568. </a-form-item>
  569. </a-form>
  570. </template>
  571. <script>
  572. import { getAction, postAction } from '@/api/manage'
  573. import moment from 'moment'
  574. import { mapGetters } from 'vuex'
  575. import jq from 'jquery'
  576. import selectRegion from './selectRegion'
  577. import pick from 'lodash.pick'
  578. let dateQuantumRangeConst = ''
  579. const clickoutside = {
  580. // 初始化指令
  581. bind(el, binding, vnode) {
  582. function documentHandler(e) {
  583. // 这里判断点击的元素是否是本身,是本身,则返回
  584. if (el.contains(e.target)) {
  585. return false
  586. }
  587. // 判断指令中是否绑定了函数
  588. if (binding.expression) {
  589. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  590. binding.value(e)
  591. }
  592. }
  593. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  594. el.__vueClickOutside__ = documentHandler
  595. document.addEventListener('click', documentHandler)
  596. },
  597. update() {},
  598. unbind(el, binding) {
  599. // 解除事件监听
  600. document.removeEventListener('click', el.__vueClickOutside__)
  601. delete el.__vueClickOutside__
  602. },
  603. }
  604. const columns = [
  605. {
  606. title: '人群',
  607. dataIndex: 'orientationName',
  608. scopedSlots: { customRender: 'orientationName' },
  609. width: 150,
  610. },
  611. {
  612. title: '属性',
  613. dataIndex: 'populationType',
  614. filters: [
  615. { text: '上传人群', value: '1' },
  616. { text: '广告人群', value: '2' },
  617. { text: '主题专区', value: '3' },
  618. { text: '逻辑规则', value: '4' },
  619. { text: '人群扩展', value: '5' },
  620. { text: '平台定制', value: '6' },
  621. { text: '定制付费', value: '7' },
  622. { text: '网红粉丝类别', value: '8' },
  623. { text: '内容付费行为', value: '9' },
  624. { text: '移动应用安装', value: '10' },
  625. { text: '快手使用活跃度', value: '11' },
  626. { text: '行业分类', value: '12' },
  627. { text: '商业兴趣', value: '13' },
  628. { text: '固化标签', value: '14' },
  629. { text: '行业偏好', value: '15' },
  630. { text: '第三方标签', value: '16' },
  631. { text: '产品关键词', value: '17' },
  632. ],
  633. onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
  634. scopedSlots: { customRender: 'populationType' },
  635. width: 150,
  636. },
  637. {
  638. title: '创建时间',
  639. dataIndex: 'putTime',
  640. scopedSlots: { customRender: 'putTime' },
  641. sorter: (a, b) => a.putTime - b.putTime,
  642. },
  643. ]
  644. export default {
  645. name: 'BaseForm',
  646. components: { selectRegion },
  647. props: {
  648. campaignId: {
  649. type: String,
  650. default() {
  651. return null
  652. },
  653. },
  654. platform: {
  655. default() {
  656. return null
  657. },
  658. },
  659. populationData: {},
  660. lol: {
  661. type: String,
  662. default() {
  663. return '1'
  664. },
  665. },
  666. },
  667. filters: {
  668. getDate(value) {
  669. let date = new Date(value)
  670. let y = date.getFullYear()
  671. let MM = date.getMonth() + 1
  672. MM = MM < 10 ? '0' + MM : MM
  673. let d = date.getDate()
  674. d = d < 10 ? '0' + d : d
  675. return y + '-' + MM + '-' + d
  676. },
  677. platform(str) {
  678. var data = {
  679. 1: 'Android应用下载',
  680. 2: 'Android网页游戏',
  681. 3: 'iOS应用下载',
  682. 4: 'iOS网页游戏',
  683. }
  684. return data[str]
  685. },
  686. population_type(str) {
  687. var data = {
  688. 1: '上传人群',
  689. 2: '广告人群',
  690. 3: '主题专区',
  691. 4: '逻辑规则',
  692. 5: '人群扩展',
  693. 6: '平台定制',
  694. 7: '定制付费',
  695. 8: '网红粉丝类别',
  696. 9: '内容付费行为',
  697. 10: '移动应用安装',
  698. 11: '快手使用活跃度',
  699. 12: '行业分类',
  700. 13: '商业兴趣',
  701. 14: '固化标签',
  702. 15: '行业偏好',
  703. 16: '第三方标签',
  704. 17: '产品关键词',
  705. }
  706. return data[str]
  707. },
  708. },
  709. watch: {
  710. platform(n, o) {
  711. if (n == 1 || n == 2) {
  712. // platform_os
  713. this.allForm.platform_os = 1
  714. // this.form.setFieldsValue({ platform_os: '1' })
  715. } else if (n == 3 || n == 4) {
  716. this.allForm.platform_os = 2
  717. // this.form.setFieldsValue({ platform_os: '2' })
  718. } else {
  719. this.allForm.platform_os = 0
  720. // this.form.setFieldsValue({ platform_os: '0' })
  721. }
  722. },
  723. populationData: {
  724. immediate: true, // immediate选项可以开启首次赋值监听
  725. handler(n, oldVal) {
  726. console.log(n)
  727. if (n.allForm) {
  728. this.allForm = n.allForm
  729. this.allForm.noAgeBreak = n.noAgeBreak == '0' ? false : true
  730. this.allForm.noGenderBreak = n.noGenderBreak == '0' ? false : true
  731. this.allForm.noAreaBreak = n.noAreaBreak == '0' ? false : true
  732. this.selectedRowKeys = n.population ? n.population : []
  733. this.selectedRowKeysNo = n.excludePopulation ? n.excludePopulation : []
  734. this.optionsAll = n.appIds ? (typeof n.appIds == 'string' ? JSON.parse(n.appIds) : n.appIds) : []
  735. n.behavior = typeof n.behavior === 'string' ? JSON.parse(n.behavior) : n.behavior;
  736. n.interest = typeof n.interest === 'string' ? JSON.parse(n.interest) : n.interest;
  737. this.$nextTick(() => {
  738. this.formAll.setFieldsValue(
  739. pick(n, [
  740. 'fansStar',
  741. 'interestVideo',
  742. 'appInterest',
  743. 'gender',
  744. 'network',
  745. 'agesRange',
  746. 'age',
  747. 'androidOsv',
  748. 'iosOsv',
  749. 'deviceBrand',
  750. 'devicePrice',
  751. 'businessInterest',
  752. 'filterConvertedLevel',
  753. 'timeType',
  754. 'strengthType',
  755. 'sceneType',
  756. ])
  757. )
  758. setTimeout(() => {
  759. this.formAll.setFieldsValue(
  760. pick(n, [
  761. 'behavior',
  762. 'interest'
  763. ])
  764. )
  765. },100)
  766. })
  767. } else {
  768. this.formAll.resetFields()
  769. this.selectedRowKeys = []
  770. this.selectedRowKeysNo = []
  771. this.selectedRowKeysValueNo = []
  772. this.selectedRowKeysValue = []
  773. this.targeted = '2'
  774. this.people = '2'
  775. this.allForm = {
  776. behaviorInterest: '0',
  777. regionType: 'noLimit',
  778. region: [],
  779. ageType: 'noLimit',
  780. age: [],
  781. device: '0',
  782. price: '0',
  783. appType: '0',
  784. fansStar: '0',
  785. interestVideo: '0',
  786. platform_os: 0,
  787. businessInterestType: 0,
  788. isOpen: 0,
  789. noAgeBreak: false,
  790. noGenderBreak: false,
  791. noAreaBreak: false,
  792. }
  793. }
  794. },
  795. },
  796. checkArr(n, o) {
  797. console.log(n, o)
  798. this.optionsAll.push(...n)
  799. this.optionsAll = [...new Set(this.optionsAll)]
  800. if (n.length != o.length) {
  801. if (n.length < o.length) {
  802. var a = new Set(n)
  803. var b = new Set(o)
  804. var c = new Set([...b].filter((item) => !a.has(item))) // {1}
  805. console.log(...c)
  806. var d = this.optionsAll.indexOf(...c)
  807. if (d > 0) {
  808. this.optionsAll.splice(d, 1)
  809. }
  810. }
  811. }
  812. },
  813. 'allForm.isOpen': function (n, o) {
  814. console.log(n, o)
  815. if (n == 0) {
  816. this.allForm.noAgeBreak = false
  817. this.allForm.noGenderBreak = false
  818. this.allForm.noAreaBreak = false
  819. }
  820. },
  821. },
  822. directives: { clickoutside },
  823. data() {
  824. return {
  825. behaviorData: [],
  826. interestData: [],
  827. optionsAll: [],
  828. formAll: this.$form.createForm(this),
  829. marks: {
  830. 5: '5岁',
  831. 10: '10岁',
  832. 15: '15岁',
  833. 20: '20岁',
  834. 25: '25岁',
  835. 30: '30岁',
  836. 35: '35岁',
  837. 40: '40岁',
  838. 45: '45岁',
  839. 50: '50岁',
  840. 55: '55岁',
  841. },
  842. step: 0,
  843. loading: false,
  844. checkArr: [],
  845. appListValue: '',
  846. checkAll: false,
  847. behaviorInterest: '0',
  848. allForm: {
  849. behaviorInterest: '0',
  850. regionType: 'noLimit',
  851. region: [],
  852. ageType: 'noLimit',
  853. age: [],
  854. device: '0',
  855. price: '0',
  856. appType: '0',
  857. fansStar: '0',
  858. interestVideo: '0',
  859. platform_os: 0,
  860. businessInterestType: 0,
  861. isOpen: 0,
  862. noAgeBreak: false,
  863. noGenderBreak: false,
  864. noAreaBreak: false,
  865. people: '2',
  866. targeted: '2',
  867. topMiddle: false,
  868. topMiddleNo: false,
  869. keyValue: '',
  870. keyValueNo: '',
  871. },
  872. options: [],
  873. optionsAll: [],
  874. optionProps: {
  875. value: 'regionId',
  876. label: 'name',
  877. children: 'children',
  878. multiple: true,
  879. emitPath: false,
  880. // checkStrictly: true
  881. },
  882. optionsApp: [],
  883. optionsAppActive: [],
  884. checkOptions: [],
  885. businessOptions: [],
  886. fansStarOptions: [],
  887. interestVideoOptions: [],
  888. optionPropsApp: {
  889. value: 'tagId',
  890. label: 'tagName',
  891. children: 'children',
  892. multiple: true,
  893. emitPath: false,
  894. },
  895. getApp: '0',
  896. closeDialog: false,
  897. indeterminate: false,
  898. checkAll: false,
  899. people: '2',
  900. targeted: '2',
  901. topMiddle: false,
  902. topMiddleNo: false,
  903. keyValue: '',
  904. keyValueNo: '',
  905. columns,
  906. selectedRowKeys: [],
  907. selectedRowKeysValue: [],
  908. selectedRowKeysNo: [],
  909. selectedRowKeysValueNo: [],
  910. dataList: [],
  911. dataElse: [],
  912. }
  913. },
  914. computed: {},
  915. methods: {
  916. getPeople() {
  917. var data = ''
  918. if (this.$route.path == '/creat/creatUnit') {
  919. data = localStorage.getItem('campaignAccountId')
  920. } else {
  921. data = localStorage.getItem('accountId')
  922. }
  923. return new Promise((resolve, reject) => {
  924. getAction('/kuaishou/batch/getPopulationList', { accountId: data }).then((res) => {
  925. if (res.success) {
  926. if (res.result) {
  927. this.dataList = res.result.map((item, index) => {
  928. return {
  929. ...item,
  930. key: index,
  931. }
  932. })
  933. this.dataElse = this.dataList
  934. resolve(res.result)
  935. }
  936. }
  937. })
  938. })
  939. },
  940. radioChange() {
  941. this.selectedRowKeys = []
  942. this.selectedRowKeysValue = []
  943. this.selectedRowKeysNo = []
  944. this.selectedRowKeysValueNo = []
  945. this.keyValue = ''
  946. this.keyValueNo = ''
  947. },
  948. onSelectChange(selectedRowKeys, selectionRows) {
  949. this.selectedRowKeys = selectedRowKeys
  950. this.selectedRowKeysValue = selectionRows.map((item) => {
  951. return { orientationId: item.orientationId, orientationName: item.orientationName }
  952. })
  953. },
  954. getCheckboxProps(record) {
  955. return {
  956. props: {
  957. disabled: this.selectedRowKeysValueNo.some((item) => item.orientationId === record.orientationId),
  958. },
  959. }
  960. },
  961. onSelectChangeNo(selectedRowKeys, selectionRows) {
  962. this.selectedRowKeysNo = selectedRowKeys
  963. this.selectedRowKeysValueNo = selectionRows.map((item) => {
  964. return { orientationId: item.orientationId, orientationName: item.orientationName }
  965. })
  966. },
  967. getCheckboxPropsNo(record) {
  968. return {
  969. props: {
  970. disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
  971. },
  972. }
  973. },
  974. okSelect() {
  975. this.keyValue = ''
  976. this.topMiddle = false
  977. for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
  978. this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
  979. }
  980. },
  981. okSelectNo() {
  982. this.keyValueNo = ''
  983. this.topMiddleNo = false
  984. for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
  985. this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + ' '
  986. }
  987. },
  988. showOne() {
  989. // this.keyValueNo =orientationName
  990. var data = this.keyValue.split(' ')
  991. this.dataList = this.dataElse.filter((item) => {
  992. return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
  993. })
  994. },
  995. showTwo() {
  996. // this.keyValueNo =orientationName
  997. var data = this.keyValueNo.split(' ')
  998. this.dataList = this.dataElse.filter((item) => {
  999. return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
  1000. })
  1001. },
  1002. getAge(e) {
  1003. this.allForm.noAgeBreak = e.target.checked
  1004. },
  1005. getGender(e) {
  1006. this.allForm.noGenderBreak = e.target.checked
  1007. },
  1008. getArea(e) {
  1009. this.allForm.noAreaBreak = e.target.checked
  1010. },
  1011. getRegion(data) {
  1012. this.$refs.cascaderRegion.getCheckedNodes()
  1013. var dataName = this.$refs.cascaderRegion.getCheckedNodes()
  1014. var jsonArr = data
  1015. for (let i = 0; i < dataName.length; i++) {
  1016. for (let j = 0; j < data.length; j++) {
  1017. if (dataName[i].children.length > 0) {
  1018. if (data[j].substring(0, 2) == dataName[i].value) {
  1019. jsonArr.splice(j, 1)
  1020. }
  1021. }
  1022. }
  1023. }
  1024. },
  1025. showAppName(appId) {
  1026. if (this.checkOptions.length > 0) {
  1027. var data = this.checkOptions.filter((item) => {
  1028. return item.appId == appId
  1029. })
  1030. if (data[0]) {
  1031. return data[0].appName
  1032. } else {
  1033. return null
  1034. }
  1035. } else {
  1036. return null
  1037. }
  1038. },
  1039. log(appId) {
  1040. var index = this.optionsAll.findIndex((item) => item === appId)
  1041. this.optionsAll.splice(index, 1)
  1042. if (this.optionsAll.length == 0) {
  1043. this.indeterminate = false
  1044. this.checkAll = false
  1045. }
  1046. },
  1047. handleClose(e) {
  1048. this.closeDialog = false
  1049. },
  1050. targetedShow(e) {
  1051. this.topMiddle = false
  1052. this.topMiddleNo = false
  1053. },
  1054. clearAll() {
  1055. this.checkArr = []
  1056. this.indeterminate = false
  1057. this.checkAll = false
  1058. },
  1059. onChange(checkedList) {
  1060. this.indeterminate =
  1061. !!checkedList.length &&
  1062. checkedList.length <
  1063. this.optionsApp.map((item) => {
  1064. return item.appId
  1065. }).length
  1066. this.checkAll =
  1067. checkedList.length ===
  1068. this.optionsApp.map((item) => {
  1069. return item.appId
  1070. }).length
  1071. },
  1072. onCheckAllChange(e) {
  1073. Object.assign(this, {
  1074. checkArr: e.target.checked
  1075. ? this.optionsApp.map((item) => {
  1076. return item.appId
  1077. })
  1078. : [],
  1079. indeterminate: false,
  1080. checkAll: e.target.checked,
  1081. })
  1082. if (this.optionsAll.length > 20) {
  1083. this.$message.error('最多选择20个APP行为')
  1084. this.checkArr = []
  1085. this.indeterminate = false
  1086. this.checkAll = false
  1087. }
  1088. // if (this.checkAll) {
  1089. // this.checkArr = []
  1090. // } else {
  1091. // this.checkArr = this.optionsApp.map(item => {
  1092. // return item.app_id
  1093. // })
  1094. // }
  1095. // this.checkAll = !this.checkAll
  1096. },
  1097. handleSubmit() {
  1098. // e.preventDefault()
  1099. this.formAll.validateFields((err, values) => {
  1100. if (!err) {
  1101. // this.checkArr
  1102. if (values.age) {
  1103. values.min = values.age[0]
  1104. values.max = values.age[1]
  1105. }else {
  1106. values.min = -1
  1107. values.max = -1
  1108. }
  1109. if (values.agesRange) {
  1110. }else {
  1111. values.agesRange = []
  1112. }
  1113. if(values.fansStar) {
  1114. }else{
  1115. values.fansStar = []
  1116. }
  1117. if(values.interestVideo) {
  1118. }else{
  1119. values.interestVideo = []
  1120. }
  1121. if(values.devicePrice) {
  1122. }else{
  1123. values.devicePrice = []
  1124. }
  1125. if(values.deviceBrand) {
  1126. }else{
  1127. values.deviceBrand = []
  1128. }
  1129. if(this.allForm.businessInterestType == 2){
  1130. }else{
  1131. values.businessInterest = []
  1132. }
  1133. var json = {}
  1134. if (this.allForm.appType == '2') {
  1135. json.appIds = this.optionsAll
  1136. values.appInterest = []
  1137. }else if(this.allForm.appType == '1') {
  1138. json.appIds = []
  1139. }else{
  1140. values.appInterest = []
  1141. json.appIds = []
  1142. }
  1143. if (this.allForm.regionType == 'limit') {
  1144. json.region = this.allForm.region.map((item) => {
  1145. return item.value
  1146. })
  1147. }else{
  1148. json.region = []
  1149. }
  1150. var jsonData = {}
  1151. if (this.people == '3') {
  1152. if (this.targeted == '2') {
  1153. jsonData.population = this.selectedRowKeysValue.map((item) => {
  1154. return item.orientationId
  1155. })
  1156. jsonData.excludePopulation = []
  1157. } else if (this.targeted == '3') {
  1158. jsonData.population = []
  1159. jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
  1160. return item.orientationId
  1161. })
  1162. } else if (this.targeted == '4') {
  1163. jsonData.population = this.selectedRowKeysValue.map((item) => {
  1164. return item.orientationId
  1165. })
  1166. jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
  1167. return item.orientationId
  1168. })
  1169. } else {
  1170. jsonData = {}
  1171. }
  1172. }
  1173. var dataJson = {
  1174. ...values,
  1175. platformOs: this.allForm.platform_os,
  1176. businessInterestType: this.allForm.businessInterestType,
  1177. isOpen: this.allForm.isOpen,
  1178. ...json,
  1179. noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
  1180. noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
  1181. noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
  1182. allForm: this.allForm,
  1183. ...jsonData,
  1184. }
  1185. this.$emit('update:populationData', dataJson)
  1186. }
  1187. else {
  1188. }
  1189. })
  1190. },
  1191. handleConfirmValue(rule, value, callback) {
  1192. if (Math.abs(value[0] - value[1]) < 5) {
  1193. callback('自定义年龄段需要间隔大于5岁')
  1194. }
  1195. callback()
  1196. },
  1197. manyValidator(rule, value, callback) {
  1198. if (value.length > 20) {
  1199. callback('最多只能选择20个选项')
  1200. }
  1201. callback()
  1202. },
  1203. regionChange() {
  1204. this.allForm.region = []
  1205. },
  1206. search(e) {},
  1207. put() {
  1208. var data = this.allForm.region.map((item) => {
  1209. return item[1] + ''
  1210. })
  1211. var dataElse = data.map((item) => {
  1212. return [item.substring(0, 2), item]
  1213. })
  1214. },
  1215. getAppAllElse(e) {
  1216. this.checkArr = this.optionsAll
  1217. // this.getAppAll()
  1218. var data = ''
  1219. if (this.$route.path == '/creat/creatUnit') {
  1220. data = localStorage.getItem('campaignAccountId')
  1221. } else {
  1222. data = localStorage.getItem('accountId')
  1223. }
  1224. if (this.appListValue != '') {
  1225. getAction('/kuaishou/batch/getAppSearch', {
  1226. accountId: data,
  1227. appName: e.target.value,
  1228. }).then((res) => {
  1229. if (res.result) {
  1230. this.optionsApp = res.result
  1231. this.checkOptions.push(...res.result)
  1232. this.closeDialog = true
  1233. } else {
  1234. this.optionsApp = []
  1235. this.closeDialog = false
  1236. }
  1237. })
  1238. } else {
  1239. this.optionsApp = []
  1240. this.closeDialog = false
  1241. }
  1242. },
  1243. getAppAll(e) {
  1244. var data = ''
  1245. if (this.$route.path == '/creat/creatUnit') {
  1246. data = localStorage.getItem('campaignAccountId')
  1247. } else {
  1248. data = localStorage.getItem('accountId')
  1249. }
  1250. if (e.target.value !== '') {
  1251. getAction('/kuaishou/batch/getAppSearch', {
  1252. accountId: data,
  1253. appName: e.target.value,
  1254. }).then((res) => {
  1255. if (res.result) {
  1256. this.optionsApp = res.result
  1257. this.checkOptions.push(...res.result)
  1258. this.closeDialog = true
  1259. } else {
  1260. this.optionsApp = []
  1261. this.closeDialog = false
  1262. }
  1263. })
  1264. } else {
  1265. this.optionsApp = []
  1266. this.closeDialog = false
  1267. }
  1268. },
  1269. getAppType(e) {
  1270. this.optionsApp = []
  1271. this.formAll.setFieldsValue({ appInterest: [] })
  1272. this.checkArr = []
  1273. if (e.target.value == '1') {
  1274. getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then((res) => {
  1275. if (res.success) {
  1276. this.optionsApp = res.result
  1277. }
  1278. })
  1279. }
  1280. },
  1281. businessInterest(e) {
  1282. this.formAll.setFieldsValue({ businessInterest: [] })
  1283. if (e.target.value == '2') {
  1284. this.getDataType('BUSINESS_INTEREST', 'businessOptions')
  1285. }
  1286. },
  1287. fansStar(e) {
  1288. if (e.target.value == '1') {
  1289. this.getDataType('FANS_STAR', 'fansStarOptions')
  1290. }
  1291. },
  1292. interestVideo(e) {
  1293. if (e.target.value == '1') {
  1294. this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
  1295. }
  1296. },
  1297. filterOption(input, option) {
  1298. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1299. },
  1300. getDataType(type, dataList) {
  1301. getAction('/kuaishou/batch/getTargetList', { tagType: type }).then((res) => {
  1302. if (res.success) {
  1303. this[dataList] = res.result
  1304. }
  1305. })
  1306. },
  1307. getData(className) {
  1308. return this.formAll.getFieldValue(className)
  1309. },
  1310. getTreeData(data) {
  1311. for (var i = 0; i < data.length; i++) {
  1312. if (data[i].children) {
  1313. if (data[i].children.length < 1) {
  1314. // children若为空数组,则将children设为undefined
  1315. data[i].children = null
  1316. } else {
  1317. // // children若不为空数组,则继续 递归调用 本方法
  1318. this.getTreeData(data[i].children)
  1319. }
  1320. }
  1321. }
  1322. return data
  1323. },
  1324. getAllData(data){
  1325. console.log(data)
  1326. }
  1327. },
  1328. mounted: function () {
  1329. this.getDataType('APP_INTEREST', 'optionsAppActive')
  1330. this.getDataType('BUSINESS_INTEREST', 'businessOptions')
  1331. this.getDataType('FANS_STAR', 'fansStarOptions')
  1332. this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
  1333. // this.behaviorData
  1334. this.getAction('/batch/kuaishouTemplate/getbehaviorInterest' ,{ accountId:23212 }).then( res => {
  1335. if(res.success) {
  1336. this.behaviorData = this.getTreeData(res.result.behavior_interest.behavior);
  1337. this.interestData = this.getTreeData(res.result.behavior_interest.interest);
  1338. }
  1339. })
  1340. },
  1341. }
  1342. </script>
  1343. <style type="text/css">
  1344. .plug-timer-grid {
  1345. width: 100%;
  1346. }
  1347. .plug-timer-grid td,
  1348. .plug-timer-grid th {
  1349. border: 1px solid #97b4d1;
  1350. text-align: center; /*cursor:pointer;*/
  1351. font-size: 10px;
  1352. line-height: 10px;
  1353. }
  1354. .Selected {
  1355. background-color: rgb(102, 162, 243);
  1356. opacity: 0.5;
  1357. }
  1358. .plug-timer-grid {
  1359. border-collapse: collapse;
  1360. z-index: 4;
  1361. }
  1362. .plug-timer-grid thead tr {
  1363. display: table-row;
  1364. vertical-align: inherit;
  1365. border-color: inherit;
  1366. }
  1367. .group-creat table td {
  1368. height: 20px;
  1369. max-width: 5px;
  1370. font-size: 12px;
  1371. text-align: center;
  1372. vertical-align: middle;
  1373. overflow: hidden;
  1374. transition: background 0.5s;
  1375. -webkit-transition: background 0.5s;
  1376. }
  1377. .plug-timer-grid tbody th {
  1378. width: 4%;
  1379. }
  1380. .plug-timer-grid tbody tr td {
  1381. width: 2%;
  1382. }
  1383. /*.clear{*/
  1384. /* margin:20px 0px 20px 0px;*/
  1385. /*}*/
  1386. </style>