171 lines
5.5 KiB
Markdown
171 lines
5.5 KiB
Markdown
# 新用户管理界面
|
||
|
||
## 概述
|
||
|
||
已成功创建新的用户管理界面，对接了所有新的用户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. **性能优化**：合理的分页和懒加载
|
||
|
||
## 后续扩展
|
||
|
||
- [ ] 添加用户导入/导出功能
|
||
- [ ] 集成文件上传（头像）
|
||
- [ ] 添加用户操作日志
|
||
- [ ] 支持批量操作
|
||
- [ ] 添加高级搜索功能 |