createClear.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673
  1. <style scoped lang="scss">
  2. /deep/.display-none-selset {
  3. display: none !important;
  4. }
  5. .step-jump {
  6. /deep/ table tr td {
  7. border-bottom: 0px;
  8. }
  9. }
  10. .bottom-to-one {
  11. /deep/ .ant-form-item {
  12. margin-bottom: 0;
  13. }
  14. }
  15. .target-person-add-button {
  16. margin-left: 15px;
  17. }
  18. .card-person {
  19. width: 300px;
  20. /deep/.ant-card-body {
  21. padding: 0px;
  22. }
  23. /deep/.ant-card-head {
  24. padding: 0px 10px;
  25. }
  26. .card-main-case {
  27. height: 250px;
  28. overflow: auto;
  29. padding: 0 5px;
  30. }
  31. }
  32. .card-person-drawer {
  33. width: 100%;
  34. height: 90%;
  35. overflow: hidden;
  36. padding: 10px 0px;
  37. display: flex;
  38. flex-wrap: wrap;
  39. margin-right: -10px;
  40. justify-content: space-between;
  41. .card-item {
  42. width: calc(33% - 10px);
  43. margin-bottom: 10px;
  44. float: left;
  45. }
  46. .card-item-else {
  47. width: calc(20% - 10px);
  48. margin-bottom: 10px;
  49. float: left;
  50. }
  51. }
  52. .showShare {
  53. position: relative;
  54. }
  55. .share {
  56. display: none;
  57. }
  58. .showShare:hover .share {
  59. display: flex;
  60. justify-content: center;
  61. align-items: center;
  62. }
  63. .chouzhen {
  64. border-style: solid;
  65. border-width: 1px;
  66. border-color: #e4e4e4;
  67. width: calc(20% - 10px);
  68. padding: 10px;
  69. margin-right: 10px;
  70. margin-bottom: 10px;
  71. display: flex;
  72. align-items: center;
  73. background: #fff;
  74. position: relative;
  75. z-index: 99;
  76. float: left;
  77. }
  78. li.chouzhen.first:before {
  79. font-size: 12px;
  80. content: '首帧';
  81. position: absolute;
  82. top: 7px;
  83. left: 5px;
  84. width: 36px;
  85. height: 20px;
  86. color: rgb(255, 255, 255);
  87. line-height: 20px;
  88. text-align: center;
  89. background: rgba(0, 0, 0, 0.5);
  90. border-radius: 2px;
  91. z-index: 1000;
  92. }
  93. .display-none-selset {
  94. display: none !important;
  95. }
  96. .logo {
  97. padding-left: 24px;
  98. img {
  99. height: 32px !important;
  100. }
  101. .name {
  102. font-size: 14px;
  103. font-family: PingFangSC-Medium, PingFang SC;
  104. font-weight: 500;
  105. color: #ced2d9;
  106. // line-height: 22px;
  107. margin-left: 20px;
  108. padding-left: 21px;
  109. position: relative;
  110. }
  111. .name::before {
  112. content: '';
  113. width: 1px;
  114. height: 18px;
  115. background: rgba(255, 255, 255, 0.31);
  116. position: absolute;
  117. left: 0;
  118. top: 50%;
  119. margin-top: -9px;
  120. }
  121. }
  122. .chartBox {
  123. .chartBody {
  124. display: flex;
  125. justify-content: space-around;
  126. flex-wrap: wrap;
  127. }
  128. .search-box {
  129. margin-bottom: 20px;
  130. }
  131. }
  132. /deep/ .ant-descriptions-item-content {
  133. font-weight: bold;
  134. }
  135. .info-detail {
  136. /deep/ table tr td {
  137. border: 0;
  138. }
  139. /deep/ .ant-descriptions-item-label {
  140. color: darkgray;
  141. // min-width: 30px;
  142. white-space: nowrap;
  143. }
  144. }
  145. .flex-main {
  146. display: flex;
  147. margin-bottom: 10px;
  148. p {
  149. color: black;
  150. font-weight: 600;
  151. overflow: hidden; //超出的文本隐藏
  152. text-overflow: ellipsis; //溢出用省略号显示
  153. white-space: nowrap; //溢出不换行
  154. }
  155. }
  156. </style>
  157. <style lang="scss">
  158. .hide-checkbox .ant-table-thead .ant-table-selection {
  159. display: none;
  160. }
  161. .new-batch .ant-card-head-title {
  162. font-weight: 700;
  163. }
  164. // .new-batch textarea {
  165. // resize: none;
  166. // border: none;
  167. // outline: 0;
  168. // box-shadow: none;
  169. // }
  170. .create-info .ant-form-item {
  171. margin-bottom: 0 !important;
  172. }
  173. .fengmian .ant-checkbox-wrapper:first-child {
  174. margin-left: 8px;
  175. }
  176. @media screen and (max-width: 1200px) {
  177. // 这里写对应要修改的样式如:
  178. .new-batch .el-step__title {
  179. font-size: 12px;
  180. }
  181. }
  182. .line-height-one .ant-form-item-control {
  183. line-height: inherit;
  184. }
  185. .creat-all-info .ant-form-item-control {
  186. width: 60%;
  187. overflow: hidden;
  188. text-overflow: ellipsis;
  189. white-space: nowrap;
  190. }
  191. .config-new-batch {
  192. .display-none-selset {
  193. display: none !important;
  194. }
  195. .ant-btn-danger {
  196. background-color: #ff4d4f !important;
  197. }
  198. }
  199. </style>
  200. <template>
  201. <div ref="questionnaireBox" class="new-batch config-new-batch">
  202. <div class="chartBox">
  203. <a-row :gutter="20">
  204. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
  205. <a-card class="search-box step-jump">
  206. <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
  207. <a-row :gutter="16">
  208. <a-col :span="16">
  209. <a-form-item label="模板名称">
  210. <a-input
  211. :disabled="$route.query.preview == 'true'"
  212. v-decorator="[
  213. 'templateName',
  214. {
  215. rules: [
  216. { required: true, message: ' ' },
  217. { validator: templateNameValid }
  218. ]
  219. }
  220. ]"
  221. >
  222. </a-input>
  223. </a-form-item>
  224. </a-col>
  225. </a-row>
  226. <a-row :gutter="16">
  227. <a-col :span="16">
  228. <a-form-item label="清理时间范围">
  229. <a-select
  230. :disabled="$route.query.preview == 'true'"
  231. v-decorator="[
  232. 'cleanTime',
  233. {
  234. rules: [{ required: true, message: '清理时间范围必选' }],
  235. initialValue: '1'
  236. }
  237. ]"
  238. >
  239. <a-select-option value="1">最近一天</a-select-option>
  240. <a-select-option value="3">最近三天</a-select-option>
  241. <a-select-option value="7">最近七天</a-select-option>
  242. <a-select-option value="15">最近十五天</a-select-option>
  243. </a-select>
  244. </a-form-item>
  245. </a-col>
  246. </a-row>
  247. <a-row :gutter="16">
  248. <a-col :span="16">
  249. <a-form-item label="优化目标">
  250. <a-select
  251. :disabled="$route.query.preview == 'true'"
  252. showSearch
  253. allowClear
  254. mode="multiple"
  255. v-decorator="[
  256. 'optimizationObjective',
  257. {
  258. rules: [{ required: true, message: '优化目标必选' }],
  259. initialValue: ['activation']
  260. }
  261. ]"
  262. >
  263. <!-- <a-select-option value="bclick">行为数</a-select-option> -->
  264. <a-select-option value="activation">激活</a-select-option>
  265. <a-select-option value="formSize">表单提交</a-select-option>
  266. <a-select-option value="pay">付费</a-select-option>
  267. <!-- <a-select-option value="roi">首日ROI</a-select-option> -->
  268. <a-select-option value="evocativeApplication">唤起应用</a-select-option>
  269. <!-- <a-select-option value="effectiveClues">使用有效线索</a-select-option> -->
  270. <!-- <a-select-option value="creditApp">授信App</a-select-option> -->
  271. <!-- <a-select-option value="creditGrant">授信落地页</a-select-option> -->
  272. <!-- <a-select-option value="ordersSubmitted">订单提交</a-select-option> -->
  273. <!-- <a-select-option value="finishedPieceApp">App完件数</a-select-option> -->
  274. <!-- <a-select-option value="finishedPieceGrant">落地页完件数</a-select-option> -->
  275. <!-- <a-select-option value="registered">注册优化目标</a-select-option> -->
  276. </a-select>
  277. </a-form-item>
  278. </a-col>
  279. </a-row>
  280. <a-row :gutter="16">
  281. <a-col :span="16">
  282. <a-form-item label="累计消耗">
  283. <span style="width: 15%;display: inline-block;">小于等于</span>
  284. <a-input-number
  285. :disabled="$route.query.preview == 'true'"
  286. v-decorator="[
  287. 'charge',
  288. {
  289. rules: [
  290. {
  291. required: true,
  292. message: '累计消耗必填'
  293. }
  294. ],
  295. initialValue: 100
  296. }
  297. ]"
  298. :min="0"
  299. :precision="0"
  300. style="width: 60%"
  301. />
  302. </a-form-item>
  303. </a-col>
  304. </a-row>
  305. <a-row :gutter="16">
  306. <a-col :span="16">
  307. <a-form-item label="累计转化数">
  308. <span style="width: 15%;display: inline-block;">小于等于</span>
  309. <a-input-number
  310. :disabled="$route.query.preview == 'true'"
  311. v-decorator="[
  312. 'conversion',
  313. {
  314. rules: [
  315. {
  316. required: true,
  317. message: '累计转化数必填'
  318. }
  319. ],
  320. initialValue: 2
  321. }
  322. ]"
  323. :min="0"
  324. :precision="0"
  325. style="width: 60%"
  326. />
  327. </a-form-item>
  328. </a-col>
  329. </a-row>
  330. <a-row :gutter="16">
  331. <a-col :span="16">
  332. <a-form-item label="推广组状态">
  333. <a-select
  334. :disabled="$route.query.preview == 'true'"
  335. v-decorator="[
  336. 'promotionGroupStatus',
  337. {
  338. rules: [{ required: true, message: '推广组状态必选' }],
  339. initialValue: '1'
  340. }
  341. ]"
  342. @change="checkStatus"
  343. >
  344. <a-select-option value="1">投放中</a-select-option>
  345. <a-select-option value="2">暂停</a-select-option>
  346. <a-select-option value="3">不限</a-select-option>
  347. </a-select>
  348. </a-form-item>
  349. </a-col>
  350. </a-row>
  351. <!-- { rules: [{ validator: deepBidValid }] } -->
  352. <a-row :gutter="16">
  353. <a-col :span="16">
  354. <a-form-item label="执行操作类型">
  355. <a-radio-group
  356. :disabled="$route.query.preview == 'true'"
  357. button-style="solid"
  358. v-decorator="[
  359. 'performOperations',
  360. {
  361. rules: [{ required: true, message: '执行操作类型必选' }],
  362. initialValue: '3'
  363. }
  364. ]"
  365. >
  366. <a-radio-button value="3">删除</a-radio-button>
  367. <a-radio-button
  368. value="2"
  369. :disabled="getFormData('formOptimize', 'promotionGroupStatus') != '1'"
  370. >暂停</a-radio-button
  371. >
  372. </a-radio-group>
  373. </a-form-item>
  374. </a-col>
  375. </a-row>
  376. <a-row :gutter="16">
  377. <a-col :span="16">
  378. <a-form-item label="执行操作时间">
  379. 每天上午10点以后执行
  380. </a-form-item>
  381. </a-col>
  382. </a-row>
  383. </a-form>
  384. </a-card>
  385. <div
  386. style="display: flex; justify-content: flex-end; margin-bottom: 100px"
  387. v-if="$route.query.preview != 'true'"
  388. >
  389. <div>
  390. <a-button
  391. type="primary"
  392. style="margin-right: 15px"
  393. @click="handleSubmit"
  394. :loading="sumbitLoading"
  395. :disabled="disabled"
  396. >
  397. 创建
  398. </a-button>
  399. <a-button @click="clearAllData"> 取消 </a-button>
  400. </div>
  401. </div>
  402. </a-col>
  403. </a-row>
  404. </div>
  405. </div>
  406. </template>
  407. <script>
  408. // import UserMenu from '../tools/UserMenu'
  409. // import SMenu from '../menu/'
  410. import Logo from '@/components/tools/Logo.vue'
  411. import pick from 'lodash.pick'
  412. import { mixin } from '@/utils/mixin.js'
  413. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  414. import moment from 'moment'
  415. import selectCheckAll from '@/components/formComponents/toutiaoTime'
  416. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  417. import uploadFile from '@/components/uploadFileMd5Push.vue'
  418. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  419. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  420. import { mapGetters } from 'vuex'
  421. // import lookPreviewVue from './lookPreview.vue'
  422. function tqFun(qcArr1) {
  423. var tempArr = []
  424. function bbFun(qcArr) {
  425. for (var i = 0; i < qcArr.length; i++) {
  426. if (qcArr[i] instanceof Array) {
  427. bbFun(qcArr[i])
  428. } else {
  429. tempArr.push(qcArr[i])
  430. }
  431. }
  432. return tempArr
  433. }
  434. return bbFun(qcArr1)
  435. }
  436. export default {
  437. name: 'GlobalHeader',
  438. components: {
  439. // UserMenu,
  440. // SMenu,
  441. Logo,
  442. Treeselect,
  443. selectCheckAll,
  444. checkBoxGroup,
  445. uploadFile,
  446. selectTable
  447. },
  448. data() {
  449. return {
  450. formOptimize: this.$form.createForm(this), //优化目标表单
  451. sumbitLoading: false,
  452. formItemLayout: {
  453. labelCol: { span: 4 },
  454. wrapperCol: { span: 16 }
  455. },
  456. formDrawerItemLayout: {
  457. labelCol: { span: 5 },
  458. wrapperCol: { span: 19 }
  459. },
  460. tailFormItemLayout: {
  461. wrapperCol: {
  462. sm: {
  463. span: 20,
  464. offset: 4
  465. }
  466. }
  467. },
  468. tailFormItemLayoutElse: {
  469. wrapperCol: {
  470. sm: {
  471. span: 20,
  472. offset: 1
  473. }
  474. }
  475. },
  476. tailFormDrawerItemLayout: {
  477. wrapperCol: {
  478. sm: {
  479. span: 19,
  480. offset: 5
  481. }
  482. }
  483. },
  484. disabled: false
  485. }
  486. },
  487. computed: {},
  488. watch: {},
  489. mounted() {
  490. this.$nextTick(function() {
  491. if (this.$route.query.id) {
  492. this.getAction('/accountClean/previewTemplate', { templateId: this.$route.query.id }).then(res => {
  493. if (res.success) {
  494. let data = res.result
  495. data.optimizationObjective = data.optimizationObjective.split(',')
  496. this.formOptimize.setFieldsValue(
  497. pick(
  498. data,
  499. 'templateName',
  500. 'cleanTime',
  501. 'optimizationObjective',
  502. 'charge',
  503. 'conversion',
  504. 'promotionGroupStatus',
  505. 'performOperations'
  506. )
  507. )
  508. }
  509. })
  510. } else {
  511. this.formOptimize.setFieldsValue({
  512. promotionGroupStatus: '1'
  513. })
  514. }
  515. })
  516. },
  517. filters: {},
  518. methods: {
  519. moment,
  520. templateNameValid(rule, value, callback) {
  521. if (value === '' || value === undefined || value === 0 || value === '0') {
  522. callback('模板名称必须填写')
  523. } else {
  524. let params = {}
  525. params.templateName = value
  526. if (this.$route.query.id) {
  527. params.id = this.$route.query.id
  528. callback()
  529. } else {
  530. this.getAction('/accountClean/getTemplateNameSize', params).then(res => {
  531. if (res.success) {
  532. if (res.result > 0) {
  533. callback('模板名称重复')
  534. } else {
  535. callback()
  536. }
  537. }
  538. })
  539. }
  540. }
  541. },
  542. ...mapGetters(['userInfo']),
  543. getFormData(form, className) {
  544. return this[form].getFieldValue(className)
  545. },
  546. handleSubmit() {
  547. // /accountClean/createTemplate
  548. this.formOptimize.validateFields((err, values) => {
  549. if (!err) {
  550. this.sumbitLoading = true
  551. let params = { ...values }
  552. params.optimizationObjective = params.optimizationObjective.join()
  553. params.createId = this.userInfo().id
  554. params.createUser = this.userInfo().username
  555. console.log(this.userInfo())
  556. if (this.$route.query.id) {
  557. params.id = this.$route.query.id
  558. this.postDataAction('/accountClean/updateTemplate', params).then(res => {
  559. this.sumbitLoading = false
  560. if (res.success) {
  561. this.$router.replace('/earlyWarningRules/accountClear')
  562. this.$bus.$emit('remove', `/earlyWarningRules/createClear?id=${this.$route.query.id}`)
  563. } else {
  564. this.$message.error(res.message)
  565. }
  566. })
  567. } else {
  568. this.postDataAction('/accountClean/createTemplate', params).then(res => {
  569. this.sumbitLoading = false
  570. if (res.success) {
  571. this.$router.replace('/earlyWarningRules/accountClear')
  572. this.$bus.$emit('remove', '/earlyWarningRules/createClear')
  573. } else {
  574. this.$message.error(res.message)
  575. }
  576. })
  577. }
  578. } else {
  579. }
  580. })
  581. },
  582. checkStatus(e) {
  583. // if (e != '1') {
  584. this.formOptimize.setFieldsValue({
  585. performOperations: '3'
  586. })
  587. // }else{
  588. // this.formOptimize.setFieldsValue({
  589. // performOperations: undefined
  590. // })
  591. // }
  592. },
  593. clearAllData() {
  594. if (this.$route.query.id) {
  595. this.$router.replace('/earlyWarningRules/accountClear')
  596. this.$bus.$emit('remove', `/earlyWarningRules/createClear?id=${this.$route.query.id}`)
  597. } else {
  598. this.$router.replace('/earlyWarningRules/accountClear')
  599. this.$bus.$emit('remove', '/earlyWarningRules/createClear')
  600. }
  601. }
  602. }
  603. }
  604. </script>
  605. <style lang="scss" scoped>
  606. /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  607. $height: 59px;
  608. .layout .header .user-wrapper .action .anticon,
  609. .layout .top-nav-header-index .user-wrapper .action .anticon {
  610. color: #999;
  611. }
  612. .layout .header .user-wrapper .action .anticon,
  613. .layout .top-nav-header-index .user-wrapper .action .anticon {
  614. color: #999;
  615. }
  616. .layout {
  617. .top-nav-header-index {
  618. .header-index-wide {
  619. margin-left: 10px;
  620. .ant-menu.ant-menu-horizontal {
  621. height: $height;
  622. line-height: $height;
  623. }
  624. }
  625. .trigger {
  626. line-height: 48px;
  627. font-size: 17px;
  628. &:hover {
  629. background: rgba(0, 0, 0, 0.05);
  630. }
  631. }
  632. }
  633. .header {
  634. z-index: 2;
  635. color: #999;
  636. height: $height;
  637. background-color: #1890ff;
  638. transition: background 300ms;
  639. /* dark 样式 */
  640. &.dark {
  641. color: #000000;
  642. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  643. background-color: white !important;
  644. }
  645. }
  646. .header,
  647. .top-nav-header-index {
  648. &.dark .trigger:hover {
  649. background: rgba(0, 0, 0, 0.05);
  650. }
  651. }
  652. }
  653. .ant-layout-header {
  654. height: $height;
  655. line-height: $height;
  656. }
  657. </style>