newModulePop.vue 41 KB

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