表单验证 -- 同级部门禁止出现重复部门

一.添加的部门名称在同级部门中不允许重复

         1. 在某个部门上点击添加时， 被占用的名字列表 = 这个部门的子部门

        2. 添加 validName自定义校验函数

                1.在某个部门上点击 编辑时：被占用的名字列表 = 当前部门的兄弟部门 - 它自己的名字

                

 

var arr originList = [
  {id:'01', pid:'', name:'财务部'},
  {id:'02', pid:'01', name:'财务核算部'},
  {id:'03', pid:'01', name:'税务核算部'},
  {id:'04', pid:'01', name:'薪资核算部'},
]

// 自定义验证函数
// 验证部门名称是否重复
const validName = (rule, value, callback) => {
  // 1. 如果是添加，先使用 filter 筛选出 pid 一致的兄弟节点
  // 在然后，使用 map 将同级的 name 全局取出，组装成一个数组
  let existNameList = this.originList.filter(item => item.pid === this.parentId).map(item => item.name)

  // 3. 编辑时的校验
  if (this.isEdit) {
    // 3.1 【先找到自身对应的对象】
    // 找到父级的 id，因为父级的 id 和 子级的 pid 一致
    // 所以只要使用 find 判断每一项 id 和 传入的 id 是否一致，就可以获取到当前编辑这一项的对象
    const dept = this.originList.find(item => item.id === this.parentId)

    // 3.2 【获取父级的 id】，因为父级的 id 和 子级的 pid 一致，直接 【对象.pid】 就能够获取到父级的 id
    const pid = dept.pid

    // 3.3 既然已经有了父级 id，只需获取兄弟节点：从 originList 中筛选出和 父级 id 一致的 pid
    // 先使用 filter 筛选出兄弟节点，同时将自己排除
    // 在使用 map 方法将兄弟节点的 name 组装成一个数组
    existNameList = this.originList
      .filter(item => item.pid === pid && item.id !== this.parentId)
      .map(item => item.name)
  }

  // 2. 使用 includes 方法检测是否存在同名的 name
  existNameList.includes(value) ? callback(new Error(`部门名称${value}已存在`)) : callback()
}