任务详情显示修复 - 最终版本

问题描述

任务详情页面中，任务类型和任务状态显示为"null"，但后台返回的数据是正确的：
- taskStatus: "PENDING"
- taskType: "EMERGENCY_TRANSFER"

根本原因

前端使用了复杂的三元表达式和内联条件判断，在某些情况下Vue模板可能无法正确解析，导致显示异常。

解决方案

使用Computed属性替代内联表达式

将复杂的逻辑从模板中移到computed属性中，提高代码可读性和可维护性。

修改前（有问题的代码）

<template>
  <view class="value">
    {{ taskDetail.taskType ? getTaskTypeText(taskDetail.taskType) : '未设置' }}
  </view>
  <view class="value status" :class="taskDetail.taskStatus === 'PENDING' ? 'pending' : ...">
    {{ taskDetail.taskStatus ? getStatusText(taskDetail.taskStatus) : '未设置' }}
  </view>
</template>

修改后（正确的代码）

<template>
  <view class="value">{{ displayTaskType }}</view>
  <view class="value status" :class="statusClass">
    {{ displayTaskStatus }}
  </view>
</template>

<script>
export default {
  computed: {
    // 显示任务类型
    displayTaskType() {
      if (!this.taskDetail || !this.taskDetail.taskType) {
        return '未设置'
      }
      return this.getTaskTypeText(this.taskDetail.taskType)
    },
    
    // 显示任务状态
    displayTaskStatus() {
      if (!this.taskDetail || !this.taskDetail.taskStatus) {
        return '未设置'
      }
      return this.getStatusText(this.taskDetail.taskStatus)
    },
    
    // 状态样式类
    statusClass() {
      if (!this.taskDetail || !this.taskDetail.taskStatus) {
        return ''
      }
      const status = this.taskDetail.taskStatus
      if (status === 'PENDING') return 'pending'
      if (['DEPARTING', 'ARRIVED', 'RETURNING', 'IN_PROGRESS'].includes(status)) {
        return 'in_progress'
      }
      if (status === 'COMPLETED') return 'completed'
      if (status === 'CANCELLED') return 'cancelled'
      return ''
    }
  }
}
</script>

优势分析

1. 可读性更好

• 模板代码简洁清晰
• 逻辑集中在computed属性中，便于维护

2. 性能更优

• computed属性有缓存机制，只在依赖变化时重新计算
• 避免了每次渲染都执行复杂的表达式

3. 调试更容易

• 可以在computed属性中添加console.log
• 可以在Vue DevTools中直接查看computed属性的值

4. 更健壮

• 统一的null检查
• 不会因为undefined访问导致错误

映射关系

任务类型映射

任务状态映射

测试步骤

1. 正常数据测试

// 后端返回正常数据
{
  taskType: "EMERGENCY_TRANSFER",
  taskStatus: "PENDING"
}

// 预期显示
任务类型: 急救转运
任务状态: 待处理 (pending样式)

2. NULL值测试

// 后端返回null
{
  taskType: null,
  taskStatus: null
}

// 预期显示
任务类型: 未设置
任务状态: 未设置 (无样式)

3. 未知值测试

// 后端返回未知值
{
  taskType: "UNKNOWN_TYPE",
  taskStatus: "UNKNOWN_STATUS"
}

// 预期显示
任务类型: 未知类型
任务状态: 未知 (无样式)

调试方法

查看控制台输出

打开任务详情页，查看控制台：

任务详情完整数据: {
  "taskType": "EMERGENCY_TRANSFER",
  "taskStatus": "PENDING",
  ...
}
任务类型字段值: EMERGENCY_TRANSFER
任务状态字段值: PENDING

使用Vue DevTools

1. 打开Vue DevTools
2. 选择任务详情页组件
3. 查看Computed属性：

• displayTaskType: "急救转运"
• displayTaskStatus: "待处理"
• statusClass: "pending"

相关文件

• 前端: app/pages/task/detail.vue
• API: app/api/task.js
• 工具: app/utils/common.js

最佳实践总结

1. ✅ 使用computed属性处理复杂逻辑

• 而不是在模板中使用复杂的三元表达式

1. ✅ 统一的空值检查

• 在computed属性开头统一处理null/undefined

1. ✅ 方法复用

• getTaskTypeText和getStatusText方法可以在多处复用

1. ✅ 样式类也用computed

• 将复杂的class绑定逻辑移到computed中

1. ✅ 保持模板简洁

• 模板只负责展示，逻辑交给JS处理

修复时间: 2025-10-26
修复人: AI Assistant
版本: 最终版
状态: ✅ 已修复并测试通过