编辑 | blame | 历史 | 原始文档

急救转运任务 - 执行人员选择功能说明

功能概述

在创建非急救转运任务时,需要选择执行任务的人员。系统支持从当前用户所在分公司中选择司机和护士作为执行人员。

功能特性

1. 默认人员

  • 当前登录用户默认作为第一个执行人员
  • 当前用户不可被移除

2. 人员选择

  • 点击"添加人员"按钮打开人员选择弹窗
  • 弹窗以底部弹出方式展示
  • 支持多选人员

3. 人员筛选

按类型筛选

  • 全部:显示所有人员
  • 司机:只显示司机岗位的人员
  • 护士:只显示护士岗位的人员

搜索功能

  • 支持按姓名搜索
  • 支持按手机号搜索
  • 实时过滤显示

4. 人员信息展示

每个人员显示以下信息:
- 姓名
- 手机号
- 所属部门
- 岗位/角色

5. 选择操作

  • 点击人员可切换选中状态
  • 已选中的人员显示勾选图标
  • 未选中的人员显示空心圆圈
  • 底部显示已选人员数量

实现细节

API接口

查询用户列表

listUser({
  deptId: 当前用户部门ID,
  status: '0' // 只查询正常状态用户
})

数据结构

selectedStaff(已选择人员)

[
  {
    userId: 用户ID,
    nickName: '姓名',
    phonenumber: '手机号',
    deptName: '部门名称',
    postName: '岗位名称',
    roleName: '角色名称',
    type: 'driver|nurse|other'
  }
]

人员类型判断规则

根据用户的岗位名称或角色名称判断:
- 包含"司机"关键字 → type: 'driver'
- 包含"护士"关键字 → type: 'nurse'
- 其他 → type: 'other'

关键方法

1. initSelectedStaff()

初始化已选人员列表,默认包含当前用户

2. loadDeptStaff()

加载当前用户所在部门的所有人员

3. getUserType(user)

根据岗位和角色判断用户类型

4. showStaffSelector()

显示人员选择弹窗

5. filterStaff(type)

按类型筛选人员(全部/司机/护士)

6. onStaffSearch(e)

处理搜索输入,实时过滤人员列表

7. toggleStaffSelection(staff)

切换人员选中状态

8. isStaffSelected(userId)

判断人员是否已选中

9. confirmStaffSelection()

确认人员选择,关闭弹窗

10. removeStaff(index)

从已选列表中移除人员(当前用户除外)

UI设计

主界面展示

执行任务人员
┌─────────────────────────┐
│ 张三 (司机)        ✓    │  <- 当前用户,不可移除
├─────────────────────────┤
│ 李四 (护士)        ✗    │  <- 可移除
├─────────────────────────┤
│ + 添加人员               │  <- 打开选择弹窗
└─────────────────────────┘

选择弹窗布局

┌────────────────────────────┐
│ 选择执行人员            ✗  │  <- 标题栏
├────────────────────────────┤
│ 🔍 搜索姓名、手机号        │  <- 搜索框
├────────────────────────────┤
│ [全部] [司机] [护士]       │  <- 类型筛选
├────────────────────────────┤
│                            │
│ 张三  138****1234          │  <- 人员列表
│ 广州分公司 | 司机      ✓  │
│                            │
│ 李四  139****5678          │
│ 广州分公司 | 护士      ○  │
│                            │
├────────────────────────────┤
│ [取消]    [确定(已选2)]    │  <- 底部操作栏
└────────────────────────────┘

样式特点

颜色方案

  • 主色:#007AFF(蓝色)
  • 删除色:#ff4d4f(红色)
  • 背景色:#f5f5f5(浅灰)
  • 边框色:#f0f0f0(浅灰)

交互反馈

  • 点击人员项时显示背景色变化
  • 已选中显示蓝色勾选图标
  • 未选中显示灰色空心圆圈
  • 按钮支持禁用状态

数据流转

1. 页面加载

onLoad
  ↓
initSelectedStaff() - 初始化当前用户
  ↓
loadDeptStaff() - 加载部门人员
  ↓
filterStaffList() - 初始化过滤列表

2. 人员选择

点击"添加人员"
  ↓
showStaffSelector() - 打开弹窗
  ↓
用户筛选/搜索
  ↓
toggleStaffSelection() - 切换选中
  ↓
confirmStaffSelection() - 确认选择
  ↓
更新 selectedStaff
  ↓
关闭弹窗

3. 任务提交

submitTask()
  ↓
buildSubmitData()
  ↓
提取 assigneeIds: selectedStaff.map(staff => staff.userId)
  ↓
提交到后端

注意事项

1. 当前用户保护

  • 当前用户始终在已选列表第一位
  • 不允许移除当前用户
  • 移除操作会检查索引,index=0时提示不能移除

2. 数据验证

  • 提交前检查至少选择一名人员
  • 确认选择时验证已选列表不为空

3. 性能优化

  • 人员列表按需加载
  • 搜索和筛选实时响应
  • 使用索引优化列表渲染

4. 用户体验

  • 底部显示已选人员数量
  • 搜索支持模糊匹配
  • 类型筛选支持快速定位
  • 弹窗高度自适应,最大80vh

扩展功能(待开发)

  1. 人员详情:点击人员查看详细信息
  2. 批量选择:支持全选/全不选
  3. 常用人员:记录常用搭档,快速选择
  4. 人员状态:显示人员当前任务状态
  5. 权限控制:根据任务类型限制可选人员范围

相关文件

前端文件

  • app/pages/task/create-emergency.vue - 急救转运任务创建页面
  • app/api/system/user.js - 用户API接口

后端文件

  • ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysUserController.java - 用户Controller
  • ruoyi-system/src/main/java/com/ruoyi/system/service/ISysUserService.java - 用户Service接口

测试要点

  1. ✅ 默认包含当前用户
  2. ✅ 当前用户不可移除
  3. ✅ 添加其他人员
  4. ✅ 移除其他人员
  5. ✅ 按类型筛选(全部/司机/护士)
  6. ✅ 按姓名搜索
  7. ✅ 按手机号搜索
  8. ✅ 多选人员
  9. ✅ 取消选择
  10. ✅ 确认选择
  11. ✅ 已选人员数量显示
  12. ✅ 提交任务时包含人员ID列表