configRules.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270
  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&&item.groupId){
  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. this.spinning=false;
  652. if(res.success){
  653. this.spinning=false;
  654. new Promise((resolve,reject)=>{
  655. getAction(this.url.fieldList,{
  656. mediaType:res.result.mediaType,
  657. pageNo:1,
  658. pageSize:500,
  659. }).then(result=>{
  660. console.log(result);
  661. if(result.success){
  662. this.rulesFieldList=result.result.map(item=>{
  663. return {
  664. name:item.dimensionName,
  665. code:item.dimension,
  666. children:item.dimensionList
  667. }
  668. })
  669. resolve('success')
  670. }
  671. })
  672. }).then(data=>{
  673. res.result.ruleList.map((item,index)=>{
  674. item.ruleDetail.forEach((ele,ind)=>{
  675. ele.baseIndex=[ele.ruleDimension,ele.indicatorCode];
  676. getAction(this.url.ruleCondition,{
  677. dataType:ele.dataType
  678. }).then(result=>{
  679. console.log(result)
  680. if(result.success){
  681. ele.conditionList=result.result
  682. console.log(this.form);
  683. this.form={};
  684. this.form=res.result
  685. }
  686. })
  687. })
  688. })
  689. this.form=res.result;
  690. })
  691. }else{
  692. }
  693. })
  694. }else{
  695. this.spinning=false;
  696. }
  697. },
  698. mediaTypeChange(e){
  699. console.log(e);
  700. this.getMediaTypeRuleField()
  701. },
  702. getMediaTypeRuleField(){
  703. this.rulesFieldList=[];
  704. getAction(this.url.fieldList,{
  705. mediaType:this.form.mediaType,
  706. pageNo:1,
  707. pageSize:500,
  708. }).then(res=>{
  709. console.log(res);
  710. if(res.success){
  711. this.rulesFieldList=[];
  712. this.rulesFieldList=res.result.map(item=>{
  713. return {
  714. name:item.dimensionName,
  715. code:item.dimension,
  716. children:item.dimensionList
  717. }
  718. })
  719. }
  720. })
  721. },
  722. },
  723. filters:{
  724. handlerApplyObj(val){
  725. let showVal=''
  726. switch (val) {
  727. case 'CAMPAIGN':
  728. showVal='计划'
  729. break;
  730. case 'UNIT':
  731. showVal='组'
  732. break;
  733. case 'CREATE':
  734. showVal='创意'
  735. break;
  736. default:
  737. break;
  738. }
  739. return showVal
  740. },
  741. handlerDANWEI(val){
  742. // console.log(val.indexOf("RATE") != -1)
  743. let returnVal='';
  744. if(val.indexOf("Roi") != -1){
  745. returnVal='';
  746. }else if(val.indexOf("Cost") != -1|| val.indexOf("depletion") != -1){
  747. returnVal='元'
  748. }else{
  749. returnVal=''
  750. }
  751. return returnVal
  752. },
  753. },
  754. mounted(){
  755. // this.spinning=true;
  756. this.currentRuleId=this.$route.query.id
  757. if(!this.$route.query.id){
  758. getAction(this.url.fieldList,{
  759. mediaType:this.form.mediaType,
  760. pageNo:1,
  761. pageSize:500,
  762. }).then(res=>{
  763. console.log(res);
  764. if(res.success){
  765. this.rulesFieldList=res.result.map(item=>{
  766. return {
  767. name:item.dimensionName,
  768. code:item.dimension,
  769. children:item.dimensionList
  770. }
  771. })
  772. this.getTempletDetail()
  773. }
  774. })
  775. }else{
  776. this.getTempletDetail()
  777. }
  778. // console.log(this.$route.query);
  779. },
  780. }
  781. </script>
  782. <style lang="scss" scoped>
  783. .configRules{
  784. .add-rule:hover {
  785. color: #2F88FF;
  786. border-color: #2F88FF;
  787. }
  788. .add-rule {
  789. cursor: pointer;
  790. height: 40px;
  791. border-radius: 2px;
  792. border: 1px dashed #dadfe3;
  793. font-size: 12px;
  794. display: flex;
  795. flex-flow: row column;
  796. justify-content: center;
  797. align-items: center;
  798. color: #666;
  799. margin-top: 5px;
  800. -moz-user-select: none;
  801. -webkit-user-select: none;
  802. -ms-user-select: none;
  803. -khtml-user-select: none;
  804. user-select: none;
  805. }
  806. .toolbox-automate-rules-create-body {
  807. margin: 16px 12px 12px;
  808. padding: 32px 32px 16px;
  809. background-color: #fff;
  810. border-radius: 4px;
  811. }
  812. .toolbox-automate-rules-create-content_title {
  813. background-color: #fff;
  814. display: flex;
  815. flex-flow: row nowrap;
  816. justify-content: flex-start;
  817. align-items: center;
  818. margin-bottom: 28px;
  819. h3 {
  820. font-size: 22px;
  821. margin: 0;
  822. font-weight: 400;
  823. height: 30px;
  824. line-height: 30px;
  825. }
  826. }
  827. .toolbox-automate-rules-create-content {
  828. padding-left: 28px;
  829. }
  830. .moduler {
  831. .opt {
  832. text-align: right;
  833. }
  834. width: 100%;
  835. background: #fff;
  836. margin-bottom: 16px;
  837. position: relative;
  838. padding: 32px 24px 48px 32px;
  839. // border-radius: 4px;
  840. // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  841. .moduler-title {
  842. display: flex;
  843. align-items: center;
  844. font-size: 22px;
  845. margin-bottom: 20px;
  846. }
  847. .extraClass{
  848. .row-item {
  849. margin-bottom: 20px;
  850. }
  851. }
  852. .row-item {
  853. display: flex;
  854. justify-content: flex-start;
  855. align-items: center;
  856. margin-bottom: 25px;
  857. }
  858. .row-item:last-of-type {
  859. margin-bottom: 0;
  860. }
  861. .row-item .hint-item {
  862. width: 24px;
  863. min-width: 24px;
  864. align-self: flex-start;
  865. line-height: 20px;
  866. height: 20px;
  867. margin-top: 9px;
  868. }
  869. .row-item .label-item {
  870. position: relative;
  871. align-items: flex-start;
  872. align-self: flex-start;
  873. line-height: 20px;
  874. height: 20px;
  875. margin-top: 10px;
  876. width: 80px;
  877. min-width: 80px;
  878. .text-item {
  879. font-size: 14px;
  880. width: 60px;
  881. }
  882. }
  883. .row-item .required-item {
  884. width: 4px;
  885. height: 4px;
  886. border-radius: 2px;
  887. background: #f45858;
  888. position: absolute;
  889. right: 10px;
  890. top: 50%;
  891. transform: translateY(-50%);
  892. }
  893. .row-item .input-item {
  894. min-width: 480px;
  895. position: relative;
  896. // height: 35px;
  897. .tip {
  898. font-size: 12px;
  899. color: tomato;
  900. }
  901. }
  902. .adName{
  903. display: flex;
  904. .nameList{
  905. width: 90%;
  906. }
  907. .item{
  908. display: inline-block;
  909. width: 30%;
  910. margin-left: 15px;
  911. margin-bottom: 10px;
  912. }
  913. }
  914. }
  915. .toolbox-automate-rules-create-content_rules-and-condition_rules {
  916. margin-bottom: 24px;
  917. }
  918. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition {
  919. width: 1138px;
  920. background: #fff;
  921. border-radius: 4px;
  922. border: 1px solid #dadfe3;
  923. }
  924. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition{
  925. .title{
  926. font-size: 14px;
  927. font-weight: 600;
  928. color: #333;
  929. border-bottom: 1px solid #E4E9ED;
  930. padding-left: 24px;
  931. padding: 12px;
  932. // display: flex;
  933. // justify-content: flex-start;
  934. align-items: center;
  935. .condition-title{
  936. padding-right: 17px;
  937. }
  938. }
  939. .title2{
  940. font-size: 14px;
  941. font-weight: 600;
  942. color: #333;
  943. height: 56px;
  944. border-bottom: 1px solid #E4E9ED;
  945. padding-left: 24px;
  946. display: flex;
  947. justify-content: flex-start;
  948. align-items: center;
  949. .condition-title{
  950. padding-right: 17px;
  951. }
  952. }
  953. .content{
  954. padding: 15px;
  955. .add-rule {
  956. cursor: pointer;
  957. height: 40px;
  958. border-radius: 2px;
  959. border: 1px dashed #dadfe3;
  960. font-size: 12px;
  961. display: flex;
  962. flex-flow: row column;
  963. justify-content: center;
  964. align-items: center;
  965. color: #666;
  966. margin-top: 16px;
  967. -moz-user-select: none;
  968. -webkit-user-select: none;
  969. -ms-user-select: none;
  970. -khtml-user-select: none;
  971. user-select: none;
  972. }
  973. .add-rule:hover {
  974. color: #2F88FF;
  975. border-color: #2F88FF;
  976. }
  977. .rules-list-item {
  978. box-sizing: border-box;
  979. width: 100%;
  980. padding: 15px;
  981. background: #f8f9fa;
  982. border-radius: 4px;
  983. margin-bottom: 16px;
  984. display: flex;
  985. align-items: center;
  986. position: relative;
  987. .rules-list-item-delete {
  988. position: absolute;
  989. right: 24px;
  990. height: 30px;
  991. padding-left: 24px;
  992. border-left: 1px solid #DADFE3;
  993. cursor: pointer;
  994. }
  995. .rules-list-item-subject {
  996. width: 120px;
  997. margin-right: 16px;
  998. display: flex;
  999. .ruleName{
  1000. display: block;
  1001. width: 100%;
  1002. height: 32px;
  1003. line-height: 32px;
  1004. text-align: center;
  1005. background-color: #fff;
  1006. border: 1px solid #d9d9d9;
  1007. border-radius: 4px;
  1008. }
  1009. }
  1010. }
  1011. .rules—list_item:last-of-type {
  1012. margin-bottom: 0;
  1013. }
  1014. }
  1015. }
  1016. .selectedExist{
  1017. width: 500px;
  1018. padding-top: 5px;
  1019. .inventory-tags-lists-header {
  1020. background-color: #F8F9FA;
  1021. border: 1px solid #E4E9ED;
  1022. height: 36px;
  1023. line-height: 33px;
  1024. border-radius: 4px 4px 0 0;
  1025. font-weight: bold;
  1026. display: flex;
  1027. }
  1028. .inventory-tags-lists-container {
  1029. border: 1px solid #E4E9ED;
  1030. margin-top: -1px;
  1031. height: 100%;
  1032. padding: 4px 0px;
  1033. border-radius: 0 0 4px 4px;
  1034. height: 300px;
  1035. overflow: auto;
  1036. }
  1037. .inventory-tags-lists-item {
  1038. width: 100%;
  1039. height: 37px;
  1040. line-height: 37px;
  1041. padding-left: 12px;
  1042. padding-right: 12px;
  1043. display: flex;
  1044. font-size: 14px;
  1045. color: #333;
  1046. }
  1047. .input{
  1048. margin-bottom:16px ;
  1049. }
  1050. .campaign-have-list{
  1051. font-family: PingFangSC-Regular;
  1052. font-size: 14px;
  1053. color: #333;
  1054. border: 1px solid #DADFE3;
  1055. border-radius: 4px;
  1056. margin-bottom: 16px;
  1057. height: 388px;
  1058. .campaign-have-header {
  1059. height: 38px;
  1060. width: 100%;
  1061. padding-left: 13px;
  1062. line-height: 38px;
  1063. background: #f8f9fa;
  1064. border-radius: 4px 4px 0px 0px;
  1065. border-bottom: 1px solid #DADFE3;
  1066. }
  1067. .campaign-have-list ul {
  1068. width: 100%;
  1069. height: 350px;
  1070. padding-top: 6px;
  1071. }
  1072. li{
  1073. padding: 6px 10px;
  1074. cursor: pointer;
  1075. }
  1076. li:hover{
  1077. background: #EDF1F5;
  1078. }
  1079. .ad-d-flex-between {
  1080. justify-content: space-between !important;
  1081. }
  1082. .ad-d-flex, .ad-btn {
  1083. display: flex;
  1084. align-items: center;
  1085. }
  1086. .byted-loading-v {
  1087. position: absolute;
  1088. top: 0;
  1089. right: 0;
  1090. bottom: 0;
  1091. left: 0;
  1092. z-index: 996;
  1093. background-color: hsla(0,0%,96%,.9);
  1094. }
  1095. .info{
  1096. width: 60%;
  1097. overflow: hidden;
  1098. text-overflow: ellipsis;
  1099. white-space: nowrap;
  1100. }
  1101. .landing-type {
  1102. color: #999;
  1103. font-size: 12px;
  1104. white-space: nowrap;
  1105. }
  1106. }
  1107. .noAccountID{
  1108. font-size: 14px;
  1109. text-align: center;
  1110. color: #999;
  1111. line-height: 388px;
  1112. }
  1113. .fenye{
  1114. height: 60px;
  1115. padding-top: 12px;
  1116. text-align: right;
  1117. }
  1118. }
  1119. }
  1120. </style>
  1121. <style lang="scss">
  1122. .configRules{
  1123. .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  1124. position: relative;
  1125. padding: 12px 16px;
  1126. padding-left: 40px;
  1127. color: rgba(0, 0, 0, 0.85);
  1128. line-height: 22px;
  1129. cursor: pointer;
  1130. -webkit-transition: all 0.3s;
  1131. height: 46px;
  1132. transition: all 0.3s;
  1133. }
  1134. .ant-form-item {
  1135. margin-bottom: 0;
  1136. }
  1137. .content{
  1138. .ant-form-item {
  1139. margin-bottom: 0;
  1140. width: 100%;
  1141. }
  1142. }
  1143. .ant-radio-button-wrapper {
  1144. min-width: 70px;
  1145. text-align: center;
  1146. }
  1147. .ant-checkbox-wrapper,
  1148. .ant-checkbox-group-item {
  1149. display: block;
  1150. padding: 5px 15px;
  1151. }
  1152. .ant-checkbox-wrapper:first-child {
  1153. padding: 0 15px 5px;
  1154. }
  1155. .ant-collapse{
  1156. border: 1px solid #fff;
  1157. background-color: #fff;
  1158. }
  1159. }
  1160. </style>