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

任务详情联系人信息显示优化

需求背景

用户反馈：任务详情页面中，转运任务的**联系人、患者名称、联系方式**需要完整显示。

问题分析

原有显示情况

在转运任务的患者信息板块中：
- ❌ 缺少联系人字段 - 未显示 patientContact
- ⚠️ 患者姓名 - 只在有数据时显示（v-if）
- ⚠️ 联系电话 - 只在有数据时显示（v-if）

问题影响

  1. 联系人信息缺失，无法快速联系患者家属
  2. 患者姓名和联系方式未填写时不显示字段，用户不知道是否有这些信息
  3. 信息不完整，影响任务执行

解决方案

字段映射关系

显示标签 数据库字段 实体类属性 说明
联系人 patient_contact patientContact 患者联系人（家属）
患者姓名 patient_name patientName 患者本人姓名
联系电话 patient_phone patientPhone 联系方式

修改内容

修改前

<view class="detail-section" v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
  <view class="section-title">患者信息</view>
  
  <!-- ❌ 缺少联系人 -->
  
  <view class="info-item" v-if="taskDetail.emergencyInfo.patientName">
    <view class="label">患者姓名</view>
    <view class="value">{{ taskDetail.emergencyInfo.patientName }}</view>
  </view>
  
  <view class="info-item" v-if="taskDetail.emergencyInfo.patientPhone">
    <view class="label">联系电话</view>
    <view class="value">{{ taskDetail.emergencyInfo.patientPhone }}</view>
  </view>
  
  <!-- 其他字段... -->
</view>

修改后

<view class="detail-section" v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
  <view class="section-title">患者信息</view>
  
  <!-- ✅ 新增联系人，始终显示 -->
  <view class="info-item">
    <view class="label">联系人</view>
    <view class="value">{{ taskDetail.emergencyInfo.patientContact || '未设置' }}</view>
  </view>
  
  <!-- ✅ 患者姓名，始终显示 -->
  <view class="info-item">
    <view class="label">患者姓名</view>
    <view class="value">{{ taskDetail.emergencyInfo.patientName || '未设置' }}</view>
  </view>
  
  <!-- ✅ 联系电话，始终显示 -->
  <view class="info-item">
    <view class="label">联系电话</view>
    <view class="value">{{ taskDetail.emergencyInfo.patientPhone || '未设置' }}</view>
  </view>
  
  <!-- 其他字段保持v-if条件显示 -->
</view>

关键改进

  1. 新增联系人字段 ⭐
  • 使用 patientContact 属性
  • 始终显示（移除 v-if）
  • 无数据时显示"未设置"
  1. 优化必填字段显示
  • 患者姓名、联系电话改为始终显示
  • 使用 || '未设置' 处理空值
  • 让用户知道这些字段的存在
  1. 保留可选字段的条件显示
  • 性别、年龄、身份证号等仍使用 v-if
  • 有数据才显示，避免列表过长

显示效果对比

修改前

┌─────────────────────────┐
│     患者信息            │
├─────────────────────────┤
│ （缺少联系人）          │  ← ❌ 缺失
│ 患者姓名：（空时不显示）│  ← ⚠️ 可能看不到
│ 联系电话：（空时不显示）│  ← ⚠️ 可能看不到
│ 性别：男                │
│ 年龄：50岁              │
└─────────────────────────┘

修改后

┌─────────────────────────┐
│     患者信息            │
├─────────────────────────┤
│ 联系人：   张三          │  ← ✅ 新增
│ 患者姓名： 李四          │  ← ✅ 始终显示
│ 联系电话： 138****1234  │  ← ✅ 始终显示
│ 性别：     男            │
│ 年龄：     50岁          │
└─────────────────────────┘

空值情况

┌─────────────────────────┐
│     患者信息            │
├─────────────────────────┤
│ 联系人：   未设置        │  ← ✅ 友好提示
│ 患者姓名： 未设置        │  ← ✅ 知道有这个字段
│ 联系电话： 未设置        │  ← ✅ 提示需要填写
└─────────────────────────┘

字段显示规则

始终显示（重要信息）

字段 标签 空值显示 原因
patientContact 联系人 未设置 必须知道联系谁
patientName 患者姓名 未设置 核心信息
patientPhone 联系电话 未设置 必须联系方式

条件显示（补充信息）

字段 标签 显示条件 原因
patientGender 性别 v-if 可选信息
patientAge 年龄 v-if 可选信息
patientIdCard 身份证号 v-if 可选信息
patientCondition 病情描述 v-if 可选信息

数据结构

emergencyInfo 对象结构

{
  // 必填信息（始终显示）
  patientContact: "张三",        // 联系人
  patientName: "李四",           // 患者姓名
  patientPhone: "13812341234",  // 联系电话
  
  // 可选信息（条件显示）
  patientGender: "male",         // 性别
  patientAge: 50,                // 年龄
  patientIdCard: "44010119700101****", // 身份证
  patientCondition: "发烧咳嗽",  // 病情描述
  
  // 医院信息
  hospitalOutName: "广州市第一人民医院",
  hospitalInName: "中山大学附属第一医院",
  // ...
}

后端数据保障

实体类：SysTaskEmergency

public class SysTaskEmergency {
    /** 联系人 */
    private String patientContact;
    
    /** 患者姓名 */
    private String patientName;
    
    /** 联系电话 */
    private String patientPhone;
    
    // ... 其他字段
}

数据库表：sys_task_emergency

CREATE TABLE sys_task_emergency (
    emergency_id BIGINT PRIMARY KEY,
    task_id BIGINT NOT NULL,
    patient_contact VARCHAR(100),   -- 联系人
    patient_name VARCHAR(100),      -- 患者姓名
    patient_phone VARCHAR(20),      -- 联系电话
    -- ...
);

测试验证

测试场景1：完整数据

数据:
json { "patientContact": "张三", "patientName": "李四", "patientPhone": "13812341234", "patientGender": "male", "patientAge": 50 }

预期显示:
联系人： 张三 患者姓名： 李四 联系电话： 13812341234 性别： 男 年龄： 50岁

测试场景2：部分数据

数据:
json { "patientContact": "张三", "patientName": null, "patientPhone": "13812341234" }

预期显示:
联系人： 张三 患者姓名： 未设置 ← 空值友好提示 联系电话： 13812341234 （无性别、年龄等字段）

测试场景3：全部为空

数据:
json { "patientContact": null, "patientName": null, "patientPhone": null }

预期显示:
联系人： 未设置 患者姓名： 未设置 联系电话： 未设置

用户体验改进

改进点

  1. ✅ 信息完整性
  • 联系人、患者姓名、联系方式三个核心信息全部显示
  • 用户一眼就能看到所有关键信息
  1. ✅ 空值友好提示
  • 未填写时显示"未设置"
  • 清晰提示用户这些信息缺失
  • 引导用户完善数据
  1. ✅ 字段优先级明确
  • 核心信息始终在前
  • 补充信息条件显示
  • 页面不会过长
  1. ✅ 任务执行便利
  • 快速找到联系人和电话
  • 无需在多个页面间跳转
  • 提高工作效率

相关文件

  • 页面文件: app/pages/task/detail.vue
  • 实体类: ruoyi-system/.../SysTaskEmergency.java
  • 数据库表: sys_task_emergency
  • API接口: /system/task/{taskId}

注意事项

  1. ⚠️ 联系人是必填项
  • 创建任务时已验证必填
  • 但历史数据可能为空
  • 因此仍需处理空值
  1. ⚠️ 电话号码格式
  • 建议显示时做脱敏处理
  • 如：138****1234
  • 保护隐私
  1. ✅ 后端数据确保
  • Mapper中需正确映射 patientContact 字段
  • Service层返回完整的 emergencyInfo 对象

后续优化建议

  1. 电话号码脱敏
    javascript formatPhone(phone) { if (!phone) return '未设置' return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }

  2. 一键拨号
    vue <view class="value" @click="callPhone(taskDetail.emergencyInfo.patientPhone)"> {{ taskDetail.emergencyInfo.patientPhone }} </view>

  3. 信息完整度提示
    vue <view class="info-warning" v-if="!taskDetail.emergencyInfo.patientContact"> ⚠️ 联系人信息缺失，请及时补充 </view>

优化时间: 2025-10-26
优化人: AI Assistant
影响范围: 转运任务详情页面
状态: ✅ 已完成