Vue 小结

实现删除部门功能

要完成组织架构中的删除部门功能, 先封装一个删除方法, 因为删除的是指定项, 可以通过传入id的方式来确认要删除的数据, 用模版的方式将获取到的 id 拼接到路径上

export function delDepartments(id) {
  return request({
    url: `/company/department/${id}`,
    method: 'delete'
  })
}

然后监听下拉菜单的点击事件

<el-dropdown @command="operateDepts">
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="add">添加</el-dropdown-item>
    <el-dropdown-item command="edit">编辑</el-dropdown-item>
    <el-dropdown-item command="del">删除</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

再监听这个事件

operateDepts(type) {
   if (type === 'add') {
      // 添加操作
   } else if (type === 'edit') {
      //  编辑操作
   } else {
      //  删除操作
      //  调用封装好的方法,再将获取到的id值传入
   }
}

删除成功后, 使用 $emit 给父组件传一个自定义事件, 父组件接收并调用获取部门数据的方法, 使父组件更新数据

实现新增部门功能

先封装新增部门的方法, 再构建一个新增部门的窗口的组件 (使用表单组件构建), 设置一个变量来控制这个窗口组件的显示与隐藏, 默认为 false , 点击新增部门则变为 true

子组件触发新增事件, 将当前部门的数据传给父组件, 父组件监听这个事件,获取到数据, 就可以判断是在哪个节点下添加子部门

在新增部门时需要一个表单验证,因为同一个部门下,不可能同时出现俩个相同的部门,且部门的编码是唯一的, 需要一个自定义校验规则来实现

const checkNameRepeat = async(rule, value, callback) => {
   // 先要获取最新的组织架构数据
   const { depts } = await getDepartments()
   // depts是所有的部门数据
   // 遍历数据,筛选判断子部门的相关数据是否重复
   const isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
   isRepeat ? callback(new Error(`同级部门下已经有${value}的部门了`)) : callback()
}