el-form for循环动态校验规则

<!--
 * @Description: 
 * @Author: Ran junlin
 * @Date: 2023-08-05 15:16:55
 * @LastEditTime: 2023-09-19 17:13:33
 * @LastEditors: Ran junlin
-->
<template>
  <el-form
    style="width: 100%"
    size="mini"
    :model="form"
    :rules="rules"
    ref="form"
    label-width="220px"
    label-position="right"
  >
    <!-- 基本信息 -->
    <div class="font_16 font_bold l_h_100_per flex-between">
      <span class="title-red">设置设备库存在低于配置的该数量时，进行预警</span>
      <el-button size="small" type="primary" :loading="pending" @click="save">保存</el-button>
    </div>
    <el-form-item label="是否开启预警：" prop="openStatus">
      <el-radio-group v-model="form.openStatus">
        <el-radio label="Y">开启</el-radio>
        <el-radio label="N">不开启</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- v-if="form.openStatus === 'Y'" -->
    <template>
      <div class="dis_grid grid_tem_col_rep_2_1fr">
        <el-form-item
          v-for="(item, index) in form.earlyWarningConfig"
          :key="index"
          :label="item.earlyWarningTypeName + '预警库存数：'"
          :prop="'earlyWarningConfig.' + index + '.earlyWarningNum'"
          :rules="getValidationRules(item)"
        >
          <!-- @change="handleInputChange(index)" -->
          <el-input-number
            :ref="`earlyWarningConfig.${index}.earlyWarningNum`"
            v-model="item.earlyWarningNum"
            @change="handleInputChange(index)"
            :min="0"
          ></el-input-number>
        </el-form-item>
      </div>
    </template>
  </el-form>
</template>
<script>
import { engineersEarlyWarning, engineersEarlyWarningSave } from '@/api/customer/engineer';
export default {
  name: 'chargeWarn',
  props: {
    infoForm: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    rules() {
      return {
        earlyWarningNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        openStatus: [{ required: true, message: '请输入选择', trigger: 'blur' }]
      };
    }
  },
  data() {
    return {
      pending: false,
      form: {
        openStatus: 'N',
        earlyWarningConfig: [
          { earlyWarningNum: 0, earlyWarningType: 'WIRELESS', earlyWarningTypeName: '无线设备' },
          { earlyWarningNum: 0, earlyWarningType: 'WIRED', earlyWarningTypeName: '有线设备' },
          { earlyWarningNum: 0, earlyWarningType: 'WIRELESS_REPLENISH', earlyWarningTypeName: '无线设备补货' },
          { earlyWarningNum: 0, earlyWarningType: 'WIRED_REPLENISH', earlyWarningTypeName: '有线设备补货' }
        ]
      }
    };
  },
  created() {
    //this.getEngineersEarlyWarning();
  },
  methods: {
    // getValidationRules (item) {
    //   console.log(item);
    //   // 返回动态的验证规则
    //   return [{ required: true, message: '请填写', trigger: 'blur' }];
    // },
    getValidationRules(item) {
      // 自定义校验规则
      return [
        { required: true, message: '请输入数量', trigger: 'change' },
        {
          validator: (rule, value, callback) => {

            // 获取有线设备补货的数量
            const wiredReplenishNum = this.form.earlyWarningConfig.find(
              config => config.earlyWarningType === 'WIRED_REPLENISH'
            ).earlyWarningNum;

            // 获取无线设备补货的数量
            const wirelessReplenishNum = this.form.earlyWarningConfig.find(
              config => config.earlyWarningType === 'WIRELESS_REPLENISH'
            ).earlyWarningNum;

            // 获取有线设备预警的数量
            const WIREDNum = this.form.earlyWarningConfig.find(
              config => config.earlyWarningType === 'WIRED'
            ).earlyWarningNum;

            // 获取无线设备预警的数量
            const WIRELESSNum = this.form.earlyWarningConfig.find(
              config => config.earlyWarningType === 'WIRELESS'
            ).earlyWarningNum;

            // 判断有线设备数量是否小于有线设备补货数量
            if (item.earlyWarningType === 'WIRED' && value >= wiredReplenishNum) {
              callback(new Error('有线设备数量必须小于有线设备补货'));
            }

            // 判断无线设备数量是否小于无线设备补货数量
            if (item.earlyWarningType === 'WIRELESS' && value >= wirelessReplenishNum) {
              callback(new Error('无线设备数量必须小于无线设备补货'));
            }

            // 判断有线设备数量是否小于有线设备补货数量
            if (item.earlyWarningType === 'WIRED_REPLENISH' && value <= WIREDNum) {
              callback(new Error('有线设备数量必须大于有线设备补货'));
            }

            // 判断无线设备数量是否小于无线设备补货数量
            if (item.earlyWarningType === 'WIRELESS_REPLENISH' && value <= WIRELESSNum) {
              callback(new Error('无线设备数量必须大于无线设备补货'));
            }

            callback();
          },
          trigger: 'blur'
        }
      ];
    },
    handleInputChange() {
      // const ref = this.$refs[`earlyWarningConfig.${index}.earlyWarningNum`][0];
      // ref && ref.focus();
      this.$refs.form.validate();
      // this.$refs.form.validateField(`earlyWarningConfig.${index}.earlyWarningNum`);
    },
    async getEngineersEarlyWarning() {
      try {
        this.pending = true;
        const { engineerNo } = this.infoForm;
        const data = await engineersEarlyWarning(engineerNo);
        console.log(data);
        const { openStatus, earlyWarningConfig } = data;
        this.form = {
          openStatus,
          earlyWarningConfig
        };
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.pending = false;
      }
    },
    async save() {
      try {
        // 验证表单
        const validationResult = await this.$refs.form.validate();

        if (!validationResult) {
          // 如果验证失败，则提示相应的错误信息
          throw new Error('请检查表单数据');
        }
        this.pending = true;
        const { engineerNo } = this.infoForm;
        await engineersEarlyWarningSave({ ...this.form, engineerNo });
        await this.getEngineersEarlyWarning();
        this.msg({
          type: 'success',
          content: '保存成功'
        });
      } catch (error) {
        // 处理其他异常，包括验证失败时抛出的异常
        this.msg({
          type: 'error',
          content: error || '请检查表单数据'
        });
      } finally {
        this.pending = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title-red {
  color: red;
  margin-bottom: 10px;
  font-size: 15px;
}
</style>