Vue2（4）——iHRM组织架构

组织架构-树组件应用

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

属性设置

• data(绑定数据)
• props(设置属性)- children(设置子节点的字段名)/ label(设置显示内容的字段名)
• default-expand-all(默认展开所有节点)

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

显示右侧结构

节点结构设计

使用elementui的行和列结构

行

列

组织架构-节点作用域插槽

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

/**
 * 列表型数据转化为数组结构
 */
export function transListToTreeData(list,rootValue) {
  const arr = [];
  list.forEach(item=>{
    if (item.pid==rootValue){
      //找到了匹配的节点
      arr.push(item)
      //当前节点的id和当前节点的子节点的pid是相等的
      const children = transListToTreeData(list,item.id)//找到当前节点的子节点
      item.children = children;//将子节点赋值给当前节点
    }
  })

}

组织架构-递归特点

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

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

1.注册事件

给每个选项添加command属性，方便我们定位到点击了那个菜单

2.封装组件

 3.控制显示

 组织架构-添加子部门-表单构造

  <el-dialog title="新增部门" :visible="showDialog" @close="close">
    <el-form label-width="120x">
      <el-form-item label="部门名称">
        <el-input placeholder="2-10字符" style="width: 80%" size="mini"/>
      </el-form-item>
      <el-form-item label="部门编码">
        <el-input style="width: 80%" placeholder="2-10字符" size="mini"/>
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-select style="width: 80%" placeholder="2-10字符" size="mini"/>
      </el-form-item>
      <el-form-item label="部门介绍">
        <el-input type="textarea" :row="4" style="width: 80%"  placeholder="1-100字符" size="mini"/>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12" align="center">
            <el-button type="primary" size="mini">确认</el-button>
            <el-button size="mini">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>

组织架构-添加子部门-表单校验

• 定义数据结构
• 绑定属性
• 定义规则

<template>
  <el-dialog title="新增部门" :visible="showDialog" @close="close">
    <el-form ref="addDept" :model="formData" :rules="rules" label-width="120x">
      <el-form-item lab