newBlankRule.vue 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977
  1. <template>
  2. <div class='newBlankRule'>
  3. <div class="toolbox-automate-rules-create-body">
  4. <div class="toolbox-automate-rules-create-content_title"><h3> 新建自动规则</h3></div>
  5. <div class="toolbox-automate-rules-create-content">
  6. <a-form-model
  7. ref="ruleForm"
  8. :model="form"
  9. :rules="rules"
  10. >
  11. <div class="moduler">
  12. <!-- 应用对象 -->
  13. <div class="row-item" >
  14. <div class="hint-item"></div>
  15. <div class="label-item">
  16. <div class="text-item">应用对象</div>
  17. <div class="required-item"></div>
  18. </div>
  19. <div class="input-item">
  20. <a-form-model-item ref="applyObject" prop="applyObject">
  21. <!-- <a-input
  22. v-model="form.name"
  23. @blur="
  24. () => {
  25. $refs.name.onFieldBlur();
  26. }
  27. "
  28. /> -->
  29. <a-radio-group v-model="form.applyObject" @change="applyObjChange">
  30. <a-radio-button value="ACCOUNT">账户</a-radio-button>
  31. <a-radio-button value="CAMPAIGN">计划</a-radio-button>
  32. <a-radio-button value="UNIT">组</a-radio-button>
  33. <a-radio-button value="CREATE">创意</a-radio-button>
  34. </a-radio-group>
  35. </a-form-model-item>
  36. </div>
  37. </div>
  38. <div class="row-item" >
  39. <div class="hint-item"></div>
  40. <div class="label-item">
  41. <div class="text-item">应用范围</div>
  42. <div class="required-item"></div>
  43. </div>
  44. <div class="input-item" >
  45. <a-form-model-item ref="applyRange" prop="applyRange" v-if="form.applyObject!='ACCOUNT'">
  46. <a-radio-group v-model="form.applyRange">
  47. <a-radio-button value="ACCORDINGTO_STATUS">按状态筛选</a-radio-button>
  48. <a-radio-button value="APPOINT">指定</a-radio-button>
  49. </a-radio-group>
  50. </a-form-model-item>
  51. <a-form-model-item ref="applyAccount" prop="applyAccount" v-if="form.applyObject=='ACCOUNT'">
  52. <a-select style="width: 300px" v-model="form.applyAccount" mode="multiple" placeholder="请选择具体的账户">
  53. <a-select-option v-for="item in accountList" :key="item.id" :value='item.value'>
  54. {{item.title}}
  55. </a-select-option>
  56. </a-select>
  57. </a-form-model-item>
  58. </div>
  59. </div>
  60. <div class="row-item" v-if="form.applyRange=='ACCORDINGTO_STATUS'&&form.applyObject!='ACCOUNT'">
  61. <div class="hint-item"></div>
  62. <div class="label-item">
  63. <div class="text-item">选择状态</div>
  64. <div class="required-item"></div>
  65. </div>
  66. <div class="input-item" >
  67. <a-form-model-item ref="status" prop="status">
  68. <a-select style="width: 300px" v-model="form.status">
  69. <a-select-option v-for="item in statusList" :key="item.id" :value='item.value'>
  70. {{item.title}}
  71. </a-select-option>
  72. </a-select>
  73. </a-form-model-item>
  74. </div>
  75. </div>
  76. <div class="row-item" v-if="form.applyRange=='APPOINT'&&form.applyObject!='ACCOUNT'">
  77. <div class="hint-item"></div>
  78. <div class="label-item">
  79. <div class="text-item">具体{{form.applyObject | handlerApplyObj}}</div>
  80. <div class="required-item"></div>
  81. </div>
  82. <div class="input-item" >
  83. <a-form-model-item ref="status" prop="status">
  84. <div class="selectedExist">
  85. <a-input v-model="selectedCampaignValue" class="input" placeholder='请输入名称' @change="selectedCampaign">
  86. <a-icon slot="addonAfter" type="search" />
  87. </a-input>
  88. <div style="width: 500px; margin-top: 4px;" >
  89. <div class="inventory-tags-lists-header">
  90. <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
  91. </a-checkbox>
  92. <div class="inventory-tags-lists-name"><strong>列表</strong></div>
  93. </div>
  94. <div class="inventory-tags-lists-container">
  95. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" >
  96. <span></span>
  97. </a-checkbox-group>
  98. </div>
  99. </div>
  100. <div class="fenye" v-if="totalPage">
  101. <a-pagination :current='currentPage' size='small' :total='totalPage' :pageSize='10' @change="pageNoChange" />
  102. </div>
  103. </div>
  104. </a-form-model-item>
  105. </div>
  106. </div>
  107. <div class="row-item" >
  108. <div class="hint-item">
  109. <a-tooltip>
  110. <template slot="title">
  111. 针对计划或者账户粒度的消耗、成本、转化数等数据设置阈值作为监控条件,方便系统判断当前的计划状态;条件之间为「且」的关系
  112. </template>
  113. <a-icon type="question-circle" />
  114. </a-tooltip>
  115. </div>
  116. <div class="label-item">
  117. <div class="text-item">规则条件</div>
  118. <div class="required-item"></div>
  119. </div>
  120. <div class="input-item" >
  121. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  122. <div class="title">
  123. <span class="condition-title">如果</span>
  124. <a-form-model-item ref="causalCondition" prop="causalCondition">
  125. <a-select style="width: 300px" v-model="form.causalCondition">
  126. <a-select-option value='MEET_ALL'>满足以下所有条件</a-select-option>
  127. <a-select-option value='MEET_ANY'>满足以下任意条件</a-select-option>
  128. </a-select>
  129. </a-form-model-item>
  130. </div>
  131. <div class="content">
  132. <div class="rules-list" v-for="(item,index) in rulesList" :key='index'>
  133. <div class="rules-list-item">
  134. <div class="rules-list-item-subject" >
  135. <a-cascader
  136. v-model="item.baseCondition"
  137. :options="condition"
  138. :display-render="displayRender"
  139. expand-trigger="hover"
  140. placeholder=""
  141. @change="conditionChange(item)"
  142. />
  143. </div>
  144. <div class="rules-list-item-subject" >
  145. <a-select v-model="item.whichDayOfData">
  146. <a-select-option value='CURRENT_DAY_DATA'>当天数据</a-select-option>
  147. </a-select>
  148. </div>
  149. <div class="rules-list-item-subject" >
  150. <a-select v-model="item.compareOperate">
  151. <a-select-option value='GT_EQ'>大于等于</a-select-option>
  152. <a-select-option value='LT_EQ'>小于等于</a-select-option>
  153. <a-select-option value='BETWEEN'>介于</a-select-option>
  154. </a-select>
  155. </div>
  156. <div class="rules-list-item-subject" v-if="item.baseCondition[1]=='COST'">
  157. <a-select v-model="item.whichModuleOfMoney">
  158. <a-select-option value='MONEY'>金额</a-select-option>
  159. <a-select-option value='DAY_BUDGET'>日预算</a-select-option>
  160. </a-select>
  161. </div>
  162. <!-- <div class="rules-list-item-subject" v-if="item.whichModuleOfMoney=='MONEY'&&item.compareOperate!='BETWEEN'">
  163. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.specificMoney" placeholder="请输入" />
  164. <span style="margin-left:8px;line-height:32px">元</span>
  165. </div> -->
  166. <div class="rules-list-item-subject" v-if="item.whichModuleOfMoney=='MONEY'&&item.compareOperate!='LT_EQ'">
  167. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.specificMoneyMin" placeholder="请输入" />
  168. <span style="margin-left:8px;line-height:32px">元</span>
  169. </div>
  170. <span style="margin-right:20px" v-if="item.whichModuleOfMoney=='MONEY'&&item.compareOperate!='GT_EQ'">-</span>
  171. <div class="rules-list-item-subject" v-if="item.whichModuleOfMoney=='MONEY'&&item.compareOperate=='BETWEEN'">
  172. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.specificMoneyMax" placeholder="请输入" />
  173. <span style="margin-left:8px;line-height:32px">元</span>
  174. </div>
  175. <!-- <div class="rules-list-item-subject" v-if="item.whichModuleOfMoney=='DAY_BUDGET'&&item.compareOperate!='BETWEEN'">
  176. <a-select v-model="item.budgetMultiple">
  177. <a-select-option v-for="item in budgetMultipleArr" :key="item.value" :value='item.value' >{{item.label}}</a-select-option>
  178. </a-select>
  179. </div> -->
  180. <div class="rules-list-item-subject" v-if="item.whichModuleOfMoney=='DAY_BUDGET'&&item.compareOperate!='LT_EQ'">
  181. <a-select v-model="item.budgetMultipleMin">
  182. <a-select-option v-for="item in budgetMultipleArr" :key="item.value" :value='item.value' >{{item.label}}</a-select-option>
  183. </a-select>
  184. </div>
  185. <span style="margin-right:20px" v-if="item.whichModuleOfMoney=='DAY_BUDGET'&&item.compareOperate=='BETWEEN'">-</span>
  186. <div class="rules-list-item-subject" v-if="item.whichModuleOfMoney=='DAY_BUDGET'&&item.compareOperate!='GT_EQ'">
  187. <a-select v-model="item.budgetMultipleMax">
  188. <a-select-option v-for="item in budgetMultipleArr" :key="item.value" :value='item.value' >{{item.label}}</a-select-option>
  189. </a-select>
  190. </div>
  191. <!-- 处理不是消耗的情况 -->
  192. <div class="rules-list-item-subject" v-if="item.baseCondition[1]!='COST'&&item.compareOperate!='LT_EQ'">
  193. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.minNumber" placeholder="请输入" />
  194. <span style="margin-left:8px;line-height:32px">{{item.baseCondition[1] | handlerDANWEI}}</span>
  195. </div>
  196. <span style="margin-right:20px" v-if="item.baseCondition[1]!='COST'&&item.compareOperate=='BETWEEN'">-</span>
  197. <div class="rules-list-item-subject" v-if="item.baseCondition[1]!='COST'&&item.compareOperate!='GT_EQ'">
  198. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.maxNumber" placeholder="请输入" />
  199. <span style="margin-left:8px;line-height:32px">{{item.baseCondition[1] | handlerDANWEI }}</span>
  200. </div>
  201. <div class="rules-list-item-delete" @click="deleteRulesListItem(item,index)">
  202. <a-icon type="delete" style="font-size:16px;position: relative;top: 4px;" />
  203. </div>
  204. </div>
  205. </div>
  206. <div class="add-rule" @click="addRule"> 添加条件</div>
  207. </div>
  208. </div>
  209. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  210. <div class="title">
  211. <span class="condition-title">则依次执行以下操作</span>
  212. </div>
  213. <div class="content">
  214. <div class="rules-list">
  215. <div class="rules-list-item">
  216. <div class="rules-list-item-subject" >
  217. <a-form-model-item ref="checkedTime" prop="checkedTime">
  218. <a-select v-model="form.finalOperation">
  219. <a-select-option value='PAUSE' v-if="form.applyObject!='ACCOUNT'">暂停{{form.applyObject | handlerApplyObj}}</a-select-option>
  220. <a-select-option value='OLNY_SENDMESSAGE'>仅发送通知</a-select-option>
  221. </a-select>
  222. </a-form-model-item>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. <div class="row-item" >
  231. <div class="hint-item"></div>
  232. <div class="label-item">
  233. <div class="text-item">检查时间</div>
  234. <div class="required-item"></div>
  235. </div>
  236. <div class="input-item">
  237. <a-form-model-item ref="checkedTime" prop="checkedTime">
  238. <a-radio-group v-model="form.checkedTime">
  239. <a-radio-button value="DAY">每天</a-radio-button>
  240. <a-radio-button value="HOUR">每小时</a-radio-button>
  241. <a-radio-button value="HALF_AN_HOUR">每半小时</a-radio-button>
  242. <!-- <a-radio-button value="CUSTOM_TIME">自定义</a-radio-button> -->
  243. </a-radio-group>
  244. </a-form-model-item>
  245. </div>
  246. </div>
  247. <div class="row-item" v-if="form.checkedTime=='DAY'">
  248. <div class="hint-item"></div>
  249. <div class="label-item">
  250. <div class="text-item">选择时刻</div>
  251. <div class="required-item"></div>
  252. </div>
  253. <div class="input-item">
  254. <a-form-model-item ref="specificMoment" prop="specificMoment">
  255. <a-select style="width: 300px" placeholder="请选择具体时刻" v-model="form.specificMoment">
  256. <a-select-option v-for="(item,index) in 24" :key="item" :value='index'>
  257. {{index>10?`${index}:00`:`0${index}:00`}}
  258. </a-select-option>
  259. </a-select>
  260. </a-form-model-item>
  261. </div>
  262. </div>
  263. <!-- <div class="row-item" >
  264. <div class="hint-item"></div>
  265. <div class="label-item">
  266. <div class="text-item">发送通知</div>
  267. <div class="required-item"></div>
  268. </div>
  269. <div class="input-item">
  270. <a-form-model-item ref="sendMessage" prop="sendMessage">
  271. <a-radio-group v-model="form.sendMessage">
  272. <a-radio-button :value="1">发送</a-radio-button>
  273. <a-radio-button :value="0">不发送</a-radio-button>
  274. </a-radio-group>
  275. </a-form-model-item>
  276. </div>
  277. </div> -->
  278. <div class="row-item" >
  279. <div class="hint-item"></div>
  280. <div class="label-item">
  281. <div class="text-item">规则名称</div>
  282. <div class="required-item"></div>
  283. </div>
  284. <div class="input-item">
  285. <a-form-model-item ref="applyObject" prop="applyObject">
  286. <a-input
  287. v-model="form.name"
  288. @blur="
  289. () => {
  290. $refs.name.onFieldBlur();
  291. }
  292. "
  293. />
  294. </a-form-model-item>
  295. </div>
  296. </div>
  297. </div>
  298. <div class="moduler">
  299. <!-- <div class="moduler-title">计划名称</div> -->
  300. <div class="opt">
  301. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  302. <a-button type="primary" style="margin-right:15px" @click="saveHandler" :loading="saveLoading">保存</a-button>
  303. </div>
  304. </div>
  305. </a-form-model>
  306. </div>
  307. </div>
  308. </div>
  309. </template>
  310. <script>
  311. import moment from 'moment';
  312. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  313. import { Switch } from 'ant-design-vue';
  314. let statusList=[
  315. {
  316. id:1,
  317. value:'STATUS_ALL',
  318. title:'所有',
  319. },
  320. {
  321. id:2,
  322. value:'STATUS_DELIVERY_OK',
  323. title:'所有投放中',
  324. },
  325. {
  326. id:3,
  327. value:'STATUS_CREATE',
  328. title:'所有新建',
  329. },
  330. {
  331. id:4,
  332. value:'STATUS_DISABLE',
  333. title:'所有已暂停',
  334. },
  335. {
  336. id:5,
  337. value:'STATUS_AUDIT',
  338. title:'所有新建审核',
  339. },
  340. {
  341. id:6,
  342. value:'STATUS_DONE',
  343. title:'所有已完成',
  344. },
  345. ]
  346. let condition=[
  347. {
  348. value:'0',
  349. label:'展示数据',
  350. children:[
  351. {
  352. value:'SHOW',
  353. label:'展示数',
  354. },
  355. {
  356. value:'CLICK',
  357. label:'点击数',
  358. },
  359. {
  360. value:'CLICK_RATE',
  361. label:'点击率',
  362. },
  363. {
  364. value:'COST',
  365. label:'消耗',
  366. },
  367. {
  368. value:'AD_CLICK_PRICE',
  369. label:'平均点击单价',
  370. },
  371. ]
  372. },
  373. {
  374. value:'1',
  375. label:'转化数据',
  376. children:[
  377. {
  378. value:'CONVERT',
  379. label:'转化数',
  380. },
  381. {
  382. value:'CONVERT_COST',
  383. label:'转化成本',
  384. },
  385. {
  386. value:'CONVERT_RATE',
  387. label:'转化率',
  388. },
  389. {
  390. value:'DEEP_CONVERT',
  391. label:'深度转化数',
  392. },
  393. {
  394. value:'DEEP_CONVERT_COST',
  395. label:'深度转化成本',
  396. },
  397. {
  398. value:'DEEP_CONVERT_RATE',
  399. label:'深度转化率',
  400. },
  401. ]
  402. }
  403. ]
  404. let rulesField = [
  405. ]
  406. let budgetMultipleArr=[
  407. {
  408. value:0.5,
  409. label:'0.5倍预算',
  410. },
  411. {
  412. value:0.8,
  413. label:'0.8倍预算',
  414. },
  415. {
  416. value:1,
  417. label:'1倍预算',
  418. },
  419. {
  420. value:1.5,
  421. label:'1.5倍预算',
  422. },
  423. ]
  424. export default {
  425. data() {
  426. return {
  427. selectedCampaignValue:undefined,
  428. spinning:false,
  429. campaignHaveList:[],
  430. currentPage:1,
  431. totalPage:0,
  432. checkedList: [],
  433. indeterminate: false,
  434. checkAll: false,
  435. plainOptions:[],
  436. saveLoading:false,
  437. // 用到的参数数组
  438. condition,
  439. statusList,
  440. budgetMultipleArr,
  441. accountList:[],
  442. form: {
  443. name: `空白规则_${moment().format('YYYY_MM_DD_hh:mm:ss')}`,
  444. applyObject:'ACCOUNT',
  445. applyAccount:[],
  446. applyRange:'ACCORDINGTO_STATUS',
  447. status:'STATUS_DELIVERY_OK',
  448. specificMoment:undefined,
  449. sendMessage:1,
  450. specificMoment:undefined,
  451. checkedTime:'DAY',
  452. causalCondition:'MEET_ALL', //因果条件 满足所有/满足任意
  453. finalOperation:'OLNY_SENDMESSAGE',
  454. },
  455. rules: {
  456. name: [
  457. { required: true, message: '请填写规则的具体名称', trigger: 'blur' },
  458. { min: 2, message: '长度不得小于2', trigger: 'blur' },
  459. ],
  460. applyObject: [{ required: true, message: '请选择具体应用对象', trigger: 'change' }],
  461. applyRange: [{ required: true, message: '请选择具体应用范围', trigger: 'change' }],
  462. applyAccount: [{required: true, message: '请选择具体应用范围', trigger: 'change' }],
  463. specificMoment: [{required: true, message: '请选择具体时刻', trigger: 'change' }],
  464. },
  465. rulesList:[
  466. {
  467. baseCondition:['0','COST'],
  468. whichDayOfData:'CURRENT_DAY_DATA',
  469. compareOperate:'GT_EQ',
  470. whichModuleOfMoney:'MONEY',
  471. budgetMultiple:0.5,
  472. budgetMultipleMin:0.5,
  473. budgetMultipleMax:0.8,
  474. specificMoney:undefined,
  475. specificMoneyMin:undefined,
  476. specificMoneyMax:undefined,
  477. }
  478. ]
  479. }
  480. },
  481. methods: {
  482. // form-modal 自带方法
  483. onSubmit() {
  484. this.$refs.ruleForm.validate(valid => {
  485. if (valid) {
  486. console.log('submit!',valid);
  487. } else {
  488. console.log('error submit!!');
  489. return false;
  490. }
  491. });
  492. },
  493. resetForm() {
  494. this.$refs.ruleForm.resetFields();
  495. },
  496. addRule(){
  497. this.rulesList.push({
  498. baseCondition:['0','COST'],
  499. whichDayOfData:'CURRENT_DAY_DATA',
  500. compareOperate:'GT_EQ',
  501. whichModuleOfMoney:'MONEY',
  502. budgetMultiple:0.5,
  503. budgetMultipleMin:0.5,
  504. budgetMultipleMax:0.8,
  505. specificMoney:undefined,
  506. specificMoneyMin:undefined,
  507. specificMoneyMax:undefined,
  508. minNumber:undefined,
  509. maxNumber:undefined,
  510. })
  511. },
  512. deleteRulesListItem(item,index){
  513. console.log(item,index)
  514. this.rulesList=this.rulesList.filter((ele,ind)=>{
  515. return ind!=index
  516. })
  517. },
  518. displayRender({ labels }) {
  519. return labels[labels.length - 1];
  520. },
  521. conditionChange(item){
  522. console.log(item)
  523. if(item.baseCondition[1]=='COST'){
  524. item.whichModuleOfMoney='MONEY';
  525. }else{
  526. item.whichModuleOfMoney=undefined;
  527. }
  528. item.specificMoney=undefined;
  529. item.specificMoneyMin=undefined;
  530. item.specificMoneyMax=undefined;
  531. item.minNumber=undefined;
  532. item.maxNumber=undefined;
  533. },
  534. applyObjChange(e){
  535. if(e.target.value=='ACCOUNT'){
  536. this.form.finalOperation='OLNY_SENDMESSAGE'
  537. }
  538. },
  539. saveHandler(){
  540. this.$refs.ruleForm.validate(valid=> {
  541. if (valid) {
  542. this.form.rulesList=this.rulesList;
  543. console.log(valid,this.form);
  544. } else {
  545. console.log('error submit!!');
  546. return false;
  547. }
  548. });
  549. },
  550. goBack() {
  551. this.$router.replace('/autoRules')
  552. this.$bus.$emit('remove', '/newBlankRule')
  553. },
  554. //分页页码改变
  555. pageNoChange(val){
  556. console.log(val);
  557. this.currentPage=val;
  558. this.selectedCampaign()
  559. },
  560. onChange(checkedList) {
  561. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  562. this.checkAll = checkedList.length === plainOptions.length;
  563. },
  564. onCheckAllChange(e) {
  565. let valueOption = [];
  566. this.plainOptions.forEach((item) => {
  567. valueOption.push(item.value)
  568. })
  569. Object.assign(this, {
  570. checkedList: e.target.checked ? valueOption : [],
  571. indeterminate: false,
  572. checkAll: e.target.checked,
  573. });
  574. },
  575. selectedCampaign(e){
  576. // console.log(e.target.value,this.selectedCampaignValue);
  577. if(this.accountID){
  578. this.getExsitGroupList();
  579. }else{
  580. this.$message.warning('请选择账户后重试!')
  581. this.selectedCampaignValue=undefined;
  582. }
  583. },
  584. },
  585. filters:{
  586. handlerApplyObj(val){
  587. let showVal=''
  588. switch (val) {
  589. case 'CAMPAIGN':
  590. showVal='计划'
  591. break;
  592. case 'UNIT':
  593. showVal='组'
  594. break;
  595. case 'CREATE':
  596. showVal='创意'
  597. break;
  598. default:
  599. break;
  600. }
  601. return showVal
  602. },
  603. handlerDANWEI(val){
  604. console.log(val.indexOf("RATE") != -1)
  605. let returnVal='';
  606. if(val.indexOf("RATE") != -1){
  607. returnVal='%';
  608. }else if(val.indexOf("COST") != -1|| val.indexOf("PRICE") != -1){
  609. returnVal='元'
  610. }else{
  611. returnVal='个'
  612. }
  613. return returnVal
  614. },
  615. },
  616. }
  617. </script>
  618. <style lang="scss" scoped>
  619. .newBlankRule{
  620. .toolbox-automate-rules-create-body {
  621. margin: 16px 12px 12px;
  622. padding: 32px 32px 16px;
  623. background-color: #fff;
  624. border-radius: 4px;
  625. }
  626. .toolbox-automate-rules-create-content_title {
  627. background-color: #fff;
  628. display: flex;
  629. flex-flow: row nowrap;
  630. justify-content: flex-start;
  631. align-items: center;
  632. margin-bottom: 28px;
  633. h3 {
  634. font-size: 22px;
  635. margin: 0;
  636. font-weight: 400;
  637. height: 30px;
  638. line-height: 30px;
  639. }
  640. }
  641. .toolbox-automate-rules-create-content {
  642. padding-left: 28px;
  643. }
  644. .moduler {
  645. .opt {
  646. text-align: right;
  647. }
  648. width: 100%;
  649. background: #fff;
  650. margin-bottom: 16px;
  651. position: relative;
  652. padding: 32px 24px 48px 32px;
  653. // border-radius: 4px;
  654. // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  655. .moduler-title {
  656. display: flex;
  657. align-items: center;
  658. font-size: 22px;
  659. margin-bottom: 20px;
  660. }
  661. .row-item {
  662. display: flex;
  663. justify-content: flex-start;
  664. align-items: center;
  665. margin-bottom: 32px;
  666. }
  667. .row-item:last-of-type {
  668. margin-bottom: 0;
  669. }
  670. .row-item .hint-item {
  671. width: 24px;
  672. min-width: 24px;
  673. align-self: flex-start;
  674. line-height: 20px;
  675. height: 20px;
  676. margin-top: 9px;
  677. }
  678. .row-item .label-item {
  679. position: relative;
  680. align-items: flex-start;
  681. align-self: flex-start;
  682. line-height: 20px;
  683. height: 20px;
  684. margin-top: 10px;
  685. width: 80px;
  686. min-width: 80px;
  687. .text-item {
  688. font-size: 14px;
  689. width: 60px;
  690. }
  691. }
  692. .row-item .required-item {
  693. width: 4px;
  694. height: 4px;
  695. border-radius: 2px;
  696. background: #f45858;
  697. position: absolute;
  698. right: 10px;
  699. top: 50%;
  700. transform: translateY(-50%);
  701. }
  702. .row-item .input-item {
  703. min-width: 480px;
  704. position: relative;
  705. // height: 35px;
  706. .tip {
  707. font-size: 12px;
  708. color: tomato;
  709. }
  710. }
  711. .adName{
  712. display: flex;
  713. .nameList{
  714. width: 90%;
  715. }
  716. .item{
  717. display: inline-block;
  718. width: 30%;
  719. margin-left: 15px;
  720. margin-bottom: 10px;
  721. }
  722. }
  723. }
  724. .toolbox-automate-rules-create-content_rules-and-condition_rules {
  725. margin-bottom: 24px;
  726. }
  727. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition {
  728. width: 1138px;
  729. background: #fff;
  730. border-radius: 4px;
  731. border: 1px solid #dadfe3;
  732. }
  733. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition{
  734. .title{
  735. height: 20px;
  736. font-size: 14px;
  737. font-weight: 600;
  738. color: #333;
  739. height: 56px;
  740. border-bottom: 1px solid #E4E9ED;
  741. padding-left: 24px;
  742. display: flex;
  743. justify-content: flex-start;
  744. align-items: center;
  745. .condition-title{
  746. padding-right: 17px;
  747. }
  748. }
  749. .content{
  750. padding: 24px;
  751. .add-rule {
  752. cursor: pointer;
  753. height: 40px;
  754. border-radius: 2px;
  755. border: 1px dashed #dadfe3;
  756. font-size: 12px;
  757. display: flex;
  758. flex-flow: row column;
  759. justify-content: center;
  760. align-items: center;
  761. color: #666;
  762. margin-top: 16px;
  763. -moz-user-select: none;
  764. -webkit-user-select: none;
  765. -ms-user-select: none;
  766. -khtml-user-select: none;
  767. user-select: none;
  768. }
  769. .rules-list-item {
  770. box-sizing: border-box;
  771. width: 100%;
  772. padding: 24px;
  773. background: #f8f9fa;
  774. border-radius: 4px;
  775. margin-bottom: 16px;
  776. display: flex;
  777. align-items: center;
  778. position: relative;
  779. .rules-list-item-delete {
  780. position: absolute;
  781. right: 24px;
  782. height: 30px;
  783. padding-left: 24px;
  784. border-left: 1px solid #DADFE3;
  785. cursor: pointer;
  786. }
  787. .rules-list-item-subject {
  788. width: 120px;
  789. margin-right: 16px;
  790. display: flex;
  791. }
  792. }
  793. .rules—list_item:last-of-type {
  794. margin-bottom: 0;
  795. }
  796. }
  797. }
  798. .selectedExist{
  799. width: 500px;
  800. padding-top: 5px;
  801. .inventory-tags-lists-header {
  802. background-color: #F8F9FA;
  803. border: 1px solid #E4E9ED;
  804. height: 36px;
  805. line-height: 33px;
  806. border-radius: 4px 4px 0 0;
  807. font-weight: bold;
  808. display: flex;
  809. }
  810. .inventory-tags-lists-container {
  811. border: 1px solid #E4E9ED;
  812. margin-top: -1px;
  813. height: 100%;
  814. padding: 4px 0px;
  815. border-radius: 0 0 4px 4px;
  816. }
  817. .inventory-tags-lists-item {
  818. width: 100%;
  819. height: 37px;
  820. line-height: 37px;
  821. padding-left: 12px;
  822. padding-right: 12px;
  823. display: flex;
  824. font-size: 14px;
  825. color: #333;
  826. }
  827. .input{
  828. margin-bottom:16px ;
  829. }
  830. .campaign-have-list{
  831. font-family: PingFangSC-Regular;
  832. font-size: 14px;
  833. color: #333;
  834. border: 1px solid #DADFE3;
  835. border-radius: 4px;
  836. margin-bottom: 16px;
  837. height: 388px;
  838. .campaign-have-header {
  839. height: 38px;
  840. width: 100%;
  841. padding-left: 13px;
  842. line-height: 38px;
  843. background: #f8f9fa;
  844. border-radius: 4px 4px 0px 0px;
  845. border-bottom: 1px solid #DADFE3;
  846. }
  847. .campaign-have-list ul {
  848. width: 100%;
  849. height: 350px;
  850. padding-top: 6px;
  851. }
  852. li{
  853. padding: 6px 10px;
  854. cursor: pointer;
  855. }
  856. li:hover{
  857. background: #EDF1F5;
  858. }
  859. .ad-d-flex-between {
  860. justify-content: space-between !important;
  861. }
  862. .ad-d-flex, .ad-btn {
  863. display: flex;
  864. align-items: center;
  865. }
  866. .byted-loading-v {
  867. position: absolute;
  868. top: 0;
  869. right: 0;
  870. bottom: 0;
  871. left: 0;
  872. z-index: 996;
  873. background-color: hsla(0,0%,96%,.9);
  874. }
  875. .info{
  876. width: 60%;
  877. overflow: hidden;
  878. text-overflow: ellipsis;
  879. white-space: nowrap;
  880. }
  881. .landing-type {
  882. color: #999;
  883. font-size: 12px;
  884. white-space: nowrap;
  885. }
  886. }
  887. .noAccountID{
  888. font-size: 14px;
  889. text-align: center;
  890. color: #999;
  891. line-height: 388px;
  892. }
  893. .fenye{
  894. height: 60px;
  895. padding-top: 12px;
  896. text-align: right;
  897. }
  898. }
  899. }
  900. </style>
  901. <style lang="scss">
  902. .newBlankRule{
  903. .ant-form-item {
  904. margin-bottom: 0;
  905. }
  906. .ant-radio-button-wrapper {
  907. min-width: 70px;
  908. text-align: center;
  909. }
  910. .ant-checkbox-wrapper,
  911. .ant-checkbox-group-item {
  912. display: block;
  913. padding: 5px 15px;
  914. }
  915. .ant-checkbox-wrapper:first-child {
  916. padding: 0 15px 5px;
  917. }
  918. }
  919. </style>