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

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            # 主页面组件

数据模型

员工列表项

{
  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
}

员工表单

{
  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