# 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`