Skip to content

李宁 / Activity

Go to a project
Switch branch/tag
ORDERLIST_API_INTEGRATION.md 4.19 KB

OrderList.vue 接口集成完成总结

完成时间

2026-01-23

修改内容

1. API 配置更新 (src/api/index.ts)

修正的接口路径

  • ✅ 质检工单列表查询: /zhijian/applyInfoDetail/qualityCheckList
  • ✅ 查询流程明细列表: /zhijian/applyInfoDetail/getProcessDetailList

新增的接口

  • ✅ 标记/取消作弊: markCheat()
  • ✅ 查看作弊标记详情: getCheatMarkDetail()
  • ✅ 根据applyId查询工单设备列表: getDevicesByApplyId()
  • ✅ 导出质检工单列表: exportQualityCheckList()
  • ✅ 无法质检提交: unCheckByOpt()

类型定义

  • ✅ 为所有 API 方法添加了 Promise<any> 返回类型
  • ✅ 导出接口返回类型为 Promise<Blob>

2. 类型定义更新 (src/types/order.ts)

新增类型:

  • ✅ ApiResponse<T>: API 响应通用类型
  • ✅ PageResponse<T>: 分页响应类型

3. 请求拦截器优化 (src/utils/request.ts)

  • ✅ 添加了 blob 类型响应的特殊处理
  • ✅ 对文件下载请求直接返回 data,不检查 code

4. OrderList.vue 功能集成

列表查询 (fetchData)

✅ 完整的参数映射:

  • businessAccount → accNbr (业务账号)
  • applyId → applyId
  • orderId → orderId
  • workerId → campaignId (师傅工号)
  • city → areaType (所属地市)
  • status → checkStatus (质检状态)
  • dateRange → startTime, endTime (质检时间)
  • noPhotoCountMin → noShowNumType (无法拍摄)
  • manualInputCountMin → manualInputNumType (手动输入)
  • envAbnormalCountMin → cheatNumType (环境异常)
  • isAbnormal → isCheat (是否异常: abnormal=1, normal=0)

导出功能 (handleExport)

✅ 实现:

  • 使用相同的查询参数
  • 处理 Blob 响应
  • 自动下载 Excel 文件
  • 文件名包含时间戳

无法质检 (submitCannotQc)

✅ 实现:

  • 调用 unCheckByOpt 接口
  • 组合原因类型和具体原因
  • 提交成功后刷新列表

标记作弊 (submitMarkCheating)

✅ 实现:

  • 调用 markCheat 接口,传入 isCheat: 1
  • 提交成功后刷新列表
  • 完整的错误处理

取消作弊 (openCancelCheating)

✅ 实现:

  • 二次确认弹窗
  • 调用 markCheat 接口,传入 isCheat: 0
  • 取消成功后刷新列表
  • 区分用户取消和接口错误

查看作弊详情 (openCheatingInfo)

✅ 实现:

  • 调用 getCheatMarkDetail 接口
  • 动态更新作弊信息(原因、备注、时间)
  • 接口失败时使用现有数据

流程明细弹窗 (openDetailsDialog)

✅ 实现:

  • 调用 getProcessDetailList 接口
  • 支持三种类型:无法拍摄、手动输入、环境异常
  • 动态映射后端数据字段
  • 完整的错误处理

技术要点

1. TypeScript 类型安全

  • 使用类型断言 as ApiResponse<PageResponse<Order>>
  • 为所有 API 方法添加返回类型
  • 导入并使用自定义类型

2. 错误处理

  • 所有 API 调用都包含 try-catch
  • 区分不同类型的错误(用户取消 vs 接口错误)
  • 友好的错误提示

3. 用户体验

  • 操作成功后自动刷新列表
  • Loading 状态管理
  • 二次确认重要操作
  • 详细的成功/失败提示

4. 代码质量

  • 移除未使用的导入
  • 完善的注释
  • 统一的代码风格

待测试项

  1. ✅ 列表查询 - 各种筛选条件组合
  2. ✅ 分页功能
  3. ✅ 导出 Excel
  4. ✅ 无法质检提交
  5. ✅ 标记作弊
  6. ✅ 取消作弊
  7. ✅ 查看作弊详情
  8. ✅ 流程明细弹窗

注意事项

  1. 后端接口字段映射: 某些字段映射是根据 API 文档推测的,实际使用时可能需要根据后端返回的数据结构调整:

    • 师傅工号映射为 campaignId,可能需要确认
    • 流程明细的字段名(processName, createTime 等)需要根据实际返回调整

  2. 响应数据结构: 假设后端返回格式为:

    {
 "code": 200,
 "message": "success",
 "data": {
   "list": [...],
   "total": 100
 }
}

  3. Blob 下载: 导出功能需要后端设置正确的响应头

下一步建议

  1. 在浏览器中测试所有功能
  2. 根据实际后端返回调整字段映射
  3. 完善错误提示信息
  4. 添加更多的数据验证
  5. 考虑添加请求缓存或防抖