# 任务详情联系人信息显示优化
## 需求背景
用户反馈：任务详情页面中，转运任务的**联系人、患者名称、联系方式**需要完整显示。
## 问题分析
### 原有显示情况
在转运任务的患者信息板块中：
- ❌ **缺少联系人字段** - 未显示 `patientContact`
- ⚠️ **患者姓名** - 只在有数据时显示（`v-if`）
- ⚠️ **联系电话** - 只在有数据时显示（`v-if`）
### 问题影响
1. 联系人信息缺失，无法快速联系患者家属
2. 患者姓名和联系方式未填写时不显示字段，用户不知道是否有这些信息
3. 信息不完整，影响任务执行
## 解决方案
### 字段映射关系
| 显示标签 | 数据库字段 | 实体类属性 | 说明 |
|---------|-----------|-----------|------|
| 联系人 | `patient_contact` | `patientContact` | 患者联系人（家属） |
| 患者姓名 | `patient_name` | `patientName` | 患者本人姓名 |
| 联系电话 | `patient_phone` | `patientPhone` | 联系方式 |
### 修改内容
#### 修改前
```vue
患者信息
患者姓名
{{ taskDetail.emergencyInfo.patientName }}
联系电话
{{ taskDetail.emergencyInfo.patientPhone }}
```
#### 修改后
```vue
患者信息
联系人
{{ taskDetail.emergencyInfo.patientContact || '未设置' }}
患者姓名
{{ taskDetail.emergencyInfo.patientName || '未设置' }}
联系电话
{{ taskDetail.emergencyInfo.patientPhone || '未设置' }}
```
### 关键改进
1. **新增联系人字段** ⭐
- 使用 `patientContact` 属性
- 始终显示（移除 `v-if`）
- 无数据时显示"未设置"
2. **优化必填字段显示**
- 患者姓名、联系电话改为始终显示
- 使用 `|| '未设置'` 处理空值
- 让用户知道这些字段的存在
3. **保留可选字段的条件显示**
- 性别、年龄、身份证号等仍使用 `v-if`
- 有数据才显示，避免列表过长
## 显示效果对比
### 修改前
```
┌─────────────────────────┐
│ 患者信息 │
├─────────────────────────┤
│ （缺少联系人） │ ← ❌ 缺失
│ 患者姓名：（空时不显示）│ ← ⚠️ 可能看不到
│ 联系电话：（空时不显示）│ ← ⚠️ 可能看不到
│ 性别：男 │
│ 年龄：50岁 │
└─────────────────────────┘
```
### 修改后
```
┌─────────────────────────┐
│ 患者信息 │
├─────────────────────────┤
│ 联系人： 张三 │ ← ✅ 新增
│ 患者姓名： 李四 │ ← ✅ 始终显示
│ 联系电话： 138****1234 │ ← ✅ 始终显示
│ 性别： 男 │
│ 年龄： 50岁 │
└─────────────────────────┘
```
### 空值情况
```
┌─────────────────────────┐
│ 患者信息 │
├─────────────────────────┤
│ 联系人： 未设置 │ ← ✅ 友好提示
│ 患者姓名： 未设置 │ ← ✅ 知道有这个字段
│ 联系电话： 未设置 │ ← ✅ 提示需要填写
└─────────────────────────┘
```
## 字段显示规则
### 始终显示（重要信息）
| 字段 | 标签 | 空值显示 | 原因 |
|------|------|---------|------|
| `patientContact` | 联系人 | 未设置 | 必须知道联系谁 |
| `patientName` | 患者姓名 | 未设置 | 核心信息 |
| `patientPhone` | 联系电话 | 未设置 | 必须联系方式 |
### 条件显示（补充信息）
| 字段 | 标签 | 显示条件 | 原因 |
|------|------|---------|------|
| `patientGender` | 性别 | `v-if` | 可选信息 |
| `patientAge` | 年龄 | `v-if` | 可选信息 |
| `patientIdCard` | 身份证号 | `v-if` | 可选信息 |
| `patientCondition` | 病情描述 | `v-if` | 可选信息 |
## 数据结构
### emergencyInfo 对象结构
```javascript
{
// 必填信息（始终显示）
patientContact: "张三", // 联系人
patientName: "李四", // 患者姓名
patientPhone: "13812341234", // 联系电话
// 可选信息（条件显示）
patientGender: "male", // 性别
patientAge: 50, // 年龄
patientIdCard: "44010119700101****", // 身份证
patientCondition: "发烧咳嗽", // 病情描述
// 医院信息
hospitalOutName: "广州市第一人民医院",
hospitalInName: "中山大学附属第一医院",
// ...
}
```
## 后端数据保障
### 实体类：SysTaskEmergency
```java
public class SysTaskEmergency {
/** 联系人 */
private String patientContact;
/** 患者姓名 */
private String patientName;
/** 联系电话 */
private String patientPhone;
// ... 其他字段
}
```
### 数据库表：sys_task_emergency
```sql
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. ✅ **信息完整性**
- 联系人、患者姓名、联系方式三个核心信息全部显示
- 用户一眼就能看到所有关键信息
2. ✅ **空值友好提示**
- 未填写时显示"未设置"
- 清晰提示用户这些信息缺失
- 引导用户完善数据
3. ✅ **字段优先级明确**
- 核心信息始终在前
- 补充信息条件显示
- 页面不会过长
4. ✅ **任务执行便利**
- 快速找到联系人和电话
- 无需在多个页面间跳转
- 提高工作效率
## 相关文件
- **页面文件**: `app/pages/task/detail.vue`
- **实体类**: `ruoyi-system/.../SysTaskEmergency.java`
- **数据库表**: `sys_task_emergency`
- **API接口**: `/system/task/{taskId}`
## 注意事项
1. ⚠️ **联系人是必填项**
- 创建任务时已验证必填
- 但历史数据可能为空
- 因此仍需处理空值
2. ⚠️ **电话号码格式**
- 建议显示时做脱敏处理
- 如：`138****1234`
- 保护隐私
3. ✅ **后端数据确保**
- Mapper中需正确映射 `patientContact` 字段
- Service层返回完整的 `emergencyInfo` 对象
## 后续优化建议
1. **电话号码脱敏**
```javascript
formatPhone(phone) {
if (!phone) return '未设置'
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
```
2. **一键拨号**
```vue
{{ taskDetail.emergencyInfo.patientPhone }}
```
3. **信息完整度提示**
```vue
⚠️ 联系人信息缺失，请及时补充
```
---
**优化时间**: 2025-10-26
**优化人**: AI Assistant
**影响范围**: 转运任务详情页面
**状态**: ✅ 已完成