wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

员工代码

Browse Source
This commit is contained in:
wkc
2026-01-29 09:07:50 +08:00
parent 47f9491941
commit 2c146c026a
30 changed files with 1654 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
openspec/changes/add-employee-info-ui/design.md
View File

@@ -8,7 +8,7 @@
│ 信息维护 > 员工信息管理 │
├─────────────────────────────────────────────────────────────┤
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 搜索区: [姓名] [柜员号] [所属机构号] [身份证号] [状态▼] │ │
│ │ 搜索区: [姓名] [柜员号] [所属部门] [身份证号] [状态▼] │ │
│ │ [搜索] [重置] │ │
│ └───────────────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────────────┐ │
@@ -16,9 +16,9 @@
│ └───────────────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ┌───┬─────┬───────┬───────┬─────────┬─────┬─────────┐ │ │
│ │ │□ │姓名 │柜员号 │身份证号│所属机构 │状态 │ 操作 │ │ │
│ │ │□ │姓名 │柜员号 │身份证号│所属部门 │状态 │ 操作 │ │ │
│ │ ├───┼─────┼───────┼───────┼─────────┼─────┼─────────┤ │ │
│ │ │□ │张三 │001 │110... │1001 │在职 │详情|编辑│ │ │
│ │ │□ │张三 │001 │110... │总部 │在职 │详情|编辑│ │ │
│ │ │ │ │ │ │ │ │删除 │ │ │
│ │ └───┴─────┴───────┴───────┴─────────┴─────┴─────────┘ │ │
│ │ < 1 2 3 4 5 ... 10 > │ │
@@ -99,8 +99,8 @@ ruoyi-ui/src/
employeeId: Number,
name: String,
tellerNo: String,
orgNo: String, // 部门 ID (dept_id)
orgName: String, // 部门名称 (用于显示)
deptId: Number, // 所属部门ID
deptName: String, // 所属部门名称
idCard: String,
phone: String,
hireDate: String,
@@ -116,7 +116,7 @@ ruoyi-ui/src/
employeeId: Number | null,
name: String,
tellerNo: String,
orgNo: String, // 部门 ID (dept_id)
deptId: Number, // 所属部门ID
idCard: String,
phone: String,
hireDate: String,
@@ -136,10 +136,10 @@ ruoyi-ui/src/
| 接口名 | 方法 | 路径 | 说明 |
|--------|------|------|------|
| listEmployee | GET | /dpc/employee/list | 查询员工列表 |
| getEmployee | GET | /dpc/employee/{id} | 获取员工详情 |
| getEmployee | GET | /dpc/employee/{employeeId} | 获取员工详情 |
| addEmployee | POST | /dpc/employee | 新增员工 |
| updateEmployee | PUT | /dpc/employee | 编辑员工 |
| delEmployee | DELETE | /dpc/employee/{ids} | 删除员工 |
| delEmployee | DELETE | /dpc/employee/{employeeIds} | 删除员工 |
| importTemplate | POST | /dpc/employee/importTemplate | 下载导入模板 |
| importData | POST | /dpc/employee/importData | 导入员工信息 |

174
openspec/changes/add-employee-info-ui/tasks.md
View File

@@ -8,14 +8,14 @@
## 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)` - 导入员工信息
- [x] 创建 `ruoyi-ui/src/api/dpcEmployee.js` 文件
- [x] 实现 `listEmployee(query)` - 查询员工列表
- [x] 实现 `getEmployee(employeeId)` - 获取员工详情
- [x] 实现 `addEmployee(data)` - 新增员工
- [x] 实现 `updateEmployee(data)` - 编辑员工
- [x] 实现 `delEmployee(employeeIds)` - 删除员工
- [x] 实现 `importTemplate()` - 下载导入模板
- [x] 实现 `importData(data, updateSupport)` - 导入员工信息
**验证**: API 文件包含所有7个接口方法，路径与后端 API 文档一致。
@@ -24,38 +24,38 @@
## 2. 主页面组件开发
### 2.1 创建主页面文件
- [ ] 创建 `ruoyi-ui/src/views/dpcEmployee/` 目录
- [ ] 创建 `ruoyi-ui/src/views/dpcEmployee/index.vue` 文件
- [x] 创建 `ruoyi-ui/src/views/dpcEmployee/` 目录
- [x] 创建 `ruoyi-ui/src/views/dpcEmployee/index.vue` 文件
**验证**: 文件创建成功，可正常访问。
### 2.2 实现页面基础结构
- [ ] 实现 `<template>` 基础布局
- [ ] 实现搜索筛选区的表单（含部门树选择器）
- [ ] 实现操作按钮区（新增、导入）
- [ ] 实现员工列表表格
- [ ] 实现分页组件
- [x] 实现 `<template>` 基础布局
- [x] 实现搜索筛选区的表单（含部门树选择器）
- [x] 实现操作按钮区（新增、导入）
- [x] 实现员工列表表格
- [x] 实现分页组件
**验证**: 页面可正常渲染，布局符合设计文档。
### 2.3 实现数据管理逻辑
- [ ] 定义 `data()` 数据结构
- [x] 定义 `data()` 数据结构
- `loading` - 加载状态
- `employeeList` - 员工列表数据
- `total` - 总记录数
- `queryParams` - 查询参数
- `showSearch` - 搜索区显示状态
- [ ] 实现 `getList()` 方法 - 查询员工列表
- [ ] 实现 `handleQuery()` 方法 - 搜索
- [ ] 实现 `resetQuery()` 方法 - 重置搜索条件
- [x] 实现 `getList()` 方法 - 查询员工列表
- [x] 实现 `handleQuery()` 方法 - 搜索
- [x] 实现 `resetQuery()` 方法 - 重置搜索条件
**验证**: 页面加载时正确显示员工列表，搜索和重置功能正常。
### 2.4 实现列表表格
- [ ] 添加表格列：复选框、姓名、柜员号、身份证号、所属部门、电话、状态、操作
- [ ] 实现状态标签显示（在职/离职）
- [ ] 实现操作列按钮：详情、编辑、删除
- [ ] 实现 `handleSelectionChange()` 方法 - 多选处理
- [x] 添加表格列：复选框、姓名、柜员号、身份证号、所属部门、电话、状态、操作
- [x] 实现状态标签显示（在职/离职）
- [x] 实现操作列按钮：详情、编辑、删除
- [x] 实现 `handleSelectionChange()` 方法 - 多选处理
**验证**: 列表正确显示所有字段，状态标签正确着色。
@@ -64,9 +64,9 @@
## 3. 新增/编辑弹窗开发
### 3.1 实现弹窗结构
- [ ] 添加新增/编辑弹窗的 `<el-dialog>`
- [ ] 实现弹窗标题动态显示
- [ ] 实现员工基本信息表单
- [x] 添加新增/编辑弹窗的 `<el-dialog>`
- [x] 实现弹窗标题动态显示
- [x] 实现员工基本信息表单
- 姓名输入框（必填，最大100字符）
- 柜员号输入框（必填，最大50字符）
- 所属部门选择器（el-tree-select，关联 sys_dept）
@@ -78,40 +78,40 @@
**验证**: 弹窗可正常打开和关闭，表单字段正确显示。
### 3.2 实现亲属子表单
- [ ] 添加亲属信息区域
- [ ] 实现"+ 添加亲属"按钮
- [ ] 实现亲属列表表格（亲属姓名、身份证号、电话、关系、操作）
- [ ] 实现亲属行的删除按钮
- [ ] 添加 `relatives` 数据字段
- [x] 添加亲属信息区域
- [x] 实现"+ 添加亲属"按钮
- [x] 实现亲属列表表格（亲属姓名、身份证号、电话、关系、操作）
- [x] 实现亲属行的删除按钮
- [x] 添加 `relatives` 数据字段
**验证**: 可以动态添加和删除亲属行。
### 3.3 实现表单验证
- [ ] 定义 `rules` 验证规则
- [x] 定义 `rules` 验证规则
- 姓名：必填，最大100字符
- 柜员号：必填，最大50字符
- 身份证号：必填，格式校验（18位）
- 电话：选填，格式校验（11位手机号）
- 亲属姓名：必填
- [ ] 实现 `reset()` 方法 - 重置表单
- [ ] 实现 `cancel()` 方法 - 取消操作
- [x] 实现 `reset()` 方法 - 重置表单
- [x] 实现 `cancel()` 方法 - 取消操作
**验证**: 表单验证规则正确触发，错误提示显示正确。
### 3.4 实现新增逻辑
- [ ] 实现 `handleAdd()` 方法 - 打开新增弹窗
- [ ] 实现 `submitForm()` 方法 - 提交新增
- [ ] 集成 `addEmployee` API
- [ ] 处理成功/失败响应
- [x] 实现 `handleAdd()` 方法 - 打开新增弹窗
- [x] 实现 `submitForm()` 方法 - 提交新增
- [x] 集成 `addEmployee` API
- [x] 处理成功/失败响应
**验证**: 可以成功新增员工及其亲属信息。
### 3.5 实现编辑逻辑
- [ ] 实现 `handleUpdate(row)` 方法 - 打开编辑弹窗
- [ ] 集成 `getEmployee` API 获取详情
- [ ] 回显员工信息和亲属列表
- [ ] 修改 `submitForm()` 方法处理编辑提交
- [ ] 集成 `updateEmployee` API
- [x] 实现 `handleUpdate(row)` 方法 - 打开编辑弹窗
- [x] 集成 `getEmployee` API 获取详情
- [x] 回显员工信息和亲属列表
- [x] 修改 `submitForm()` 方法处理编辑提交
- [x] 集成 `updateEmployee` API
**验证**: 可以成功编辑员工信息和亲属信息，数据正确回显。
@@ -120,18 +120,18 @@
## 4. 详情弹窗开发
### 4.1 实现详情弹窗结构
- [ ] 添加详情弹窗的 `<el-dialog>`
- [ ] 实现员工基本信息展示区（只读）
- [ ] 实现亲属列表展示区（只读）
- [ ] 实现"暂无亲属信息"提示
- [x] 添加详情弹窗的 `<el-dialog>`
- [x] 实现员工基本信息展示区（只读）
- [x] 实现亲属列表展示区（只读）
- [x] 实现"暂无亲属信息"提示
**验证**: 详情弹窗正确显示员工信息和亲属列表。
### 4.2 实现详情查看逻辑
- [ ] 添加 `detailOpen` 数据字段
- [ ] 添加 `employeeDetail` 数据字段
- [ ] 实现 `handleDetail(row)` 方法
- [ ] 集成 `getEmployee` API
- [x] 添加 `detailOpen` 数据字段
- [x] 添加 `employeeDetail` 数据字段
- [x] 实现 `handleDetail(row)` 方法
- [x] 集成 `getEmployee` API
**验证**: 点击详情按钮可正确查看员工完整信息。
@@ -140,11 +140,11 @@
## 5. 删除功能开发
### 5.1 实现删除逻辑
- [ ] 实现 `handleDelete(row)` 方法
- [ ] 添加删除确认对话框
- [ ] 集成 `delEmployee` API
- [ ] 处理成功/失败响应
- [ ] 删除后刷新列表
- [x] 实现 `handleDelete(row)` 方法
- [x] 添加删除确认对话框
- [x] 集成 `delEmployee` API
- [x] 处理成功/失败响应
- [x] 删除后刷新列表
**验证**: 可以成功删除员工记录，删除确认对话框正常显示。
@@ -153,21 +153,21 @@
## 6. 导入功能开发
### 6.1 实现导入弹窗
- [ ] 添加导入弹窗的 `<el-dialog>`
- [ ] 实现 `<el-upload>` 组件
- [ ] 配置上传参数（headers, action, 限制文件类型）
- [ ] 实现"更新已存在数据"复选框
- [ ] 实现"下载模板"链接
- [x] 添加导入弹窗的 `<el-dialog>`
- [x] 实现 `<el-upload>` 组件
- [x] 配置上传参数（headers, action, 限制文件类型）
- [x] 实现"更新已存在数据"复选框
- [x] 实现"下载模板"链接
**验证**: 导入弹窗正常显示，可以正确选择文件。
### 6.2 实现导入逻辑
- [ ] 添加 `upload` 数据对象
- [ ] 实现 `handleImport()` 方法 - 打开导入弹窗
- [ ] 实现 `importTemplate()` 方法 - 下载模板
- [ ] 实现 `handleFileUploadProgress()` - 上传进度
- [ ] 实现 `handleFileSuccess()` - 上传成功处理
- [ ] 实现 `submitFileForm()` - 提交文件
- [x] 添加 `upload` 数据对象
- [x] 实现 `handleImport()` 方法 - 打开导入弹窗
- [x] 实现 `importTemplate()` 方法 - 下载模板
- [x] 实现 `handleFileUploadProgress()` - 上传进度
- [x] 实现 `handleFileSuccess()` - 上传成功处理
- [x] 实现 `submitFileForm()` - 提交文件
**验证**: 可以成功下载模板，上传文件后正确显示导入结果。
@@ -176,11 +176,11 @@
## 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']"`
- [x] 新增按钮添加 `v-hasPermi="['dpc:employee:add']"`
- [x] 编辑按钮添加 `v-hasPermi="['dpc:employee:edit']"`
- [x] 删除按钮添加 `v-hasPermi="['dpc:employee:remove']"`
- [x] 详情按钮添加 `v-hasPermi="['dpc:employee:query']"`
- [x] 导入按钮添加 `v-hasPermi="['dpc:employee:import']"`
**验证**: 按钮根据用户权限正确显示或隐藏。
@@ -189,23 +189,23 @@
## 8. 样式和交互优化
### 9.1 实现加载状态
- [ ] 列表加载时显示 loading 遮罩
- [ ] 提交表单时禁用提交按钮
- [ ] 文件上传时显示上传进度
- [x] 列表加载时显示 loading 遮罩
- [x] 提交表单时禁用提交按钮
- [x] 文件上传时显示上传进度
**验证**: 各种加载状态正确显示。
### 9.2 实现用户反馈
- [ ] 操作成功显示成功提示
- [ ] 操作失败显示错误提示
- [ ] 导入结果显示详细信息
- [x] 操作成功显示成功提示
- [x] 操作失败显示错误提示
- [x] 导入结果显示详细信息
**验证**: 用户反馈消息清晰友好。
### 9.3 响应式布局
- [ ] 搜索筛选区响应式布局
- [ ] 表格支持横向滚动
- [ ] 弹窗适配小屏幕
- [x] 搜索筛选区响应式布局
- [x] 表格支持横向滚动
- [x] 弹窗适配小屏幕
**验证**: 页面在不同屏幕尺寸下正常显示。
@@ -242,12 +242,12 @@
## 10. 菜单配置
### 11.1 数据库菜单配置
- [ ] 在 `sys_menu` 表中插入"信息维护"父菜单（如果不存在）
- [ ] 在 `sys_menu` 表中插入"员工信息管理"子菜单
- [ ] 配置菜单路由为 `dpcEmployee`
- [ ] 配置菜单组件为 `dpcEmployee/index`
- [ ] 配置菜单权限标识
- [ ] 配置菜单图标
- [x] 在 `sys_menu` 表中插入"信息维护"父菜单（如果不存在）
- [x] 在 `sys_menu` 表中插入"员工信息管理"子菜单
- [x] 配置菜单路由为 `employee`
- [x] 配置菜单组件为 `dpcEmployee/index`
- [x] 配置菜单权限标识
- [x] 配置菜单图标
**验证**: 菜单正确显示，点击可跳转到员工信息管理页面。