ccdi/openspec/changes/add-employee-info-ui/tasks.md

Tasks: 员工信息管理前端页面

Overview

本文档将员工信息管理前端页面的开发工作分解为可验证的任务项。任务按照依赖关系排序，确保开发过程顺畅。

---

1. API 接口层开发

1.1 创建 API 接口文件

• 创建 ruoyi-ui/src/api/dpcEmployee.js 文件
• 实现 listEmployee(query) - 查询员工列表
• 实现 getEmployee(employeeId) - 获取员工详情
• 实现 addEmployee(data) - 新增员工
• 实现 updateEmployee(data) - 编辑员工
• 实现 delEmployee(employeeIds) - 删除员工
• 实现 importTemplate() - 下载导入模板
• 实现 importData(data, updateSupport) - 导入员工信息

验证: API 文件包含所有7个接口方法，路径与后端 API 文档一致。

---

2. 主页面组件开发

2.1 创建主页面文件

• 创建 ruoyi-ui/src/views/dpcEmployee/ 目录
• 创建 ruoyi-ui/src/views/dpcEmployee/index.vue 文件

验证: 文件创建成功，可正常访问。

2.2 实现页面基础结构

• 实现 <template> 基础布局
• 实现搜索筛选区的表单（含部门树选择器）
• 实现操作按钮区（新增、导入）
• 实现员工列表表格
• 实现分页组件

验证: 页面可正常渲染，布局符合设计文档。

2.3 实现数据管理逻辑

• 定义 data() 数据结构
  • loading - 加载状态
  • employeeList - 员工列表数据
  • total - 总记录数
  • queryParams - 查询参数
  • showSearch - 搜索区显示状态
• 实现 getList() 方法 - 查询员工列表
• 实现 handleQuery() 方法 - 搜索
• 实现 resetQuery() 方法 - 重置搜索条件

验证: 页面加载时正确显示员工列表，搜索和重置功能正常。

2.4 实现列表表格

• 添加表格列：复选框、姓名、柜员号、身份证号、所属部门、电话、状态、操作
• 实现状态标签显示（在职/离职）
• 实现操作列按钮：详情、编辑、删除
• 实现 handleSelectionChange() 方法 - 多选处理

验证: 列表正确显示所有字段，状态标签正确着色。

---

3. 新增/编辑弹窗开发

3.1 实现弹窗结构

• 添加新增/编辑弹窗的 <el-dialog>
• 实现弹窗标题动态显示
• 实现员工基本信息表单
  • 姓名输入框（必填，最大100字符）
  • 柜员号输入框（必填，最大50字符）
  • 所属部门选择器（el-tree-select，关联 sys_dept）
  • 身份证号输入框（必填，18位校验）
  • 电话输入框（选填，11位手机号校验）
  • 入职时间日期选择器
  • 状态单选框组（在职/离职）

验证: 弹窗可正常打开和关闭，表单字段正确显示。

3.2 实现亲属子表单

• 添加亲属信息区域
• 实现"+ 添加亲属"按钮
• 实现亲属列表表格（亲属姓名、身份证号、电话、关系、操作）
• 实现亲属行的删除按钮
• 添加 relatives 数据字段

验证: 可以动态添加和删除亲属行。

3.3 实现表单验证

• 定义 rules 验证规则
  • 姓名：必填，最大100字符
  • 柜员号：必填，最大50字符
  • 身份证号：必填，格式校验（18位）
  • 电话：选填，格式校验（11位手机号）
  • 亲属姓名：必填
• 实现 reset() 方法 - 重置表单
• 实现 cancel() 方法 - 取消操作

验证: 表单验证规则正确触发，错误提示显示正确。

3.4 实现新增逻辑

• 实现 handleAdd() 方法 - 打开新增弹窗
• 实现 submitForm() 方法 - 提交新增
• 集成 addEmployee API
• 处理成功/失败响应

验证: 可以成功新增员工及其亲属信息。

3.5 实现编辑逻辑

• 实现 handleUpdate(row) 方法 - 打开编辑弹窗
• 集成 getEmployee API 获取详情
• 回显员工信息和亲属列表
• 修改 submitForm() 方法处理编辑提交
• 集成 updateEmployee API

验证: 可以成功编辑员工信息和亲属信息，数据正确回显。

---

4. 详情弹窗开发

4.1 实现详情弹窗结构

• 添加详情弹窗的 <el-dialog>
• 实现员工基本信息展示区（只读）
• 实现亲属列表展示区（只读）
• 实现"暂无亲属信息"提示

验证: 详情弹窗正确显示员工信息和亲属列表。

4.2 实现详情查看逻辑

• 添加 detailOpen 数据字段
• 添加 employeeDetail 数据字段
• 实现 handleDetail(row) 方法
• 集成 getEmployee API

验证: 点击详情按钮可正确查看员工完整信息。

---

5. 删除功能开发

5.1 实现删除逻辑

• 实现 handleDelete(row) 方法
• 添加删除确认对话框
• 集成 delEmployee API
• 处理成功/失败响应
• 删除后刷新列表

验证: 可以成功删除员工记录，删除确认对话框正常显示。

---

6. 导入功能开发

6.1 实现导入弹窗

• 添加导入弹窗的 <el-dialog>
• 实现 <el-upload> 组件
• 配置上传参数（headers, action, 限制文件类型）
• 实现"更新已存在数据"复选框
• 实现"下载模板"链接

验证: 导入弹窗正常显示，可以正确选择文件。

6.2 实现导入逻辑

• 添加 upload 数据对象
• 实现 handleImport() 方法 - 打开导入弹窗
• 实现 importTemplate() 方法 - 下载模板
• 实现 handleFileUploadProgress() - 上传进度
• 实现 handleFileSuccess() - 上传成功处理
• 实现 submitFileForm() - 提交文件

验证: 可以成功下载模板，上传文件后正确显示导入结果。

---

7. 权限控制

7.1 实现按钮权限控制

• 新增按钮添加 v-hasPermi="['dpc:employee:add']"
• 编辑按钮添加 v-hasPermi="['dpc:employee:edit']"
• 删除按钮添加 v-hasPermi="['dpc:employee:remove']"
• 详情按钮添加 v-hasPermi="['dpc:employee:query']"
• 导入按钮添加 v-hasPermi="['dpc:employee:import']"

验证: 按钮根据用户权限正确显示或隐藏。

---

8. 样式和交互优化

9.1 实现加载状态

• 列表加载时显示 loading 遮罩
• 提交表单时禁用提交按钮
• 文件上传时显示上传进度

验证: 各种加载状态正确显示。

9.2 实现用户反馈

• 操作成功显示成功提示
• 操作失败显示错误提示
• 导入结果显示详细信息

验证: 用户反馈消息清晰友好。

9.3 响应式布局

• 搜索筛选区响应式布局
• 表格支持横向滚动
• 弹窗适配小屏幕

验证: 页面在不同屏幕尺寸下正常显示。

---

10. 测试和修复

9.1 功能测试

• 测试列表查询和分页
• 测试搜索和筛选功能
• 测试新增员工（无亲属）
• 测试新增员工（单个亲属）
• 测试新增员工（多个亲属）
• 测试编辑员工基本信息
• 测试编辑员工亲属（新增、修改、删除）
• 测试查看详情
• 测试删除员工（单个）
• 测试批量删除
• 测试下载导入模板
• 测试导入数据（成功场景）
• 测试导入数据（部分失败场景）
• 测试表单验证（各种错误场景）

9.2 浏览器兼容性测试

• Chrome 测试
• Firefox 测试
• Edge 测试

9.3 Bug 修复

• 修复测试中发现的问题

---

10. 菜单配置

11.1 数据库菜单配置

• 在 sys_menu 表中插入"信息维护"父菜单（如果不存在）
• 在 sys_menu 表中插入"员工信息管理"子菜单
• 配置菜单路由为 dpcEmployee
• 配置菜单组件为 dpcEmployee/index
• 配置菜单权限标识
• 配置菜单图标

验证: 菜单正确显示，点击可跳转到员工信息管理页面。

---

依赖关系

1. API 接口层 (1.1)
    ↓
2. 主页面组件基础 (2.1 - 2.4)
    ↓
3. 新增/编辑弹窗 (3.1 - 3.5) ← 并行
4. 详情弹窗 (4.1 - 4.2)     ← 并行
5. 删除功能 (5.1)          ← 并行
6. 导入功能 (6.1 - 6.2)    ← 并行
    ↓
7. 权限控制 (7.1)
    ↓
8. 样式优化 (8.1 - 8.3)
    ↓
9. 测试和修复 (9.1 - 9.3)
    ↓
10. 菜单配置 (10.1)

预估工作量

任务组	预估时间
API 接口层	0.5 小时
主页面组件	1.5 小时
新增/编辑弹窗	3 小时
详情弹窗	1 小时
删除功能	0.5 小时
导入功能	1.5 小时
权限控制	0.5 小时
样式优化	1 小时
测试和修复	1 小时
菜单配置	0.5 小时
总计	11 小时