123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548 |
- <style>
- .display-none-selset {
- display: none !important;
- }
- </style>
- <template>
- <div class="ruleModule">
- <div class="toolbox-automate-rules-create-body">
- <!-- <a-steps :current="current" size="default" style="width: 50%; margin: 0 auto" v-if="editShow">
- <a-step title="预警值填写" />
- <a-step title="开关设置" />
- </a-steps> -->
- <!-- {{ ceshi }}{{ time }}
- <br />
- <selectGroup v-model="ceshi2" style="width: 300px;margin-right:5px" code="37f678d06fc45b494a924894355d6f76" :multiple="true" />
- <timeRange v-model="time" :allowClear="true" :disabledDate="disabledDate" /> -->
- <!-- {{ ceshi }}
- <checkBoxGroup
- v-model="ceshi"
- style="width: 400px"
- code="95224d306285ea267eb6b5a31b5d84b6"
- :allValue="true"
- :radioStyle="true"
- />
- {{ form }} -->
- <div class="toolbox-automate-rules-create-content_title">
- <h3>预警值{{ editShow ? '填写' : '表单预览' }}</h3>
- </div>
- <a-spin :spinning="spinLoading">
- <div class="toolbox-automate-rules-create-content">
- <a-form-model ref="ruleForm" :model="form" layout="horizontal">
- <div class="moduler">
- <template v-for="(item, index) of form.ruleList">
- <div class="row-item" v-if="item.ruleType == 'base' && item.isCopy == 0" :key="index">
- <div class="hint-item">
- <a-tooltip>
- <template slot="title">
- {{ item.remark }}
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </div>
- <div class="label-item">
- <div class="text-item">{{ item.groupName }}</div>
- <div class="required-item" v-if="item.isRequired == 1"></div>
- </div>
- <div class="input-item">
- <a-form-model-item
- v-for="(value, valueIndex) of item.ruleDetail"
- :key="valueIndex"
- :ref="value.indicatorCode + valueIndex"
- :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${item.groupName}必填`,
- trigger: value.dataType == 'array' ? 'change' : 'blur',
- }"
- >
- <a-input-number
- :disabled="!editShow"
- v-model="value.threshold"
- :min="0"
- style="width: 100px; margin-right: 5px"
- v-if="value.modelType == 'numberText'"
- />
- <a-input
- :disabled="!editShow"
- v-model="value.threshold"
- style="width: 300px; margin-right: 5px"
- v-else-if="value.modelType == 'text'"
- />
- <selectGroup
- :disabled="!editShow"
- v-model="value.threshold"
- style="width: 300px; margin-right: 5px"
- :code="value.dictId"
- :requestUrl='value.requestUrl'
- :multiple="
- value.dataType == 'string' ||
- value.dataType == 'number' ||
- value.indicatorCode == 'presentedVideo' ||
- value.indicatorCode == 'hideIfExists'
- ? false
- : true
- "
- v-else-if="value.modelType == 'select'"
- />
- <!-- <selectGroup
- v-model="value.threshold"
- style="width: 300px;margin-right:5px"
- :code="value.dictId"
- :multiple="value.dataType == 'string' ? false : true"
- /> -->
- <checkBoxGroup
- :disabled="!editShow"
- v-model="value.threshold"
- style="width: 100%; margin-right: 5px"
- :code="value.dictId"
- :allValue="true"
- :radioStyle="
- value.dataType == 'string' ||
- value.dataType == 'number' ||
- value.indicatorCode == 'presentedVideo' ||
- value.indicatorCode == 'hideIfExists'
- ? true
- : false
- "
- v-else-if="value.modelType == 'checkBox'"
- />
- <a-select
- :disabled="!editShow"
- mode="tags"
- style="width: 100%"
- placeholder="按回车生成"
- v-model="value.threshold"
- dropdownClassName="display-none-selset"
- :token-separators="[',', ' ', ',']"
- v-else-if="value.modelType == 'tagBox'"
- >
- </a-select>
- <!-- <p v-else-if="value.modelType == 'timeRange'">{{value.threshold}}</p> -->
- <scheduleTime
- style="width: 100%"
- :scheduleTime.sync="value.threshold"
- ref="selectCheck"
- v-else-if="value.modelType == 'scheduleTime'"
- >
- </scheduleTime>
- <!-- v-model="value.threshold" -->
- <!-- :cascaderValue.sync="value.threshold" -->
- <region
- :disabled="!editShow"
- :checkData.sync="value.threshold"
- :dataValue="value.threshold"
- style="width: 100%"
- :isLazy="true"
- v-else-if="value.modelType == 'region'"
- >
- </region>
- <!-- {{value.threshold}} -->
- {{ value.dataUnit }}
- </a-form-model-item>
- </div>
- </div>
- <div class="row-item" v-else-if="item.ruleType == 'group' && item.isCopy == 0" :key="index">
- <div class="hint-item">
- <a-tooltip>
- <template slot="title">
- {{ item.remark }}
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </div>
- <div class="label-item">
- <div class="text-item">{{ item.groupName }}</div>
- <div class="required-item" v-if="item.isRequired == 1"></div>
- </div>
- <div class="input-item">
- <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
- <div class="content">
- <div class="rules-list">
- <div class="rules-list-item">
- <template v-for="(value, valueIndex) of item.ruleDetail">
- <div class="row-item row-group" v-if="value.variableType == 1" :key="valueIndex">
- <!-- <div class="hint-item"></div>
- <div class="label-item">
- <div class="text-item"></div>
- <div class="required-item"></div>
- </div> -->
- <div class="input-item">
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必填`,
- trigger: 'blur',
- }"
- v-if="value.modelType == 'numberText'"
- >
- <a-input-number
- :disabled="!editShow"
- style="width: 100px; margin-right: 5px"
- v-model="value.threshold"
- :min="0"
- />{{ value.dataUnit }}
- </a-form-model-item>
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必填`,
- trigger: 'blur',
- }"
- v-else-if="value.modelType == 'text'"
- >
- <a-input v-model="value.threshold" style="width: 95%" :disabled="!editShow" />
- </a-form-model-item>
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必选`,
- trigger: 'change',
- }"
- v-else-if="value.modelType == 'select' || value.modelType == 'checkBox'"
- >
- <!-- -->
- <selectGroup
- :disabled="!editShow"
- v-model="value.threshold"
- :code="value.dictId"
- :requestUrl='value.requestUrl'
- :multiple="
- value.dataType == 'string' ||
- value.dataType == 'number' ||
- value.indicatorCode == 'presentedVideo' ||
- value.indicatorCode == 'hideIfExists'
- ? false
- : true
- "
- style="width: 95%"
- @clearValidate="clearAll"
- />
- </a-form-model-item>
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="'ruleList.' + index + '.ruleDetail.' + valueIndex + '.threshold'"
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必选`,
- trigger: 'change',
- }"
- v-else-if="value.modelType == 'tagBox'"
- >
- <a-select
- :disabled="!editShow"
- mode="tags"
- style="width: 95%"
- placeholder="按回车生成"
- v-model="value.threshold"
- dropdownClassName="display-none-selset"
- :token-separators="[',', ' ', ',']"
- :maxTagCount="3"
- >
- </a-select>
- </a-form-model-item>
- </div>
- </div>
- </template>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row-item" v-else-if="item.ruleType == 'group' && item.isCopy == 1" :key="index">
- <div class="hint-item">
- <a-tooltip>
- <template slot="title">
- {{ item.remark }}
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </div>
- <div class="label-item">
- <div class="text-item">{{ item.groupName }}</div>
- <div class="required-item" v-if="item.isRequired == 1"></div>
- </div>
- <div class="input-item">
- <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
- <div class="content">
- <div
- class="rules-list"
- v-for="(valueElse, valueIndex) of item.ruleDetail"
- :key="valueIndex + 'ruleDetail'"
- >
- <div class="rules-list-item">
- <template v-for="(value, valueElseIndex) of valueElse">
- <div
- class="row-item row-group"
- v-if="value.variableType == 1"
- :key="valueElseIndex + 'valueElse'"
- >
- <!-- <div class="hint-item"></div>
- <div class="label-item">
- <div class="text-item"></div>
- <div class="required-item"></div>
- </div> -->
- <div class="input-item">
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="
- 'ruleList.' +
- index +
- '.ruleDetail.' +
- valueIndex +
- '.' +
- valueElseIndex +
- '.threshold'
- "
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必填`,
- trigger: 'blur',
- }"
- v-if="value.modelType == 'numberText'"
- >
- <a-input-number
- :disabled="!editShow"
- style="width: 100px; margin-right: 5px"
- v-model="value.threshold"
- :min="0"
- />{{ value.dataUnit }}
- </a-form-model-item>
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="
- 'ruleList.' +
- index +
- '.ruleDetail.' +
- valueIndex +
- '.' +
- valueElseIndex +
- '.threshold'
- "
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必填`,
- trigger: 'blur',
- }"
- v-else-if="value.modelType == 'text'"
- >
- <a-input :disabled="!editShow" v-model="value.threshold" style="width: 95%" />
- </a-form-model-item>
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="
- 'ruleList.' +
- index +
- '.ruleDetail.' +
- valueIndex +
- '.' +
- valueElseIndex +
- '.threshold'
- "
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必选`,
- trigger: 'change',
- }"
- v-else-if="value.modelType == 'select' || value.modelType == 'checkBox'"
- >
- <selectGroup
- :disabled="!editShow"
- v-model="value.threshold"
- :code="value.dictId"
- :requestUrl='value.requestUrl'
- :multiple="
- value.dataType == 'string' ||
- value.dataType == 'number' ||
- value.indicatorCode == 'presentedVideo' ||
- value.indicatorCode == 'hideIfExists'
- ? false
- : true
- "
- style="width: 95%"
- @clearValidate="clearAll"
- />
- </a-form-model-item>
- <a-form-model-item
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }"
- :label="value.name"
- :ref="value.indicatorCode + valueIndex"
- :prop="
- 'ruleList.' +
- index +
- '.ruleDetail.' +
- valueIndex +
- '.' +
- valueElseIndex +
- '.threshold'
- "
- :rules="{
- required: item.isRequired == 1 ? true : false,
- message: `${value.name}必选`,
- trigger: 'change',
- }"
- v-else-if="value.modelType == 'tagBox'"
- >
- <a-select
- :disabled="!editShow"
- mode="tags"
- style="width: 95%"
- placeholder="按回车生成"
- v-model="value.threshold"
- dropdownClassName="display-none-selset"
- :token-separators="[',', ' ', ',']"
- :maxTagCount="3"
- >
- </a-select>
- </a-form-model-item>
- </div>
- </div>
- <div
- class="rules-list-item-delete"
- v-if="item.isCopy == 1"
- @click="addData(item, valueElse, valueIndex)"
- :key="valueElseIndex"
- >
- {{ valueIndex == 0 ? '复建' : '删除' }}
- </div>
- </template>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- </div>
- </a-form-model>
- </div>
- </a-spin>
- </div>
- <switchConfig :disabled="!editShow" v-if="form.mediaType == 1 || form.mediaType == 3" />
- <div class="toolbox-automate-rules-create-body" v-if="editShow">
- <div class="moduler">
- <div class="opt">
- <a-button type="default" style="margin-right: 15px" @click="goBack">{{
- editShow ? '取消' : '返回'
- }}</a-button>
- <a-button
- type="primary"
- style="margin-right: 15px"
- @click="saveHandler"
- :loading="saveLoading"
- v-if="editShow"
- >确定</a-button
- >
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { isArray } from '@/utils/Tools'
- import moment from 'moment'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- import { Switch } from 'ant-design-vue'
- import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
- import selectGroup from '@/components/formComponents/selectGroup'
- import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
- import timeRange from '@/components/formComponents/timeRange'
- import scheduleTime from '@/components/formComponents/toutiaoTime'
- import region from '@/components/formComponents/selectRegion'
- import switchConfig from './switchConfig'
- let statusList = [
- {
- id: 2,
- value: '1',
- title: '所有投放中',
- },
- ]
- let condition = [
- {
- value: '0',
- label: '展示数据',
- children: [
- {
- value: 'SHOW',
- label: '展示数',
- },
- {
- value: 'CLICK',
- label: '点击数',
- },
- {
- value: 'CLICK_RATE',
- label: '点击率',
- },
- {
- value: 'COST',
- label: '消耗',
- },
- {
- value: 'AD_CLICK_PRICE',
- label: '平均点击单价',
- },
- ],
- },
- {
- value: '1',
- label: '转化数据',
- children: [
- {
- value: 'CONVERT',
- label: '转化数',
- },
- {
- value: 'CONVERT_COST',
- label: '转化成本',
- },
- {
- value: 'CONVERT_RATE',
- label: '转化率',
- },
- {
- value: 'DEEP_CONVERT',
- label: '深度转化数',
- },
- {
- value: 'DEEP_CONVERT_COST',
- label: '深度转化成本',
- },
- {
- value: 'DEEP_CONVERT_RATE',
- label: '深度转化率',
- },
- ],
- },
- ]
- let budgetMultipleArr = [
- {
- value: 0.5,
- label: '0.5倍预算',
- },
- {
- value: 0.8,
- label: '0.8倍预算',
- },
- {
- value: 1,
- label: '1倍预算',
- },
- {
- value: 1.5,
- label: '1.5倍预算',
- },
- ]
- export default {
- components: {
- Treeselect,
- selectGroup,
- checkBoxGroup,
- timeRange,
- switchConfig,
- scheduleTime,
- region,
- },
- data() {
- return {
- editShow: false,
- current: 0,
- spinLoading: false,
- // allCol: {
- // labelCol: { span: 6 },
- // wrapperCol: { span: 18 },
- // },
- wrapperCol: { span: 14 },
- ceshi: [],
- ceshi2: [],
- time: [moment('2020/11/16', 'YYYY-MM-DD'), moment('2020/11/17', 'YYYY-MM-DD')],
- campaignList: [],
- currentRuleId: '',
- rulesFieldList: [],
- accountID: undefined,
- selectedCampaignValue: undefined,
- spinning: false,
- campaignHaveList: [],
- currentPage: 1,
- totalPage: 0,
- checkedList: [],
- indeterminate: false,
- checkAll: false,
- plainOptions: [],
- saveLoading: false,
- // 用到的参数数组
- condition,
- statusList,
- budgetMultipleArr,
- accountList: [],
- form: {},
- rules: {},
- rulesList: [
- {
- metricValueName: '',
- metricValueCode: '',
- dataRange: 'CURRENT_DAY_DATA',
- judgeMethod: 'GT_EQ',
- judgeType: 'MONEY',
- threshold: 0,
- minThreshold: 0,
- campaignStatus: undefined,
- unitStatus: undefined,
- },
- ],
- accountFieldList: [],
- campaignFieldList: [],
- unitFieldList: [],
- textData: {
- success: true,
- message: '操作成功!',
- code: 0,
- result: {
- templateName: '测试模板',
- applyAccount: '',
- ruleList: [
- {
- groupName: '成本限额',
- operate: '',
- ruleDetail: [
- {
- variableType: 1,
- ruleCondition: 'greater_equal',
- ruleDimension: 'account',
- dataType: 'number',
- indicatorCode: 'convert_cost',
- name: '转化成本',
- ruleName: '转化成本',
- threshold: '0',
- dictId: '',
- ruleId: 9,
- dataUnit: '元',
- },
- ],
- groupId: 4,
- ruleType: 'base',
- sendType: '',
- ruleRelationship: 'and',
- remark: '转化成本大于等于设置值X,报警',
- },
- {
- groupName: '消耗限额',
- operate: '',
- ruleDetail: [
- {
- variableType: 1,
- ruleCondition: 'greater_equal',
- ruleDimension: 'plan',
- dataType: 'number',
- indicatorCode: 'cost',
- name: '消耗',
- ruleName: '消耗',
- threshold: '0',
- dictId: '',
- ruleId: 10,
- dataUnit: '元',
- },
- ],
- groupId: 5,
- ruleType: 'base',
- sendType: '',
- ruleRelationship: 'and',
- remark: '消耗大于等于设置值X,触发报警',
- },
- {
- groupName: '账户余额限额',
- operate: '',
- ruleDetail: [
- {
- variableType: 1,
- ruleCondition: 'less_equal',
- ruleDimension: 'account',
- dataType: 'number',
- indicatorCode: 'validBalance',
- name: '账户余额',
- ruleName: '账户余额',
- threshold: '0',
- dictId: '',
- ruleId: 11,
- dataUnit: '元',
- },
- ],
- groupId: 6,
- ruleType: 'base',
- sendType: '',
- ruleRelationship: 'and',
- remark: '账户余额小于等于设置值X,报警',
- },
- {
- groupName: '广告位付费',
- operate: '',
- ruleDetail: [
- {
- variableType: 1,
- ruleCondition: 'equal',
- ruleDimension: 'plan',
- dataType: 'string',
- indicatorCode: 'pricing',
- name: '付费方式',
- ruleName: '付费方式',
- threshold: '',
- dictId: 'ba22a2f2777f7156a7bd814dafc36637',
- ruleId: 12,
- dataUnit: '',
- },
- {
- variableType: 1,
- ruleCondition: 'contain',
- ruleDimension: 'target',
- dataType: 'array',
- indicatorCode: 'inventoryType',
- name: '媒体广告位',
- ruleName: '媒体广告位',
- threshold: '0',
- dictId: 'eb595236fd3891c7d283986464eb40e5',
- ruleId: 13,
- dataUnit: '',
- },
- ],
- groupId: 7,
- ruleType: 'group',
- sendType: '',
- ruleRelationship: 'and',
- remark: '预警系统设置付费方式X,且媒体广告位为Y,触发报警',
- },
- ],
- mediaType: 1,
- templateId: 3,
- },
- timestamp: 1605605725236,
- },
- }
- },
- watch: {
- 'form.applyAccount'(n, o) {
- this.campaignList = []
- this.form.campaignId = ''
- if (n) {
- this.spinning = true
- if (this.form.eventRuleLevel == 'CAMPAIGN') {
- this.getCampaignList()
- } else if (this.form.eventRuleLevel == 'UNIT') {
- this.getCampaignList()
- this.getUnitList()
- }
- } else if (!n) {
- this.plainOptions = []
- }
- },
- 'form.campaignId'(n, o) {
- this.spinning = true
- this.getUnitList()
- },
- },
- methods: {
- addData(valueElse, value, index) {
- // alert(1)
- if (index == 0) {
- var data = JSON.parse(JSON.stringify(value))
- data = data.map((item) => {
- return {
- ...item,
- threshold: undefined,
- }
- })
- valueElse.ruleDetail.push(data)
- } else {
- valueElse.ruleDetail.splice(index, 1)
- }
- },
- disabledDate(current) {
- return current && current < moment().subtract(1, 'days')
- },
- // 应用方式改变
- applyRangeChange(e) {
- this.checkedList = []
- this.checkAll = false
- this.indeterminate = false
- if (e.target.value == 'ACCORDINGTO_STATUS') {
- this.form.appStatus = '1'
- } else {
- this.form.appStatus = null
- }
- },
- // 获取计划列表
- getCampaignList() {
- getAction('/kuaishou/batch/getCampaignList', {
- accountId: this.form.applyAccount,
- putStatus: 1,
- pageNo: 1,
- pageSize: 100000,
- }).then((res) => {
- this.plainOptions = []
- this.spinning = false
- if (res.success) {
- if (this.form.eventRuleLevel == 'CAMPAIGN') {
- this.plainOptions = res.result.records.map((item) => {
- return {
- ...item,
- label: item.campaignName,
- value: item.campaignId,
- }
- })
- }
- this.campaignList = res.result.records
- }
- })
- },
- // 获取计划列表
- getUnitList() {
- getAction('/kuaishou/batch/getUnitList', {
- accountId: this.form.applyAccount,
- campaignId: this.form.campaignId,
- pageNo: 1,
- pageSize: 100000,
- }).then((res) => {
- this.plainOptions = []
- this.spinning = false
- if (res.success) {
- this.plainOptions = res.result.records.map((item) => {
- return {
- ...item,
- label: item.unitName + '_(' + item.reviewDetail + ')',
- value: item.unitId,
- }
- })
- }
- })
- },
- inputCheck(val) {
- // console.log(val)
- },
- isCost(val) {
- if (val.indexOf('Cost') != -1) {
- return true
- } else if (val.indexOf('depletion') != -1) {
- return true
- } else {
- return false
- }
- },
- handleChange(value) {
- let rulesList = {}
- rulesList = this.rulesFieldList.filter((item) => {
- return item.metricValueCode == value
- })[0]
- this.rulesList = []
- rulesList.childs.forEach((ele, index) => {
- this.rulesList.push({
- metricValueName: ele.metricValueName,
- metricValueCode: ele.metricValueCode,
- dataRange: 'CURRENT_DAY_DATA',
- judgeMethod: 'GT_EQ',
- judgeType: 'MONEY',
- threshold: undefined,
- minThreshold: undefined,
- campaignStatus: undefined,
- unitStatus: undefined,
- })
- })
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- // form-modal 自带方法
- onSubmit() {
- this.$refs.ruleForm.validate((valid) => {
- if (valid) {
- console.log('submit!', valid)
- } else {
- console.log('error submit!!')
- return false
- }
- })
- },
- resetForm() {
- this.$refs.ruleForm.resetFields()
- },
- addRule() {
- this.rulesList.push({
- metricValueName: ['0', 'COST'],
- dataRange: 'CURRENT_DAY_DATA',
- judgeMethod: 'GT_EQ',
- judgeType: 'MONEY',
- budgetMultiple: 0.5,
- budgetMultipleMin: 0.5,
- budgetMultipleMax: 0.8,
- campaignStatus: undefined,
- unitStatus: undefined,
- threshold: 0,
- maxNumber: 0,
- })
- },
- deleteRulesListItem(item, index) {
- console.log(item, index)
- this.rulesList = this.rulesList.filter((ele, ind) => {
- return ind != index
- })
- },
- displayRender({ labels }) {
- return labels[labels.length - 1]
- },
- conditionChange(item) {
- console.log(item)
- if (item.metricValueName[1] == 'COST') {
- item.judgeType = 'MONEY'
- } else {
- item.judgeType = undefined
- }
- item.specificMoney = undefined
- item.specificMoneyMin = undefined
- item.specificMoneyMax = undefined
- item.threshold = undefined
- item.maxNumber = undefined
- item.campaignStatus = undefined
- item.unitStatus = undefined
- },
- applyObjChange(e) {
- // console.log(e.target.value)
- this.plainOptions = []
- this.checkedList = []
- this.checkAll = false
- this.indeterminate = false
- if (e.target.value == 'ACCOUNT') {
- this.form.processMethod = 'SEND'
- this.rulesFieldList = this.accountFieldList
- } else if (e.target.value == 'CAMPAIGN') {
- this.rulesFieldList = this.campaignFieldList
- } else if (e.target.value == 'UNIT') {
- this.rulesFieldList = this.unitFieldList
- }
- if (this.form.applyAccount) {
- if (e.target.value == 'CAMPAIGN') {
- this.spinning = true
- this.getCampaignList()
- } else if (e.target.value == 'UNIT') {
- this.spinning = true
- this.getCampaignList()
- this.getUnitList()
- }
- }
- },
- saveHandler() {
- this.$refs.ruleForm.validate((valid) => {
- if (valid) {
- // this.form.rulesList=this.rulesList;
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- var datas = []
- datas = this.form.ruleList.map((item) => {
- return {
- ...item,
- ruleDetail: item.ruleDetail.map((end) => {
- if (isArray(item.ruleDetail[0])) {
- var data = end.map((c) => {
- return {
- ...c,
- threshold: isArray(c.threshold) ? JSON.stringify(c.threshold) : c.threshold,
- }
- })
- return data
- } else {
- return {
- ...end,
- threshold: isArray(end.threshold)
- ? end.modelType == 'region'
- ? JSON.stringify(
- end.threshold.map((c) => {
- return c.value
- })
- )
- : JSON.stringify(end.threshold)
- : end.modelType == 'scheduleTime'
- ? end.threshold == str
- ? ''
- : end.threshold
- : end.threshold,
- }
- }
- }),
- }
- })
- // console.log(data)
- var params = {
- ...this.form,
- ruleList: datas,
- accountId: JSON.parse(localStorage.getItem('getRuleDetail')).accountId,
- }
- this.saveLoading = true
- console.log(params)
- postAction('/ruleAccountThreshold/fillThreshold', params).then((res) => {
- if (res.success) {
- this.saveLoading = false
- // this.goBack()
- this.$router.replace('/earlyWarningRules/useRuleList')
- this.$bus.$emit('remove', '/earlyWarningRules/ruleModule')
- }
- })
- } else {
- this.$message.error('请按提示填写必填项!')
- return false
- }
- })
- },
- goBack() {
- this.$router.replace('/earlyWarningRules/useRuleList')
- this.$bus.$emit('remove', '/earlyWarningRules/ruleModule')
- },
- //分页页码改变
- pageNoChange(val) {
- console.log(val)
- this.currentPage = val
- this.selectedCampaign()
- },
- onChange(checkedList) {
- this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
- this.checkAll = checkedList.length === this.plainOptions.length
- },
- onCheckAllChange(e) {
- let valueOption = []
- this.plainOptions.forEach((item) => {
- valueOption.push(item.value)
- })
- Object.assign(this, {
- checkedList: e.target.checked ? valueOption : [],
- indeterminate: false,
- checkAll: e.target.checked,
- })
- },
- selectedCampaign(e) {
- // console.log(e.target.value,this.selectedCampaignValue);
- if (this.accountID) {
- this.getExsitGroupList()
- } else {
- this.$message.warning('请选择账户后重试!')
- this.selectedCampaignValue = undefined
- }
- },
- clearAll(data) {
- this.$nextTick(() => {
- // if (data.length == 0) {
- setTimeout(() => {
- this.$refs.ruleForm.clearValidate()
- }, 100)
- // }
- })
- },
- },
- filters: {
- handlerApplyObj(val) {
- let showVal = ''
- switch (val) {
- case 'CAMPAIGN':
- showVal = '计划'
- break
- case 'UNIT':
- showVal = '组'
- break
- case 'CREATE':
- showVal = '创意'
- break
- default:
- break
- }
- return showVal
- },
- handlerDANWEI(val) {
- // console.log(val.indexOf("RATE") != -1)
- let returnVal = ''
- if (val.indexOf('Roi') != -1) {
- returnVal = ''
- } else if (val.indexOf('Cost') != -1 || val.indexOf('depletion') != -1) {
- returnVal = '元'
- } else {
- returnVal = ''
- }
- return returnVal
- },
- },
- mounted() {
- // getAction('/alarm/alarmMetricValue/queryParentChildList',{
- // }).then(res=>{
- // console.log(res);
- // if(res.success){
- // this.rulesFieldList=res.result
- // }
- // })
- var data = JSON.parse(localStorage.getItem('getRuleDetail'))
- this.editShow = data.edit
- if (data.edit) {
- this.spinLoading = true
- getAction('/ruleTemplate/queryDetailByAccountIdAndTemplateId', {
- templateId: data.id,
- accountId: data.accountId,
- }).then((res) => {
- if (res.success) {
- this.form = res.result
- var data = this.form.ruleList.map((item) => {
- return {
- ...item,
- ruleDetail: item.ruleDetail.map((end) => {
- if (isArray(end)) {
- var data = end.map((c) => {
- return {
- ...c,
- threshold:
- c.modelType == 'tagBox' ? (c.threshold == null ? undefined : c.threshold) : c.threshold,
- }
- })
- return [...data]
- } else {
- return {
- ...end,
- threshold:
- end.modelType == 'tagBox' ? (end.threshold == null ? undefined : end.threshold) : end.threshold,
- }
- }
- }),
- }
- })
- this.form.ruleList = data
- this.spinLoading = false
- } else {
- this.spinLoading = false
- }
- })
- } else {
- this.spinLoading = true
- getAction('/ruleTemplate/previewTemplate', { id: data.id }).then((res) => {
- if (res.success) {
- this.form = res.result
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- var data = this.form.ruleList.map((item) => {
- return {
- ...item,
- ruleDetail: item.ruleDetail.map((end) => {
- if (isArray(end)) {
- var data = end.map((c) => {
- return {
- ...c,
- threshold:
- c.modelType == 'tagBox' ? undefined : c.modelType == 'scheduleTime' ? str : end.threshold,
- }
- })
- return [...data]
- } else {
- return {
- ...end,
- threshold:
- end.modelType == 'tagBox' ? undefined : end.modelType == 'scheduleTime' ? str : end.threshold,
- }
- }
- }),
- }
- })
- this.form.ruleList = data
- this.spinLoading = false
- } else {
- this.spinLoading = false
- }
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .ruleModule {
- .toolbox-automate-rules-create-body {
- margin: 16px 12px 12px;
- padding: 32px 32px 16px;
- background-color: #fff;
- border-radius: 4px;
- }
- .toolbox-automate-rules-create-content_title {
- background-color: #fff;
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- align-items: center;
- margin-bottom: 28px;
- h3 {
- font-size: 22px;
- margin: 0;
- font-weight: 400;
- height: 30px;
- line-height: 30px;
- }
- }
- .toolbox-automate-rules-create-content {
- padding-left: 28px;
- }
- .moduler {
- .opt {
- text-align: right;
- }
- width: 100%;
- background: #fff;
- margin-bottom: 16px;
- position: relative;
- padding: 32px 24px 48px 32px;
- // border-radius: 4px;
- // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
- .moduler-title {
- display: flex;
- align-items: center;
- font-size: 22px;
- margin-bottom: 20px;
- }
- .row-group {
- margin-bottom: 0 !important;
- }
- .row-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-bottom: 20px;
- }
- .row-item:last-of-type {
- margin-bottom: 0;
- }
- .row-item .hint-item {
- width: 24px;
- min-width: 24px;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 9px;
- }
- .row-item .label-item {
- position: relative;
- align-items: flex-start;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 10px;
- width: 140px;
- min-width: 140px;
- .text-item {
- font-size: 14px;
- width: 120px;
- }
- }
- .row-item .required-item {
- width: 4px;
- height: 4px;
- border-radius: 2px;
- background: #f45858;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- }
- .row-item .input-item {
- min-width: 480px;
- position: relative;
- // height: 35px;
- .tip {
- font-size: 12px;
- color: tomato;
- }
- }
- .adName {
- display: flex;
- .nameList {
- width: 90%;
- }
- .item {
- display: inline-block;
- width: 30%;
- margin-left: 15px;
- margin-bottom: 10px;
- }
- }
- }
- // .toolbox-automate-rules-create-content_rules-and-condition_rules {
- // // margin-bottom: 24px;
- // }
- .toolbox-automate-rules-create-content_rules-and-condition_rules,
- .toolbox-automate-rules-create-content_rules-and-condition_condition {
- width: 1138px;
- background: #fff;
- border-radius: 4px;
- border: 1px solid #dadfe3;
- }
- .toolbox-automate-rules-create-content_rules-and-condition_rules,
- .toolbox-automate-rules-create-content_rules-and-condition_condition {
- .title {
- height: 20px;
- font-size: 14px;
- font-weight: 600;
- color: #333;
- height: 56px;
- border-bottom: 1px solid #E4E9ED;
- padding-left: 24px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- .condition-title {
- padding-right: 17px;
- }
- }
- .content {
- .add-rule {
- cursor: pointer;
- height: 40px;
- border-radius: 2px;
- border: 1px dashed #dadfe3;
- font-size: 12px;
- display: flex;
- flex-flow: row column;
- justify-content: center;
- align-items: center;
- color: #666;
- margin-top: 16px;
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- }
- .rules-list-item {
- box-sizing: border-box;
- width: 100%;
- padding: 10px;
- background: #f8f9fa;
- border-radius: 4px;
- display: flex;
- align-items: center;
- position: relative;
- flex-wrap: wrap;
- .rules-list-item-delete {
- position: absolute;
- right: 24px;
- height: 30px;
- padding-left: 24px;
- border-left: 1px solid #DADFE3;
- cursor: pointer;
- }
- .rules-list-item-subject {
- width: 120px;
- margin-right: 16px;
- display: flex;
- .ruleName {
- display: block;
- width: 100%;
- height: 32px;
- line-height: 32px;
- text-align: center;
- background-color: #fff;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- }
- }
- }
- .rules—list_item:last-of-type {
- margin-bottom: 0;
- }
- }
- }
- .selectedExist {
- width: 500px;
- padding-top: 5px;
- .inventory-tags-lists-header {
- background-color: #F8F9FA;
- border: 1px solid #E4E9ED;
- height: 36px;
- line-height: 33px;
- border-radius: 4px 4px 0 0;
- font-weight: bold;
- display: flex;
- }
- .inventory-tags-lists-container {
- border: 1px solid #E4E9ED;
- margin-top: -1px;
- height: 100%;
- padding: 4px 0px;
- border-radius: 0 0 4px 4px;
- height: 300px;
- overflow: auto;
- }
- .inventory-tags-lists-item {
- width: 100%;
- height: 37px;
- line-height: 37px;
- padding-left: 12px;
- padding-right: 12px;
- display: flex;
- font-size: 14px;
- color: #333;
- }
- .input {
- margin-bottom: 16px;
- }
- .campaign-have-list {
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: #333;
- border: 1px solid #DADFE3;
- border-radius: 4px;
- margin-bottom: 16px;
- height: 388px;
- .campaign-have-header {
- height: 38px;
- width: 100%;
- padding-left: 13px;
- line-height: 38px;
- background: #f8f9fa;
- border-radius: 4px 4px 0px 0px;
- border-bottom: 1px solid #DADFE3;
- }
- .campaign-have-list ul {
- width: 100%;
- height: 350px;
- padding-top: 6px;
- }
- li {
- padding: 6px 10px;
- cursor: pointer;
- }
- li:hover {
- background: #EDF1F5;
- }
- .ad-d-flex-between {
- justify-content: space-between !important;
- }
- .ad-d-flex,
- .ad-btn {
- display: flex;
- align-items: center;
- }
- .byted-loading-v {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 996;
- background-color: hsla(0, 0%, 96%, 0.9);
- }
- .info {
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .landing-type {
- color: #999;
- font-size: 12px;
- white-space: nowrap;
- }
- }
- .noAccountID {
- font-size: 14px;
- text-align: center;
- color: #999;
- line-height: 388px;
- }
- .fenye {
- height: 60px;
- padding-top: 12px;
- text-align: right;
- }
- }
- }
- </style>
- <style lang="scss">
- .ruleModule {
- .ant-form-item {
- margin-bottom: 0;
- }
- .content {
- .ant-form-item {
- margin-bottom: 0;
- width: 100%;
- }
- }
- .ant-radio-button-wrapper {
- min-width: 70px;
- text-align: center;
- }
- }
- </style>
|