vue多个输入框，各输入值之间相互影响。

需求描述：

表单含有3个输入框

1）额定电压：必填项，数值，手动录入，最大录入40字，默认单位为V，保留1为小数
2）最大电压：必填项，数值，手动录入，最大录入40字，默认单位为V，数值须大于额定电压数值，保留1为小数
3）最小电压：必填项，数值，手动录入，最大录入40字，默认单位为V，数值须小于额定电压数值，保留1为小数

<template>
   <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="12">
            <a-form-model-item label="额定电压" required prop="ratedVoltage">
              <a-input v-model="model.ratedVoltage" @blur="ratedVoltageInput" suffix="V" :max-length="40" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="最大电压" required prop="maxVoltage">
              <a-input v-model="model.maxVoltage" ref="maxV" :disabled="model.ratedVoltage == null" suffix="V" :max-length="40" placeholder="请先输入额定电压" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="最小电压" required prop="minVoltage">
              <a-input v-model="model.minVoltage" ref="minV" :disabled="model.ratedVoltage == null" suffix="V" :max-length="40" placeholder="请先输入额定电压" />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="最大温度" required prop="maxTemperature">
              <a-input v-model="model.maxTemperature" suffix="℃" :max-length="40" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="最小温度" required prop="minTemperature">
              <a-input v-model="model.minTemperature" suffix="℃" :max-length="40" placeholder="请先输入最大温度" />
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { addApi, editApi } from '@/api/platform/model'
export default {
  name: 'modelAddModal',
  data() {
    return {
      title: '操作',
      visible: false,
      layout: {
        labelCol: { span: 9 },
        wrapperCol: { span: 15 },
      },
      confirmLoading: false,
      model: {},
      validatorRules: {
        
        ratedVoltage: [
          { required: true, message: '请输入额定电压!' },
          { min: 0, max: 40, message: '长度不超过 40 个字符', trigger: 'blur' },
          { validator: this.validateNum }
        ],
        maxVoltage: [
          { required: true, message: '请输入最大电压!' },
          { min: 0, max: 40, message: '长度不超过 40 个字符', trigger: 'blur' },
          { validator: this.validateMaxV }
        ],
        minVoltage: [
          { required: true, message: '请输入最小电压!' },
          { min: 0, max: 40, message: '长度不超过 40 个字符', trigger: 'blur' },
          { validator: this.validateMinV }
        ],
        
        maxTemperature: [
          { required: true, message: '请输入最大温度!' }, 
          { min: 0, max: 40, message: '长度不超过 40 个字符', trigger: 'blur' },
          { validator: this.validateMaxT }
        ],
        minTemperature: [
          { required: true, message: '请输入最小温度!' }, 
          { min: 0, max: 40, message: '长度不超过 40 个字符', trigger: 'blur' },
          { validator: this.validateMinT }
        ],
      },
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    edit(record, type) {
      // console.log(record, this.modelDefault)
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$refs.form.clearValidate()
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let obj
          if (!this.model.modelId) {
            obj = addApi(this.model)
          } else {
            obj = editApi(this.model)
          }
          obj
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    
    // 如果修改额定电压的值，则清空最大电压和最小电压
    ratedVoltageInput(e) {
      console.log(e)

      let val = e.target._value
      if(val  < this.model.maxVoltage) {
        this.$refs['form'].clearValidate(['maxVoltage'])
      } else if (val  = this.model.maxVoltage || val  > this.model.maxVoltage) {
        // 聚焦到指定输入框，触发校验
        this.$refs.maxV.focus();
      }
      if(val  > this.model.minVoltage) {
        this.$refs['form'].clearValidate(['minVoltage'])
      } else if (val  = this.model.maxVoltage || val  > this.model.maxVoltage) {
        // 聚焦到指定输入框，触发校验
        this.$refs.minV.focus();
      }
      
      // this.$set(this.model, 'maxVoltage', undefined)
      // this.$set(this.model, 'minVoltage', undefined)
    },
    // 表单校验函数--start
    // 只能输入整数
    validateInt(rule, value, callback) {
      if (new RegExp(/^\d+$/).test(value)) {
        callback()
      } else {
        callback('请输入整数!')
      }
    },
    // 可以输入数字和小数
    validateNum(rule, value, callback) {
      const number = Number(value); // 将输入转换为数字
      if (!Number.isNaN(number)) { // 检查是否为非数字
        callback()
      } else {
        callback('请输入数值!')
      }
    },
    // 最大电压 小于 额定电压数值
    validateMaxV(rule, value, callback) {
      const number = Number(value); // 将输入转换为数字
      if (!Number.isNaN(number)) { // 检查是否为非数字
        if(Number(this.model.ratedVoltage)) {
          if(number > this.model.ratedVoltage) {
            callback()
          } else {
            callback('最大电压 须大于 额定电压数值!')
          }
        } else {
          callback()
        }
      } else {
        callback('请输入数值!')
      }
    },
    // 最小电压 大于 额定电压数值
    validateMinV(rule, value, callback) {
      const number = Number(value); // 将输入转换为数字
      if (!Number.isNaN(number)) { // 检查是否为非数字
        if(Number(this.model.ratedVoltage)) {
          if(number < this.model.ratedVoltage) {
            callback()
          } else {
            callback('最小电压 须小于 额定电压数值!')
          } 
        } else {
          callback()
        }
      } else {
        callback('请输入整数!')
      }
    },
    // 最大温度 大于 最小温度数值
    validateMaxT(rule, value, callback) {
      const number = Number(value); // 将输入转换为数字
      if (new RegExp(/^\d+$/).test(value)) {
        if(Number(this.model.minTemperature)) {
          if(number > this.model.minTemperature) {
            callback()
          } else {
            callback('最大温度 须大于 最小温度数值!')
          }
        } else {
          callback()
        }
      } else {
        callback('请输入整数!')
      }
    },
    // 最小温度 小于 最大温度数值
    validateMinT(rule, value, callback) {
      const number = Number(value); // 将输入转换为数字
      if (new RegExp(/^\d+$/).test(value)) {
        if(Number(this.model.maxTemperature)) {
          if(number < this.model.maxTemperature) {
            callback()
          } else {
            callback('最小温度 须小于 最大温度数值!')
          }
        } else {
          callback()
        }
      } else {
        callback('请输入数值!')
      }
    },
    // 表单校验函数--end
  },
}
</script>

<style scoped>
</style>