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