数据模板

zxl

2026-03-25 19dd419f262406bc9fa1f09d731a1f44aebd8505

 src/views/dataAnalysis/components/CustTypeModal.vue

@@ -17,6 +17,9 @@
            v-model="clientConfigsList.clientName"
          ></a-input>
        </a-form-item>
        <div v-if="!clientConfigsList.clientConfigs || clientConfigsList.clientConfigs.length === 0" style="text-align: center">
          <a-button type="primary" @click="addConditions"> 添加规则 </a-button>
        </div>
        <div v-for="(subItem, subIndex) in clientConfigsList.clientConfigs" :key="subIndex">
          <div style="display: flex">
            <div>条件{{ subIndex + 1 }}：</div>
@@ -44,34 +47,100 @@
              <a-select-option value="1,YEARS"> 近1年 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="加油频次">
          <!-- 规则类型选择：加油频次 OR 加油趋势 -->
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则类型">
            <a-select
              :disabled="subItem.timeStr == '7,DAYS' || subItem.timeStr == '30,DAYS'"
              style="width: 300px"
              v-model="subItem.countType"
              v-model="subItem.ruleType"
              placeholder="请选择"
              @change="ruleTypeChange($event, subIndex)"
            >
              <a-select-option :value="1"> 累计 </a-select-option>
              <a-select-option :value="2"> 每月 </a-select-option>
              <a-select-option :value="1"> 加油频次 </a-select-option>
              <a-select-option :value="2"> 加油趋势 </a-select-option>
            </a-select>
            <div style="display: flex">
              <a-select style="width: 150px" v-model="subItem.countRef" placeholder="请选择">
                <a-select-option :value="1"> 大于 </a-select-option>
                <a-select-option :value="0"> 等于 </a-select-option>
                <a-select-option :value="-1"> 小于 </a-select-option>
          </a-form-item>
          <!-- 加油频次配置（ruleType=1时显示） -->
          <div v-show="subItem.ruleType == 1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="加油频次">
              <a-select
                :disabled="subItem.timeStr == '7,DAYS' || subItem.timeStr == '30,DAYS'"
                style="width: 300px"
                v-model="subItem.countType"
                placeholder="请选择"
              >
                <a-select-option :value="1"> 累计 </a-select-option>
                <a-select-option :value="2"> 每月 </a-select-option>
              </a-select>
              <div style="display: flex">
                <a-select style="width: 150px" v-model="subItem.countRef" placeholder="请选择">
                  <a-select-option :value="1"> 大于 </a-select-option>
                  <a-select-option :value="0"> 等于 </a-select-option>
                  <a-select-option :value="-1"> 小于 </a-select-option>
                </a-select>
                <a-input
                  style="width: 150px"
                  placeholder="请输入次数"
                  onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                  onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
                  v-model="subItem.countNum"
                ></a-input>
              </div>
            </a-form-item>
          </div>
          <!-- 加油趋势配置（ruleType=2时显示） -->
          <div v-show="subItem.ruleType == 2">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="加油趋势">
              <a-select
                style="width: 300px"
                v-model="subItem.countTrend"
                placeholder="请选择"
              >
                <a-select-option :value="1"> 稳定 </a-select-option>
                <a-select-option :value="2"> 减少 </a-select-option>
              </a-select>
              <div v-if="subItem.countTrend == 1" style="color: #999; font-size: 12px; margin-top: 5px;">
                稳定：历史月加油次数≥次数 且 近期月加油次数≥次数
              </div>
              <div v-if="subItem.countTrend == 2" style="color: #999; font-size: 12px; margin-top: 5px;">
                减少：历史月加油次数≥次数 但 近期月加油次数<次数
              </div>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="历史月数">
              <a-select
                style="width: 140px"
                v-model="subItem.historyMonths"
                placeholder="历史月数"
              >
                <a-select-option :value="3"> 3个月 </a-select-option>
                <a-select-option :value="6"> 6个月 </a-select-option>
                <a-select-option :value="9"> 9个月 </a-select-option>
                <a-select-option :value="12"> 12个月 </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="近期月数">
              <a-select
                style="width: 140px"
                v-model="subItem.recentMonths"
                placeholder="近期月数"
              >
                <a-select-option :value="1"> 1个月 </a-select-option>
                <a-select-option :value="2"> 2个月 </a-select-option>
                <a-select-option :value="3"> 3个月 </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="固定加油次数">
              <a-input
                style="width: 150px"
                placeholder="请输入次数"
                placeholder="每月固定次数"
                onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
                v-model="subItem.countNum"
              ></a-input>
            </div>
          </a-form-item>
        </div>
        <div style="text-align: center">
          <a-button type="primary" @click="addConditions"> 增加条件 </a-button>
            </a-form-item>
          </div>
          <div style="text-align: center" v-if="subIndex === clientConfigsList.clientConfigs.length - 1">
            <a-button type="primary" @click="addConditions"> 增加条件 </a-button>
          </div>
        </div>
      </div>
    </a-spin>
@@ -119,6 +188,21 @@

  methods: {
    moment,
    buildCondition(condition = {}) {
      return Object.assign(
        {
          ruleType: 1,
          timeStr: '3,MONTHS',
          countType: 2,
          countRef: 1,
          countNum: 3,
          countTrend: null,
          historyMonths: null,
          recentMonths: null,
        },
        condition
      )
    },
    //删除条件
    delConditions(index) {
      console.log(index)
@@ -129,10 +213,46 @@
        this.clientConfigsList.clientConfigs[index].countType = 1
      }
    },
    trendChange(e, index) {
      // 选择趋势时，设置默认值
      if (e > 0) {
        this.clientConfigsList.clientConfigs[index].historyMonths = 3
        this.clientConfigsList.clientConfigs[index].recentMonths = 3
      } else {
        // 清除趋势配置
        this.clientConfigsList.clientConfigs[index].historyMonths = null
        this.clientConfigsList.clientConfigs[index].recentMonths = null
      }
    },
    ruleTypeChange(e, index) {
      let target = this.clientConfigsList.clientConfigs[index]
      // 切换规则类型时，清空对应的配置
      if (e == 1) {
        // 加油频次：清除趋势配置
        Object.assign(target, {
          ruleType: 1,
          countTrend: null,
          historyMonths: null,
          recentMonths: null,
          countType: target.countType || 2,
          countRef: target.countRef || 1,
        })
      } else if (e == 2) {
        // 加油趋势：清除频次配置，设置默认值
        Object.assign(target, {
          ruleType: 2,
          countType: 2,
          countRef: 1,
          countTrend: target.countTrend || 1,
          historyMonths: target.historyMonths || 3,
          recentMonths: target.recentMonths || 3,
        })
      }
    },
    //新增条件
    addConditions(index) {
      console.log(index)
      this.clientConfigsList.clientConfigs.push({})
      this.clientConfigsList.clientConfigs.push(this.buildCondition())
    },
    disabledDate(current) {
      // Can not select days before today and today
@@ -151,7 +271,7 @@
    add() {
      this.edit({
        clientName: '',
        clientConfigs: [{}],
        clientConfigs: [this.buildCondition()],
      })
    },
    edit(record) {
@@ -163,7 +283,11 @@
      // }
      this.visible = true
      this.model = Object.assign({}, record)
      this.clientConfigsList = record
      this.clientConfigsList = Object.assign({}, record, {
        clientConfigs: (record.clientConfigs || []).length
          ? record.clientConfigs.map((item) => this.buildCondition(item))
          : [],
      })
    },
    close() {
      this.$emit('close')
@@ -183,16 +307,20 @@
        if (JSON.stringify(el) == '{}') {
          isEmpty = true
        }
        for (let k in el) {
          if (el[k] == '' || el[k].length == '0') {
        // 根据规则类型校验
        if (el.ruleType == 1) {
          // 加油频次：检查时间范围、次数类型、关系、次数
          if (!el.timeStr || !el.countRef || !el.countType || !el.countNum) {
            isEmpty = true
          }
        }
        if (!el.timeStr || !el.countRef || !el.countType || !el.countNum) {
          isEmpty = true
          if (el.countRef == 0 || el.countNum == 0) {
            isEmpty = false
        } else if (el.ruleType == 2) {
          // 加油趋势：检查时间范围、趋势、历史月数、近期月数、次数
          if (!el.timeStr || !el.countTrend || !el.historyMonths || !el.recentMonths || !el.countNum) {
            isEmpty = true
          }
        } else {
          // 未选择规则类型
          isEmpty = true
        }
      })
      if (isEmpty) {