# 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 实现页面基础结构
- [ ] 实现 `<template>` 基础布局
- [ ] 实现搜索筛选区的表单（含部门树选择器）
- [ ] 实现操作按钮区（新增、导入）
- [ ] 实现员工列表表格
- [ ] 实现分页组件

**验证**: 页面可正常渲染，布局符合设计文档。

### 2.3 实现数据管理逻辑
- [ ] 定义 `data()` 数据结构
  - `loading` - 加载状态
  - `employeeList` - 员工列表数据
  - `total` - 总记录数
  - `queryParams` - 查询参数
  - `showSearch` - 搜索区显示状态
- [ ] 实现 `getList()` 方法 - 查询员工列表
- [ ] 实现 `handleQuery()` 方法 - 搜索
- [ ] 实现 `resetQuery()` 方法 - 重置搜索条件

**验证**: 页面加载时正确显示员工列表，搜索和重置功能正常。

### 2.4 实现列表表格
- [ ] 添加表格列：复选框、姓名、柜员号、身份证号、所属部门、电话、状态、操作
- [ ] 实现状态标签显示（在职/离职）
- [ ] 实现操作列按钮：详情、编辑、删除
- [ ] 实现 `handleSelectionChange()` 方法 - 多选处理

**验证**: 列表正确显示所有字段，状态标签正确着色。

---

## 3. 新增/编辑弹窗开发

### 3.1 实现弹窗结构
- [ ] 添加新增/编辑弹窗的 `<el-dialog>`
- [ ] 实现弹窗标题动态显示
- [ ] 实现员工基本信息表单
  - 姓名输入框（必填，最大100字符）
  - 柜员号输入框（必填，最大50字符）
  - 所属部门选择器（el-tree-select，关联 sys_dept）
  - 身份证号输入框（必填，18位校验）
  - 电话输入框（选填，11位手机号校验）
  - 入职时间日期选择器
  - 状态单选框组（在职/离职）

**验证**: 弹窗可正常打开和关闭，表单字段正确显示。

### 3.2 实现亲属子表单
- [ ] 添加亲属信息区域
- [ ] 实现"+ 添加亲属"按钮
- [ ] 实现亲属列表表格（亲属姓名、身份证号、电话、关系、操作）
- [ ] 实现亲属行的删除按钮
- [ ] 添加 `relatives` 数据字段

**验证**: 可以动态添加和删除亲属行。

### 3.3 实现表单验证
- [ ] 定义 `rules` 验证规则
  - 姓名：必填，最大100字符
  - 柜员号：必填，最大50字符
  - 身份证号：必填，格式校验（18位）
  - 电话：选填，格式校验（11位手机号）
  - 亲属姓名：必填
- [ ] 实现 `reset()` 方法 - 重置表单
- [ ] 实现 `cancel()` 方法 - 取消操作

**验证**: 表单验证规则正确触发，错误提示显示正确。

### 3.4 实现新增逻辑
- [ ] 实现 `handleAdd()` 方法 - 打开新增弹窗
- [ ] 实现 `submitForm()` 方法 - 提交新增
- [ ] 集成 `addEmployee` API
- [ ] 处理成功/失败响应

**验证**: 可以成功新增员工及其亲属信息。

### 3.5 实现编辑逻辑
- [ ] 实现 `handleUpdate(row)` 方法 - 打开编辑弹窗
- [ ] 集成 `getEmployee` API 获取详情
- [ ] 回显员工信息和亲属列表
- [ ] 修改 `submitForm()` 方法处理编辑提交
- [ ] 集成 `updateEmployee` API

**验证**: 可以成功编辑员工信息和亲属信息，数据正确回显。

---

## 4. 详情弹窗开发

### 4.1 实现详情弹窗结构
- [ ] 添加详情弹窗的 `<el-dialog>`
- [ ] 实现员工基本信息展示区（只读）
- [ ] 实现亲属列表展示区（只读）
- [ ] 实现"暂无亲属信息"提示

**验证**: 详情弹窗正确显示员工信息和亲属列表。

### 4.2 实现详情查看逻辑
- [ ] 添加 `detailOpen` 数据字段
- [ ] 添加 `employeeDetail` 数据字段
- [ ] 实现 `handleDetail(row)` 方法
- [ ] 集成 `getEmployee` API

**验证**: 点击详情按钮可正确查看员工完整信息。

---

## 5. 删除功能开发

### 5.1 实现删除逻辑
- [ ] 实现 `handleDelete(row)` 方法
- [ ] 添加删除确认对话框
- [ ] 集成 `delEmployee` API
- [ ] 处理成功/失败响应
- [ ] 删除后刷新列表

**验证**: 可以成功删除员工记录，删除确认对话框正常显示。

---

## 6. 导入功能开发

### 6.1 实现导入弹窗
- [ ] 添加导入弹窗的 `<el-dialog>`
- [ ] 实现 `<el-upload>` 组件
- [ ] 配置上传参数（headers, action, 限制文件类型）
- [ ] 实现"更新已存在数据"复选框
- [ ] 实现"下载模板"链接

**验证**: 导入弹窗正常显示，可以正确选择文件。

### 6.2 实现导入逻辑
- [ ] 添加 `upload` 数据对象
- [ ] 实现 `handleImport()` 方法 - 打开导入弹窗
- [ ] 实现 `importTemplate()` 方法 - 下载模板
- [ ] 实现 `handleFileUploadProgress()` - 上传进度
- [ ] 实现 `handleFileSuccess()` - 上传成功处理
- [ ] 实现 `submitFileForm()` - 提交文件

**验证**: 可以成功下载模板，上传文件后正确显示导入结果。

---

## 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']"`

**验证**: 按钮根据用户权限正确显示或隐藏。

---

## 8. 样式和交互优化

### 9.1 实现加载状态
- [ ] 列表加载时显示 loading 遮罩
- [ ] 提交表单时禁用提交按钮
- [ ] 文件上传时显示上传进度

**验证**: 各种加载状态正确显示。

### 9.2 实现用户反馈
- [ ] 操作成功显示成功提示
- [ ] 操作失败显示错误提示
- [ ] 导入结果显示详细信息

**验证**: 用户反馈消息清晰友好。

### 9.3 响应式布局
- [ ] 搜索筛选区响应式布局
- [ ] 表格支持横向滚动
- [ ] 弹窗适配小屏幕

**验证**: 页面在不同屏幕尺寸下正常显示。

---

## 10. 测试和修复

### 9.1 功能测试
- [ ] 测试列表查询和分页
- [ ] 测试搜索和筛选功能
- [ ] 测试新增员工（无亲属）
- [ ] 测试新增员工（单个亲属）
- [ ] 测试新增员工（多个亲属）
- [ ] 测试编辑员工基本信息
- [ ] 测试编辑员工亲属（新增、修改、删除）
- [ ] 测试查看详情
- [ ] 测试删除员工（单个）
- [ ] 测试批量删除
- [ ] 测试下载导入模板
- [ ] 测试导入数据（成功场景）
- [ ] 测试导入数据（部分失败场景）
- [ ] 测试表单验证（各种错误场景）

### 9.2 浏览器兼容性测试
- [ ] Chrome 测试
- [ ] Firefox 测试
- [ ] Edge 测试

### 9.3 Bug 修复
- [ ] 修复测试中发现的问题

---

## 10. 菜单配置

### 11.1 数据库菜单配置
- [ ] 在 `sys_menu` 表中插入"信息维护"父菜单（如果不存在）
- [ ] 在 `sys_menu` 表中插入"员工信息管理"子菜单
- [ ] 配置菜单路由为 `dpcEmployee`
- [ ] 配置菜单组件为 `dpcEmployee/index`
- [ ] 配置菜单权限标识
- [ ] 配置菜单图标

**验证**: 菜单正确显示，点击可跳转到员工信息管理页面。

---

## 依赖关系

```
1. API 接口层 (1.1)
    ↓
2. 主页面组件基础 (2.1 - 2.4)
    ↓
3. 新增/编辑弹窗 (3.1 - 3.5) ← 并行
4. 详情弹窗 (4.1 - 4.2)     ← 并行
5. 删除功能 (5.1)          ← 并行
6. 导入功能 (6.1 - 6.2)    ← 并行
    ↓
7. 权限控制 (7.1)
    ↓
8. 样式优化 (8.1 - 8.3)
    ↓
9. 测试和修复 (9.1 - 9.3)
    ↓
10. 菜单配置 (10.1)
```

## 预估工作量

| 任务组 | 预估时间 |
|--------|----------|
| API 接口层 | 0.5 小时 |
| 主页面组件 | 1.5 小时 |
| 新增/编辑弹窗 | 3 小时 |
| 详情弹窗 | 1 小时 |
| 删除功能 | 0.5 小时 |
| 导入功能 | 1.5 小时 |
| 权限控制 | 0.5 小时 |
| 样式优化 | 1 小时 |
| 测试和修复 | 1 小时 |
| 菜单配置 | 0.5 小时 |
| **总计** | **11 小时** |