224 lines
11 KiB
Markdown
224 lines
11 KiB
Markdown
# Design: 员工信息管理前端设计
|
||
|
||
## 页面布局
|
||
|
||
### 主页面布局
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 信息维护 > 员工信息管理 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ ┌───────────────────────────────────────────────────────┐ │
|
||
│ │ 搜索区: [姓名] [柜员号] [所属部门] [身份证号] [状态▼] │ │
|
||
│ │ [搜索] [重置] │ │
|
||
│ └───────────────────────────────────────────────────────┘ │
|
||
│ ┌───────────────────────────────────────────────────────┐ │
|
||
│ │ [新增] [导入] [搜索框展开] │ │
|
||
│ └───────────────────────────────────────────────────────┘ │
|
||
│ ┌───────────────────────────────────────────────────────┐ │
|
||
│ │ ┌───┬─────┬───────┬───────┬─────────┬─────┬─────────┐ │ │
|
||
│ │ │□ │姓名 │柜员号 │身份证号│所属部门 │状态 │ 操作 │ │ │
|
||
│ │ ├───┼─────┼───────┼───────┼─────────┼─────┼─────────┤ │ │
|
||
│ │ │□ │张三 │001 │110... │总部 │在职 │详情|编辑│ │ │
|
||
│ │ │ │ │ │ │ │ │删除 │ │ │
|
||
│ │ └───┴─────┴───────┴───────┴─────────┴─────┴─────────┘ │ │
|
||
│ │ < 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,
|
||
deptId: Number, // 所属部门ID
|
||
deptName: String, // 所属部门名称
|
||
idCard: String,
|
||
phone: String,
|
||
hireDate: String,
|
||
status: String,
|
||
statusDesc: String,
|
||
createTime: String
|
||
}
|
||
```
|
||
|
||
#### 员工表单
|
||
```javascript
|
||
{
|
||
employeeId: Number | null,
|
||
name: String,
|
||
tellerNo: String,
|
||
deptId: Number, // 所属部门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/{employeeId} | 获取员工详情 |
|
||
| addEmployee | POST | /dpc/employee | 新增员工 |
|
||
| updateEmployee | PUT | /dpc/employee | 编辑员工 |
|
||
| delEmployee | DELETE | /dpc/employee/{employeeIds} | 删除员工 |
|
||
| 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`
|