5.3 KiB

Raw Blame History

快速诊断工单显示问题

当前状态

✅ 数据库有数据（已验证） ✅ SQL 查询能返回数据（已验证） ❓ 前端页面不显示数据

下一步诊断

1. 检查后端服务状态

问题: 后端服务是否已重启？

原因: 修改了 DO 模型后必须重启服务

操作:

# 停止后端服务
# 启动后端服务

2. 检查浏览器开发者工具

2.1 打开开发者工具

按 F12
或右键 → 检查

2.2 查看 Network 标签

切换到 Network 标签
刷新工单列表页面
找到 /system/test_work_order/list 请求

2.3 检查请求状态

查看 Status Code（状态码）：

200 OK - 请求成功

查看 Response 内容
如果 rows 为空，说明后端查询有问题
如果 rows 有数据，说明是前端显示问题

401 Unauthorized - 未授权

用户未登录或 token 过期
重新登录

403 Forbidden - 权限不足

用户没有查看工单的权限
检查用户角色和权限配置

500 Internal Server Error - 服务器错误

后端代码有错误
查看后端日志

2.4 查看 Response（响应内容）

正常响应:

{
  "code": 200,
  "msg": "success",
  "data": {
    "rows": [
      {
        "id": 821,
        "batchId": 1767886248798,
        "batchName": "批次-20260108233048",
        "name": "SN0001-出库测试（PCBA）",
        "testEutName": "SN0001",
        "creatorName": "管理员",
        ...
      }
    ],
    "total": 10,
    "pageNum": 1,
    "pageSize": 10
  }
}

异常响应 - 空数据:

{
  "code": 200,
  "data": {
    "rows": [],
    "total": 0
  }
}

异常响应 - 错误:

{
  "code": 500,
  "msg": "错误信息"
}

2.5 查看 Console 标签

检查是否有 JavaScript 错误：

红色错误信息
字段映射错误
类型转换错误

3. 常见问题和解决方案

问题 1: API 返回 500 错误

原因: 后端代码有错误

解决方案:

查看后端日志
检查 DO 模型是否正确
确认数据库字段类型是否匹配

可能的错误:

name 字段长度不匹配
batch_id 类型不匹配（应该是 BIGINT）
JOIN 的表不存在或字段不匹配

问题 2: API 返回空数组

原因: 查询条件过滤了所有数据

解决方案: 检查查询参数：

// 前端发送的参数
{
  "pageNum": 1,
  "pageSize": 10,
  "batchId": null,  // 应该是 null
  "testStep": null
}

如果 batchId 不是 null，说明有过滤条件。

问题 3: API 返回数据但前端不显示

原因: 前端字段映射错误

解决方案: 检查前端代码中的字段名：

<!-- 应该使用 camelCase -->
<el-table-column label="工单分组" prop="batchName" />
<el-table-column label="产品SN" prop="testEutName" />

检查后端返回的字段名：

{
  "batchId": 1767886248798,  // camelCase
  "batchName": "批次-20260108233048",
  "testEutName": "SN0001"
}

问题 4: 权限问题

原因: 用户没有查看工单的权限

解决方案:

检查用户角色
检查权限配置
尝试用管理员账号登录

4. 快速修复步骤

步骤 1: 重启后端服务（必须！）

# 停止后端服务
# 启动后端服务

步骤 2: 清除浏览器缓存

Windows: Ctrl + Shift + R
Mac: Cmd + Shift + R

步骤 3: 检查 API 响应

打开开发者工具（F12）
Network 标签
刷新页面
查看 /system/test_work_order/list 的响应

步骤 4: 根据 API 响应采取行动

如果 API 返回 500 错误:

查看后端日志
检查 DO 模型
确认后端服务已重启

如果 API 返回空数组:

检查查询参数
确认 order_id 为 NULL
执行 SQL 验证数据

如果 API 返回数据但前端不显示:

检查 Console 是否有错误
检查字段映射
检查数据格式

5. 调试技巧

在前端代码中添加 console.log

文件: test_work_order/index.vue

getList() {
  this.loading = true;
  listTest_work_order(this.queryParams).then(response => {
    console.log('API 响应:', response);  // 添加这行
    console.log('工单数据:', response.rows);  // 添加这行
    
    this.test_work_orderList = response.rows.map(item => ({
      ...item,
      decodedConfigJson: item.testItemConfigJson ? decodeURIComponent(escape(atob(item.testItemConfigJson))) : ''
    }));
    this.total = response.total;
    this.loading = false;
  });
}

检查后端日志

查看后端日志文件，搜索：

错误信息（ERROR）
异常堆栈（Exception）
SQL 查询语句

6. 最可能的原因

根据当前情况，最可能的原因是：

后端服务没有重启（80% 可能性）
- DO 模型修改后必须重启
- 重启后问题可能立即解决
后端代码有语法错误（15% 可能性）
- 修改 DO 模型时引入了错误
- 查看后端日志
权限问题（5% 可能性）
- 用户没有查看工单的权限
- 尝试用管理员账号登录

下一步操作

请提供以下信息：

✅ 后端服务是否已重启？
❓ 浏览器开发者工具 Network 标签的截图
❓ /system/test_work_order/list 的 Response 内容
❓ Console 标签是否有错误？

完成时间

2026-01-09 00:00

5.3 KiB Raw Blame History Unescape Escape