# 新用户管理界面

## 概述

已成功创建新的用户管理界面，对接了所有新的用户API接口，支持完整的用户信息管理功能。

## 文件结构

```
src/views/system/user/
├── index-new.vue                    # 新用户管理主页面
├── components/
│   ├── UserFormModal.vue           # 用户表单弹窗（新增/编辑）
│   ├── UserDetailModal.vue         # 用户详情弹窗
│   └── UserRoleModal.vue           # 用户角色分配弹窗
└── dept/
    └── index.vue                   # 部门树组件（复用原有）
```

## 功能特性

### 🏢 左侧部门树
- 展示部门层级结构
- 支持搜索部门
- 点击部门筛选该部门下的用户

### 👥 右侧用户管理
- **搜索功能**：支持按账号、姓名、手机号、在职状态、员工性质搜索
- **用户列表**：展示用户完整信息，包括新字段
- **操作功能**：查看详情、编辑、分配角色、删除

### 🆕 新字段支持
- **员工编码** (userCode)
- **在职状态** (userStatus): 在职/离职
- **员工性质** (userType): 正式员工/兼职员工/实习生/外包员工
- **入职日期** (hiredate)
- **出生日期** (birthdate)
- **学历** (education)
- **专业** (majorField)
- **工作方向** (workField)
- **身份证** (identityCard)

## API 对接

### 使用的新API接口
```typescript
import { 
  pageUserNew,      // 分页查询用户列表
  addUserNew,       // 新增用户
  updateUserNew,    // 更新用户
  deleteUserNew,    // 删除用户
  bindUserRole      // 绑定角色
} from '@/apis/system/user-new'
```

### 数据类型
```typescript
import type { 
  UserNewResp,      // 用户响应类型
  UserNewAddReq,    // 新增用户请求类型
  UserNewUpdateReq, // 更新用户请求类型
  UserBindRoleReq   // 绑定角色请求类型
} from '@/apis/system/type'
```

## 组件功能详解

### 1. UserFormModal.vue - 用户表单弹窗
**功能**：
- 新增用户
- 编辑用户信息
- 表单验证

**字段**：
- 基础信息：账号、姓名、手机号、邮箱
- 个人信息：性别、员工编码、身份证
- 职业信息：在职状态、员工性质、部门
- 教育信息：学历、专业、工作方向
- 时间信息：入职日期、出生日期

### 2. UserDetailModal.vue - 用户详情弹窗
**功能**：
- 查看用户完整信息
- 美观的描述列表展示
- 状态和类型的标签显示

### 3. UserRoleModal.vue - 角色分配弹窗
**功能**：
- 分配/取消分配用户角色
- 多选角色支持
- 角色描述展示

## 页面布局

```
┌─────────────────────────────────────────────┐
│                 用户管理                      │
├───────────────┬─────────────────────────────┤
│               │        搜索表单               │
│   部门树       ├─────────────────────────────┤
│               │        操作按钮               │
│               ├─────────────────────────────┤
│               │        用户表格               │
│               │                             │
│               │                             │
└───────────────┴─────────────────────────────┘
```

## 使用方法

### 1. 启用新界面
将路由配置指向新的用户管理页面：
```typescript
// router配置
{
  path: '/system/user',
  component: () => import('@/views/system/user/index-new.vue')
}
```

### 2. 功能操作
1. **部门筛选**：点击左侧部门树节点
2. **搜索用户**：在搜索表单中输入条件
3. **新增用户**：点击"新增用户"按钮
4. **编辑用户**：点击表格中的"编辑"按钮
5. **查看详情**：点击表格中的"详情"按钮
6. **分配角色**：点击表格中的"分配角色"按钮
7. **删除用户**：点击表格中的"删除"按钮

## 数据映射

### 新旧字段对应关系
| 新字段 | 原字段 | 说明 |
|--------|--------|------|
| userId | id | 用户ID |
| account | username | 账号 |
| name | nickname | 姓名 |
| mobile | phone | 手机号 |
| userStatus | status | 在职状态（新增） |
| userType | - | 员工性质（新增） |
| userCode | - | 员工编码（新增） |
| hiredate | - | 入职日期（新增） |
| birthdate | - | 出生日期（新增） |
| education | - | 学历（新增） |
| majorField | - | 专业（新增） |
| workField | - | 工作方向（新增） |
| identityCard | - | 身份证（新增） |

## 样式特点

- **现代化UI**：使用Arco Design组件库
- **响应式布局**：适配不同屏幕尺寸
- **清晰的视觉层次**：合理的间距和颜色搭配
- **状态标识**：使用标签显示不同状态
- **操作便捷**：快捷的按钮和弹窗操作

## 注意事项

1. **兼容性**：新界面与原有接口并存，不影响原有功能
2. **权限控制**：保持与原有权限系统的兼容
3. **数据验证**：严格的表单验证确保数据质量
4. **错误处理**：友好的错误提示和异常处理
5. **性能优化**：合理的分页和懒加载

## 后续扩展

- [ ] 添加用户导入/导出功能
- [ ] 集成文件上传（头像）
- [ ] 添加用户操作日志
- [ ] 支持批量操作
- [ ] 添加高级搜索功能 