验证部分表单是否重复

1. 效果

• 图片中的名称、机构编码需要进行重复验证

2. 思路及实现

1. 表单验证

• 在获取数据将需要验证的表单数据进行保存

    this.nameChangeTemp = response.data.orgName;
    this.codeChangeTemp = response.data.orgCode;

• 通过rule对表单进行验证
  以名字的验证为例

    rules: {
        orgName: [
        // 设置为必传
        { required: true, message: "请输入用户", trigger: 'blur' },
        // 设置长短
        { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: 'blur' },
        // 通过方法进行验证
        { validator: validateIsReOrgName, trigger: 'blur' }
        ],
    }
    ...
    var validateIsReOrgName = (rule, value, callback) => {
    let obj = {
        orgName: value
    }
    //  如果没有发生编辑，那么就直接返回
    if (value === this.nameChangeTemp) {
        callback();
        return
    }
    // 通过接口访问后台，然后确定通过后台的数据，判断是否重复
    isNameDuplication(obj).then((res) => {
        if (res.data) {
            callback(new Error('机构重名，请重新输入'));
        }
        callback();
        })
    }

2. 更新时，对输入框内容的处理

• 更新时，如果需要验证的内容没有发生改变，那么就不需要传到后台。
• 这儿有两种方式可以知道内容是否发生改变：
  （1）一种是1中验证的时候，然后验证通过设置标志位；
  （2）通过change事件；
  这儿我们通过change事件完成

    // 表单部分，以名称为例
    <el-form-item label="名称" prop="orgName" ref="orgName">
        <el-input v-model="form.orgName" placeholder="请输入名称" :disabled="form.orgName==='云课堂'" @change="nameChange"></el-input>
    </el-form-item>
    ......
    // 事件驱动程序   
    nameChange () {
      this.nameChangeMark = true;
    },
    codeChange () {
      this.codeChangeMark= true;
    }
    // 进行编辑时的请求，首先通过delete将这两个属性去掉，再根据标志位将对应的属性添加进来
    let obj = deepClone(this.form) // 这儿对表单里面的数据进行深度赋值
    delete obj.orgName;
    delete obj.orgCode;
    if (this.nameChangeMark) {
        obj.orgName = this.form.orgName;
    }
    if (this.codeChangeMark) {
        obj.orgCode = this.form.orgCode;
    }
    putObj(obj).then(res => {
        if (!res || res.status !== 200) {
            this.$message.error(res.message)
            return
        }
        this.showValue();
        this.$message({
            message: '更新成功',
            type: 'success'
        });
    });