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. **性能优化**：合理的分页和懒加载
|
|||
|
|
|
|||
|
|
## 后续扩展
|
|||
|
|
|
|||
|
|
- [ ] 添加用户导入/导出功能
|
|||
|
|
- [ ] 集成文件上传（头像）
|
|||
|
|
- [ ] 添加用户操作日志
|
|||
|
|
- [ ] 支持批量操作
|
|||
|
|
- [ ] 添加高级搜索功能
|