configRules.vue 56 KB

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