1.组织架构---树形结构

1.1实现组织架构布局

1.1.1实现组织架构头部-layout布局

分析结构可为发现为左右结构，可以利用layout布局快速实现，通过 flex 布局来对分栏进行灵活的对齐。

1.1.2树形组件的认识

静态结构效果：

1.1.3实现树形的静态组织架构---slot作用域插槽补充

实现效果：

此时只使用label完成不了所需要的效果，对每个层级节点增加显示内容，此时需要用到tree的插槽

slot作用域补充：

1.2 将树形的操作内容单独抽提成组件

1.2.1封装组件

通过第一个章节，我们发现，树形的顶级内容实际和子节点的内容是一致的，此时可以将该部分抽提成一个组件，节省代码

1.2.2使用组件---注意传值

同时，由于在两个位置都使用了该组件，但是放置在最上层的组件是不需要显示 删除部门和编辑部门的所以，增加一个新的属性 **isRoot（是否根节点）**进行控制

但两处有多不同，组件中，根据isRoot判断显示，从而决定显示的个数

1.3获取组织架构数据，并进行树形处理

1.3.1 封装API接口，获取组织架构数据

1.3.2将数组数据转化成树形结构---递归算法

这里需要讲拿到的列表数据转换为树形结构我们需要将列表型的数据，转化成树形数据，这里需要用到递归算法 封装一个工具方法 src/utils/index.js

调用转化方法，转化树形结构

  this.company = { name: result.companyName, manager: '负责人' } // 这里定义一个空串  因为 它是根 所有的子节点的数据pid 都是 ""
  this.departs = transListToTreeData(result.depts, '')

2.部门的管理---实现增加功能前期准备---表单验证的实现

2.1表单样式以及弹出层的显示隐藏

2.1.1新增部门的样式完成

然后，我们需要构建一个新增部门的窗体组件 src/views/department/components/add-dept.vue（里面设计大量的子父传值）

2.1.2控制显示和隐藏---只是其中一步

通过showDialog属性来进行控制的，从而控制组件的显示或者隐藏流程：

在父组件中使用该组件的地方进行传值：

2.1.3点击新增部门显示弹层组件--下拉菜单借助command

此时页面还无法实现该功能，当点击新增部门时，弹出组件------>注意，点击新增时tree组件，所以这里，我们仍然需要子组件调用父组件-----子向父传，实现点击弹窗取消/关闭效果 dropdown

实现点击显示弹出层，需要借助自定义事件（子向父传数据）

父组件代码：

子组件代码：

command 作为 Dropdown的事件点击菜单项触发的事件回调
command 作为 Dropdown Menu Item 的属性起标记作用 点击的操作发生在子组件 tree-tools.vue里

2.1.4实现点击弹窗取消/关闭效果

departments/components/add-dept.vue

<el-dialog title="新增部门" :visible.sync="showDialog" :before-close="handleClose">
  // 中间代码身略
</el-dialog>
methods: {
    handleClose() {
      this.$emit('update:showDialog', false)
    }
  }

2.2新增部门的规则校验前期准备---输入框的校验

2.2.1完成新增表单的基本校验条件

完成表单校验需要的前置条件

el-form配置model和rules属性
el-form-item配置prop属性
表单进行v-model双向绑定

#

2.2.2基本校验规则

es: {
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }],
        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' }],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }]
      }

2.2.3 部门名称和部门编码的自定义校验-----不允许重复部门名称和部门编码---重点

首先，在校验名称和编码的时候，要获取最新的组织架构，这也是这里的trigger采取blur的原因，因为change对于访问的频率过高，我们需要控制访问频率

2.2.3.1部门名称校验在整个模块中都不允许重复

需要通过父组件传入新增的节点：

子组件接瘦props:

需要整个组织架构的列表数据

2.2.3.2部门编码校验同级部门中禁止出现重复部门

2.2.3.3处理首部内容的pid数据---重要

在最根部的tree组件中，由于treenode属性没有id，id便是undefined，但是通过undefined进行等值判断是寻找不到对应的根结点的，所以在传值时，我们将id属性设为“”

2.3新增部门功能-部门负责人数据---下拉框数据的获取

需求：获取新增表单中的部门负责人下拉数据

在上节的表单中，部门负责人是下拉数据，我们应该从**员工接口**中获取该数据

首先，封装获取简单员工列表的模块 src/api/employees.js 然后在，添加组件中的select聚焦事件focus中调用该接口，因为我们要获取实时的最新数据，而不是初始化数据时

3. 新增部门功能

需求：完成新增模块的提交-取消-关闭等功能

3.1校验通过，调用新增接口---提交新增

封装新增部门的api模块 src/api/departments.js 1.当点击新增页面的确定按钮时，我们需要完成对表单的整体校验，如果校验成功，进行提交传入接口的数据：--------->需要pid

父组件绑定自定义事件：

3.2确定时关闭弹出层--利用sync修饰符关闭新增弹层---关闭---sync

按照常规的，想要让父组件更新showDialog的话，需要通过属性控制但是vue.js为我们提供了sync修饰符，它提供了一种简写模式，只要用sync修饰，就可以省略父组件的监听和方法，直接将值赋给showDialog即可 //子组件update:固定写法（update:props名称，值） .sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

传统写法：