ruleModule.vue 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548
  1. <style>
  2. .display-none-selset {
  3. display: none !important;
  4. }
  5. </style>
  6. <template>
  7. <div class="ruleModule">
  8. <div class="toolbox-automate-rules-create-body">
  9. <!-- <a-steps :current="current" size="default" style="width: 50%; margin: 0 auto" v-if="editShow">
  10. <a-step title="预警值填写" />
  11. <a-step title="开关设置" />
  12. </a-steps> -->
  13. <!-- {{ ceshi }}{{ time }}
  14. <br />
  15. <selectGroup v-model="ceshi2" style="width: 300px;margin-right:5px" code="37f678d06fc45b494a924894355d6f76" :multiple="true" />
  16. <timeRange v-model="time" :allowClear="true" :disabledDate="disabledDate" /> -->
  17. <!-- {{ ceshi }}
  18. <checkBoxGroup
  19. v-model="ceshi"
  20. style="width: 400px"
  21. code="95224d306285ea267eb6b5a31b5d84b6"
  22. :allValue="true"
  23. :radioStyle="true"
  24. />
  25. {{ form }} -->
  26. <div class="toolbox-automate-rules-create-content_title">
  27. <h3>预警值{{ editShow ? '填写' : '表单预览' }}</h3>
  28. </div>
  29. <a-spin :spinning="spinLoading">
  30. <div class="toolbox-automate-rules-create-content">
  31. <a-form-model ref="ruleForm" :model="form" layout="horizontal">
  32. <div class="moduler">
  33. <template v-for="(item, index) of form.ruleList">
  34. <div class="row-item" v-if="item.ruleType == 'base' && item.isCopy == 0" :key="index">
  35. <div class="hint-item">
  36. <a-tooltip>
  37. <template slot="title">
  38. {{ item.remark }}
  39. </template>
  40. <a-icon type="question-circle" />
  41. </a-tooltip>
  42. </div>
  43. <div class="label-item">
  44. <div class="text-item">{{ item.groupName }}</div>
  45. <div class="required-item" v-if="item.isRequired == 1"></div>
  46. </div>
  47. <div class="input-item">
  48. <a-form-model-item
  49. v-for="(value, valueIndex) of item.ruleDetail"
  50. :key="valueIndex"
  51. :ref="value.indicatorCode + valueIndex"
  52. :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
  53. :rules="{
  54. required: item.isRequired == 1 ? true : false,
  55. message: `${item.groupName}必填`,
  56. trigger: value.dataType == 'array' ? 'change' : 'blur',
  57. }"
  58. >
  59. <a-input-number
  60. :disabled="!editShow"
  61. v-model="value.threshold"
  62. :min="0"
  63. style="width: 100px; margin-right: 5px"
  64. v-if="value.modelType == 'numberText'"
  65. />
  66. <a-input
  67. :disabled="!editShow"
  68. v-model="value.threshold"
  69. style="width: 300px; margin-right: 5px"
  70. v-else-if="value.modelType == 'text'"
  71. />
  72. <selectGroup
  73. :disabled="!editShow"
  74. v-model="value.threshold"
  75. style="width: 300px; margin-right: 5px"
  76. :code="value.dictId"
  77. :requestUrl='value.requestUrl'
  78. :multiple="
  79. value.dataType == 'string' ||
  80. value.dataType == 'number' ||
  81. value.indicatorCode == 'presentedVideo' ||
  82. value.indicatorCode == 'hideIfExists'
  83. ? false
  84. : true
  85. "
  86. v-else-if="value.modelType == 'select'"
  87. />
  88. <!-- <selectGroup
  89. v-model="value.threshold"
  90. style="width: 300px;margin-right:5px"
  91. :code="value.dictId"
  92. :multiple="value.dataType == 'string' ? false : true"
  93. /> -->
  94. <checkBoxGroup
  95. :disabled="!editShow"
  96. v-model="value.threshold"
  97. style="width: 100%; margin-right: 5px"
  98. :code="value.dictId"
  99. :allValue="true"
  100. :radioStyle="
  101. value.dataType == 'string' ||
  102. value.dataType == 'number' ||
  103. value.indicatorCode == 'presentedVideo' ||
  104. value.indicatorCode == 'hideIfExists'
  105. ? true
  106. : false
  107. "
  108. v-else-if="value.modelType == 'checkBox'"
  109. />
  110. <a-select
  111. :disabled="!editShow"
  112. mode="tags"
  113. style="width: 100%"
  114. placeholder="按回车生成"
  115. v-model="value.threshold"
  116. dropdownClassName="display-none-selset"
  117. :token-separators="[',', ' ', ',']"
  118. v-else-if="value.modelType == 'tagBox'"
  119. >
  120. </a-select>
  121. <!-- <p v-else-if="value.modelType == 'timeRange'">{{value.threshold}}</p> -->
  122. <scheduleTime
  123. style="width: 100%"
  124. :scheduleTime.sync="value.threshold"
  125. ref="selectCheck"
  126. v-else-if="value.modelType == 'scheduleTime'"
  127. >
  128. </scheduleTime>
  129. <!-- v-model="value.threshold" -->
  130. <!-- :cascaderValue.sync="value.threshold" -->
  131. <region
  132. :disabled="!editShow"
  133. :checkData.sync="value.threshold"
  134. :dataValue="value.threshold"
  135. style="width: 100%"
  136. :isLazy="true"
  137. v-else-if="value.modelType == 'region'"
  138. >
  139. </region>
  140. <!-- {{value.threshold}} -->
  141. {{ value.dataUnit }}
  142. </a-form-model-item>
  143. </div>
  144. </div>
  145. <div class="row-item" v-else-if="item.ruleType == 'group' && item.isCopy == 0" :key="index">
  146. <div class="hint-item">
  147. <a-tooltip>
  148. <template slot="title">
  149. {{ item.remark }}
  150. </template>
  151. <a-icon type="question-circle" />
  152. </a-tooltip>
  153. </div>
  154. <div class="label-item">
  155. <div class="text-item">{{ item.groupName }}</div>
  156. <div class="required-item" v-if="item.isRequired == 1"></div>
  157. </div>
  158. <div class="input-item">
  159. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  160. <div class="content">
  161. <div class="rules-list">
  162. <div class="rules-list-item">
  163. <template v-for="(value, valueIndex) of item.ruleDetail">
  164. <div class="row-item row-group" v-if="value.variableType == 1" :key="valueIndex">
  165. <!-- <div class="hint-item"></div>
  166. <div class="label-item">
  167. <div class="text-item"></div>
  168. <div class="required-item"></div>
  169. </div> -->
  170. <div class="input-item">
  171. <a-form-model-item
  172. :label-col="{ span: 6 }"
  173. :wrapper-col="{ span: 18 }"
  174. :label="value.name"
  175. :ref="value.indicatorCode + valueIndex"
  176. :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
  177. :rules="{
  178. required: item.isRequired == 1 ? true : false,
  179. message: `${value.name}必填`,
  180. trigger: 'blur',
  181. }"
  182. v-if="value.modelType == 'numberText'"
  183. >
  184. <a-input-number
  185. :disabled="!editShow"
  186. style="width: 100px; margin-right: 5px"
  187. v-model="value.threshold"
  188. :min="0"
  189. />{{ value.dataUnit }}
  190. </a-form-model-item>
  191. <a-form-model-item
  192. :label-col="{ span: 6 }"
  193. :wrapper-col="{ span: 18 }"
  194. :label="value.name"
  195. :ref="value.indicatorCode + valueIndex"
  196. :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
  197. :rules="{
  198. required: item.isRequired == 1 ? true : false,
  199. message: `${value.name}必填`,
  200. trigger: 'blur',
  201. }"
  202. v-else-if="value.modelType == 'text'"
  203. >
  204. <a-input v-model="value.threshold" style="width: 95%" :disabled="!editShow" />
  205. </a-form-model-item>
  206. <a-form-model-item
  207. :label-col="{ span: 6 }"
  208. :wrapper-col="{ span: 18 }"
  209. :label="value.name"
  210. :ref="value.indicatorCode + valueIndex"
  211. :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
  212. :rules="{
  213. required: item.isRequired == 1 ? true : false,
  214. message: `${value.name}必选`,
  215. trigger: 'change',
  216. }"
  217. v-else-if="value.modelType == 'select' || value.modelType == 'checkBox'"
  218. >
  219. <!-- -->
  220. <selectGroup
  221. :disabled="!editShow"
  222. v-model="value.threshold"
  223. :code="value.dictId"
  224. :requestUrl='value.requestUrl'
  225. :multiple="
  226. value.dataType == 'string' ||
  227. value.dataType == 'number' ||
  228. value.indicatorCode == 'presentedVideo' ||
  229. value.indicatorCode == 'hideIfExists'
  230. ? false
  231. : true
  232. "
  233. style="width: 95%"
  234. @clearValidate="clearAll"
  235. />
  236. </a-form-model-item>
  237. <a-form-model-item
  238. :label-col="{ span: 6 }"
  239. :wrapper-col="{ span: 18 }"
  240. :label="value.name"
  241. :ref="value.indicatorCode + valueIndex"
  242. :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
  243. :rules="{
  244. required: item.isRequired == 1 ? true : false,
  245. message: `${value.name}必选`,
  246. trigger: 'change',
  247. }"
  248. v-else-if="value.modelType == 'tagBox'"
  249. >
  250. <a-select
  251. :disabled="!editShow"
  252. mode="tags"
  253. style="width: 95%"
  254. placeholder="按回车生成"
  255. v-model="value.threshold"
  256. dropdownClassName="display-none-selset"
  257. :token-separators="[',', ' ', ',']"
  258. :maxTagCount="3"
  259. >
  260. </a-select>
  261. </a-form-model-item>
  262. </div>
  263. </div>
  264. </template>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. <div class="row-item" v-else-if="item.ruleType == 'group' && item.isCopy == 1" :key="index">
  272. <div class="hint-item">
  273. <a-tooltip>
  274. <template slot="title">
  275. {{ item.remark }}
  276. </template>
  277. <a-icon type="question-circle" />
  278. </a-tooltip>
  279. </div>
  280. <div class="label-item">
  281. <div class="text-item">{{ item.groupName }}</div>
  282. <div class="required-item" v-if="item.isRequired == 1"></div>
  283. </div>
  284. <div class="input-item">
  285. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  286. <div class="content">
  287. <div
  288. class="rules-list"
  289. v-for="(valueElse, valueIndex) of item.ruleDetail"
  290. :key="valueIndex + 'ruleDetail'"
  291. >
  292. <div class="rules-list-item">
  293. <template v-for="(value, valueElseIndex) of valueElse">
  294. <div
  295. class="row-item row-group"
  296. v-if="value.variableType == 1"
  297. :key="valueElseIndex + 'valueElse'"
  298. >
  299. <!-- <div class="hint-item"></div>
  300. <div class="label-item">
  301. <div class="text-item"></div>
  302. <div class="required-item"></div>
  303. </div> -->
  304. <div class="input-item">
  305. <a-form-model-item
  306. :label-col="{ span: 6 }"
  307. :wrapper-col="{ span: 18 }"
  308. :label="value.name"
  309. :ref="value.indicatorCode + valueIndex"
  310. :prop="
  311. 'ruleList.' +
  312. index +
  313. '.ruleDetail.' +
  314. valueIndex +
  315. '.' +
  316. valueElseIndex +
  317. '.threshold'
  318. "
  319. :rules="{
  320. required: item.isRequired == 1 ? true : false,
  321. message: `${value.name}必填`,
  322. trigger: 'blur',
  323. }"
  324. v-if="value.modelType == 'numberText'"
  325. >
  326. <a-input-number
  327. :disabled="!editShow"
  328. style="width: 100px; margin-right: 5px"
  329. v-model="value.threshold"
  330. :min="0"
  331. />{{ value.dataUnit }}
  332. </a-form-model-item>
  333. <a-form-model-item
  334. :label-col="{ span: 6 }"
  335. :wrapper-col="{ span: 18 }"
  336. :label="value.name"
  337. :ref="value.indicatorCode + valueIndex"
  338. :prop="
  339. 'ruleList.' +
  340. index +
  341. '.ruleDetail.' +
  342. valueIndex +
  343. '.' +
  344. valueElseIndex +
  345. '.threshold'
  346. "
  347. :rules="{
  348. required: item.isRequired == 1 ? true : false,
  349. message: `${value.name}必填`,
  350. trigger: 'blur',
  351. }"
  352. v-else-if="value.modelType == 'text'"
  353. >
  354. <a-input :disabled="!editShow" v-model="value.threshold" style="width: 95%" />
  355. </a-form-model-item>
  356. <a-form-model-item
  357. :label-col="{ span: 6 }"
  358. :wrapper-col="{ span: 18 }"
  359. :label="value.name"
  360. :ref="value.indicatorCode + valueIndex"
  361. :prop="
  362. 'ruleList.' +
  363. index +
  364. '.ruleDetail.' +
  365. valueIndex +
  366. '.' +
  367. valueElseIndex +
  368. '.threshold'
  369. "
  370. :rules="{
  371. required: item.isRequired == 1 ? true : false,
  372. message: `${value.name}必选`,
  373. trigger: 'change',
  374. }"
  375. v-else-if="value.modelType == 'select' || value.modelType == 'checkBox'"
  376. >
  377. <selectGroup
  378. :disabled="!editShow"
  379. v-model="value.threshold"
  380. :code="value.dictId"
  381. :requestUrl='value.requestUrl'
  382. :multiple="
  383. value.dataType == 'string' ||
  384. value.dataType == 'number' ||
  385. value.indicatorCode == 'presentedVideo' ||
  386. value.indicatorCode == 'hideIfExists'
  387. ? false
  388. : true
  389. "
  390. style="width: 95%"
  391. @clearValidate="clearAll"
  392. />
  393. </a-form-model-item>
  394. <a-form-model-item
  395. :label-col="{ span: 6 }"
  396. :wrapper-col="{ span: 18 }"
  397. :label="value.name"
  398. :ref="value.indicatorCode + valueIndex"
  399. :prop="
  400. 'ruleList.' +
  401. index +
  402. '.ruleDetail.' +
  403. valueIndex +
  404. '.' +
  405. valueElseIndex +
  406. '.threshold'
  407. "
  408. :rules="{
  409. required: item.isRequired == 1 ? true : false,
  410. message: `${value.name}必选`,
  411. trigger: 'change',
  412. }"
  413. v-else-if="value.modelType == 'tagBox'"
  414. >
  415. <a-select
  416. :disabled="!editShow"
  417. mode="tags"
  418. style="width: 95%"
  419. placeholder="按回车生成"
  420. v-model="value.threshold"
  421. dropdownClassName="display-none-selset"
  422. :token-separators="[',', ' ', ',']"
  423. :maxTagCount="3"
  424. >
  425. </a-select>
  426. </a-form-model-item>
  427. </div>
  428. </div>
  429. <div
  430. class="rules-list-item-delete"
  431. v-if="item.isCopy == 1"
  432. @click="addData(item, valueElse, valueIndex)"
  433. :key="valueElseIndex"
  434. >
  435. {{ valueIndex == 0 ? '复建' : '删除' }}
  436. </div>
  437. </template>
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. </div>
  443. </div>
  444. </template>
  445. </div>
  446. </a-form-model>
  447. </div>
  448. </a-spin>
  449. </div>
  450. <switchConfig :disabled="!editShow" v-if="form.mediaType == 1 || form.mediaType == 3" />
  451. <div class="toolbox-automate-rules-create-body" v-if="editShow">
  452. <div class="moduler">
  453. <div class="opt">
  454. <a-button type="default" style="margin-right: 15px" @click="goBack">{{
  455. editShow ? '取消' : '返回'
  456. }}</a-button>
  457. <a-button
  458. type="primary"
  459. style="margin-right: 15px"
  460. @click="saveHandler"
  461. :loading="saveLoading"
  462. v-if="editShow"
  463. >确定</a-button
  464. >
  465. </div>
  466. </div>
  467. </div>
  468. </div>
  469. </template>
  470. <script>
  471. import { isArray } from '@/utils/Tools'
  472. import moment from 'moment'
  473. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  474. import { Switch } from 'ant-design-vue'
  475. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  476. import selectGroup from '@/components/formComponents/selectGroup'
  477. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  478. import timeRange from '@/components/formComponents/timeRange'
  479. import scheduleTime from '@/components/formComponents/toutiaoTime'
  480. import region from '@/components/formComponents/selectRegion'
  481. import switchConfig from './switchConfig'
  482. let statusList = [
  483. {
  484. id: 2,
  485. value: '1',
  486. title: '所有投放中',
  487. },
  488. ]
  489. let condition = [
  490. {
  491. value: '0',
  492. label: '展示数据',
  493. children: [
  494. {
  495. value: 'SHOW',
  496. label: '展示数',
  497. },
  498. {
  499. value: 'CLICK',
  500. label: '点击数',
  501. },
  502. {
  503. value: 'CLICK_RATE',
  504. label: '点击率',
  505. },
  506. {
  507. value: 'COST',
  508. label: '消耗',
  509. },
  510. {
  511. value: 'AD_CLICK_PRICE',
  512. label: '平均点击单价',
  513. },
  514. ],
  515. },
  516. {
  517. value: '1',
  518. label: '转化数据',
  519. children: [
  520. {
  521. value: 'CONVERT',
  522. label: '转化数',
  523. },
  524. {
  525. value: 'CONVERT_COST',
  526. label: '转化成本',
  527. },
  528. {
  529. value: 'CONVERT_RATE',
  530. label: '转化率',
  531. },
  532. {
  533. value: 'DEEP_CONVERT',
  534. label: '深度转化数',
  535. },
  536. {
  537. value: 'DEEP_CONVERT_COST',
  538. label: '深度转化成本',
  539. },
  540. {
  541. value: 'DEEP_CONVERT_RATE',
  542. label: '深度转化率',
  543. },
  544. ],
  545. },
  546. ]
  547. let budgetMultipleArr = [
  548. {
  549. value: 0.5,
  550. label: '0.5倍预算',
  551. },
  552. {
  553. value: 0.8,
  554. label: '0.8倍预算',
  555. },
  556. {
  557. value: 1,
  558. label: '1倍预算',
  559. },
  560. {
  561. value: 1.5,
  562. label: '1.5倍预算',
  563. },
  564. ]
  565. export default {
  566. components: {
  567. Treeselect,
  568. selectGroup,
  569. checkBoxGroup,
  570. timeRange,
  571. switchConfig,
  572. scheduleTime,
  573. region,
  574. },
  575. data() {
  576. return {
  577. editShow: false,
  578. current: 0,
  579. spinLoading: false,
  580. // allCol: {
  581. // labelCol: { span: 6 },
  582. // wrapperCol: { span: 18 },
  583. // },
  584. wrapperCol: { span: 14 },
  585. ceshi: [],
  586. ceshi2: [],
  587. time: [moment('2020/11/16', 'YYYY-MM-DD'), moment('2020/11/17', 'YYYY-MM-DD')],
  588. campaignList: [],
  589. currentRuleId: '',
  590. rulesFieldList: [],
  591. accountID: undefined,
  592. selectedCampaignValue: undefined,
  593. spinning: false,
  594. campaignHaveList: [],
  595. currentPage: 1,
  596. totalPage: 0,
  597. checkedList: [],
  598. indeterminate: false,
  599. checkAll: false,
  600. plainOptions: [],
  601. saveLoading: false,
  602. // 用到的参数数组
  603. condition,
  604. statusList,
  605. budgetMultipleArr,
  606. accountList: [],
  607. form: {},
  608. rules: {},
  609. rulesList: [
  610. {
  611. metricValueName: '',
  612. metricValueCode: '',
  613. dataRange: 'CURRENT_DAY_DATA',
  614. judgeMethod: 'GT_EQ',
  615. judgeType: 'MONEY',
  616. threshold: 0,
  617. minThreshold: 0,
  618. campaignStatus: undefined,
  619. unitStatus: undefined,
  620. },
  621. ],
  622. accountFieldList: [],
  623. campaignFieldList: [],
  624. unitFieldList: [],
  625. textData: {
  626. success: true,
  627. message: '操作成功!',
  628. code: 0,
  629. result: {
  630. templateName: '测试模板',
  631. applyAccount: '',
  632. ruleList: [
  633. {
  634. groupName: '成本限额',
  635. operate: '',
  636. ruleDetail: [
  637. {
  638. variableType: 1,
  639. ruleCondition: 'greater_equal',
  640. ruleDimension: 'account',
  641. dataType: 'number',
  642. indicatorCode: 'convert_cost',
  643. name: '转化成本',
  644. ruleName: '转化成本',
  645. threshold: '0',
  646. dictId: '',
  647. ruleId: 9,
  648. dataUnit: '元',
  649. },
  650. ],
  651. groupId: 4,
  652. ruleType: 'base',
  653. sendType: '',
  654. ruleRelationship: 'and',
  655. remark: '转化成本大于等于设置值X,报警',
  656. },
  657. {
  658. groupName: '消耗限额',
  659. operate: '',
  660. ruleDetail: [
  661. {
  662. variableType: 1,
  663. ruleCondition: 'greater_equal',
  664. ruleDimension: 'plan',
  665. dataType: 'number',
  666. indicatorCode: 'cost',
  667. name: '消耗',
  668. ruleName: '消耗',
  669. threshold: '0',
  670. dictId: '',
  671. ruleId: 10,
  672. dataUnit: '元',
  673. },
  674. ],
  675. groupId: 5,
  676. ruleType: 'base',
  677. sendType: '',
  678. ruleRelationship: 'and',
  679. remark: '消耗大于等于设置值X,触发报警',
  680. },
  681. {
  682. groupName: '账户余额限额',
  683. operate: '',
  684. ruleDetail: [
  685. {
  686. variableType: 1,
  687. ruleCondition: 'less_equal',
  688. ruleDimension: 'account',
  689. dataType: 'number',
  690. indicatorCode: 'validBalance',
  691. name: '账户余额',
  692. ruleName: '账户余额',
  693. threshold: '0',
  694. dictId: '',
  695. ruleId: 11,
  696. dataUnit: '元',
  697. },
  698. ],
  699. groupId: 6,
  700. ruleType: 'base',
  701. sendType: '',
  702. ruleRelationship: 'and',
  703. remark: '账户余额小于等于设置值X,报警',
  704. },
  705. {
  706. groupName: '广告位付费',
  707. operate: '',
  708. ruleDetail: [
  709. {
  710. variableType: 1,
  711. ruleCondition: 'equal',
  712. ruleDimension: 'plan',
  713. dataType: 'string',
  714. indicatorCode: 'pricing',
  715. name: '付费方式',
  716. ruleName: '付费方式',
  717. threshold: '',
  718. dictId: 'ba22a2f2777f7156a7bd814dafc36637',
  719. ruleId: 12,
  720. dataUnit: '',
  721. },
  722. {
  723. variableType: 1,
  724. ruleCondition: 'contain',
  725. ruleDimension: 'target',
  726. dataType: 'array',
  727. indicatorCode: 'inventoryType',
  728. name: '媒体广告位',
  729. ruleName: '媒体广告位',
  730. threshold: '0',
  731. dictId: 'eb595236fd3891c7d283986464eb40e5',
  732. ruleId: 13,
  733. dataUnit: '',
  734. },
  735. ],
  736. groupId: 7,
  737. ruleType: 'group',
  738. sendType: '',
  739. ruleRelationship: 'and',
  740. remark: '预警系统设置付费方式X,且媒体广告位为Y,触发报警',
  741. },
  742. ],
  743. mediaType: 1,
  744. templateId: 3,
  745. },
  746. timestamp: 1605605725236,
  747. },
  748. }
  749. },
  750. watch: {
  751. 'form.applyAccount'(n, o) {
  752. this.campaignList = []
  753. this.form.campaignId = ''
  754. if (n) {
  755. this.spinning = true
  756. if (this.form.eventRuleLevel == 'CAMPAIGN') {
  757. this.getCampaignList()
  758. } else if (this.form.eventRuleLevel == 'UNIT') {
  759. this.getCampaignList()
  760. this.getUnitList()
  761. }
  762. } else if (!n) {
  763. this.plainOptions = []
  764. }
  765. },
  766. 'form.campaignId'(n, o) {
  767. this.spinning = true
  768. this.getUnitList()
  769. },
  770. },
  771. methods: {
  772. addData(valueElse, value, index) {
  773. // alert(1)
  774. if (index == 0) {
  775. var data = JSON.parse(JSON.stringify(value))
  776. data = data.map((item) => {
  777. return {
  778. ...item,
  779. threshold: undefined,
  780. }
  781. })
  782. valueElse.ruleDetail.push(data)
  783. } else {
  784. valueElse.ruleDetail.splice(index, 1)
  785. }
  786. },
  787. disabledDate(current) {
  788. return current && current < moment().subtract(1, 'days')
  789. },
  790. // 应用方式改变
  791. applyRangeChange(e) {
  792. this.checkedList = []
  793. this.checkAll = false
  794. this.indeterminate = false
  795. if (e.target.value == 'ACCORDINGTO_STATUS') {
  796. this.form.appStatus = '1'
  797. } else {
  798. this.form.appStatus = null
  799. }
  800. },
  801. // 获取计划列表
  802. getCampaignList() {
  803. getAction('/kuaishou/batch/getCampaignList', {
  804. accountId: this.form.applyAccount,
  805. putStatus: 1,
  806. pageNo: 1,
  807. pageSize: 100000,
  808. }).then((res) => {
  809. this.plainOptions = []
  810. this.spinning = false
  811. if (res.success) {
  812. if (this.form.eventRuleLevel == 'CAMPAIGN') {
  813. this.plainOptions = res.result.records.map((item) => {
  814. return {
  815. ...item,
  816. label: item.campaignName,
  817. value: item.campaignId,
  818. }
  819. })
  820. }
  821. this.campaignList = res.result.records
  822. }
  823. })
  824. },
  825. // 获取计划列表
  826. getUnitList() {
  827. getAction('/kuaishou/batch/getUnitList', {
  828. accountId: this.form.applyAccount,
  829. campaignId: this.form.campaignId,
  830. pageNo: 1,
  831. pageSize: 100000,
  832. }).then((res) => {
  833. this.plainOptions = []
  834. this.spinning = false
  835. if (res.success) {
  836. this.plainOptions = res.result.records.map((item) => {
  837. return {
  838. ...item,
  839. label: item.unitName + '_(' + item.reviewDetail + ')',
  840. value: item.unitId,
  841. }
  842. })
  843. }
  844. })
  845. },
  846. inputCheck(val) {
  847. // console.log(val)
  848. },
  849. isCost(val) {
  850. if (val.indexOf('Cost') != -1) {
  851. return true
  852. } else if (val.indexOf('depletion') != -1) {
  853. return true
  854. } else {
  855. return false
  856. }
  857. },
  858. handleChange(value) {
  859. let rulesList = {}
  860. rulesList = this.rulesFieldList.filter((item) => {
  861. return item.metricValueCode == value
  862. })[0]
  863. this.rulesList = []
  864. rulesList.childs.forEach((ele, index) => {
  865. this.rulesList.push({
  866. metricValueName: ele.metricValueName,
  867. metricValueCode: ele.metricValueCode,
  868. dataRange: 'CURRENT_DAY_DATA',
  869. judgeMethod: 'GT_EQ',
  870. judgeType: 'MONEY',
  871. threshold: undefined,
  872. minThreshold: undefined,
  873. campaignStatus: undefined,
  874. unitStatus: undefined,
  875. })
  876. })
  877. },
  878. filterOption(input, option) {
  879. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  880. },
  881. // form-modal 自带方法
  882. onSubmit() {
  883. this.$refs.ruleForm.validate((valid) => {
  884. if (valid) {
  885. console.log('submit!', valid)
  886. } else {
  887. console.log('error submit!!')
  888. return false
  889. }
  890. })
  891. },
  892. resetForm() {
  893. this.$refs.ruleForm.resetFields()
  894. },
  895. addRule() {
  896. this.rulesList.push({
  897. metricValueName: ['0', 'COST'],
  898. dataRange: 'CURRENT_DAY_DATA',
  899. judgeMethod: 'GT_EQ',
  900. judgeType: 'MONEY',
  901. budgetMultiple: 0.5,
  902. budgetMultipleMin: 0.5,
  903. budgetMultipleMax: 0.8,
  904. campaignStatus: undefined,
  905. unitStatus: undefined,
  906. threshold: 0,
  907. maxNumber: 0,
  908. })
  909. },
  910. deleteRulesListItem(item, index) {
  911. console.log(item, index)
  912. this.rulesList = this.rulesList.filter((ele, ind) => {
  913. return ind != index
  914. })
  915. },
  916. displayRender({ labels }) {
  917. return labels[labels.length - 1]
  918. },
  919. conditionChange(item) {
  920. console.log(item)
  921. if (item.metricValueName[1] == 'COST') {
  922. item.judgeType = 'MONEY'
  923. } else {
  924. item.judgeType = undefined
  925. }
  926. item.specificMoney = undefined
  927. item.specificMoneyMin = undefined
  928. item.specificMoneyMax = undefined
  929. item.threshold = undefined
  930. item.maxNumber = undefined
  931. item.campaignStatus = undefined
  932. item.unitStatus = undefined
  933. },
  934. applyObjChange(e) {
  935. // console.log(e.target.value)
  936. this.plainOptions = []
  937. this.checkedList = []
  938. this.checkAll = false
  939. this.indeterminate = false
  940. if (e.target.value == 'ACCOUNT') {
  941. this.form.processMethod = 'SEND'
  942. this.rulesFieldList = this.accountFieldList
  943. } else if (e.target.value == 'CAMPAIGN') {
  944. this.rulesFieldList = this.campaignFieldList
  945. } else if (e.target.value == 'UNIT') {
  946. this.rulesFieldList = this.unitFieldList
  947. }
  948. if (this.form.applyAccount) {
  949. if (e.target.value == 'CAMPAIGN') {
  950. this.spinning = true
  951. this.getCampaignList()
  952. } else if (e.target.value == 'UNIT') {
  953. this.spinning = true
  954. this.getCampaignList()
  955. this.getUnitList()
  956. }
  957. }
  958. },
  959. saveHandler() {
  960. this.$refs.ruleForm.validate((valid) => {
  961. if (valid) {
  962. // this.form.rulesList=this.rulesList;
  963. var str = ''
  964. for (let i = 0; i < 7 * 24; i++) {
  965. str += '0'
  966. }
  967. var datas = []
  968. datas = this.form.ruleList.map((item) => {
  969. return {
  970. ...item,
  971. ruleDetail: item.ruleDetail.map((end) => {
  972. if (isArray(item.ruleDetail[0])) {
  973. var data = end.map((c) => {
  974. return {
  975. ...c,
  976. threshold: isArray(c.threshold) ? JSON.stringify(c.threshold) : c.threshold,
  977. }
  978. })
  979. return data
  980. } else {
  981. return {
  982. ...end,
  983. threshold: isArray(end.threshold)
  984. ? end.modelType == 'region'
  985. ? JSON.stringify(
  986. end.threshold.map((c) => {
  987. return c.value
  988. })
  989. )
  990. : JSON.stringify(end.threshold)
  991. : end.modelType == 'scheduleTime'
  992. ? end.threshold == str
  993. ? ''
  994. : end.threshold
  995. : end.threshold,
  996. }
  997. }
  998. }),
  999. }
  1000. })
  1001. // console.log(data)
  1002. var params = {
  1003. ...this.form,
  1004. ruleList: datas,
  1005. accountId: JSON.parse(localStorage.getItem('getRuleDetail')).accountId,
  1006. }
  1007. this.saveLoading = true
  1008. console.log(params)
  1009. postAction('/ruleAccountThreshold/fillThreshold', params).then((res) => {
  1010. if (res.success) {
  1011. this.saveLoading = false
  1012. // this.goBack()
  1013. this.$router.replace('/earlyWarningRules/useRuleList')
  1014. this.$bus.$emit('remove', '/earlyWarningRules/ruleModule')
  1015. }
  1016. })
  1017. } else {
  1018. this.$message.error('请按提示填写必填项!')
  1019. return false
  1020. }
  1021. })
  1022. },
  1023. goBack() {
  1024. this.$router.replace('/earlyWarningRules/useRuleList')
  1025. this.$bus.$emit('remove', '/earlyWarningRules/ruleModule')
  1026. },
  1027. //分页页码改变
  1028. pageNoChange(val) {
  1029. console.log(val)
  1030. this.currentPage = val
  1031. this.selectedCampaign()
  1032. },
  1033. onChange(checkedList) {
  1034. this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
  1035. this.checkAll = checkedList.length === this.plainOptions.length
  1036. },
  1037. onCheckAllChange(e) {
  1038. let valueOption = []
  1039. this.plainOptions.forEach((item) => {
  1040. valueOption.push(item.value)
  1041. })
  1042. Object.assign(this, {
  1043. checkedList: e.target.checked ? valueOption : [],
  1044. indeterminate: false,
  1045. checkAll: e.target.checked,
  1046. })
  1047. },
  1048. selectedCampaign(e) {
  1049. // console.log(e.target.value,this.selectedCampaignValue);
  1050. if (this.accountID) {
  1051. this.getExsitGroupList()
  1052. } else {
  1053. this.$message.warning('请选择账户后重试!')
  1054. this.selectedCampaignValue = undefined
  1055. }
  1056. },
  1057. clearAll(data) {
  1058. this.$nextTick(() => {
  1059. // if (data.length == 0) {
  1060. setTimeout(() => {
  1061. this.$refs.ruleForm.clearValidate()
  1062. }, 100)
  1063. // }
  1064. })
  1065. },
  1066. },
  1067. filters: {
  1068. handlerApplyObj(val) {
  1069. let showVal = ''
  1070. switch (val) {
  1071. case 'CAMPAIGN':
  1072. showVal = '计划'
  1073. break
  1074. case 'UNIT':
  1075. showVal = '组'
  1076. break
  1077. case 'CREATE':
  1078. showVal = '创意'
  1079. break
  1080. default:
  1081. break
  1082. }
  1083. return showVal
  1084. },
  1085. handlerDANWEI(val) {
  1086. // console.log(val.indexOf("RATE") != -1)
  1087. let returnVal = ''
  1088. if (val.indexOf('Roi') != -1) {
  1089. returnVal = ''
  1090. } else if (val.indexOf('Cost') != -1 || val.indexOf('depletion') != -1) {
  1091. returnVal = '元'
  1092. } else {
  1093. returnVal = ''
  1094. }
  1095. return returnVal
  1096. },
  1097. },
  1098. mounted() {
  1099. // getAction('/alarm/alarmMetricValue/queryParentChildList',{
  1100. // }).then(res=>{
  1101. // console.log(res);
  1102. // if(res.success){
  1103. // this.rulesFieldList=res.result
  1104. // }
  1105. // })
  1106. var data = JSON.parse(localStorage.getItem('getRuleDetail'))
  1107. this.editShow = data.edit
  1108. if (data.edit) {
  1109. this.spinLoading = true
  1110. getAction('/ruleTemplate/queryDetailByAccountIdAndTemplateId', {
  1111. templateId: data.id,
  1112. accountId: data.accountId,
  1113. }).then((res) => {
  1114. if (res.success) {
  1115. this.form = res.result
  1116. var data = this.form.ruleList.map((item) => {
  1117. return {
  1118. ...item,
  1119. ruleDetail: item.ruleDetail.map((end) => {
  1120. if (isArray(end)) {
  1121. var data = end.map((c) => {
  1122. return {
  1123. ...c,
  1124. threshold:
  1125. c.modelType == 'tagBox' ? (c.threshold == null ? undefined : c.threshold) : c.threshold,
  1126. }
  1127. })
  1128. return [...data]
  1129. } else {
  1130. return {
  1131. ...end,
  1132. threshold:
  1133. end.modelType == 'tagBox' ? (end.threshold == null ? undefined : end.threshold) : end.threshold,
  1134. }
  1135. }
  1136. }),
  1137. }
  1138. })
  1139. this.form.ruleList = data
  1140. this.spinLoading = false
  1141. } else {
  1142. this.spinLoading = false
  1143. }
  1144. })
  1145. } else {
  1146. this.spinLoading = true
  1147. getAction('/ruleTemplate/previewTemplate', { id: data.id }).then((res) => {
  1148. if (res.success) {
  1149. this.form = res.result
  1150. var str = ''
  1151. for (let i = 0; i < 7 * 24; i++) {
  1152. str += '0'
  1153. }
  1154. var data = this.form.ruleList.map((item) => {
  1155. return {
  1156. ...item,
  1157. ruleDetail: item.ruleDetail.map((end) => {
  1158. if (isArray(end)) {
  1159. var data = end.map((c) => {
  1160. return {
  1161. ...c,
  1162. threshold:
  1163. c.modelType == 'tagBox' ? undefined : c.modelType == 'scheduleTime' ? str : end.threshold,
  1164. }
  1165. })
  1166. return [...data]
  1167. } else {
  1168. return {
  1169. ...end,
  1170. threshold:
  1171. end.modelType == 'tagBox' ? undefined : end.modelType == 'scheduleTime' ? str : end.threshold,
  1172. }
  1173. }
  1174. }),
  1175. }
  1176. })
  1177. this.form.ruleList = data
  1178. this.spinLoading = false
  1179. } else {
  1180. this.spinLoading = false
  1181. }
  1182. })
  1183. }
  1184. },
  1185. }
  1186. </script>
  1187. <style lang="scss" scoped>
  1188. .ruleModule {
  1189. .toolbox-automate-rules-create-body {
  1190. margin: 16px 12px 12px;
  1191. padding: 32px 32px 16px;
  1192. background-color: #fff;
  1193. border-radius: 4px;
  1194. }
  1195. .toolbox-automate-rules-create-content_title {
  1196. background-color: #fff;
  1197. display: flex;
  1198. flex-flow: row nowrap;
  1199. justify-content: flex-start;
  1200. align-items: center;
  1201. margin-bottom: 28px;
  1202. h3 {
  1203. font-size: 22px;
  1204. margin: 0;
  1205. font-weight: 400;
  1206. height: 30px;
  1207. line-height: 30px;
  1208. }
  1209. }
  1210. .toolbox-automate-rules-create-content {
  1211. padding-left: 28px;
  1212. }
  1213. .moduler {
  1214. .opt {
  1215. text-align: right;
  1216. }
  1217. width: 100%;
  1218. background: #fff;
  1219. margin-bottom: 16px;
  1220. position: relative;
  1221. padding: 32px 24px 48px 32px;
  1222. // border-radius: 4px;
  1223. // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  1224. .moduler-title {
  1225. display: flex;
  1226. align-items: center;
  1227. font-size: 22px;
  1228. margin-bottom: 20px;
  1229. }
  1230. .row-group {
  1231. margin-bottom: 0 !important;
  1232. }
  1233. .row-item {
  1234. display: flex;
  1235. justify-content: flex-start;
  1236. align-items: center;
  1237. margin-bottom: 20px;
  1238. }
  1239. .row-item:last-of-type {
  1240. margin-bottom: 0;
  1241. }
  1242. .row-item .hint-item {
  1243. width: 24px;
  1244. min-width: 24px;
  1245. align-self: flex-start;
  1246. line-height: 20px;
  1247. height: 20px;
  1248. margin-top: 9px;
  1249. }
  1250. .row-item .label-item {
  1251. position: relative;
  1252. align-items: flex-start;
  1253. align-self: flex-start;
  1254. line-height: 20px;
  1255. height: 20px;
  1256. margin-top: 10px;
  1257. width: 140px;
  1258. min-width: 140px;
  1259. .text-item {
  1260. font-size: 14px;
  1261. width: 120px;
  1262. }
  1263. }
  1264. .row-item .required-item {
  1265. width: 4px;
  1266. height: 4px;
  1267. border-radius: 2px;
  1268. background: #f45858;
  1269. position: absolute;
  1270. right: 10px;
  1271. top: 50%;
  1272. transform: translateY(-50%);
  1273. }
  1274. .row-item .input-item {
  1275. min-width: 480px;
  1276. position: relative;
  1277. // height: 35px;
  1278. .tip {
  1279. font-size: 12px;
  1280. color: tomato;
  1281. }
  1282. }
  1283. .adName {
  1284. display: flex;
  1285. .nameList {
  1286. width: 90%;
  1287. }
  1288. .item {
  1289. display: inline-block;
  1290. width: 30%;
  1291. margin-left: 15px;
  1292. margin-bottom: 10px;
  1293. }
  1294. }
  1295. }
  1296. // .toolbox-automate-rules-create-content_rules-and-condition_rules {
  1297. // // margin-bottom: 24px;
  1298. // }
  1299. .toolbox-automate-rules-create-content_rules-and-condition_rules,
  1300. .toolbox-automate-rules-create-content_rules-and-condition_condition {
  1301. width: 1138px;
  1302. background: #fff;
  1303. border-radius: 4px;
  1304. border: 1px solid #dadfe3;
  1305. }
  1306. .toolbox-automate-rules-create-content_rules-and-condition_rules,
  1307. .toolbox-automate-rules-create-content_rules-and-condition_condition {
  1308. .title {
  1309. height: 20px;
  1310. font-size: 14px;
  1311. font-weight: 600;
  1312. color: #333;
  1313. height: 56px;
  1314. border-bottom: 1px solid #E4E9ED;
  1315. padding-left: 24px;
  1316. display: flex;
  1317. justify-content: flex-start;
  1318. align-items: center;
  1319. .condition-title {
  1320. padding-right: 17px;
  1321. }
  1322. }
  1323. .content {
  1324. .add-rule {
  1325. cursor: pointer;
  1326. height: 40px;
  1327. border-radius: 2px;
  1328. border: 1px dashed #dadfe3;
  1329. font-size: 12px;
  1330. display: flex;
  1331. flex-flow: row column;
  1332. justify-content: center;
  1333. align-items: center;
  1334. color: #666;
  1335. margin-top: 16px;
  1336. -moz-user-select: none;
  1337. -webkit-user-select: none;
  1338. -ms-user-select: none;
  1339. -khtml-user-select: none;
  1340. user-select: none;
  1341. }
  1342. .rules-list-item {
  1343. box-sizing: border-box;
  1344. width: 100%;
  1345. padding: 10px;
  1346. background: #f8f9fa;
  1347. border-radius: 4px;
  1348. display: flex;
  1349. align-items: center;
  1350. position: relative;
  1351. flex-wrap: wrap;
  1352. .rules-list-item-delete {
  1353. position: absolute;
  1354. right: 24px;
  1355. height: 30px;
  1356. padding-left: 24px;
  1357. border-left: 1px solid #DADFE3;
  1358. cursor: pointer;
  1359. }
  1360. .rules-list-item-subject {
  1361. width: 120px;
  1362. margin-right: 16px;
  1363. display: flex;
  1364. .ruleName {
  1365. display: block;
  1366. width: 100%;
  1367. height: 32px;
  1368. line-height: 32px;
  1369. text-align: center;
  1370. background-color: #fff;
  1371. border: 1px solid #d9d9d9;
  1372. border-radius: 4px;
  1373. }
  1374. }
  1375. }
  1376. .rules—list_item:last-of-type {
  1377. margin-bottom: 0;
  1378. }
  1379. }
  1380. }
  1381. .selectedExist {
  1382. width: 500px;
  1383. padding-top: 5px;
  1384. .inventory-tags-lists-header {
  1385. background-color: #F8F9FA;
  1386. border: 1px solid #E4E9ED;
  1387. height: 36px;
  1388. line-height: 33px;
  1389. border-radius: 4px 4px 0 0;
  1390. font-weight: bold;
  1391. display: flex;
  1392. }
  1393. .inventory-tags-lists-container {
  1394. border: 1px solid #E4E9ED;
  1395. margin-top: -1px;
  1396. height: 100%;
  1397. padding: 4px 0px;
  1398. border-radius: 0 0 4px 4px;
  1399. height: 300px;
  1400. overflow: auto;
  1401. }
  1402. .inventory-tags-lists-item {
  1403. width: 100%;
  1404. height: 37px;
  1405. line-height: 37px;
  1406. padding-left: 12px;
  1407. padding-right: 12px;
  1408. display: flex;
  1409. font-size: 14px;
  1410. color: #333;
  1411. }
  1412. .input {
  1413. margin-bottom: 16px;
  1414. }
  1415. .campaign-have-list {
  1416. font-family: PingFangSC-Regular;
  1417. font-size: 14px;
  1418. color: #333;
  1419. border: 1px solid #DADFE3;
  1420. border-radius: 4px;
  1421. margin-bottom: 16px;
  1422. height: 388px;
  1423. .campaign-have-header {
  1424. height: 38px;
  1425. width: 100%;
  1426. padding-left: 13px;
  1427. line-height: 38px;
  1428. background: #f8f9fa;
  1429. border-radius: 4px 4px 0px 0px;
  1430. border-bottom: 1px solid #DADFE3;
  1431. }
  1432. .campaign-have-list ul {
  1433. width: 100%;
  1434. height: 350px;
  1435. padding-top: 6px;
  1436. }
  1437. li {
  1438. padding: 6px 10px;
  1439. cursor: pointer;
  1440. }
  1441. li:hover {
  1442. background: #EDF1F5;
  1443. }
  1444. .ad-d-flex-between {
  1445. justify-content: space-between !important;
  1446. }
  1447. .ad-d-flex,
  1448. .ad-btn {
  1449. display: flex;
  1450. align-items: center;
  1451. }
  1452. .byted-loading-v {
  1453. position: absolute;
  1454. top: 0;
  1455. right: 0;
  1456. bottom: 0;
  1457. left: 0;
  1458. z-index: 996;
  1459. background-color: hsla(0, 0%, 96%, 0.9);
  1460. }
  1461. .info {
  1462. width: 60%;
  1463. overflow: hidden;
  1464. text-overflow: ellipsis;
  1465. white-space: nowrap;
  1466. }
  1467. .landing-type {
  1468. color: #999;
  1469. font-size: 12px;
  1470. white-space: nowrap;
  1471. }
  1472. }
  1473. .noAccountID {
  1474. font-size: 14px;
  1475. text-align: center;
  1476. color: #999;
  1477. line-height: 388px;
  1478. }
  1479. .fenye {
  1480. height: 60px;
  1481. padding-top: 12px;
  1482. text-align: right;
  1483. }
  1484. }
  1485. }
  1486. </style>
  1487. <style lang="scss">
  1488. .ruleModule {
  1489. .ant-form-item {
  1490. margin-bottom: 0;
  1491. }
  1492. .content {
  1493. .ant-form-item {
  1494. margin-bottom: 0;
  1495. width: 100%;
  1496. }
  1497. }
  1498. .ant-radio-button-wrapper {
  1499. min-width: 70px;
  1500. text-align: center;
  1501. }
  1502. }
  1503. </style>