组织结构业务逻辑整理

数据回显

在点击编辑按钮时，拿到当前列的详情

// 右侧 - 编辑子部门
async edit(data) {
    this.clickDepartId = data.id // 编辑的部门id
    this.showDepartDialog = true // 弹窗显示
    const res = await getDepartDetailAPI(data.id)
    this.$refs.departDialog.form = res.data // 影响组件表单里对象
}

编辑-添加

根据编辑状态, 在点击确定来判断如何调用接口

// 新增-添加部门的方法
async addDepartmentsFn(dataObj) {
    if (this.isEdit) { // 编辑状态
        dataObj.id = this.clickDepartId
        const res = await updateDepartmentsAPI(dataObj)
        console.log(res)
    } else { // 新增状态
        dataObj.pid = this.clickDepartId
        const res = await addDepartmentsAPI(dataObj)
        console.log(res)
    }
    // 更新列表
    this.getDepartMentsListFn()
}

添加子部门-编号非重验证

目标： 实现表单数据校验：新添加的模块的部门编码在整个模块中都不允许重复，如果是编辑时，则必须要在不能使用的部门编号中排除当前正在编辑的部门编码。

1. 在子组件的 data() 中，添加 validCode 自定义校验函数

data() {
  // 校验部门编码是否重复
  const validCode = (rule, value, callback) => {
    // 判断是否能否找到对应的部门，如果找到了则返回该对象
    let existCodeList = this.originList.map(item => item.code)

    // 如果是编辑状态，则将需要编辑的这一项排除在外
    if (this.isEdit) {
      existCodeList = this.originList.filter(item => item.id !== this.parentId).map(item => item.code)
    }

    // 如果存在该对象，则说明编码已经存在，抛出错误
    existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
  }
}

2. 并在rules中，将它添加到对code的验证规则数组中去

data() {
  return {
    rules: [
      // 其他略……
      code: [
        { required: true, message: '部门编码不能为空', trigger: 'blur' },
        { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
        { validator: validCode, trigger: 'blur' }
      ]
    ]
  }
}

添加子部门-名字非重验证

目标： 实现表单数据校验：添加的模块的部门名字在同级部门中不允许重复，做编辑时，没有做校验，还可以使用同级部门的名字

1. 在子组件的 data() 中，添加 validName自定义校验函数

// 同级部门禁止出现重复部门
const validName = (rule, value, callback) => {
    // 查找同级的分类
    // 先筛选属于这个pid下属的(parentId就是id)部门对象, 然后映射name名字数组
    // this.originList - 是所有的和所有层级的数组
    // 找到父级数组们
    let existNameList = this.originList.filter(item => item.pid === this.parentId).map(item => item.name)

    // 如果是编辑的情况
    if (this.isEdit) {
        // 找到部门的当前对象
        const dept = this.originList.find(item => item.id === this.parentId)
        // 取出父级的 id (当前对象的pid)
        const pid = dept.pid
        // 过滤，筛选出同一级别的数据, 但是id不包含当前编辑部门的id, 映射返回name名字数组
        existNameList = this.originList
            .filter(item => item.pid === pid && item.id !== this.parentId)
            .map(item => item.name)
    }

    // 判断最新输入的部门名称是否存在
    existNameList.includes(value) ? callback(new Error('名字' + value + '已经被占用了')) : callback()
}

2. 并在 rules 中，将它添加到对 name 的验证规则数组中去

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