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

任务详情页面null值显示问题修复说明

问题描述

在App任务详情页面中，任务类型和任务状态显示为"null"。

问题原因

经过排查发现有两个可能的原因：

1. 数据库记录中字段为NULL

部分任务记录在创建时，task_type 或 task_status 字段可能未正确赋值，导致数据库中这些字段为NULL。

2. 前端未处理NULL值

前端在调用 getTaskTypeText() 和 getStatusText() 方法时，如果传入NULL值，方法会返回 typeMap[null]，结果为undefined，最终在页面上显示为"null"字符串。

解决方案

前端修复（已完成）

修改了 app/pages/task/detail.vue 文件：

增强调试日志
javascript loadTaskDetail() { getTask(this.taskId).then(response => { this.taskDetail = response.data || response // 打印完整数据，便于排查 console.log('任务详情完整数据:', JSON.stringify(this.taskDetail, null, 2)) console.log('任务类型字段值:', this.taskDetail.taskType) console.log('任务状态字段值:', this.taskDetail.taskStatus) }) }
添加NULL值处理
```vue

{{ taskDetail.taskType ? getTaskTypeText(taskDetail.taskType) : '未设置' }}

{{ taskDetail.taskStatus ? getStatusText(taskDetail.taskStatus) : '未设置' }}

```

后端修复（建议执行）

步骤1：检查数据

执行SQL脚本 sql/fix_null_task_fields.sql 中的检查语句：

-- 检查task_type为NULL的记录数量
SELECT COUNT(*) FROM sys_task 
WHERE task_type IS NULL AND del_flag = '0';

-- 检查task_status为NULL的记录数量  
SELECT COUNT(*) FROM sys_task 
WHERE task_status IS NULL AND del_flag = '0';

步骤2：修复数据

如果发现存在NULL记录，执行修复语句：

-- 修复task_type为NULL的记录（设置为OTHER）
UPDATE sys_task 
SET task_type = 'OTHER' 
WHERE task_type IS NULL AND del_flag = '0';

-- 修复task_status为NULL的记录（设置为PENDING）
UPDATE sys_task 
SET task_status = 'PENDING' 
WHERE task_status IS NULL AND del_flag = '0';

步骤3：添加约束（可选）

为了防止未来再次出现NULL值，可以添加NOT NULL约束：

ALTER TABLE sys_task 
MODIFY COLUMN task_type VARCHAR(50) NOT NULL DEFAULT 'OTHER';

ALTER TABLE sys_task 
MODIFY COLUMN task_status VARCHAR(50) NOT NULL DEFAULT 'PENDING';

后端Service层增强（建议）

在 SysTaskServiceImpl.java 的任务创建方法中，确保这些字段有默认值：

@Override
public int insertSysTask(TaskCreateVO createVO) {
    SysTask task = new SysTask();
    // ... 其他字段赋值
    
    // 确保taskType和taskStatus有默认值
    task.setTaskType(createVO.getTaskType() != null ? createVO.getTaskType() : "OTHER");
    task.setTaskStatus("PENDING"); // 新创建的任务默认为待处理状态
    
    // ... 后续逻辑
}

排查步骤

如果问题仍然存在，请按以下步骤排查：

1. 查看控制台日志

在App中打开任务详情页，查看微信开发者工具或浏览器控制台：

任务详情完整数据: { ... }
任务类型字段值: xxx
任务状态字段值: xxx

2. 检查后端返回数据

在后端 SysTaskController.getInfo() 方法中添加日志：

@GetMapping(value = "/{taskId}")
public AjaxResult getInfo(@PathVariable("taskId") Long taskId) {
    SysTask task = sysTaskService.getTaskDetail(taskId);
    logger.info("返回任务详情 - taskType: {}, taskStatus: {}", 
        task.getTaskType(), task.getTaskStatus());
    return success(task);
}

3. 直接查询数据库

SELECT task_id, task_code, task_type, task_status, create_time
FROM sys_task
WHERE task_id = '具体的任务ID';

字段值说明

任务类型 (task_type)

值	含义
MAINTENANCE	维修保养
FUEL	加油
OTHER	其他
EMERGENCY_TRANSFER	急救转运
WELFARE	福祉车

任务状态 (task_status)

值	含义
PENDING	待处理
DEPARTING	出发中
ARRIVED	已到达
RETURNING	返程中
COMPLETED	已完成
CANCELLED	已取消
IN_PROGRESS	处理中（兼容旧数据）

注意事项

⚠️ 执行数据库修复脚本前请先备份数据
⚠️ 添加NOT NULL约束前需确保所有记录都已修复
✅ 前端已添加NULL值防护，即使后端返回NULL也会显示"未设置"
✅ 建议在创建任务时强制校验这些必填字段

修复时间: 2025-10-26
修复人: AI Assistant
影响范围: App端任务详情页面显示