一、编码不重复

1.获取简略信息

使用数组的map方法,和解构,获得新的数组

// (2)加工数据originList,需要的简略信息为:code,id,pid,name
this.originList = res.data.depts.map(({ code, id, pid, name }) => { return { code, id, pid, name } })

2.自定义编码校验规则

思路：

• (1)传入的value编码不能和其他编码重复
• (2)得到一个编码数组,使用数组map方法获得单独编码数组
• (3)如果编码数组中没有value则校验通过,否则不通过,
• 使用数组的some或者includes方法判断是否有value
• 如果有则报错已经存在没有则继续执行

注意:自定义校验规则写的位置为位置1,不是位置2,

  data() {
    位置1
    return {
      位置2
    }
  },

 // 自定义校验规则
    var validCode = (rule, value, callback) => {
      // (1)传入的value编码不能和其他编码重复
      // (2)得到一个编码数组
      const existCodeList = this.originList.map(item => item.code)
      // (3)如果编码数组中没有value则校验通过,否则不通过
      existCodeList.some(item => item === value) ? callback(new Error(`编码${value}已经存在`)) : callback()
      // existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
    }

3.自定义校验规则使用

• 在data中的数据的校验规则的编码部分补充

{ validator: validCode, trigger: 'blur' }

 rules: {
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门编码要求1-50个字符',
            trigger: 'blur'
          },
          { validator: validCode, trigger: 'blur' }
        ],
      }

4.新增和编辑共用一个验证规则时的问题解决

• 新增时编码不能与其他编码相同
• 但是编辑时一般不修改编码,但是还是会报编码重复
• 解决方法:如果是编辑时,要在不能使用的部门编号中排除现在的部门编号

在编码校验时加入一个判断代码:

• 先用filter筛选出和编辑的id不同的部门信息,然后用map返回新的编码数组

    // 自定义校验规则
    var validCode = (rule, value, callback) => {
      // (1)传入的value编码不能和其他编码重复
      // (2)得到一个编码数组
      let existCodeList = this.originList.map(item => item.code)
      // (2.1)如果是编辑则去除本部门的编码
  +    if (this.isEdit) {
  +      existCodeList = this.originList.filter(item => item.id !== this.id).map(item => item.code)
  +   }
      // (3)如果编码数组中没有value则校验通过,否则不通过
      existCodeList.some(item => item === value) ? callback(new Error(`编码${value}已经存在`)) : callback()
      // existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
    }

二、部门名称同级不重复(新增和编辑)

1.自定义部门名校验规则

思路 :

• (1)传入的value编码不能和其他编码重复
• (2)筛选出当前选中部门的子部门,即部门pid和当前选中的id相同的部门
• (3)如果编码数组中没有value则校验通过,否则不通过

 const validName = (rule, value, callback) => {
      // (1)传入的value编码不能和其他编码重复
      // (2)筛选出当前选中部门的子部门,即部门pid和当前选中的id相同的部门
      let existName = this.originList.filter(item => item.pid === this.id).map(item => item.name)
      // (3)如果编码数组中没有value则校验通过,否则不通过
      existName.some(item => item === value) ? callback(new Error(`部门${value}已经存在`)) : callback()
      // existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
    }

2.自定义部门名校验规则使用

      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门名称要求1-50个字符',
            trigger: 'blur'
          },
          { validator: validName, trigger: 'blur' }
        ]}

3.新增和编辑共用一个验证规则时的问题解决

增加编辑时的判断,如果是编辑情况:

如果是编辑筛选出同父部门的其他子部门name,即部门pid和当前选中的pid相同的部门,然后去除自己

• 1.先找到当前选中部门的pid :item.id===this.id
• • filter和find方法,filter返回的是一个数组,即使只有一个元素,find返回的是一个元素
• 2.筛选出和当前选中部门pid相同pid的部门同时去除自身部门即当前部门兄弟部门
• • item.id=pid && item.id !== this.id

增加代码部分在前面已经用+标出

    const validName = (rule, value, callback) => {
      // (1)传入的value编码不能和其他编码重复
      // (2)筛选出当前选中部门的子部门,即部门pid和当前选中的id相同的部门
      let existName = this.originList.filter(item => item.pid === this.id).map(item => item.name)
      // (2.1)如果是编辑筛选出同父部门的其他子部门name,即部门pid和当前选中的pid相同的部门,然后去除自己
  +    if (this.isEdit) {
        // 先找到当前选中部门的pid  filter和find方法,filter返回的是一个数组,即使只有一个元素,find返回的是一个元素
        // const pid = this.originList.filter(item => item.id === this.id)[0].pid
  +      const pid = this.originList.find(item => item.id === this.id).pid
  +      // 筛选出和当前选中部门pid相同pid的部门同时去除自身部门即当前部门兄弟部门
  +      existName = this.originList.filter(item => item.pid === pid && item.id !== this.id).map(item => item.name)
  +      console.log(existName)
  +    }
      // (3)如果编码数组中没有value则校验通过,否则不通过
      existName.some(item => item === value) ? callback(new Error(`部门${value}已经存在`)) : callback()
      // existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
    }

三、总结

自定义校验规则validator

validator: function (rule, value, callback) {}

rule : 当前的规则 value : 被校验的值 callback : 回调

• 如果通过了规则检验，直接调用callback()
• 如果没有通过规则检验，调用callback(错误对象，在错误对象中说明原因)
• callback(new Error('错误说明')

数组的find和filter方法

• filter返回的是一个满足条件的所有元素组成的数组,即使只有一个元素,返回的也是一个元素的数组,要取到这个值则需要取数组下标为0的元素
• find返回的是一个元素,第一个满足条件的元素