今日总结 2024-12-24

树组件基础应用 ：element-ui 的 el-tree 组件用于层级结构信息展示，通过 data 绑定数据，利用 props 设置如 children（子节点字段名）、label（显示内容字段名）等属性，还能使用 default-expand-all 控制默认展开状态，在组织架构组件 src/views/department/index.vue 中引入使用，并声明相关数据。
自定义树形结构 ：往 el-tree 传入插槽内容实现自定义渲染，相关代码同样在 src/views/department/index.vue 中，涉及样式调整也在此文件。
数据获取 ：在 src/api/department.js 封装获取组织架构数据的 API ，并于 src/views/department/index.vue 初始化组织架构时调用该方法。
递归转化树形结构 ：分析数据关联关系（父级 id 为子级 pid）后，在 src/utils/index.js 封装递归函数将扁平数据转化为树形，获取到的数据在 src/views/department/index.vue 使用该方法转换。递归处理未知层级数据，要有跳出条件且自身调用自身时参数不能重复。
javascript 复制代码
```
export function transformToTree(data, pid = 0) {
  const result = [];
  data.forEach(item => {
    if (item.pid === pid) {
      const children = transformToTree(data, item.id);
      if (children.length > 0) {
        item.childNodes = children;
      }
      result.push(item);
    }
  });
  return result;
}
```
添加子部门流程 ：
- 弹层组件 ：从注册添加子部门事件开始，历经封装弹层组件、控制显示隐藏，涉及多处 src/views/department/index.vue 代码，还封装了 src/views/department/components/add-dept.vue 新增组件，利用 sync 修饰符监听子组件事件来修改父组件值，同时设置 el-tree 点击属性。
- 表单结构与校验 ：在 src/views/department/components/add-dept.vue 中搭建表单结构，分基本校验（必填、长度限制）和业务校验（名称、编码不重复），按定义数据架构、绑定属性、定义规则步骤操作。
- 获取负责人数据 ：在 src/api/department.js 封装获取负责人 API，在 src/views/department/components/add-dept.vue 组件初始化调用，并用 select 渲染下拉选项。
- 记录当前部门与确定取消操作 ：点击添加子部门时，从父组件 src/views/department/index.vue 传递当前部门 id 给子组件 src/views/department/components/add-dept.vue，子组件接收；在 src/api/department.js 封装新增部门 API，子组件确定方法里校验通过后调用该 API ，通知父组件更新，取消方法重置表单并关闭弹层，父组件监听更新事件。

难点分析

递归转化树形结构：递归逻辑本身较抽象，理解函数如何不断调用自身去处理层级关系有难度，尤其是精准把握跳出条件设置，一旦出错容易造成死循环。解决办法是多画流程图，模拟数据流转过程，从简单层级数据开始测试递归函数。
表单业务校验：部门名称和编码与已有数据的重复校验，涉及异步请求获取已有数据，要在恰当的校验时机处理响应结果，确保校验的实时性与准确性，避免误判。可以提前梳理好校验流程，使用防抖或节流策略处理重复校验请求。
数据传递与组件交互 ：父子组件间传递数据，像传递当前部门 id ，以及利用 sync 修饰符监听事件更新父组件值，需要深入理解 Vue 组件通信机制，否则容易出现数据更新不及时、通信中断等问题。仔细研读 Vue 官方文档关于组件通信部分，结合简单示例项目加深理解，调试时多打印关键数据观察传递情况。