configRules.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267
  1. <template>
  2. <div class='configRules'>
  3. <a-spin :spinning="spinning">
  4. <div class="toolbox-automate-rules-create-body">
  5. <div class="toolbox-automate-rules-create-content_title"><h3> 新建空白模板</h3></div>
  6. <div class="toolbox-automate-rules-create-content">
  7. <a-form-model
  8. ref="ruleForm"
  9. :model="form"
  10. :rules="rules"
  11. >
  12. <div class="moduler">
  13. <!-- 应用对象 -->
  14. <div class="row-item" >
  15. <div class="hint-item"></div>
  16. <div class="label-item">
  17. <div class="text-item">应用媒体</div>
  18. <div class="required-item"></div>
  19. </div>
  20. <div class="input-item">
  21. <a-form-model-item ref="eventRuleLevel" prop="eventRuleLevel">
  22. <a-radio-group v-model="form.mediaType" :disabled="form.templateId!=null" @change="mediaTypeChange">
  23. <a-radio-button :value="3" >头条</a-radio-button>
  24. <a-radio-button :value="2">快手</a-radio-button>
  25. <!-- <a-radio-button :value="3">头条内广</a-radio-button>
  26. <a-radio-button :value="4">快手内广</a-radio-button> -->
  27. </a-radio-group>
  28. </a-form-model-item>
  29. </div>
  30. </div>
  31. <div class="row-item" >
  32. <div class="hint-item"></div>
  33. <div class="label-item">
  34. <div class="text-item">模板名称</div>
  35. <div class="required-item"></div>
  36. </div>
  37. <div class="input-item">
  38. <a-form-model-item ref="templateName" prop="templateName">
  39. <a-input
  40. v-model="form.templateName"
  41. :allowClear='!currentRuleId'
  42. @blur="blurTemplateName"
  43. />
  44. </a-form-model-item>
  45. </div>
  46. </div>
  47. <div class="row-item" >
  48. <div class="hint-item">
  49. <!-- <a-tooltip>
  50. <template slot="title">
  51. 针对计划或者账户粒度的消耗、成本、转化数等数据设置阈值作为监控条件,方便系统判断当前的计划状态;条件之间为「且」的关系
  52. </template>
  53. <a-icon type="question-circle" />
  54. </a-tooltip> -->
  55. </div>
  56. <div class="label-item">
  57. <div class="text-item">规则条件</div>
  58. <div class="required-item"></div>
  59. </div>
  60. <div class="input-item extraClass" style="min-width:80%" >
  61. <a-collapse accordion >
  62. <a-collapse-panel v-for="(item,index) in form.ruleList" :key="index" :header="item.groupName" :style="customStyle">
  63. <span slot="extra">
  64. <a-popconfirm
  65. :title="`确定删除吗?`"
  66. @confirm="deleteRule($event,item,index)"
  67. >
  68. <a-icon type="delete" @click="deleteIcon($event)"/>
  69. </a-popconfirm>
  70. </span>
  71. <div class="row-item" >
  72. <div class="hint-item"></div>
  73. <div class="label-item">
  74. <div class="text-item">规则名称</div>
  75. <div class="required-item"></div>
  76. </div>
  77. <div class="input-item">
  78. <!-- :disabled="!!item.groupId" -->
  79. <a-form-model-item ref="groupName" :prop="'ruleList.'+index+'.groupName'" :rules="[
  80. { required: true, message: '请填写规则名称', trigger: 'blur' },
  81. { min: 1, message: '长度不得小于1', trigger: 'blur' }]">
  82. <a-input
  83. v-model="item.groupName"
  84. placeholder="请输入规则名称"
  85. :allowClear="!item.groupId"
  86. style="width:400px"
  87. @blur="blurGroupName(item)"
  88. />
  89. </a-form-model-item>
  90. </div>
  91. </div>
  92. <div class="row-item" >
  93. <div class="hint-item"></div>
  94. <div class="label-item">
  95. <div class="text-item">规则描述</div>
  96. <div class="required-item"></div>
  97. </div>
  98. <div class="input-item">
  99. <!-- :disabled="!!item.groupId" -->
  100. <a-form-model-item ref="remark" :prop="'ruleList.'+index+'.remark'" :rules="[
  101. { required: true, message: '请填写规则描述', trigger: 'blur' },
  102. { min: 1, message: '长度不得小于1', trigger: 'blur' },
  103. ]" >
  104. <a-textarea
  105. v-model="item.remark"
  106. style="width:400px"
  107. placeholder="输入规则描述"
  108. :auto-size="{ minRows: 2, maxRows: 5 }"
  109. @blur="blurGroupName(item)"
  110. />
  111. </a-form-model-item>
  112. </div>
  113. </div>
  114. <div class="row-item" >
  115. <div class="hint-item"></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. <a-form-model-item ref="ruleType" prop="ruleType">
  122. <a-radio-group v-model="item.ruleType" @change="ruleTypeChange(item)">
  123. <a-radio-button value="group">组合</a-radio-button>
  124. <a-radio-button value="base">基础</a-radio-button>
  125. </a-radio-group>
  126. </a-form-model-item>
  127. </div>
  128. </div>
  129. <div class="row-item" >
  130. <div class="hint-item"></div>
  131. <div class="label-item">
  132. <div class="text-item">规则必填</div>
  133. <div class="required-item"></div>
  134. </div>
  135. <div class="input-item">
  136. <a-form-model-item ref="isRequired" prop="isRequired">
  137. <a-radio-group v-model="item.isRequired" >
  138. <a-radio-button :value="1">是</a-radio-button>
  139. <a-radio-button :value="0">否</a-radio-button>
  140. </a-radio-group>
  141. </a-form-model-item>
  142. </div>
  143. </div>
  144. <div class="row-item" v-if="item.ruleType=='group'">
  145. <div class="hint-item"></div>
  146. <div class="label-item">
  147. <div class="text-item">规则复建</div>
  148. <div class="required-item"></div>
  149. </div>
  150. <div class="input-item">
  151. <a-form-model-item ref="isCopy" prop="isCopy">
  152. <a-radio-group v-model="item.isCopy" >
  153. <a-radio-button :value="1">是</a-radio-button>
  154. <a-radio-button :value="0">否</a-radio-button>
  155. </a-radio-group>
  156. </a-form-model-item>
  157. </div>
  158. </div>
  159. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  160. <div class="title">
  161. <a-form-model-item ref="ruleRelationship" prop="ruleRelationship">
  162. <span class="condition-title">如果</span>
  163. <a-select style="width: 300px" v-model="item.ruleRelationship" :disabled="!!item.groupId">
  164. <a-select-option value='and'>满足以下所有条件</a-select-option>
  165. <a-select-option value='or'>满足以下任意条件</a-select-option>
  166. </a-select>
  167. </a-form-model-item>
  168. </div>
  169. <div class="content">
  170. <div class="rules-list" v-for="(ele,ind) in item.ruleDetail" :key='ind'>
  171. <div class="rules-list-item">
  172. <div class="rules-list-item-subject" style="width:180px">
  173. <a-form-model-item ref="baseIndex" prop="baseIndex">
  174. <a-cascader
  175. v-model="ele.baseIndex"
  176. :options="rulesFieldList"
  177. placeholder="选择指标"
  178. @change="baseIndexChange(ele)"
  179. expand-trigger="hover"
  180. :disabled="!!ele.ruleId"
  181. :fieldNames="{ label:'name', value: 'code',children: 'children'}"
  182. />
  183. </a-form-model-item>
  184. </div>
  185. <template >
  186. <div class="rules-list-item-subject" >
  187. <a-form-model-item ref="ruleCondition" prop="ruleCondition">
  188. <a-select v-model="ele.ruleCondition" placeholder="运算符" :disabled="!!ele.ruleId">
  189. <a-select-option v-for="item in ele.conditionList" :key="item.id" :value='item.ruleCondition'>{{item.conditionName}}</a-select-option>
  190. </a-select>
  191. </a-form-model-item>
  192. </div>
  193. <div class="rules-list-item-subject" >
  194. <a-form-model-item ref="variableType" prop="variableType">
  195. <a-select v-model="ele.variableType" :disabled="!!ele.ruleId">
  196. <a-select-option :value='0'>常量</a-select-option>
  197. <a-select-option :value='1'>变量</a-select-option>
  198. </a-select>
  199. </a-form-model-item>
  200. </div>
  201. <div class="rules-list-item-subject" >
  202. <a-form-model-item ref="judgeFormat" prop="judgeFormat">
  203. <a-select v-model="ele.judgeFormat" placeholder="" :disabled="!!ele.ruleId">
  204. <a-select-option :value='0'>筛选条件</a-select-option>
  205. <a-select-option :value='1'>判断条件</a-select-option>
  206. </a-select>
  207. </a-form-model-item>
  208. </div>
  209. <div class="rules-list-item-subject" v-if="ele.dataType=='number'">
  210. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="ele.threshold" placeholder="请输入" :disabled="!!ele.ruleId" />
  211. <span style="margin-left:8px;line-height:32px">{{ele.dataUnit }}</span>
  212. </div>
  213. <div class="rules-list-item-subject" >
  214. <a-form-model-item ref="isUnlimited" prop="isUnlimited">
  215. <a-select v-model="ele.isUnlimited" placeholder="是否必填" :disabled="!!ele.ruleId">
  216. <a-select-option :value='1'>必填</a-select-option>
  217. <a-select-option :value='0'>不必填</a-select-option>
  218. </a-select>
  219. </a-form-model-item>
  220. </div>
  221. </template>
  222. <div class="rules-list-item-delete" @click="deleteRulesListItem(index,ind)" v-if="ind!=0">
  223. <a-icon type="delete" style="font-size:16px;position: relative;top: 4px;" />
  224. </div>
  225. </div>
  226. </div>
  227. <div class="add-rule" @click="addCondition(item,index)" v-show="item.ruleType=='group'"> 添加条件</div>
  228. </div>
  229. </div>
  230. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  231. <div class="title">
  232. <span class="condition-title">则依次执行以下操作</span>
  233. </div>
  234. <div class="content">
  235. <div class="rules-list">
  236. <div class="rules-list-item">
  237. <div class="rules-list-item-subject" >
  238. <a-form-model-item ref="processMethod" prop="processMethod">
  239. <a-select v-model="item.operate" :disabled="!!item.groupId">
  240. <a-select-option value='SEND'>仅发送通知</a-select-option>
  241. <a-select-option value='PAUSE' >关停并发送通知</a-select-option>
  242. </a-select>
  243. </a-form-model-item>
  244. </div>
  245. <div class="rules-list-item-subject" >
  246. <a-form-model-item ref="processMethod" prop="processMethod">
  247. <a-select v-model="item.sendType" :disabled="!!item.groupId">
  248. <!-- <a-select-option value='message' >短信</a-select-option> -->
  249. <a-select-option value='Wechat'>企业微信</a-select-option>
  250. <a-select-option value='EMAIL'>邮箱</a-select-option>
  251. <!-- <a-select-option value='phone'>电话</a-select-option> -->
  252. </a-select>
  253. </a-form-model-item>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. </div>
  259. </a-collapse-panel>
  260. </a-collapse>
  261. <div class="add-rule" @click="addRule"> 添加规则</div>
  262. </div>
  263. </div>
  264. </div>
  265. <div class="moduler">
  266. <!-- <div class="moduler-title">计划名称</div> -->
  267. <div class="opt">
  268. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  269. <a-button type="primary" style="margin-right:15px" @click="saveHandler" :loading="saveLoading">保存</a-button>
  270. </div>
  271. </div>
  272. </a-form-model>
  273. </div>
  274. </div>
  275. </a-spin>
  276. </div>
  277. </template>
  278. <script>
  279. import moment from 'moment';
  280. import { getAction, postAction, downFile, downFilePost,deleteAction,putAction } from '@/api/manage';
  281. import { Switch } from 'ant-design-vue';
  282. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  283. // import func from '../../../../vue-temp/vue-editor-bridge';
  284. export default {
  285. components:{
  286. Treeselect,
  287. },
  288. data() {
  289. return {
  290. tabActiveKey:[0],
  291. customStyle:'background: #f9f9fa;border-radius: 4px;margin-bottom:15px;overflow: hidden;border: 1px solid #d9d9d9;',
  292. conditionList:[],
  293. url:{
  294. fieldList:'/ruleIndicator/list',
  295. ruleCondition:'/rule/ruleCondition/list',
  296. creativeTemplate:'/ruleTemplate/createTemplate',
  297. ruleGroupDelete:'/ruleGroup/delete',
  298. createRuleGroup:'/ruleGroup/createRuleGroup',
  299. queryDetailById:'/ruleTemplate/queryDetailById',
  300. },
  301. currentRuleId:'',
  302. rulesFieldList:[],
  303. spinning:false,
  304. saveLoading:false,
  305. // 用到的参数数组
  306. form: {
  307. mediaType:3,
  308. templateName: `空白模板_${moment().format('YYYY_MM_DD_hh:mm:ss')}`,
  309. ruleList:[
  310. {
  311. groupName:'默认规则',
  312. ruleRelationship:"and",
  313. ruleType:'base',
  314. remark:'',
  315. isRequired:1,
  316. isCopy:0,
  317. ruleDetail:[
  318. {
  319. ruleName:'',
  320. baseIndex:[],
  321. indicatorCode:undefined,
  322. ruleDimension:'',
  323. dataRange:'CURRENT_DAY_DATA',
  324. ruleCondition:undefined,
  325. threshold:0,
  326. variableType:1,
  327. dataUnit:'',
  328. conditionList:[],
  329. dataType:'',
  330. judgeFormat:0,
  331. isUnlimited:1,
  332. },
  333. ],
  334. operate:'SEND',//预警方式
  335. sendType:'Wechat',//通知方式
  336. },
  337. ],
  338. },
  339. rules: {
  340. templateName: [
  341. { required: true, message: '请填写规则的具体名称', trigger: 'blur' },
  342. { min: 2, message: '长度不得小于2', trigger: 'blur' },
  343. ],
  344. metricValueCode: [{ required: true, message: '请填写规则描述', trigger: 'change' }],
  345. // threshold: [
  346. // { required: true, message: '请填写具体值', trigger: 'blur' },
  347. // // { min: 2, message: '长度不得小于2', trigger: 'blur' },
  348. // ],
  349. },
  350. templateNameTrue:false,
  351. templateNameOld:''
  352. }
  353. },
  354. watch: {
  355. 'form.templateName':function(n,o){
  356. console.log(n,o)
  357. if(n!=o){
  358. this.templateNameTrue = true
  359. }else{
  360. this.templateNameTrue = false
  361. }
  362. },
  363. // 'form.mediaType':function(n,o){
  364. // getAction(this.url.fieldList,{
  365. // mediaType:n,
  366. // pageNo:1,
  367. // pageSize:500,
  368. // }).then(res=>{
  369. // console.log(res);
  370. // this.rulesFieldList = []
  371. // if(res.success){
  372. // this.rulesFieldList=res.result.map(item=>{
  373. // return {
  374. // name:item.dimensionName,
  375. // code:item.dimension,
  376. // children:item.dimensionList
  377. // }
  378. // })
  379. // this.getTempletDetail()
  380. // }
  381. // })
  382. // }
  383. },
  384. methods: {
  385. blurTemplateName(){
  386. console.log(this.form)
  387. if(this.currentRuleId){
  388. if(this.templateNameTrue){
  389. if(this.form.templateName!=''){
  390. putAction('/ruleTemplate/edit',{id:this.form.templateId,templateName:this.form.templateName}).then(res=>{
  391. if(res.success){
  392. }else{
  393. this.$message.error(res.message)
  394. }
  395. })
  396. }else{
  397. this.$message.error('模板名称不可以为空!!!')
  398. }
  399. }
  400. }
  401. },
  402. blurGroupName(item){
  403. if(this.currentRuleId){
  404. if(item.groupName!=''&&item.remark!=''){
  405. putAction('/ruleGroup/edit',{id:item.groupId,groupName:item.groupName,remark:item.remark}).then(res=>{
  406. if(res.success){
  407. }else{
  408. this.$message.error(res.message)
  409. }
  410. })
  411. }else{
  412. this.$message.error('规则名称和规则描述不可以为空!!!')
  413. }
  414. }
  415. },
  416. ruleTypeChange(item){
  417. console.log(item)
  418. if(item.ruleType=='base'){
  419. item.isCopy=0;
  420. item.ruleDetail=item.ruleDetail.filter((item,index)=>{
  421. return index==0
  422. })
  423. }
  424. console.log(item)
  425. },
  426. inputCheck(val){
  427. console.log(val)
  428. },
  429. isCost(val){
  430. if(val.indexOf('Cost') != -1){
  431. return true
  432. } else if(val.indexOf('depletion') != -1){
  433. return true
  434. }else{
  435. return false
  436. }
  437. },
  438. baseIndexChange(ele) {
  439. console.log(ele,'========================执行了');
  440. ele.indicatorCode=ele.baseIndex[1];
  441. ele.ruleDimension=ele.baseIndex[0];
  442. this.rulesFieldList.forEach(element => {
  443. if(element.code==ele.baseIndex[0]){
  444. element.children.forEach(item=>{
  445. if(item.code==ele.baseIndex[1]){
  446. ele.ruleName=item.name
  447. ele.dataUnit=item.dataUnit
  448. ele.dataType=item.dataType;
  449. if(item.dataType!='number'){
  450. ele.threshold=''
  451. }
  452. getAction(this.url.ruleCondition,{
  453. dataType:item.dataType
  454. }).then(res=>{
  455. // console.log(res);
  456. ele.conditionList=[];
  457. if(res.success){
  458. ele.conditionList=res.result
  459. }
  460. })
  461. }
  462. })
  463. }
  464. });
  465. ele.ruleCondition=undefined;
  466. },
  467. filterOption(input, option) {
  468. return (
  469. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  470. );
  471. },
  472. // form-modal 自带方法
  473. onSubmit() {
  474. this.$refs.ruleForm.validate(valid => {
  475. if (valid) {
  476. console.log('submit!',valid);
  477. } else {s
  478. console.log('error submit!!');
  479. return false;
  480. }
  481. });
  482. },
  483. resetForm() {
  484. this.$refs.ruleForm.resetFields();
  485. },
  486. addCondition(item,index){
  487. if(item.groupId){
  488. this.$message.warning('不可编辑当前规则组')
  489. }else{
  490. this.form.ruleList[index].ruleDetail.push({
  491. ruleName:'',
  492. baseIndex:[],
  493. indicatorCode:undefined,
  494. ruleDimension:'',
  495. dataRange:'CURRENT_DAY_DATA',
  496. ruleCondition:undefined,
  497. threshold:0,
  498. variableType:1,
  499. dataUnit:'',
  500. conditionList:[],
  501. dataType:'',
  502. judgeFormat:0,
  503. isUnlimited:1,
  504. })
  505. }
  506. },
  507. addRule(){
  508. this.form.ruleList.push(
  509. {
  510. groupName:'默认规则',
  511. ruleRelationship:"and",
  512. ruleType:'base',
  513. remark:'',
  514. operate:'SEND',//预警方式
  515. sendType:'Wechat',//通知方式
  516. isRequired:1,
  517. isCopy:0,
  518. ruleDetail:[
  519. {
  520. ruleName:'',
  521. baseIndex:[],
  522. indicatorCode:undefined,
  523. ruleDimension:'',
  524. dataRange:'CURRENT_DAY_DATA',
  525. ruleCondition:undefined,
  526. threshold:0,
  527. variableType:1,
  528. dataUnit:'',
  529. conditionList:[],
  530. dataType:'',
  531. judgeFormat:0,
  532. isUnlimited:1,
  533. },
  534. ]
  535. },
  536. )
  537. },
  538. deleteRulesListItem(index,ind){
  539. console.log(index,ind)
  540. this.form.ruleList[index].ruleDetail=this.form.ruleList[index].ruleDetail.filter((ele,i)=>{
  541. return i!=ind
  542. })
  543. },
  544. deleteIcon(event){
  545. event.stopPropagation();
  546. },
  547. deleteRule(event,item,index){
  548. event.stopPropagation();
  549. console.log(item,index)
  550. if(item.groupId){
  551. deleteAction(this.url.ruleGroupDelete,{
  552. id:item.groupId
  553. }).then(res=>{
  554. console.log(res);
  555. if(res.success){
  556. this.$message.success(res.message);
  557. this.form.ruleList=this.form.ruleList.filter((ele,ind)=>{
  558. return ind!=index
  559. })
  560. }else{
  561. this.$message.error(res.message)
  562. }
  563. })
  564. }else{
  565. this.form.ruleList=this.form.ruleList.filter((ele,ind)=>{
  566. return ind!=index
  567. })
  568. }
  569. },
  570. displayRender({ labels }) {
  571. return labels[labels.length - 1];
  572. },
  573. ruleConditionChange(item){
  574. console.log(item)
  575. if(item.metricValueName[1]=='COST'){
  576. item.judgeType='MONEY';
  577. }else{
  578. item.judgeType=undefined;
  579. }
  580. item.specificMoney=undefined;
  581. item.specificMoneyMin=undefined;
  582. item.specificMoneyMax=undefined;
  583. item.threshold=undefined;
  584. item.maxNumber=undefined;
  585. item.campaignStatus=undefined;
  586. item.unitStatus=undefined;
  587. },
  588. saveHandler(){
  589. this.$refs.ruleForm.validate(valid=> {
  590. if (valid) {
  591. // this.form.rulesList=this.rulesList;
  592. console.log(valid,this.form);
  593. this.saveLoading=true;
  594. if(this.currentRuleId){
  595. let ruleList=this.form.ruleList.filter(item=>{
  596. return !item.groupId
  597. })
  598. console.log(ruleList)
  599. if(ruleList.length>0){
  600. postAction(this.url.createRuleGroup,{
  601. templateId:this.currentRuleId,
  602. ruleList
  603. }).then(res=>{
  604. console.log(res);
  605. this.saveLoading=false;
  606. if(res.success){
  607. this.$router.push('/earlyWarningRules/index')
  608. this.$bus.$emit('remove', `/earlyWarningRules/configRules?id=${this.currentRuleId}`)
  609. }else{
  610. this.$message.error(res.message)
  611. }
  612. })
  613. }else{
  614. this.$router.push('/earlyWarningRules/index')
  615. this.$bus.$emit('remove', `/earlyWarningRules/configRules?id=${this.currentRuleId}`)
  616. }
  617. }else{
  618. postAction(this.url.creativeTemplate,this.form).then(res=>{
  619. console.log(res);
  620. this.saveLoading=false;
  621. if(res.success){
  622. this.$router.push('/earlyWarningRules/index')
  623. this.$bus.$emit('remove', '/earlyWarningRules/configRules')
  624. }else{
  625. this.$message.error(res.message)
  626. }
  627. })
  628. }
  629. } else {
  630. console.log('error submit!!');
  631. this.$message.error('请按提示填写必填项目!')
  632. return false;
  633. }
  634. });
  635. },
  636. goBack() {
  637. this.$router.push('/earlyWarningRules/index')
  638. this.$bus.$emit('remove', '/earlyWarningRules/configRules')
  639. },
  640. // 获取条件运算符
  641. getRuleCondition(dataType){
  642. },
  643. // huixianzhi
  644. getTempletDetail(){
  645. if(this.$route.query.id){
  646. this.spinning=true;
  647. getAction(this.url.queryDetailById,{
  648. id:this.$route.query.id
  649. }).then(res=>{
  650. console.log(res);
  651. if(res.success){
  652. this.spinning=false;
  653. new Promise((resolve,reject)=>{
  654. getAction(this.url.fieldList,{
  655. mediaType:res.result.mediaType,
  656. pageNo:1,
  657. pageSize:500,
  658. }).then(result=>{
  659. console.log(result);
  660. if(result.success){
  661. this.rulesFieldList=result.result.map(item=>{
  662. return {
  663. name:item.dimensionName,
  664. code:item.dimension,
  665. children:item.dimensionList
  666. }
  667. })
  668. resolve('success')
  669. }
  670. })
  671. }).then(data=>{
  672. res.result.ruleList.map((item,index)=>{
  673. item.ruleDetail.forEach((ele,ind)=>{
  674. ele.baseIndex=[ele.ruleDimension,ele.indicatorCode];
  675. getAction(this.url.ruleCondition,{
  676. dataType:ele.dataType
  677. }).then(result=>{
  678. console.log(result)
  679. if(result.success){
  680. ele.conditionList=result.result
  681. console.log(this.form);
  682. this.form={};
  683. this.form=res.result
  684. }
  685. })
  686. })
  687. })
  688. this.form=res.result;
  689. })
  690. }
  691. })
  692. }else{
  693. this.spinning=false;
  694. }
  695. },
  696. mediaTypeChange(e){
  697. console.log(e);
  698. this.getMediaTypeRuleField()
  699. },
  700. getMediaTypeRuleField(){
  701. this.rulesFieldList=[];
  702. getAction(this.url.fieldList,{
  703. mediaType:this.form.mediaType,
  704. pageNo:1,
  705. pageSize:500,
  706. }).then(res=>{
  707. console.log(res);
  708. if(res.success){
  709. this.rulesFieldList=[];
  710. this.rulesFieldList=res.result.map(item=>{
  711. return {
  712. name:item.dimensionName,
  713. code:item.dimension,
  714. children:item.dimensionList
  715. }
  716. })
  717. }
  718. })
  719. },
  720. },
  721. filters:{
  722. handlerApplyObj(val){
  723. let showVal=''
  724. switch (val) {
  725. case 'CAMPAIGN':
  726. showVal='计划'
  727. break;
  728. case 'UNIT':
  729. showVal='组'
  730. break;
  731. case 'CREATE':
  732. showVal='创意'
  733. break;
  734. default:
  735. break;
  736. }
  737. return showVal
  738. },
  739. handlerDANWEI(val){
  740. // console.log(val.indexOf("RATE") != -1)
  741. let returnVal='';
  742. if(val.indexOf("Roi") != -1){
  743. returnVal='';
  744. }else if(val.indexOf("Cost") != -1|| val.indexOf("depletion") != -1){
  745. returnVal='元'
  746. }else{
  747. returnVal=''
  748. }
  749. return returnVal
  750. },
  751. },
  752. mounted(){
  753. // this.spinning=true;
  754. this.currentRuleId=this.$route.query.id
  755. if(!this.$route.query.id){
  756. getAction(this.url.fieldList,{
  757. mediaType:this.form.mediaType,
  758. pageNo:1,
  759. pageSize:500,
  760. }).then(res=>{
  761. console.log(res);
  762. if(res.success){
  763. this.rulesFieldList=res.result.map(item=>{
  764. return {
  765. name:item.dimensionName,
  766. code:item.dimension,
  767. children:item.dimensionList
  768. }
  769. })
  770. this.getTempletDetail()
  771. }
  772. })
  773. }else{
  774. this.getTempletDetail()
  775. }
  776. // console.log(this.$route.query);
  777. },
  778. }
  779. </script>
  780. <style lang="scss" scoped>
  781. .configRules{
  782. .add-rule:hover {
  783. color: #2F88FF;
  784. border-color: #2F88FF;
  785. }
  786. .add-rule {
  787. cursor: pointer;
  788. height: 40px;
  789. border-radius: 2px;
  790. border: 1px dashed #dadfe3;
  791. font-size: 12px;
  792. display: flex;
  793. flex-flow: row column;
  794. justify-content: center;
  795. align-items: center;
  796. color: #666;
  797. margin-top: 5px;
  798. -moz-user-select: none;
  799. -webkit-user-select: none;
  800. -ms-user-select: none;
  801. -khtml-user-select: none;
  802. user-select: none;
  803. }
  804. .toolbox-automate-rules-create-body {
  805. margin: 16px 12px 12px;
  806. padding: 32px 32px 16px;
  807. background-color: #fff;
  808. border-radius: 4px;
  809. }
  810. .toolbox-automate-rules-create-content_title {
  811. background-color: #fff;
  812. display: flex;
  813. flex-flow: row nowrap;
  814. justify-content: flex-start;
  815. align-items: center;
  816. margin-bottom: 28px;
  817. h3 {
  818. font-size: 22px;
  819. margin: 0;
  820. font-weight: 400;
  821. height: 30px;
  822. line-height: 30px;
  823. }
  824. }
  825. .toolbox-automate-rules-create-content {
  826. padding-left: 28px;
  827. }
  828. .moduler {
  829. .opt {
  830. text-align: right;
  831. }
  832. width: 100%;
  833. background: #fff;
  834. margin-bottom: 16px;
  835. position: relative;
  836. padding: 32px 24px 48px 32px;
  837. // border-radius: 4px;
  838. // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  839. .moduler-title {
  840. display: flex;
  841. align-items: center;
  842. font-size: 22px;
  843. margin-bottom: 20px;
  844. }
  845. .extraClass{
  846. .row-item {
  847. margin-bottom: 20px;
  848. }
  849. }
  850. .row-item {
  851. display: flex;
  852. justify-content: flex-start;
  853. align-items: center;
  854. margin-bottom: 25px;
  855. }
  856. .row-item:last-of-type {
  857. margin-bottom: 0;
  858. }
  859. .row-item .hint-item {
  860. width: 24px;
  861. min-width: 24px;
  862. align-self: flex-start;
  863. line-height: 20px;
  864. height: 20px;
  865. margin-top: 9px;
  866. }
  867. .row-item .label-item {
  868. position: relative;
  869. align-items: flex-start;
  870. align-self: flex-start;
  871. line-height: 20px;
  872. height: 20px;
  873. margin-top: 10px;
  874. width: 80px;
  875. min-width: 80px;
  876. .text-item {
  877. font-size: 14px;
  878. width: 60px;
  879. }
  880. }
  881. .row-item .required-item {
  882. width: 4px;
  883. height: 4px;
  884. border-radius: 2px;
  885. background: #f45858;
  886. position: absolute;
  887. right: 10px;
  888. top: 50%;
  889. transform: translateY(-50%);
  890. }
  891. .row-item .input-item {
  892. min-width: 480px;
  893. position: relative;
  894. // height: 35px;
  895. .tip {
  896. font-size: 12px;
  897. color: tomato;
  898. }
  899. }
  900. .adName{
  901. display: flex;
  902. .nameList{
  903. width: 90%;
  904. }
  905. .item{
  906. display: inline-block;
  907. width: 30%;
  908. margin-left: 15px;
  909. margin-bottom: 10px;
  910. }
  911. }
  912. }
  913. .toolbox-automate-rules-create-content_rules-and-condition_rules {
  914. margin-bottom: 24px;
  915. }
  916. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition {
  917. width: 1138px;
  918. background: #fff;
  919. border-radius: 4px;
  920. border: 1px solid #dadfe3;
  921. }
  922. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition{
  923. .title{
  924. font-size: 14px;
  925. font-weight: 600;
  926. color: #333;
  927. border-bottom: 1px solid #E4E9ED;
  928. padding-left: 24px;
  929. padding: 12px;
  930. // display: flex;
  931. // justify-content: flex-start;
  932. align-items: center;
  933. .condition-title{
  934. padding-right: 17px;
  935. }
  936. }
  937. .title2{
  938. font-size: 14px;
  939. font-weight: 600;
  940. color: #333;
  941. height: 56px;
  942. border-bottom: 1px solid #E4E9ED;
  943. padding-left: 24px;
  944. display: flex;
  945. justify-content: flex-start;
  946. align-items: center;
  947. .condition-title{
  948. padding-right: 17px;
  949. }
  950. }
  951. .content{
  952. padding: 15px;
  953. .add-rule {
  954. cursor: pointer;
  955. height: 40px;
  956. border-radius: 2px;
  957. border: 1px dashed #dadfe3;
  958. font-size: 12px;
  959. display: flex;
  960. flex-flow: row column;
  961. justify-content: center;
  962. align-items: center;
  963. color: #666;
  964. margin-top: 16px;
  965. -moz-user-select: none;
  966. -webkit-user-select: none;
  967. -ms-user-select: none;
  968. -khtml-user-select: none;
  969. user-select: none;
  970. }
  971. .add-rule:hover {
  972. color: #2F88FF;
  973. border-color: #2F88FF;
  974. }
  975. .rules-list-item {
  976. box-sizing: border-box;
  977. width: 100%;
  978. padding: 15px;
  979. background: #f8f9fa;
  980. border-radius: 4px;
  981. margin-bottom: 16px;
  982. display: flex;
  983. align-items: center;
  984. position: relative;
  985. .rules-list-item-delete {
  986. position: absolute;
  987. right: 24px;
  988. height: 30px;
  989. padding-left: 24px;
  990. border-left: 1px solid #DADFE3;
  991. cursor: pointer;
  992. }
  993. .rules-list-item-subject {
  994. width: 120px;
  995. margin-right: 16px;
  996. display: flex;
  997. .ruleName{
  998. display: block;
  999. width: 100%;
  1000. height: 32px;
  1001. line-height: 32px;
  1002. text-align: center;
  1003. background-color: #fff;
  1004. border: 1px solid #d9d9d9;
  1005. border-radius: 4px;
  1006. }
  1007. }
  1008. }
  1009. .rules—list_item:last-of-type {
  1010. margin-bottom: 0;
  1011. }
  1012. }
  1013. }
  1014. .selectedExist{
  1015. width: 500px;
  1016. padding-top: 5px;
  1017. .inventory-tags-lists-header {
  1018. background-color: #F8F9FA;
  1019. border: 1px solid #E4E9ED;
  1020. height: 36px;
  1021. line-height: 33px;
  1022. border-radius: 4px 4px 0 0;
  1023. font-weight: bold;
  1024. display: flex;
  1025. }
  1026. .inventory-tags-lists-container {
  1027. border: 1px solid #E4E9ED;
  1028. margin-top: -1px;
  1029. height: 100%;
  1030. padding: 4px 0px;
  1031. border-radius: 0 0 4px 4px;
  1032. height: 300px;
  1033. overflow: auto;
  1034. }
  1035. .inventory-tags-lists-item {
  1036. width: 100%;
  1037. height: 37px;
  1038. line-height: 37px;
  1039. padding-left: 12px;
  1040. padding-right: 12px;
  1041. display: flex;
  1042. font-size: 14px;
  1043. color: #333;
  1044. }
  1045. .input{
  1046. margin-bottom:16px ;
  1047. }
  1048. .campaign-have-list{
  1049. font-family: PingFangSC-Regular;
  1050. font-size: 14px;
  1051. color: #333;
  1052. border: 1px solid #DADFE3;
  1053. border-radius: 4px;
  1054. margin-bottom: 16px;
  1055. height: 388px;
  1056. .campaign-have-header {
  1057. height: 38px;
  1058. width: 100%;
  1059. padding-left: 13px;
  1060. line-height: 38px;
  1061. background: #f8f9fa;
  1062. border-radius: 4px 4px 0px 0px;
  1063. border-bottom: 1px solid #DADFE3;
  1064. }
  1065. .campaign-have-list ul {
  1066. width: 100%;
  1067. height: 350px;
  1068. padding-top: 6px;
  1069. }
  1070. li{
  1071. padding: 6px 10px;
  1072. cursor: pointer;
  1073. }
  1074. li:hover{
  1075. background: #EDF1F5;
  1076. }
  1077. .ad-d-flex-between {
  1078. justify-content: space-between !important;
  1079. }
  1080. .ad-d-flex, .ad-btn {
  1081. display: flex;
  1082. align-items: center;
  1083. }
  1084. .byted-loading-v {
  1085. position: absolute;
  1086. top: 0;
  1087. right: 0;
  1088. bottom: 0;
  1089. left: 0;
  1090. z-index: 996;
  1091. background-color: hsla(0,0%,96%,.9);
  1092. }
  1093. .info{
  1094. width: 60%;
  1095. overflow: hidden;
  1096. text-overflow: ellipsis;
  1097. white-space: nowrap;
  1098. }
  1099. .landing-type {
  1100. color: #999;
  1101. font-size: 12px;
  1102. white-space: nowrap;
  1103. }
  1104. }
  1105. .noAccountID{
  1106. font-size: 14px;
  1107. text-align: center;
  1108. color: #999;
  1109. line-height: 388px;
  1110. }
  1111. .fenye{
  1112. height: 60px;
  1113. padding-top: 12px;
  1114. text-align: right;
  1115. }
  1116. }
  1117. }
  1118. </style>
  1119. <style lang="scss">
  1120. .configRules{
  1121. .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  1122. position: relative;
  1123. padding: 12px 16px;
  1124. padding-left: 40px;
  1125. color: rgba(0, 0, 0, 0.85);
  1126. line-height: 22px;
  1127. cursor: pointer;
  1128. -webkit-transition: all 0.3s;
  1129. height: 46px;
  1130. transition: all 0.3s;
  1131. }
  1132. .ant-form-item {
  1133. margin-bottom: 0;
  1134. }
  1135. .content{
  1136. .ant-form-item {
  1137. margin-bottom: 0;
  1138. width: 100%;
  1139. }
  1140. }
  1141. .ant-radio-button-wrapper {
  1142. min-width: 70px;
  1143. text-align: center;
  1144. }
  1145. .ant-checkbox-wrapper,
  1146. .ant-checkbox-group-item {
  1147. display: block;
  1148. padding: 5px 15px;
  1149. }
  1150. .ant-checkbox-wrapper:first-child {
  1151. padding: 0 15px 5px;
  1152. }
  1153. .ant-collapse{
  1154. border: 1px solid #fff;
  1155. background-color: #fff;
  1156. }
  1157. }
  1158. </style>