wuxueyu
/
Industrial-image-management-system---web
1
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Industrial-image-management.../NEW_USER_MANAGEMENT.md

5.5 KiB
Raw Blame History

新用户管理界面

概述

已成功创建新的用户管理界面，对接了所有新的用户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接口

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

数据类型

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

组件功能详解

1. UserFormModal.vue - 用户表单弹窗

功能：

  • 新增用户
  • 编辑用户信息
  • 表单验证

字段：

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

2. UserDetailModal.vue - 用户详情弹窗

功能：

  • 查看用户完整信息
  • 美观的描述列表展示
  • 状态和类型的标签显示

3. UserRoleModal.vue - 角色分配弹窗

功能：

  • 分配/取消分配用户角色
  • 多选角色支持
  • 角色描述展示

页面布局

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

使用方法

1. 启用新界面

将路由配置指向新的用户管理页面：

// 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. 性能优化：合理的分页和懒加载

后续扩展

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