targetedPopulation.vue 60 KB

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