前端贾公子

人力资源管理后台 === 组织架构

目录

1.组织架构-树组件应用

2.组织架构-树组件自定义结构

3.组织架构-获取组织架构数据

4.组织架构-递归转化树形结构

5.组织架构-添加子部门-新建弹层组件

6.组织架构-添加子部门-表单结构

7.组织架构-添加子部门-表单基本校验

8.组织架构-添加子部门-表单业务校验

9.组织架构-添加子部门-获取负责人数据

10.组织架构-添加子部门-记录部门

11.组织架构-添加子部门-确定取消

1.组织架构-树组件应用

树形组件-用层级结构展示信息，可展开或折叠。

element-ui提供了树组件el-tree的应用
data（绑定数据）
props (设置属性) - children(设置子节点的字段名) / label(设置显示内容的字段名)
default-expand-all (默认展开所有节点)
在组织架构组件中放置树形组件-代码位置(src/views/department/index.vue)

声明树组件相关的数据

export default {
  name: 'Department',
  data() {
    return  {
      depts: [{
        name: '传智教育',
        children: [
          { name: '总裁办'},
          { name: '行政部'},
          { name: '财务部'}
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
}

2.组织架构-树组件自定义结构

通过在el-tree中传入插槽内容，就可以渲染数据

自定义树形结构-代码位置(src/views/department/index.vue)

样式-代码位置(src/views/department/index.vue)

3.组织架构-获取组织架构数据

封装获取组织的API-代码位置(src/api/department.js)

import request from '@/utils/request'

/**
 *
 * 获取组织架构数据
 *
*/
export function getDepartment() {
  return request({
    url: '/company/department'
  })
}

在组织架构初始化时调用方法-代码位置(src/views/department/index.vue)

4.组织架构-递归转化树形结构

首先分析数据的关联关系
封装递归函数根据关联关系转化层级结构

通过分析了解到，父级的id为子级的pid

封装公共方法-代码位置(src/utils/index.js)

/**
 *
 * 列表型数据转化树形
*/

export function transListToTreeData(list, rootValue) {
  const arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 找到了匹配的节点
      // 当前节点的id 和 当前节点的子节点的pid是想等的
      const children = transListToTreeData(list, item.id) // 找到的节点的子节点
      item.children = children  // 将子节点赋值给当前节点
      arr.push(item)
    }
  })
  return arr
}

获取完的组织数据使用转化方法转化成树形-代码位置(src/views/department/index.vue)

  created() {
    this.getDepartment() // 调用获取数据的接口
  },
  methods: {
    // 封装好方法
    async getDepartment() {
      const result = await getDepartment()
      this.depts = transListToTreeData(result, 0)
    }
  }

总结：递归特点

一般用来处理未知层级的数据
递归要有跳出条件
自身调用自身时参数不能重复

5.组织架构-添加子部门-新建弹层组件

步骤：

注册添加子部门事件
封装弹层组件
控制弹层显示隐藏
注册下拉菜单点击事件-代码位置(src/views/department/index.vue)