关于树状结构,表单校验

添加编辑部门遵循,同级部门名称不能重复,所有部门标识不能重复

先看下前置代码

 

 接下来就是表单校验的部分

需要注意:点击添加的时候,把当前元素的id赋值给了表单的pid,而点击编辑的时候,是直接把当前整个编辑的对象,赋值给了表单,这个时候的id和pid都是元素本身的pid和id,

1.校验权限标识,校验规则是所有权限标识不能重复,编辑自身时,可以使用自身的权限标识

const validCode = (rule, value, callback) => {
const mylist = this.myvalidator//this.myvalidator 是获取表单时原始数据,还没有转化为树
      let code = []//先定义一个空数组
      if (this.isEdit) {//判断是否为编辑状态
        code = mylist.filter(it => it.id !== this.formData.id).map(item => {
          return item.code
        })//如果是编辑状态,过滤出除自身之外的所有对象,然后取其code权限标识
      } else {
        code = mylist.map(item => {
          return item.code
        })//如果是添加状态,直接过滤出所有的code权限标识
      }

      if (code.includes(value)) {//判断表单的value 在所有的code权限标识里面有没有,如果有提示错误,如果没有,验证完成
        callback(value + '已被占用')
      }
      callback()
    }

2.部门名称校验,校验规则是同级部门名称不能重复,编辑自身时可以使用自身的部门名称

    const validName = (rule, value, callback) => {
      // 添加时的校验： 名字不能取子元素的名字
      const mylist = this.myvalidator //this.myvalidator 是获取表单时原始数据,还没有转化为树
      let myname = mylist.filter(item => item.pid === this.formData.pid)//点击添加时过滤出所有下级部门的数据,这个时候的this.formData.pid,还是点击的那个元素的id,注意
      console.log(myname)
      if (this.isEdit) {
        // 编辑时的校验： 名字不能取兄弟（排除自己）的名字
        // 找兄弟，排除自己
        myname = mylist.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id)//如果是点击了编辑按钮,则过滤出所有同级,这个时候的this.formData.pid则是点击编辑的这个元素的pid
      }//再把得到的所有元素取其name,放到一个数组里面,进行判断
      myname.map(it => it.name).includes(value)
        ? callback(new Error(value + '已经占用'))
        : callback()
    }