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

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

## 功能特性

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

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

### 3. 人员筛选

#### 按类型筛选
- **全部**：显示所有人员
- **司机**：只显示司机岗位的人员
- **护士**：只显示护士岗位的人员

#### 搜索功能
- 支持按姓名搜索
- 支持按手机号搜索
- 实时过滤显示

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

### 5. 选择操作
- 点击人员可切换选中状态
- 已选中的人员显示勾选图标
- 未选中的人员显示空心圆圈
- 底部显示已选人员数量

## 实现细节

### API接口

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

### 数据结构

#### selectedStaff（已选择人员）
```javascript
[
  {
    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列表