targetedPopulation.vue 46 KB

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