configRules.vue 67 KB

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