targetedPopulation.vue 42 KB

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