configRules.vue 51 KB

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