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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205