ETest-Vue-FastAPI/快速诊断工单显示问题.md

# 快速诊断工单显示问题

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

## 下一步诊断

### 1. 检查后端服务状态
**问题**: 后端服务是否已重启？

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

**操作**:
```bash
# 停止后端服务
# 启动后端服务
```

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

#### 2.1 打开开发者工具
- 按 **F12**
- 或右键 → 检查

#### 2.2 查看 Network 标签
1. 切换到 **Network** 标签
2. 刷新工单列表页面
3. 找到 `/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（响应内容）

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

**异常响应 - 空数据**:
```json
{
  "code": 200,
  "data": {
    "rows": [],
    "total": 0
  }
}
```

**异常响应 - 错误**:
```json
{
  "code": 500,
  "msg": "错误信息"
}
```

#### 2.5 查看 Console 标签
检查是否有 JavaScript 错误：
- 红色错误信息
- 字段映射错误
- 类型转换错误

### 3. 常见问题和解决方案

#### 问题 1: API 返回 500 错误
**原因**: 后端代码有错误

**解决方案**:
1. 查看后端日志
2. 检查 DO 模型是否正确
3. 确认数据库字段类型是否匹配

**可能的错误**:
- `name` 字段长度不匹配
- `batch_id` 类型不匹配（应该是 BIGINT）
- JOIN 的表不存在或字段不匹配

#### 问题 2: API 返回空数组
**原因**: 查询条件过滤了所有数据

**解决方案**:
检查查询参数：
```javascript
// 前端发送的参数
{
  "pageNum": 1,
  "pageSize": 10,
  "batchId": null,  // 应该是 null
  "testStep": null
}
```

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

#### 问题 3: API 返回数据但前端不显示
**原因**: 前端字段映射错误

**解决方案**:
检查前端代码中的字段名：
```vue
<!-- 应该使用 camelCase -->
<el-table-column label="工单分组" prop="batchName" />
<el-table-column label="产品SN" prop="testEutName" />
```

检查后端返回的字段名：
```json
{
  "batchId": 1767886248798,  // camelCase
  "batchName": "批次-20260108233048",
  "testEutName": "SN0001"
}
```

#### 问题 4: 权限问题
**原因**: 用户没有查看工单的权限

**解决方案**:
1. 检查用户角色
2. 检查权限配置
3. 尝试用管理员账号登录

### 4. 快速修复步骤

#### 步骤 1: 重启后端服务（必须！）
```bash
# 停止后端服务
# 启动后端服务
```

#### 步骤 2: 清除浏览器缓存
- **Windows**: `Ctrl + Shift + R`
- **Mac**: `Cmd + Shift + R`

#### 步骤 3: 检查 API 响应
1. 打开开发者工具（F12）
2. Network 标签
3. 刷新页面
4. 查看 `/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`

```javascript
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. 最可能的原因

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

1. **后端服务没有重启**（80% 可能性）
   - DO 模型修改后必须重启
   - 重启后问题可能立即解决

2. **后端代码有语法错误**（15% 可能性）
   - 修改 DO 模型时引入了错误
   - 查看后端日志

3. **权限问题**（5% 可能性）
   - 用户没有查看工单的权限
   - 尝试用管理员账号登录

## 下一步操作

请提供以下信息：

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

## 完成时间
2026-01-09 00:00