diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 3b3b358..1a9f8ab 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -13,7 +13,13 @@ "Skill(document-skills:mcp-builder)", "Bash(ping:*)", "Bash(git commit:*)", - "Bash(taskkill:*)" + "Bash(taskkill:*)", + "Bash(cd:*)", + "mcp__database-server__read_query", + "mcp__database-server__list_tables", + "mcp__database-server__describe_table", + "mcp__database-server__list_insights", + "mcp__database-server__alter_table" ] }, "enabledMcpjsonServers": [ diff --git a/CLAUDE.md b/CLAUDE.md index 05fc1e0..fae8313 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -38,6 +38,7 @@ ## 运行 +- 使用mcp工具进行数据库相关操作 - 使用根目录中的ry.bat控制后端的启动，不要自行在命令行中启动后端 - 测试方式为生成可执行的测试脚本 - 测试脚本在运行完成后需要保存所有接口输出并生成测试用例报告 diff --git a/doc/员工信息管理API文档.md b/doc/员工信息管理API文档.md index 9d12419..1a4cbf8 100644 --- a/doc/员工信息管理API文档.md +++ b/doc/员工信息管理API文档.md @@ -24,7 +24,7 @@ |--------|------|------|------| | name | String | 否 | 姓名（模糊查询） | | tellerNo | String | 否 | 柜员号（精确查询） | -| orgNo | String | 否 | 所属机构号 | +| deptId | Long | 否 | 所属部门ID | | idCard | String | 否 | 身份证号（精确查询） | | status | String | 否 | 状态（0=在职, 1=离职） | | pageNum | Integer | 否 | 页码（默认1） | @@ -40,7 +40,8 @@ "employeeId": 1, "name": "张三", "tellerNo": "001", - "orgNo": "1001", + "deptId": 100, + "deptName": "总部", "idCard": "110101199001011234", "phone": "13800138000", "hireDate": "2020-01-01", @@ -53,6 +54,22 @@ } ``` +**响应字段说明**: + +| 字段名 | 类型 | 说明 | +|--------|------|------| +| employeeId | Long | 员工ID | +| name | String | 姓名 | +| tellerNo | String | 柜员号 | +| deptId | Long | 所属部门ID | +| deptName | String | 所属部门名称（关联 sys_dept 表） | +| idCard | String | 身份证号 | +| phone | String | 电话 | +| hireDate | Date | 入职时间 | +| status | String | 状态（0=在职, 1=离职） | +| statusDesc | String | 状态描述 | +| createTime | Date | 创建时间 | + --- ### 2. 查询员工详情 @@ -76,7 +93,7 @@ "employeeId": 1, "name": "张三", "tellerNo": "001", - "orgNo": "1001", + "deptId": 100, "idCard": "110101199001011234", "phone": "13800138000", "hireDate": "2020-01-01", @@ -116,7 +133,7 @@ Authorization: Bearer {token} { "name": "张三", "tellerNo": "001", - "orgNo": "1001", + "deptId": 100, "idCard": "110101199001011234", "phone": "13800138000", "hireDate": "2020-01-01", @@ -138,7 +155,7 @@ Authorization: Bearer {token} |--------|------|------|------|----------| | name | String | 是 | 姓名 | 最大100字符 | | tellerNo | String | 是 | 柜员号 | 最大50字符，唯一 | -| orgNo | String | 否 | 所属机构号 | 最大50字符 | +| deptId | Long | 否 | 所属部门ID | | | idCard | String | 是 | 身份证号 | 18位，符合国标，唯一 | | phone | String | 否 | 电话 | 11位手机号 | | hireDate | Date | 否 | 入职时间 | yyyy-MM-dd | @@ -176,7 +193,7 @@ Authorization: Bearer {token} "employeeId": 1, "name": "张三", "tellerNo": "001", - "orgNo": "1001", + "deptId": 100, "idCard": "110101199001011234", "phone": "13800138000", "hireDate": "2020-01-01", @@ -266,9 +283,9 @@ Authorization: Bearer {token} **Excel 格式**: **Sheet1: 员工信息** -| 姓名 | 柜员号 | 所属机构号 | 身份证号 | 电话 | 入职时间 | 状态 | +| 姓名 | 柜员号 | 所属部门ID | 身份证号 | 电话 | 入职时间 | 状态 | |------|--------|------------|----------|------|----------|------| -| 张三 | 001 | 1001 | 110101199001011234 | 13800138000 | 2020-01-01 | 在职 | +| 张三 | 001 | 100 | 110101199001011234 | 13800138000 | 2020-01-01 | 在职 | **Sheet2: 亲属信息（可选）** | 员工身份证号 | 亲属姓名 | 亲属身份证号 | 亲属手机号 | 与员工关系 | diff --git a/openspec/changes/add-employee-info-ui/design.md b/openspec/changes/add-employee-info-ui/design.md new file mode 100644 index 0000000..1543a57 --- /dev/null +++ b/openspec/changes/add-employee-info-ui/design.md @@ -0,0 +1,223 @@ +# Design: 员工信息管理前端设计 + +## 页面布局 + +### 主页面布局 +``` +┌─────────────────────────────────────────────────────────────┐ +│ 信息维护 > 员工信息管理 │ +├─────────────────────────────────────────────────────────────┤ +│ ┌───────────────────────────────────────────────────────┐ │ +│ │ 搜索区: [姓名] [柜员号] [所属机构号] [身份证号] [状态▼] │ │ +│ │ [搜索] [重置] │ │ +│ └───────────────────────────────────────────────────────┘ │ +│ ┌───────────────────────────────────────────────────────┐ │ +│ │ [新增] [导入] [搜索框展开] │ │ +│ └───────────────────────────────────────────────────────┘ │ +│ ┌───────────────────────────────────────────────────────┐ │ +│ │ ┌───┬─────┬───────┬───────┬─────────┬─────┬─────────┐ │ │ +│ │ │□ │姓名 │柜员号 │身份证号│所属机构 │状态 │ 操作 │ │ │ +│ │ ├───┼─────┼───────┼───────┼─────────┼─────┼─────────┤ │ │ +│ │ │□ │张三 │001 │110... │1001 │在职 │详情|编辑│ │ │ +│ │ │ │ │ │ │ │ │删除 │ │ │ +│ │ └───┴─────┴───────┴───────┴─────────┴─────┴─────────┘ │ │ +│ │ < 1 2 3 4 5 ... 10 > │ │ +│ └───────────────────────────────────────────────────────┘ │ +└─────────────────────────────────────────────────────────────┘ +``` + +### 新增/编辑弹窗布局 +``` +┌─────────────────────────────────────────────┐ +│ 新增员工 / 编辑员工 [X]│ +├─────────────────────────────────────────────┤ +│ ┌───────────────────────────────────────┐ │ +│ │ 姓名: [_____________] │ │ +│ │ 柜员号: [_____________] │ │ +│ │ 所属部门: [请选择部门 ▼] │ │ +│ │ 身份证号: [__________________] │ │ +│ │ 电话: [_____________] │ │ +│ │ 入职时间: [_______________] │ │ +│ │ 状态: ( ) 在职 ( ) 离职 │ │ +│ └───────────────────────────────────────┘ │ +│ ┌───────────────────────────────────────┐ │ +│ │ 亲属信息 [+ 添加亲属] │ │ +│ │ ┌───────────────────────────────────┐ │ │ +│ │ │ 亲属姓名 | 身份证号 | 电话 | 关系 │ │ │ +│ │ │ 李四 | 110... | 138..| 配偶 │ │ │ +│ │ │ | [删除] | | │ │ │ +│ │ └───────────────────────────────────┘ │ │ +│ └───────────────────────────────────────┘ │ +│ [确定] [取消] │ +└─────────────────────────────────────────────┘ +``` + +### 详情弹窗布局 +``` +┌─────────────────────────────────────────────┐ +│ 员工详情 [X]│ +├─────────────────────────────────────────────┤ +│ ┌───────────────────────────────────────┐ │ +│ │ 姓名: 张三 │ │ +│ │ 柜员号: 001 │ │ +│ │ 所属部门: 研发部门 │ │ +│ │ 身份证号: 110101199001011234 │ │ +│ │ 电话: 13800138000 │ │ +│ │ 入职时间: 2020-01-01 │ │ +│ │ 状态: 在职 │ │ +│ │ 创建时间: 2026-01-28 10:00:00 │ │ +│ └───────────────────────────────────────┘ │ +│ ┌───────────────────────────────────────┐ │ +│ │ 亲属信息 │ │ +│ │ ┌───────────────────────────────────┐ │ │ +│ │ │ 亲属姓名 │ 身份证号 │ 电话 │关系│ │ │ +│ │ │ 李四 │ 110101... │ 138..│配偶│ │ │ +│ │ │ │ │ │ │ │ │ +│ │ └───────────────────────────────────┘ │ │ +│ └───────────────────────────────────────┘ │ +│ [关闭] │ +└─────────────────────────────────────────────┘ +``` + +## 组件结构 + +### 文件结构 +``` +ruoyi-ui/src/ +├── api/ +│ └── dpcEmployee.js # API 接口定义 +└── views/ + └── dpcEmployee/ + └── index.vue # 主页面组件 +``` + +### 数据模型 + +#### 员工列表项 +```javascript +{ + employeeId: Number, + name: String, + tellerNo: String, + orgNo: String, // 部门 ID (dept_id) + orgName: String, // 部门名称 (用于显示) + idCard: String, + phone: String, + hireDate: String, + status: String, + statusDesc: String, + createTime: String +} +``` + +#### 员工表单 +```javascript +{ + employeeId: Number | null, + name: String, + tellerNo: String, + orgNo: String, // 部门 ID (dept_id) + idCard: String, + phone: String, + hireDate: String, + status: String, + relatives: Array<{ + relativeId: Number | null, + relativeName: String, + relativeIdCard: String, + relativePhone: String, + relationship: String + }> +} +``` + +### API 接口 + +| 接口名 | 方法 | 路径 | 说明 | +|--------|------|------|------| +| listEmployee | GET | /dpc/employee/list | 查询员工列表 | +| getEmployee | GET | /dpc/employee/{id} | 获取员工详情 | +| addEmployee | POST | /dpc/employee | 新增员工 | +| updateEmployee | PUT | /dpc/employee | 编辑员工 | +| delEmployee | DELETE | /dpc/employee/{ids} | 删除员工 | +| importTemplate | POST | /dpc/employee/importTemplate | 下载导入模板 | +| importData | POST | /dpc/employee/importData | 导入员工信息 | + +## 交互设计 + +### 1. 列表页面 +- **默认状态**: 显示所有员工列表，默认分页大小 10 +- **搜索**: 支持按姓名（模糊）、柜员号（精确）、所属部门、身份证号（精确）、状态筛选 +- **所属部门筛选**: 使用部门树选择器 +- **新增**: 点击"新增"按钮打开新增弹窗 +- **编辑**: 点击"编辑"按钮打开编辑弹窗 +- **详情**: 点击"详情"按钮打开详情弹窗 +- **删除**: 点击"删除"按钮，弹出确认对话框后删除 +- **导入**: 点击"导入"按钮，打开导入弹窗 + +### 2. 新增/编辑弹窗 +- **所属部门**: 使用部门树选择器（`el-tree-select`），存储 `dept_id` +- **亲属管理**: + - 点击"+ 添加亲属"添加空行 + - 点击"删除"移除对应亲属行 + - 亲属姓名、关系为必填 +- **表单验证**: + - 姓名: 必填，最大100字符 + - 柜员号: 必填，最大50字符 + - 所属部门: 选填 + - 身份证号: 必填，18位格式校验 + - 电话: 选填，11位手机号格式 + - 亲属姓名: 必填 + - 亲属关系: 必填 + +### 3. 详情弹窗 +- 只读展示员工信息和亲属列表 +- 无亲属时显示"暂无亲属信息" + +### 4. 导入弹窗 +- 支持拖拽上传 +- 支持"更新已存在数据"选项 +- 显示导入结果消息 + +## 表单验证规则 + +### 员工基本信息 +| 字段 | 验证规则 | +|------|----------| +| 姓名 | 必填，最大100字符 | +| 柜员号 | 必填，最大50字符 | +| 身份证号 | 必填，18位，符合国标 | +| 电话 | 选填，11位手机号 | +| 入职时间 | 选填，日期格式 | +| 状态 | 必填，0或1 | + +### 亲属信息 +| 字段 | 验证规则 | +|------|----------| +| 亲属姓名 | 必填 | +| 亲属身份证号 | 选填 | +| 亲属电话 | 选填，11位手机号 | +| 与员工关系 | 必填 | + +## 权限控制 + +| 按钮 | 权限标识 | +|------|----------| +| 新增 | dpc:employee:add | +| 编辑 | dpc:employee:edit | +| 删除 | dpc:employee:remove | +| 详情 | dpc:employee:query | +| 导入 | dpc:employee:import | + +## 技术实现要点 + +1. **亲属子表单**: 使用 `v-for` 动态渲染亲属列表，支持增删操作 +2. **部门选择器**: 使用 Element UI 的 `el-tree-select` 组件，关联 `sys_dept` 表 +3. **日期选择器**: 使用 Element UI 的 `el-date-picker` +4. **状态下拉**: 使用 `el-select` 或 `el-radio-group` +5. **文件上传**: 使用 Element UI 的 `el-upload` +6. **分页**: 使用若依框架的 `pagination` 组件 + +## 参考 +- 中介库管理页面: `ruoyi-ui/src/views/dpcIntermediary/index.vue` +- 若依用户管理页面: `ruoyi-ui/src/views/system/user/index.vue` diff --git a/openspec/changes/add-employee-info-ui/proposal.md b/openspec/changes/add-employee-info-ui/proposal.md new file mode 100644 index 0000000..b11dd6c --- /dev/null +++ b/openspec/changes/add-employee-info-ui/proposal.md @@ -0,0 +1,119 @@ +# Proposal: 添加员工信息管理前端页面 + +## Change ID +`add-employee-info-ui` + +## Summary +为员工信息管理模块开发前端页面，实现员工及其亲属信息的可视化管理。包括员工列表查询、新增/编辑员工（支持亲属管理）、详情查看、Excel 导入等功能。页面将放置在"信息维护"菜单下。 + +## Motivation +员工信息管理的后端 API 已在 `add-employee-info` 变更中完成开发。现在需要开发前端页面以提供用户交互界面。 + +用户需要： +1. 可视化查看和管理员工信息列表 +2. 创建员工时同时维护亲属信息 +3. 查看员工详情时展示所有亲属 +4. 支持批量导入员工数据 +5. 在"信息维护"菜单下访问此功能 + +## Scope +本提案实现以下前端功能： + +### 包含的功能 +- **员工列表页面** + - 搜索筛选区（姓名、柜员号、所属部门、身份证号、状态） + - 员工列表表格（分页显示） + - 操作按钮（新增、导入） + - 部门树选择器 + +- **新增员工弹窗** + - 员工基本信息表单 + - 所属部门选择（关联 sys_dept 表） + - 亲属列表子表单（支持动态增删） + - 表单验证 + +- **编辑员工弹窗** + - 员工基本信息表单 + - 所属部门选择 + - 亲属列表子表单（支持动态增删） + - 表单验证 + +- **员工详情弹窗** + - 员工基本信息展示（只读） + - 显示部门名称 + - 亲属列表展示（只读） + +- **导入功能** + - 导入弹窗 + - Excel 文件上传 + - 导入结果反馈 + - 模板下载 + +### 明确排除 +- 菜单数据的数据库插入（需要前端开发完成后手动配置） +- 员工信息与其他模块的联动（属于后续功能） + +## Proposed Design +详见 [design.md](./design.md) + +## Alternatives Considered + +### 选项1：参考中介库管理页面实现 +**优点**： +- 保持项目内 UI/UX 一致性 +- 复用已有的代码模式 +- 开发效率高 + +**缺点**： +- 需要额外实现亲属子表单功能 + +**决定**：采用。参考 `dpcIntermediary` 页面的实现模式，在此基础上增加亲属子表单功能。 + +### 选项2：使用若依代码生成器 +**优点**： +- 快速生成基础 CRUD 页面 + +**缺点**： +- 生成代码需要大量调整以支持亲属子表单 +- 与现有前端风格可能不一致 + +**决定**：不采用。手动开发可以更好地实现亲属子表单功能，保持与中介库页面一致的风格。 + +## Impact + +### 前端影响 +- 新增视图：`ruoyi-ui/src/views/dpcEmployee/` + - `index.vue` - 员工列表页面 +- 新增 API：`ruoyi-ui/src/api/dpcEmployee.js` + +### 后端影响 +无，后端 API 已在 `add-employee-info` 中完成。 + +### 数据库影响 +- 需要在 `sys_menu` 表中插入菜单数据（开发完成后手动配置） + +## Dependencies +- 依赖 `add-employee-info` 变更完成后端 API +- 依赖若依框架的前端组件（Element UI） + +## Related Changes +- `add-employee-info` - 提供后端 API 接口 + +## Open Questions +无 + +## Success Criteria +- [ ] 用户可以在"信息维护"菜单下访问员工信息管理页面 +- [ ] 用户可以查看员工列表并支持分页 +- [ ] 用户可以按多种条件搜索员工 +- [ ] 用户可以新增员工并添加亲属 +- [ ] 用户可以编辑员工信息和亲属 +- [ ] 用户可以查看员工详情和亲属列表 +- [ ] 用户可以删除员工 +- [ ] 用户可以下载 Excel 导入模板 +- [ ] 用户可以导入员工数据 + +## References +- [员工信息管理 API 文档](../../../doc/员工信息管理API文档.md) +- [模块设计文档 - 信息维护模块](../../../doc/modules/03-信息维护模块.md) +- [add-employee-info 变更](../add-employee-info/) diff --git a/openspec/changes/add-employee-info-ui/specs/employee-info-ui/spec.md b/openspec/changes/add-employee-info-ui/specs/employee-info-ui/spec.md new file mode 100644 index 0000000..a705ec9 --- /dev/null +++ b/openspec/changes/add-employee-info-ui/specs/employee-info-ui/spec.md @@ -0,0 +1,475 @@ +# Spec: 员工信息管理前端用户界面 + +## ADDED Requirements + +### Requirement: 前端SHALL提供员工信息列表页面 + +前端MUST提供员工信息列表页面，允许用户查看、搜索和管理员工信息。 + +#### Scenario: 页面加载时显示员工列表 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**When** 用户访问员工信息管理页面 +**Then** 页面应显示员工列表 +**And** 列表应默认显示第1页，每页10条记录 +**And** 页面应显示搜索筛选区和操作按钮 + +#### Scenario: 列表显示正确的员工信息 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**When** 系统返回员工列表数据 +**Then** 列表应显示以下列：姓名、柜员号、身份证号、所属部门、电话、状态、操作 +**And** 状态列应显示"在职"或"离职"的文字描述 +**And** 操作列应显示"详情"、"编辑"、"删除"按钮 + +#### Scenario: 列表支持分页 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**And** 系统中存在25条员工记录 +**When** 用户访问员工信息管理页面 +**Then** 页面应显示分页控件 +**And** 默认显示第1页的10条记录 +**When** 用户点击第2页 +**Then** 页面应显示第11-20条记录 + +#### Scenario: 搜索筛选区默认展开 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**When** 用户访问员工信息管理页面 +**Then** 搜索筛选区应默认显示 +**And** 搜索筛选区应包含：姓名输入框、柜员号输入框、所属部门选择器、身份证号输入框、状态下拉框 + +--- + +### Requirement: 前端SHALL支持多条件搜索员工 + +前端MUST支持用户通过多种条件组合搜索员工信息。 + +#### Scenario: 按姓名模糊搜索 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**And** 系统中存在姓名为"张三"的员工 +**When** 用户在姓名输入框输入"张" +**And** 点击"搜索"按钮 +**Then** 列表应仅显示姓名中包含"张"的员工记录 +**And** 分页控件应显示匹配的记录总数 + +#### Scenario: 按柜员号精确搜索 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**And** 系统中存在柜员号为"001"的员工 +**When** 用户在柜员号输入框输入"001" +**And** 点击"搜索"按钮 +**Then** 列表应仅显示柜员号为"001"的员工记录 + +#### Scenario: 按状态筛选 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**And** 系统中存在在职和离职两种状态的员工 +**When** 用户在状态下拉框选择"在职" +**And** 点击"搜索"按钮 +**Then** 列表应仅显示状态为"在职"的员工记录 + +#### Scenario: 按所属部门筛选 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**And** 系统中存在多个部门的员工 +**When** 用户在所属部门选择器中选择"研发部门" +**And** 点击"搜索"按钮 +**Then** 列表应仅显示该部门的员工记录 + +#### Scenario: 组合条件搜索 + +**Given** 用户已登录系统且具有 `dpc:employee:list` 权限 +**When** 用户同时输入姓名"张"、柜员号"001" +**And** 点击"搜索"按钮 +**Then** 列表应仅显示同时满足所有条件的记录 + +#### Scenario: 重置搜索条件 + +**Given** 用户已输入多个搜索条件并执行了搜索 +**When** 用户点击"重置"按钮 +**Then** 所有搜索条件输入框应清空 +**And** 列表应显示所有员工记录（恢复默认） + +--- + +### Requirement: 前端SHALL提供新增员工弹窗 + +前端MUST提供新增员工弹窗，允许用户输入员工基本信息并添加亲属信息。 + +#### Scenario: 点击新增按钮打开弹窗 + +**Given** 用户已登录系统且具有 `dpc:employee:add` 权限 +**When** 用户点击"新增"按钮 +**Then** 应打开新增员工弹窗 +**And** 弹窗标题为"添加员工" +**And** 所有表单字段应为空 +**And** 亲属列表应为空 + +#### Scenario: 填写员工基本信息 + +**Given** 新增员工弹窗已打开 +**When** 用户填写姓名为"张三" +**And** 填写柜员号为"001" +**And** 在所属部门选择器中选择"研发部门" +**And** 填写身份证号为"110101199001011234" +**And** 填写电话为"13800138000" +**And** 选择入职时间为"2020-01-01" +**And** 选择状态为"在职" +**Then** 表单应正确显示填写的信息 + +#### Scenario: 添加单个亲属 + +**Given** 新增员工弹窗已打开 +**And** 用户已填写员工基本信息 +**When** 用户点击"+ 添加亲属"按钮 +**Then** 亲属列表应新增一个空行 +**When** 用户填写亲属姓名为"李四" +**And** 填写亲属身份证号为"110101199001011235" +**And** 填写亲属电话为"13800138001" +**And** 选择关系为"配偶" +**Then** 亲属列表应显示该亲属信息 + +#### Scenario: 添加多个亲属 + +**Given** 新增员工弹窗已打开 +**And** 用户已填写员工基本信息 +**When** 用户点击3次"+ 添加亲属"按钮 +**And** 填写3个亲属的信息 +**Then** 亲属列表应显示3个亲属 +**And** 每个亲属应有独立的删除按钮 + +#### Scenario: 删除亲属 + +**Given** 新增员工弹窗已打开 +**And** 亲属列表中存在2个亲属 +**When** 用户点击第一个亲属的"删除"按钮 +**Then** 亲属列表应仅显示1个亲属 +**And** 被删除的亲属应从列表中移除 + +#### Scenario: 提交成功 + +**Given** 新增员工弹窗已打开 +**And** 用户已填写所有必填信息 +**When** 用户点击"确定"按钮 +**Then** 系统应发送请求到后端 +**And** 弹窗应关闭 +**And** 应显示"新增成功"的提示消息 +**And** 列表应刷新并显示新增的记录 + +#### Scenario: 表单验证-姓名为空 + +**Given** 新增员工弹窗已打开 +**When** 用户不填写姓名 +**And** 点击"确定"按钮 +**Then** 系统应显示"姓名不能为空"的错误提示 +**And** 弹窗应保持打开状态 +**And** 不发送请求到后端 + +#### Scenario: 表单验证-身份证号格式错误 + +**Given** 新增员工弹窗已打开 +**When** 用户填写身份证号为"123" +**And** 点击"确定"按钮 +**Then** 系统应显示"身份证号格式不正确"的错误提示 +**And** 弹窗应保持打开状态 + +#### Scenario: 亲属姓名为空验证 + +**Given** 新增员工弹窗已打开 +**And** 用户已添加一个亲属但未填写亲属姓名 +**When** 用户点击"确定"按钮 +**Then** 系统应显示"亲属姓名不能为空"的错误提示 + +#### Scenario: 取消新增 + +**Given** 新增员工弹窗已打开 +**And** 用户已填写部分信息 +**When** 用户点击"取消"按钮 +**Then** 弹窗应关闭 +**And** 不保存任何数据 +**And** 列表应保持原状态 + +--- + +### Requirement: 前端SHALL提供编辑员工弹窗 + +前端MUST提供编辑员工弹窗，允许用户修改员工信息和亲属信息。 + +#### Scenario: 点击编辑按钮打开弹窗 + +**Given** 用户已登录系统且具有 `dpc:employee:edit` 权限 +**And** 列表中存在一条员工记录 +**When** 用户点击该记录的"编辑"按钮 +**Then** 应打开编辑员工弹窗 +**And** 弹窗标题为"修改员工" +**And** 表单应显示该员工的现有信息 +**And** 亲属列表应显示该员工的所有亲属 + +#### Scenario: 修改员工基本信息 + +**Given** 编辑员工弹窗已打开 +**When** 用户修改姓名为"李四" +**And** 点击"确定"按钮 +**Then** 系统应发送更新请求到后端 +**And** 弹窗应关闭 +**And** 应显示"修改成功"的提示消息 +**And** 列表应刷新并显示更新后的姓名 + +#### Scenario: 编辑时新增亲属 + +**Given** 编辑员工弹窗已打开 +**And** 该员工当前有1个亲属 +**When** 用户点击"+ 添加亲属"按钮 +**And** 填写新亲属信息 +**And** 点击"确定"按钮 +**Then** 系统应发送更新请求到后端 +**And** 再次打开编辑弹窗时应显示2个亲属 + +#### Scenario: 编辑时删除亲属 + +**Given** 编辑员工弹窗已打开 +**And** 该员工当前有2个亲属 +**When** 用户点击其中一个亲属的"删除"按钮 +**And** 点击"确定"按钮 +**Then** 系统应发送更新请求到后端 +**And** 再次打开编辑弹窗时应仅显示1个亲属 + +#### Scenario: 编辑时修改亲属信息 + +**Given** 编辑员工弹窗已打开 +**And** 该员工有亲属"李四" +**When** 用户修改亲属姓名为"王五" +**And** 点击"确定"按钮 +**Then** 系统应发送更新请求到后端 +**And** 再次打开编辑弹窗时应显示亲属姓名为"王五" + +#### Scenario: 编辑时清除所有亲属 + +**Given** 编辑员工弹窗已打开 +**And** 该员工有亲属信息 +**When** 用户逐个删除所有亲属 +**And** 点击"确定"按钮 +**Then** 系统应发送更新请求到后端 +**And** 再次打开编辑弹窗时亲属列表应为空 + +--- + +### Requirement: 前端SHALL提供员工详情弹窗 + +前端MUST提供员工详情弹窗，以只读方式展示员工完整信息和亲属列表。 + +#### Scenario: 点击详情按钮打开弹窗 + +**Given** 用户已登录系统且具有 `dpc:employee:query` 权限 +**And** 列表中存在一条员工记录 +**When** 用户点击该记录的"详情"按钮 +**Then** 应打开员工详情弹窗 +**And** 弹窗标题为"员工详情" +**And** 所有字段应为只读状态 + +#### Scenario: 显示员工基本信息 + +**Given** 员工详情弹窗已打开 +**Then** 应显示以下信息：姓名、柜员号、所属部门、身份证号、电话、入职时间、状态、创建时间 +**And** 状态应显示为"在职"或"离职"的文字描述 +**And** 所有字段应不可编辑 + +#### Scenario: 显示亲属列表 + +**Given** 员工详情弹窗已打开 +**And** 该员工有2个亲属 +**Then** 亲属列表应显示2个亲属 +**And** 每个亲属应显示：亲属姓名、亲属身份证号、亲属电话、与员工关系 +**And** 亲属列表应不可编辑 + +#### Scenario: 无亲属时显示提示 + +**Given** 员工详情弹窗已打开 +**And** 该员工无亲属信息 +**Then** 亲属列表区域应显示"暂无亲属信息"的提示 + +--- + +### Requirement: 前端SHALL支持删除员工 + +前端MUST支持删除员工操作，包括单个删除和批量删除。 + +#### Scenario: 删除单条记录 + +**Given** 用户已登录系统且具有 `dpc:employee:remove` 权限 +**And** 列表中存在一条员工记录 +**When** 用户点击该记录的"删除"按钮 +**Then** 应弹出确认对话框，提示是否确认删除 +**When** 用户确认删除 +**Then** 系统应发送删除请求到后端 +**And** 应显示"删除成功"的提示消息 +**And** 列表应刷新，该记录应从列表中移除 + +#### Scenario: 取消删除 + +**Given** 用户已点击"删除"按钮 +**And** 确认对话框已显示 +**When** 用户点击"取消"按钮 +**Then** 对话框应关闭 +**And** 不发送删除请求 +**And** 记录应保留在列表中 + +#### Scenario: 批量删除 + +**Given** 用户已登录系统且具有 `dpc:employee:remove` 权限 +**And** 列表中存在多条员工记录 +**When** 用户勾选3条记录 +**And** 点击"删除"按钮 +**And** 确认删除 +**Then** 系统应发送批量删除请求到后端 +**And** 应显示"删除成功"的提示消息 +**And** 列表应刷新，被删除的记录应从列表中移除 + +--- + +### Requirement: 前端SHALL支持导入员工数据 + +前端MUST支持通过 Excel 文件批量导入员工数据。 + +#### Scenario: 点击导入按钮打开导入弹窗 + +**Given** 用户已登录系统且具有 `dpc:employee:import` 权限 +**When** 用户点击"导入"按钮 +**Then** 应打开导入数据弹窗 +**And** 弹窗标题为"员工数据导入" +**And** 应显示文件上传区域 + +#### Scenario: 上传Excel文件 + +**Given** 导入弹窗已打开 +**When** 用户选择一个 Excel 文件 +**And** 点击"确定"按钮 +**Then** 系统应上传文件到后端 +**And** 应显示上传进度 +**And** 上传完成后应显示导入结果消息 + +#### Scenario: 导入成功提示 + +**Given** 用户上传了一个包含有效数据的 Excel 文件 +**When** 文件上传完成 +**Then** 应显示导入成功消息，包含成功导入的记录数 +**And** 弹窗应自动关闭 +**And** 列表应刷新，显示新导入的记录 + +#### Scenario: 导入部分失败提示 + +**Given** 用户上传了一个包含10条数据的 Excel 文件 +**And** 其中2条数据格式错误 +**When** 文件上传完成 +**Then** 应显示导入结果消息，说明成功8条，失败2条 +**And** 消息中应包含失败行的错误详情 + +#### Scenario: 更新已存在数据选项 + +**Given** 导入弹窗已打开 +**When** 用户勾选"是否更新已经存在的员工数据"选项 +**And** 上传文件 +**Then** 请求应携带 `updateSupport=true` 参数 + +#### Scenario: 下载导入模板 + +**Given** 导入弹窗已打开 +**When** 用户点击"下载模板"链接 +**Then** 浏览器应下载 Excel 模板文件 +**And** 导入弹窗应保持打开 + +#### Scenario: 支持拖拽上传 + +**Given** 导入弹窗已打开 +**When** 用户将 Excel 文件拖拽到上传区域 +**Then** 文件应自动添加到上传队列 + +--- + +### Requirement: 前端SHALL根据权限控制按钮显示 + +前端MUST根据用户权限显示或隐藏相应的操作按钮。 + +#### Scenario: 无新增权限时隐藏新增按钮 + +**Given** 用户已登录系统 +**And** 该用户不具有 `dpc:employee:add` 权限 +**When** 用户访问员工信息管理页面 +**Then** "新增"按钮应隐藏或禁用 + +#### Scenario: 无编辑权限时隐藏编辑按钮 + +**Given** 用户已登录系统 +**And** 该用户不具有 `dpc:employee:edit` 权限 +**When** 用户访问员工信息管理页面 +**Then** 列表操作列中的"编辑"按钮应隐藏或禁用 + +#### Scenario: 无删除权限时隐藏删除按钮 + +**Given** 用户已登录系统 +**And** 该用户不具有 `dpc:employee:remove` 权限 +**When** 用户访问员工信息管理页面 +**Then** 列表操作列中的"删除"按钮应隐藏或禁用 + +#### Scenario: 无导入权限时隐藏导入按钮 + +**Given** 用户已登录系统 +**And** 该用户不具有 `dpc:employee:import` 权限 +**When** 用户访问员工信息管理页面 +**Then** "导入"按钮应隐藏或禁用 + +--- + +### Requirement: 前端SHALL提供友好的用户反馈 + +前端MUST在各种操作中提供适当的用户反馈。 + +#### Scenario: 加载状态显示 + +**Given** 用户执行任何需要请求后端的操作 +**When** 请求正在处理中 +**Then** 列表或弹窗应显示加载状态（如 loading 遮罩） + +#### Scenario: 操作成功提示 + +**Given** 用户执行新增、修改或删除操作 +**When** 操作成功 +**Then** 应显示成功提示消息 +**And** 提示消息应在几秒后自动消失 + +#### Scenario: 操作失败提示 + +**Given** 用户执行新增、修改或删除操作 +**When** 操作失败 +**Then** 应显示错误提示消息 +**And** 错误消息应说明失败原因 + +#### Scenario: 网络错误处理 + +**Given** 用户执行任何需要请求后端的操作 +**When** 网络请求失败 +**Then** 应显示网络错误提示消息 +**And** 弹窗应保持打开状态（如果是新增/编辑操作） + +--- + +### Requirement: 前端SHALL支持响应式布局 + +前端MUST确保页面在不同屏幕尺寸下正常显示。 + +#### Scenario: 小屏幕适配 + +**Given** 用户使用小屏幕设备访问页面 +**When** 页面加载完成 +**Then** 搜索筛选区应合理布局 +**And** 表格应支持横向滚动 +**And** 弹窗应适配屏幕尺寸 + +#### Scenario: 大屏幕优化 + +**Given** 用户使用大屏幕设备访问页面 +**When** 页面加载完成 +**Then** 搜索筛选区应在一行内显示 +**And** 表格应充分利用屏幕宽度 diff --git a/openspec/changes/add-employee-info-ui/tasks.md b/openspec/changes/add-employee-info-ui/tasks.md new file mode 100644 index 0000000..2ece1a8 --- /dev/null +++ b/openspec/changes/add-employee-info-ui/tasks.md @@ -0,0 +1,291 @@ +# 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 实现页面基础结构 +- [ ] 实现 `