# 员工管理模块

## 功能概述

移动端员工管理模块提供了完整的员工信息管理功能，包括员工列表查看、详情查看、信息编辑等。

## 页面结构

### 1. 员工列表页面 (staffList.vue)
- **功能**: 展示员工列表，支持搜索、筛选、分页加载
- **主要特性**:
  - 搜索栏：支持按姓名搜索
  - 部门筛选：横向滚动的部门选择器
  - 高级筛选：职称、职业资格、学历、状态等筛选条件
  - 员工卡片：展示员工基本信息和头像
  - 下拉刷新和上拉加载更多

### 2. 员工详情页面 (staffDetail.vue)
- **功能**: 展示员工的完整详细信息
- **主要特性**:
  - 头部信息：头像、姓名、部门、状态
  - 基本信息：年龄、性别、手机、身份证等
  - 工作信息：部门、职务、职称、职业资格、岗级等
  - 教育背景：最高学历、初始学历相关信息
  - 其他信息：家庭住址、紧急联系人等

### 3. 员工编辑页面 (staffEdit.vue)
- **功能**: 新增或编辑员工信息
- **主要特性**:
  - 表单验证：必填字段验证、格式验证
  - 分类管理：基本信息、工作信息、教育背景、其他信息
  - 多选支持：政治面貌、职业资格等多选字段
  - 日期选择：入职时间、合同时间等日期字段

## 技术特性

### 移动端适配
- 使用 uView UI 组件库
- 响应式设计，适配不同屏幕尺寸
- 触摸友好的交互设计

### 数据管理
- 使用 mescroll-uni 实现下拉刷新和上拉加载
- 分页加载，优化性能
- 本地缓存和状态管理

### 用户体验
- 加载状态提示
- 错误处理和用户反馈
- 流畅的页面切换动画

## API 接口

### 员工相关接口
- `listUser`: 获取员工列表
- `getUser`: 获取员工详情
- `addUser`: 新增员工
- `updateUser`: 更新员工信息
- `delUser`: 删除员工

### 部门相关接口
- `deptTreeSelectNew`: 获取部门树结构

## 使用说明

### 1. 查看员工列表
1. 进入员工列表页面
2. 使用搜索栏按姓名搜索
3. 点击部门标签筛选特定部门员工
4. 点击筛选按钮进行高级筛选
5. 下拉刷新或上拉加载更多

### 2. 查看员工详情
1. 在员工列表中点击员工卡片
2. 查看员工的完整信息
3. 点击"编辑信息"按钮进入编辑页面

### 3. 编辑员工信息
1. 在员工详情页面点击"编辑信息"
2. 或直接进入编辑页面新增员工
3. 填写表单信息
4. 点击"保存"提交更改

## 注意事项

1. **权限控制**: 确保用户有相应的操作权限
2. **数据验证**: 表单提交前会进行数据验证
3. **网络处理**: 网络异常时会显示相应的错误提示
4. **性能优化**: 大量数据时使用分页加载

## 样式规范

- 使用 SCSS 预处理器
- 遵循移动端设计规范
- 统一的颜色和字体规范
- 响应式布局设计