wkc
47f9491941
- 将员工表org_no字段迁移至dept_id，关联系统部门表 - 更新员工信息相关DTO、VO和Controller，使用deptId替代orgNo - 添加员工信息管理OpenSpec规范文档(proposal/design/spec/tasks) - 更新API文档，反映部门关联变更 - 添加数据库迁移脚本employee_org_no_to_dept_id.sql - 新增员工信息分页接口测试脚本(PowerShell/Python) - 更新CLAUDE.md，添加MCP数据库工具使用说明 Co-Authored-By: Claude (glm-4.7) <noreply@anthropic.com>
292 lines
8.6 KiB
Markdown
292 lines
8.6 KiB
Markdown
# 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 小时** |
|