newTarget.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
  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: 17 }, sm: { span: 17 } }"
  41. >
  42. <a-radio-group buttonStyle="solid" v-model="targeted" @change="radioChange">
  43. <a-radio-button value="3">排除</a-radio-button>
  44. </a-radio-group>
  45. <div
  46. :style="{
  47. border: targeted == '4' ? '1px solid #f2f2f2' : '0',
  48. padding: targeted == '4' ? '20px' : '0',
  49. }"
  50. v-clickoutside="targetedShow"
  51. >
  52. <div style="display: flex; margin-top: 15px" v-if="targeted == '4' || targeted == '3'">
  53. <a-input
  54. placeholder="请至少选择一个自定义人群"
  55. @focus="
  56. topMiddleNo = true
  57. topMiddle = false
  58. dataList = dataElse
  59. "
  60. v-model="keyValueNo"
  61. @change="showTwo"
  62. />
  63. </div>
  64. <div
  65. style="background: white; padding: 10px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15)"
  66. :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
  67. v-show="topMiddleNo"
  68. >
  69. <a-table
  70. :columns="columns"
  71. :dataSource="dataList"
  72. bordered
  73. :pagination="false"
  74. :scroll="{ y: 300, x: true }"
  75. :rowSelection="{
  76. selectedRowKeys: selectedRowKeysNo,
  77. onChange: onSelectChangeNo,
  78. getCheckboxProps: getCheckboxPropsNo,
  79. }"
  80. >
  81. <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
  82. <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
  83. <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
  84. </a-table>
  85. <div style="text-align: right">
  86. <a-button style="margin-right: 5px" @click="topMiddleNo = false">取消</a-button>
  87. <a-button type="primary" @click="okSelectNo">确定</a-button>
  88. </div>
  89. </div>
  90. </div>
  91. </a-form-item>
  92. <a-form-item
  93. label="地区"
  94. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  95. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  96. >
  97. <a-radio-group @change="regionChange" v-model="allForm.regionType" buttonStyle="solid">
  98. <a-radio-button value="noLimit">不限</a-radio-button>
  99. <a-radio-button value="limit">指定地区</a-radio-button>
  100. </a-radio-group>
  101. <div v-if="allForm.regionType == 'limit'" style="margin-top: 10px">
  102. <select-region :checkData.sync="allForm.region" :dataValue="allForm.region" />
  103. </div>
  104. </a-form-item>
  105. <a-form-item
  106. label="年龄"
  107. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  108. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  109. >
  110. <a-radio-group v-model="allForm.ageType" buttonStyle="solid">
  111. <a-radio-button value="noLimit">不限</a-radio-button>
  112. <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
  113. <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
  114. </a-radio-group>
  115. <div v-if="allForm.ageType == 'ageLimit'" style="margin-top: 5px">
  116. <a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
  117. <!-- <a-checkbox :value="0">0-11岁</a-checkbox>
  118. <a-checkbox :value="12">12-17岁</a-checkbox> -->
  119. <a-checkbox :value="18">18-23岁</a-checkbox>
  120. <a-checkbox :value="24">24-30岁</a-checkbox>
  121. <a-checkbox :value="31">31-40岁</a-checkbox>
  122. <a-checkbox :value="41">41-49岁</a-checkbox>
  123. <a-checkbox :value="50">50+</a-checkbox>
  124. </a-checkbox-group>
  125. </div>
  126. <div v-if="allForm.ageType == 'ageCustom'">
  127. <a-slider
  128. range
  129. :marks="marks"
  130. :min="5"
  131. :max="55"
  132. v-decorator="[
  133. 'age',
  134. {
  135. rules: [{ required: true, message: '请选择年龄段' }, { validator: handleConfirmValue }],
  136. initialValue: [10, 50],
  137. },
  138. ]"
  139. />
  140. </div>
  141. </a-form-item>
  142. <a-form-item
  143. label="性别"
  144. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  145. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  146. >
  147. <a-radio-group
  148. buttonStyle="solid"
  149. v-decorator="[
  150. 'gender',
  151. {
  152. initialValue: 0,
  153. },
  154. ]"
  155. >
  156. <a-radio-button :value="0">不限</a-radio-button>
  157. <a-radio-button :value="1">女性</a-radio-button>
  158. <a-radio-button :value="2">男性</a-radio-button>
  159. </a-radio-group>
  160. </a-form-item>
  161. <a-form-item
  162. label="最低版本"
  163. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  164. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  165. >
  166. <a-radio-group buttonStyle="solid" v-model="allForm.platform_os">
  167. <a-radio-button :value="0" v-if="getApp == '0'">不限</a-radio-button>
  168. <a-radio-button :value="1" v-if="getApp == '0' || getApp == '1'">Android系统</a-radio-button>
  169. <a-radio-button :value="2" v-if="getApp == '0' || getApp == '2'">IOS系统</a-radio-button>
  170. </a-radio-group>
  171. </a-form-item>
  172. <a-form-item
  173. label=" "
  174. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  175. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  176. v-if="allForm.platform_os == 1"
  177. class="else-label"
  178. style="margin-top: -16px"
  179. >
  180. <a-radio-group
  181. v-decorator="[
  182. 'androidOsv',
  183. {
  184. initialValue: 3,
  185. },
  186. ]"
  187. >
  188. <a-radio :value="3">不限</a-radio>
  189. <a-radio :value="4">4X+</a-radio>
  190. <a-radio :value="5">5x+</a-radio>
  191. <a-radio :value="6">6x+</a-radio>
  192. <a-radio :value="7">7x+</a-radio>
  193. </a-radio-group>
  194. </a-form-item>
  195. <a-form-item
  196. label=" "
  197. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  198. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  199. v-if="allForm.platform_os == 2"
  200. class="else-label"
  201. style="margin-top: -16px"
  202. >
  203. <a-radio-group
  204. v-decorator="[
  205. 'iosOsv',
  206. {
  207. initialValue: 6,
  208. },
  209. ]"
  210. >
  211. <a-radio :value="6">不限</a-radio>
  212. <a-radio :value="7">7X+</a-radio>
  213. <a-radio :value="8">8x+</a-radio>
  214. <a-radio :value="9">9x+</a-radio>
  215. <a-radio :value="10">10x+</a-radio>
  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: 15 }, sm: { span: 15 } }"
  222. >
  223. <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
  224. <a-radio-button :value="0">不限</a-radio-button>
  225. <a-radio-button :value="1">广告组</a-radio-button>
  226. <a-radio-button :value="2">广告计划</a-radio-button>
  227. <a-radio-button :value="3">本账户</a-radio-button>
  228. <a-radio-button :value="4">公司主体</a-radio-button>
  229. <a-radio-button :value="5">APP</a-radio-button>
  230. </a-radio-group>
  231. </a-form-item>
  232. </a-form>
  233. </template>
  234. <script>
  235. import { getAction, postAction } from '@/api/manage'
  236. import moment from 'moment'
  237. import { mapGetters } from 'vuex'
  238. import jq from 'jquery'
  239. import selectRegion from './selectRegion'
  240. import pick from 'lodash.pick'
  241. let dateQuantumRangeConst = ''
  242. const clickoutside = {
  243. // 初始化指令
  244. bind(el, binding, vnode) {
  245. function documentHandler(e) {
  246. // 这里判断点击的元素是否是本身,是本身,则返回
  247. if (el.contains(e.target)) {
  248. return false
  249. }
  250. // 判断指令中是否绑定了函数
  251. if (binding.expression) {
  252. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  253. binding.value(e)
  254. }
  255. }
  256. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  257. el.__vueClickOutside__ = documentHandler
  258. document.addEventListener('click', documentHandler)
  259. },
  260. update() {},
  261. unbind(el, binding) {
  262. // 解除事件监听
  263. document.removeEventListener('click', el.__vueClickOutside__)
  264. delete el.__vueClickOutside__
  265. },
  266. }
  267. const columns = [
  268. {
  269. title: '人群',
  270. dataIndex: 'orientationName',
  271. scopedSlots: { customRender: 'orientationName' },
  272. width: 150,
  273. },
  274. {
  275. title: '属性',
  276. dataIndex: 'populationType',
  277. filters: [
  278. { text: '上传人群', value: '1' },
  279. { text: '广告人群', value: '2' },
  280. { text: '主题专区', value: '3' },
  281. { text: '逻辑规则', value: '4' },
  282. { text: '人群扩展', value: '5' },
  283. { text: '平台定制', value: '6' },
  284. { text: '定制付费', value: '7' },
  285. { text: '网红粉丝类别', value: '8' },
  286. { text: '内容付费行为', value: '9' },
  287. { text: '移动应用安装', value: '10' },
  288. { text: '快手使用活跃度', value: '11' },
  289. { text: '行业分类', value: '12' },
  290. { text: '商业兴趣', value: '13' },
  291. { text: '固化标签', value: '14' },
  292. { text: '行业偏好', value: '15' },
  293. { text: '第三方标签', value: '16' },
  294. { text: '产品关键词', value: '17' },
  295. ],
  296. onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
  297. scopedSlots: { customRender: 'populationType' },
  298. width: 150,
  299. },
  300. {
  301. title: '创建时间',
  302. dataIndex: 'putTime',
  303. scopedSlots: { customRender: 'putTime' },
  304. sorter: (a, b) => a.putTime - b.putTime,
  305. },
  306. ]
  307. export default {
  308. name: 'BaseForm',
  309. components: { selectRegion },
  310. props: {
  311. campaignId: {
  312. type: String,
  313. default() {
  314. return null
  315. },
  316. },
  317. platform: {
  318. default() {
  319. return null
  320. },
  321. },
  322. populationData: {},
  323. lol: {
  324. type: String,
  325. default() {
  326. return '1'
  327. },
  328. },
  329. },
  330. filters: {
  331. getDate(value) {
  332. let date = new Date(value)
  333. let y = date.getFullYear()
  334. let MM = date.getMonth() + 1
  335. MM = MM < 10 ? '0' + MM : MM
  336. let d = date.getDate()
  337. d = d < 10 ? '0' + d : d
  338. return y + '-' + MM + '-' + d
  339. },
  340. platform(str) {
  341. var data = {
  342. 1: 'Android应用下载',
  343. 2: 'Android网页游戏',
  344. 3: 'iOS应用下载',
  345. 4: 'iOS网页游戏',
  346. }
  347. return data[str]
  348. },
  349. population_type(str) {
  350. var data = {
  351. 1: '上传人群',
  352. 2: '广告人群',
  353. 3: '主题专区',
  354. 4: '逻辑规则',
  355. 5: '人群扩展',
  356. 6: '平台定制',
  357. 7: '定制付费',
  358. 8: '网红粉丝类别',
  359. 9: '内容付费行为',
  360. 10: '移动应用安装',
  361. 11: '快手使用活跃度',
  362. 12: '行业分类',
  363. 13: '商业兴趣',
  364. 14: '固化标签',
  365. 15: '行业偏好',
  366. 16: '第三方标签',
  367. 17: '产品关键词',
  368. }
  369. return data[str]
  370. },
  371. },
  372. watch: {
  373. platform(n, o) {
  374. if (n == 1 || n == 2) {
  375. // platform_os
  376. this.allForm.platform_os = 1
  377. // this.form.setFieldsValue({ platform_os: '1' })
  378. } else if (n == 3 || n == 4) {
  379. this.allForm.platform_os = 2
  380. // this.form.setFieldsValue({ platform_os: '2' })
  381. } else {
  382. this.allForm.platform_os = 0
  383. // this.form.setFieldsValue({ platform_os: '0' })
  384. }
  385. },
  386. populationData: {
  387. immediate: true, // immediate选项可以开启首次赋值监听
  388. handler(n, oldVal) {
  389. console.log(n)
  390. if (n.allForm) {
  391. this.allForm = n.allForm
  392. this.allForm.noAgeBreak = n.noAgeBreak == '0' ? false : true
  393. this.allForm.noGenderBreak = n.noGenderBreak == '0' ? false : true
  394. this.allForm.noAreaBreak = n.noAreaBreak == '0' ? false : true
  395. // this.selectedRowKeys = n.population ? n.population : []
  396. this.selectedRowKeysNo = n.excludePopulation ? n.excludePopulation : []
  397. this.optionsAll = n.appIds ? (typeof n.appIds == 'string' ? JSON.parse(n.appIds) : n.appIds) : []
  398. this.targeted = '3'
  399. this.people = n.excludePopulation ? '3' : n.population ? '3' : '2'
  400. this.getPeople().then((res) => {
  401. if (n.excludePopulation) {
  402. this.keyValueNo = ''
  403. this.selectedRowKeysValueNo = []
  404. for (let i = 0; i < res.length; i++) {
  405. for (let j = 0; j < n.excludePopulation.length; j++) {
  406. if (res[i].orientationId == n.excludePopulation[j]) {
  407. this.keyValueNo += res[i].orientationName + ' '
  408. this.selectedRowKeysValueNo.push({
  409. orientationId: res[i].orientationId,
  410. orientationName: res[i].orientationName,
  411. })
  412. this.selectedRowKeysNo.push()
  413. }
  414. }
  415. }
  416. }
  417. if (n.population) {
  418. this.keyValue = ''
  419. this.selectedRowKeysValue = []
  420. for (let i = 0; i < res.length; i++) {
  421. for (let j = 0; j < n.population.length; j++) {
  422. if (res[i].orientationId == n.population[j]) {
  423. this.keyValue += res[i].orientationName + ' '
  424. this.selectedRowKeysValue.push({
  425. orientationId: res[i].orientationId,
  426. orientationName: res[i].orientationName,
  427. })
  428. }
  429. }
  430. }
  431. }
  432. })
  433. this.$nextTick(() => {
  434. this.formAll.setFieldsValue(
  435. pick(n, [
  436. 'appInterest',
  437. 'gender',
  438. 'network',
  439. 'agesRange',
  440. 'age',
  441. 'androidOsv',
  442. 'iosOsv',
  443. 'deviceBrand',
  444. 'devicePrice',
  445. 'filterConvertedLevel',
  446. ])
  447. )
  448. })
  449. } else {
  450. this.formAll.resetFields()
  451. this.selectedRowKeys = []
  452. this.selectedRowKeysNo = []
  453. this.selectedRowKeysValueNo = []
  454. this.selectedRowKeysValue = []
  455. this.targeted = '2'
  456. this.people = '2'
  457. this.allForm = {
  458. regionType: 'noLimit',
  459. region: [],
  460. ageType: 'noLimit',
  461. age: [],
  462. device: '0',
  463. price: '0',
  464. appType: '0',
  465. platform_os: 0,
  466. isOpen: 0,
  467. noAgeBreak: false,
  468. noGenderBreak: false,
  469. noAreaBreak: false,
  470. }
  471. }
  472. },
  473. },
  474. checkArr(n, o) {
  475. console.log(n, o)
  476. this.optionsAll.push(...n)
  477. this.optionsAll = [...new Set(this.optionsAll)]
  478. if (n.length != o.length) {
  479. if (n.length < o.length) {
  480. var a = new Set(n)
  481. var b = new Set(o)
  482. var c = new Set([...b].filter((item) => !a.has(item))) // {1}
  483. console.log(...c)
  484. var d = this.optionsAll.indexOf(...c)
  485. if (d > 0) {
  486. this.optionsAll.splice(d, 1)
  487. }
  488. }
  489. }
  490. },
  491. 'allForm.isOpen': function (n, o) {
  492. console.log(n, o)
  493. if (n == 0) {
  494. this.allForm.noAgeBreak = false
  495. this.allForm.noGenderBreak = false
  496. this.allForm.noAreaBreak = false
  497. }
  498. },
  499. },
  500. directives: { clickoutside },
  501. data() {
  502. return {
  503. optionsAll: [],
  504. formAll: this.$form.createForm(this),
  505. marks: {
  506. 5: '5岁',
  507. 10: '10岁',
  508. 15: '15岁',
  509. 20: '20岁',
  510. 25: '25岁',
  511. 30: '30岁',
  512. 35: '35岁',
  513. 40: '40岁',
  514. 45: '45岁',
  515. 50: '50岁',
  516. 55: '55岁',
  517. },
  518. step: 0,
  519. loading: false,
  520. checkArr: [],
  521. appListValue: '',
  522. checkAll: false,
  523. allForm: {
  524. regionType: 'noLimit',
  525. region: [],
  526. ageType: 'noLimit',
  527. age: [],
  528. device: '0',
  529. price: '0',
  530. appType: '0',
  531. platform_os: 0,
  532. isOpen: 0,
  533. noAgeBreak: false,
  534. noGenderBreak: false,
  535. noAreaBreak: false,
  536. people: '2',
  537. targeted: '3',
  538. topMiddle: false,
  539. topMiddleNo: false,
  540. keyValue: '',
  541. keyValueNo: '',
  542. },
  543. options: [],
  544. optionsAll: [],
  545. optionProps: {
  546. value: 'regionId',
  547. label: 'name',
  548. children: 'children',
  549. multiple: true,
  550. emitPath: false,
  551. // checkStrictly: true
  552. },
  553. checkOptions: [],
  554. businessOptions: [],
  555. optionPropsApp: {
  556. value: 'tagId',
  557. label: 'tagName',
  558. children: 'children',
  559. multiple: true,
  560. emitPath: false,
  561. },
  562. getApp: '0',
  563. closeDialog: false,
  564. indeterminate: false,
  565. checkAll: false,
  566. people: '2',
  567. targeted: '3',
  568. topMiddle: false,
  569. topMiddleNo: false,
  570. keyValue: '',
  571. keyValueNo: '',
  572. columns,
  573. selectedRowKeys: [],
  574. selectedRowKeysValue: [],
  575. selectedRowKeysNo: [],
  576. selectedRowKeysValueNo: [],
  577. dataList: [],
  578. dataElse: [],
  579. }
  580. },
  581. computed: {},
  582. methods: {
  583. getPeople() {
  584. var data = ''
  585. if (this.$route.path == '/creat/creatUnit') {
  586. data = localStorage.getItem('campaignAccountId')
  587. } else {
  588. data = localStorage.getItem('accountId')
  589. }
  590. return new Promise((resolve, reject) => {
  591. getAction('/kuaishou/batch/getPopulationList', { accountId: data }).then((res) => {
  592. if (res.success) {
  593. if (res.result) {
  594. this.dataList = res.result.map((item, index) => {
  595. return {
  596. ...item,
  597. key: index,
  598. }
  599. })
  600. this.dataElse = this.dataList
  601. resolve(res.result)
  602. }
  603. }
  604. })
  605. })
  606. },
  607. radioChange() {
  608. this.selectedRowKeys = []
  609. this.selectedRowKeysValue = []
  610. this.selectedRowKeysNo = []
  611. this.selectedRowKeysValueNo = []
  612. this.keyValue = ''
  613. this.keyValueNo = ''
  614. },
  615. onSelectChangeNo(selectedRowKeys, selectionRows) {
  616. this.selectedRowKeysNo = selectedRowKeys
  617. this.selectedRowKeysValueNo = selectionRows.map((item) => {
  618. return { orientationId: item.orientationId, orientationName: item.orientationName }
  619. })
  620. },
  621. getCheckboxPropsNo(record) {
  622. return {
  623. props: {
  624. disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
  625. },
  626. }
  627. },
  628. okSelect() {
  629. this.keyValue = ''
  630. this.topMiddle = false
  631. for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
  632. this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
  633. }
  634. },
  635. showTwo() {
  636. // this.keyValueNo =orientationName
  637. var data = this.keyValueNo.split(' ')
  638. this.dataList = this.dataElse.filter((item) => {
  639. return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
  640. })
  641. },
  642. getRegion(data) {
  643. this.$refs.cascaderRegion.getCheckedNodes()
  644. var dataName = this.$refs.cascaderRegion.getCheckedNodes()
  645. var jsonArr = data
  646. for (let i = 0; i < dataName.length; i++) {
  647. for (let j = 0; j < data.length; j++) {
  648. if (dataName[i].children.length > 0) {
  649. if (data[j].substring(0, 2) == dataName[i].value) {
  650. jsonArr.splice(j, 1)
  651. }
  652. }
  653. }
  654. }
  655. },
  656. handleClose(e) {
  657. this.closeDialog = false
  658. },
  659. targetedShow(e) {
  660. this.topMiddleNo = false
  661. },
  662. handleSubmit() {
  663. // e.preventDefault()
  664. this.formAll.validateFields((err, values) => {
  665. if (!err) {
  666. // this.checkArr
  667. if (values.age) {
  668. values.min = values.age[0]
  669. values.max = values.age[1]
  670. }
  671. var json = {}
  672. if (this.allForm.appType == '2') {
  673. json.appIds = this.optionsAll
  674. }
  675. if (this.allForm.regionType == 'limit') {
  676. json.region = this.allForm.region.map((item) => {
  677. return item.value
  678. })
  679. }
  680. var jsonData = {}
  681. if (this.people == '3') {
  682. if (this.targeted == '2') {
  683. jsonData.population = this.selectedRowKeysValue.map((item) => {
  684. return item.orientationId
  685. })
  686. } else if (this.targeted == '3') {
  687. jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
  688. return item.orientationId
  689. })
  690. } else if (this.targeted == '4') {
  691. jsonData.population = this.selectedRowKeysValue.map((item) => {
  692. return item.orientationId
  693. })
  694. jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
  695. return item.orientationId
  696. })
  697. } else {
  698. jsonData = {}
  699. }
  700. }
  701. var dataJson = {
  702. ...values,
  703. platformOs: this.allForm.platform_os,
  704. isOpen: this.allForm.isOpen,
  705. ...json,
  706. noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
  707. noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
  708. noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
  709. allForm: this.allForm,
  710. ...jsonData,
  711. }
  712. this.$emit('update:populationData', dataJson)
  713. }
  714. })
  715. },
  716. handleConfirmValue(rule, value, callback) {
  717. if (Math.abs(value[0] - value[1]) < 5) {
  718. callback('自定义年龄段需要间隔大于5岁')
  719. }
  720. callback()
  721. },
  722. regionChange() {
  723. this.allForm.region = []
  724. },
  725. search(e) {},
  726. // put() {
  727. // var data = this.allForm.region.map((item) => {
  728. // return item[1] + ''
  729. // })
  730. // var dataElse = data.map((item) => {
  731. // return [item.substring(0, 2), item]
  732. // })
  733. // },
  734. filterOption(input, option) {
  735. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  736. },
  737. getData(className) {
  738. return this.formAll.getFieldValue(className)
  739. },
  740. },
  741. mounted: function () {
  742. },
  743. }
  744. </script>
  745. <style type="text/css">
  746. .plug-timer-grid {
  747. width: 100%;
  748. }
  749. .plug-timer-grid td,
  750. .plug-timer-grid th {
  751. border: 1px solid #97b4d1;
  752. text-align: center; /*cursor:pointer;*/
  753. font-size: 10px;
  754. line-height: 10px;
  755. }
  756. .Selected {
  757. background-color: rgb(102, 162, 243);
  758. opacity: 0.5;
  759. }
  760. .plug-timer-grid {
  761. border-collapse: collapse;
  762. z-index: 4;
  763. }
  764. .plug-timer-grid thead tr {
  765. display: table-row;
  766. vertical-align: inherit;
  767. border-color: inherit;
  768. }
  769. .group-creat table td {
  770. height: 20px;
  771. max-width: 5px;
  772. font-size: 12px;
  773. text-align: center;
  774. vertical-align: middle;
  775. overflow: hidden;
  776. transition: background 0.5s;
  777. -webkit-transition: background 0.5s;
  778. }
  779. .plug-timer-grid tbody th {
  780. width: 4%;
  781. }
  782. .plug-timer-grid tbody tr td {
  783. width: 2%;
  784. }
  785. /*.clear{*/
  786. /* margin:20px 0px 20px 0px;*/
  787. /*}*/
  788. </style>