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

后台任务管理 - 急救转运扩展信息显示

概述

在后台管理界面的任务管理功能中,新增对急救转运任务及福祉车任务扩展信息的展示支持,使管理员能够查看完整的任务详情。

修改内容

1. 任务详情页面增强 (detail.vue)

文件: ruoyi-ui/src/views/task/general/detail.vue

1.1 添加急救转运任务扩展信息展示

在基本信息之后,根据任务类型动态显示扩展信息:

<!-- 急救转运任务扩展信息 -->
<el-descriptions v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo" 
                 title="急救转运信息" :column="2" border style="margin-top: 20px;">
  <el-descriptions-item label="患者姓名">{{ taskDetail.emergencyInfo.patientName }}</el-descriptions-item>
  <el-descriptions-item label="患者性别">
    <dict-tag :options="dict.type.sys_user_sex" :value="taskDetail.emergencyInfo.patientGender"/>
  </el-descriptions-item>
  <el-descriptions-item label="患者年龄">{{ taskDetail.emergencyInfo.patientAge }}</el-descriptions-item>
  <el-descriptions-item label="联系电话">{{ taskDetail.emergencyInfo.contactPhone }}</el-descriptions-item>
  <el-descriptions-item label="接送医院" :span="2">{{ taskDetail.emergencyInfo.hospitalName }}</el-descriptions-item>
  <el-descriptions-item label="就诊科室" :span="2">
    <dict-tag v-if="taskDetail.emergencyInfo.hospitalDepartment" 
              :options="dict.type.hospital_department" 
              :value="taskDetail.emergencyInfo.hospitalDepartment"/>
    <span v-else style="color: #C0C4CC;">--</span>
  </el-descriptions-item>
  <el-descriptions-item label="病情描述" :span="2">
    <span v-if="taskDetail.emergencyInfo.illnessDescription">{{ taskDetail.emergencyInfo.illnessDescription }}</span>
    <span v-else style="color: #C0C4CC;">--</span>
  </el-descriptions-item>
  <el-descriptions-item label="特殊需求" :span="2">
    <span v-if="taskDetail.emergencyInfo.specialRequirements">{{ taskDetail.emergencyInfo.specialRequirements }}</span>
    <span v-else style="color: #C0C4CC;">--</span>
  </el-descriptions-item>
  <el-descriptions-item label="是否需要担架">
    <el-tag v-if="taskDetail.emergencyInfo.needsStretcher == 1" type="success" size="small">是</el-tag>
    <el-tag v-else type="info" size="small">否</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="是否需要轮椅">
    <el-tag v-if="taskDetail.emergencyInfo.needsWheelchair == 1" type="success" size="small">是</el-tag>
    <el-tag v-else type="info" size="small">否</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="是否需要氧气">
    <el-tag v-if="taskDetail.emergencyInfo.needsOxygen == 1" type="success" size="small">是</el-tag>
    <el-tag v-else type="info" size="small">否</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="紧急程度">
    <el-tag v-if="taskDetail.emergencyInfo.urgencyLevel === 'HIGH'" type="danger" size="small">紧急</el-tag>
    <el-tag v-else-if="taskDetail.emergencyInfo.urgencyLevel === 'MEDIUM'" type="warning" size="small">一般</el-tag>
    <el-tag v-else-if="taskDetail.emergencyInfo.urgencyLevel === 'LOW'" type="info" size="small">不急</el-tag>
    <span v-else style="color: #C0C4CC;">--</span>
  </el-descriptions-item>
  <el-descriptions-item label="陪同人数">{{ taskDetail.emergencyInfo.companionCount || 0 }} 人</el-descriptions-item>
  <el-descriptions-item label="预估费用">{{ taskDetail.emergencyInfo.estimatedCost || '--' }} 元</el-descriptions-item>
</el-descriptions>

1.2 添加福祉车任务扩展信息展示

<!-- 福祉车任务扩展信息 -->
<el-descriptions v-if="taskDetail.taskType === 'WELFARE' && taskDetail.welfareInfo" 
                 title="福祉车服务信息" :column="2" border style="margin-top: 20px;">
  <el-descriptions-item label="乘客姓名">{{ taskDetail.welfareInfo.passengerName }}</el-descriptions-item>
  <el-descriptions-item label="乘客性别">
    <dict-tag :options="dict.type.sys_user_sex" :value="taskDetail.welfareInfo.passengerGender"/>
  </el-descriptions-item>
  <el-descriptions-item label="乘客年龄">{{ taskDetail.welfareInfo.passengerAge }}</el-descriptions-item>
  <el-descriptions-item label="联系电话">{{ taskDetail.welfareInfo.contactPhone }}</el-descriptions-item>
  <el-descriptions-item label="服务类型" :span="2">
    <span v-if="taskDetail.welfareInfo.serviceType">{{ taskDetail.welfareInfo.serviceType }}</span>
    <span v-else style="color: #C0C4CC;">--</span>
  </el-descriptions-item>
  <el-descriptions-item label="特殊需求" :span="2">
    <span v-if="taskDetail.welfareInfo.specialRequirements">{{ taskDetail.welfareInfo.specialRequirements }}</span>
    <span v-else style="color: #C0C4CC;">--</span>
  </el-descriptions-item>
  <el-descriptions-item label="是否需要轮椅">
    <el-tag v-if="taskDetail.welfareInfo.needsWheelchair == 1" type="success" size="small">是</el-tag>
    <el-tag v-else type="info" size="small">否</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="陪同人数">{{ taskDetail.welfareInfo.companionCount || 0 }} 人</el-descriptions-item>
  <el-descriptions-item label="预估费用">{{ taskDetail.welfareInfo.estimatedCost || '--' }} 元</el-descriptions-item>
  <el-descriptions-item label="实际费用">{{ taskDetail.welfareInfo.actualCost || '--' }} 元</el-descriptions-item>
</el-descriptions>

1.3 更新字典类型

dicts: [
  'sys_task_type', 
  'sys_task_status', 
  'sys_vehicle_type', 
  'sys_task_vehicle_status', 
  'sys_user_sex',           // ✅ 新增:性别字典
  'hospital_department'     // ✅ 新增:医院科室字典
]

2. 任务列表页面优化 (index.vue)

文件: ruoyi-ui/src/views/task/general/index.vue

2.1 添加急救转运任务标识

在任务类型列显示特殊图标标识急救转运任务:

<el-table-column label="任务类型" align="center" prop="taskType" width="120">
  <template slot-scope="scope">
    <dict-tag :options="dict.type.sys_task_type" :value="scope.row.taskType"/>
    <!-- ✅ 急救转运任务显示警告图标 -->
    <el-tag v-if="scope.row.taskType === 'EMERGENCY_TRANSFER'" type="danger" size="mini" style="margin-left: 5px;">
      <i class="el-icon-warning"></i>
    </el-tag>
  </template>
</el-table-column>

3. 后端数据加载(已完成)

文件: SysTaskServiceImpl.java

后端的 getTaskDetail 方法已正确实现扩展信息加载:

@Override
public SysTask getTaskDetail(Long taskId) {
    SysTask task = sysTaskMapper.selectSysTaskByTaskId(taskId);
    if (task != null) {
        // 查询关联车辆
        task.setAssignedVehicles(sysTaskVehicleMapper.selectSysTaskVehicleByTaskId(taskId));
        // 查询附件
        task.setAttachments(sysTaskAttachmentMapper.selectSysTaskAttachmentByTaskId(taskId));
        // 查询操作日志
        task.setOperationLogs(sysTaskLogMapper.selectSysTaskLogByTaskId(taskId));
        
        // ✅ 加载急救转运扩展信息
        if ("EMERGENCY_TRANSFER".equals(task.getTaskType())) {
            SysTaskEmergency emergencyInfo = sysTaskEmergencyMapper.selectSysTaskEmergencyByTaskId(taskId);
            task.setEmergencyInfo(emergencyInfo);
        }
        // ✅ 加载福祉车扩展信息
        else if ("WELFARE".equals(task.getTaskType())) {
            SysTaskWelfare welfareInfo = sysTaskWelfareMapper.selectSysTaskWelfareByTaskId(taskId);
            task.setWelfareInfo(welfareInfo);
        }
    }
    return task;
}

功能展示

急救转运任务详情页面

显示内容包括:

基本信息
- 任务编号、类型、状态
- 创建人、执行人、部门
- 出发地址、目的地址
- 计划时间、实际时间

急救转运信息(仅 EMERGENCY_TRANSFER 类型显示)
- 患者信息:姓名、性别、年龄、联系电话
- 医疗信息:接送医院、就诊科室、病情描述
- 特殊需求:担架、轮椅、氧气
- 紧急程度:高/中/低
- 陪同人数、预估费用

福祉车服务信息(仅 WELFARE 类型显示)
- 乘客信息:姓名、性别、年龄、联系电话
- 服务信息:服务类型、特殊需求
- 辅助设备:轮椅需求
- 费用信息:预估费用、实际费用、陪同人数

关联车辆
- 车牌号、车辆类型、品牌型号
- 分配时间、分配人、状态

任务附件
- 文件列表及下载

操作日志
- 时间线形式展示操作记录

任务列表页面

  • 任务列表展示基本信息
  • 急救转运任务带有红色警告图标标识
  • 支持按任务类型、状态筛选
  • 点击任务编号查看详情

使用场景

场景1:查看急救转运任务详情

1. 进入后台管理 → 任务管理
2. 在列表中找到急救转运任务(带红色警告图标)
3. 点击任务编号或"查看"按钮
4. 查看完整的任务信息,包括:
   - 基本任务信息
   - 患者详细信息
   - 医疗相关信息
   - 特殊需求配置
   - 关联车辆和执行人员
   - 操作历史记录

场景2:筛选特定类型任务

1. 在任务管理页面
2. 使用"任务类型"筛选器
3. 选择"急救转运"
4. 查看所有急救转运任务列表

场景3:监控紧急任务

1. 在任务列表中识别急救转运任务(红色警告图标)
2. 点击查看详情
3. 查看"紧急程度"字段:
   - 红色"紧急"标签 → 高优先级处理
   - 黄色"一般"标签 → 正常处理
   - 灰色"不急"标签 → 常规处理
4. 根据紧急程度调度资源

显示效果

急救转运任务标识

  • 列表: 任务类型旁边显示 红色警告图标
  • 详情: 独立的"急救转运信息"卡片

字段显示规则

  1. 必填字段: 直接显示值
  2. 可选字段为空: 显示 -- (灰色)
  3. 布尔字段: 使用标签显示
  • → 绿色标签
  • → 灰色标签
  1. 枚举字段: 使用字典标签
  • 性别: 男/女
  • 科室: 使用医院科室字典
  • 紧急程度:
    • HIGH → 红色"紧急"
    • MEDIUM → 黄色"一般"
    • LOW → 灰色"不急"

数据流程

前端页面加载
    ↓
调用 getTask(taskId) API
    ↓
后端 SysTaskServiceImpl.getTaskDetail()
    ↓
查询基本任务信息 (sys_task)
    ↓
根据 task_type 判断
    ├─ EMERGENCY_TRANSFER → 查询 sys_task_emergency
    └─ WELFARE → 查询 sys_task_welfare
    ↓
返回完整任务对象
    ↓
前端根据 taskType 条件渲染扩展信息

注意事项

1. 数据完整性

确保扩展信息表中的数据与主任务表正确关联:
- sys_task_emergency.task_id = sys_task.task_id
- sys_task_welfare.task_id = sys_task.task_id

2. 字典数据配置

需要确保以下字典类型已正确配置:
- sys_user_sex: 性别字典(男/女)
- hospital_department: 医院科室字典(急诊科、心内科等)

3. 权限控制

后台管理界面已有权限控制:
javascript v-hasPermi="['task:general:query']" // 查看权限 v-hasPermi="['task:general:edit']" // 编辑权限 v-hasPermi="['task:general:assign']" // 分配权限

4. 空值处理

所有可选字段都做了空值判断,避免显示 undefinednull
vue <span v-if="taskDetail.emergencyInfo.illnessDescription"> {{ taskDetail.emergencyInfo.illnessDescription }} </span> <span v-else style="color: #C0C4CC;">--</span>

相关文件

前端文件

  • /ruoyi-ui/src/views/task/general/index.vue - 任务列表页面
  • /ruoyi-ui/src/views/task/general/detail.vue - 任务详情页面

后端文件

  • /ruoyi-admin/src/main/java/com/ruoyi/web/controller/task/SysTaskController.java - 任务控制器
  • /ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysTaskServiceImpl.java - 任务服务实现
  • /ruoyi-system/src/main/resources/mapper/system/SysTaskMapper.xml - 任务Mapper
  • /ruoyi-system/src/main/resources/mapper/system/SysTaskEmergencyMapper.xml - 急救转运Mapper
  • /ruoyi-system/src/main/resources/mapper/system/SysTaskWelfareMapper.xml - 福祉车Mapper

实体类

  • /ruoyi-system/src/main/java/com/ruoyi/system/domain/SysTask.java - 任务实体
  • /ruoyi-system/src/main/java/com/ruoyi/system/domain/SysTaskEmergency.java - 急救转运扩展实体
  • /ruoyi-system/src/main/java/com/ruoyi/system/domain/SysTaskWelfare.java - 福祉车扩展实体

测试建议

测试用例1:查看急救转运任务详情

前置条件:系统中存在急救转运任务
步骤:
1. 登录后台管理系统
2. 进入任务管理页面
3. 找到一条急救转运任务(有红色警告图标)
4. 点击任务编号查看详情
验证:
- 显示基本任务信息
- 显示"急救转运信息"卡片
- 所有患者信息正确显示
- 医院、科室信息正确显示
- 特殊需求标签正确显示
- 紧急程度标签颜色正确

测试用例2:查看福祉车任务详情

前置条件:系统中存在福祉车任务
步骤:
1. 进入任务管理页面
2. 找到一条福祉车任务
3. 点击查看详情
验证:
- 显示基本任务信息
- 显示"福祉车服务信息"卡片
- 乘客信息正确显示
- 服务类型、费用信息正确显示

测试用例3:空值显示

前置条件:创建一条只填必填字段的急救转运任务
步骤:
1. 查看任务详情
验证:
- 可选字段显示 "--"(灰色)
- 不出现 undefined 或 null
- 页面布局正常

更新日志

  • 2025-01-25: 初始版本
  • 后台任务详情页面支持急救转运扩展信息显示
  • 后台任务详情页面支持福祉车扩展信息显示
  • 任务列表页面添加急救转运任务图标标识
  • 新增性别和医院科室字典支持