管理端「查看二维码」预览统一为 H5 链接 - 前端联调方案

背景

管理端批次/袋码/托盘页面的「查看二维码」弹窗，二维码预览此前直接用**码值编号**（如 PB-00000102、BAG-00000102）生成，而打印/导出标签的二维码内容是 H5 溯源链接（http://host:port/trace.html?code=xxx）。两者不一致，导致扫码效果不同，易造成误解。

本次改动让管理端「查看二维码」预览/下载的二维码内容与打印标签完全一致（均为 H5 链接）。

涉及页面

• 生产批次管理（批次「查看二维码」）
• 袋码管理（袋码「查看二维码」）
• 托盘管理（托盘「查看二维码」）

以上三处共用组件 src/views/mes/pro/components/qr-trace-modal.vue，仅需改动该共享组件一次。

API

请求参数： 无（登录态即可访问）

响应示例：

{
  "code": 0,
  "data": {
    "traceBaseUrl": "http://192.168.0.10:48080/trace.html"
  },
  "msg": ""
}

字段说明：

前端修改点

1. 新增 API 模块

新增 src/api/mes/trace/config.ts，封装 getQrConfig() 调用 /mes/trace-config/qr-config。

2. 共享组件 qr-trace-modal.vue

• 弹窗打开时拉取一次 traceBaseUrl（会话内缓存，避免重复请求）。
• 二维码展示内容由「码值编号」改为「H5 链接」：traceBaseUrl + "?code=" + encodeURIComponent(码值)。
• 下载 / 打印二维码使用二维码图片 base64，内容随之变为 H5 链接，与后端 QrCodeImageUtils 导出的标签一致。
• 输入框反查兼容：扫描枪扫到打印标签的完整 H5 链接时，自动从链接中提取 code 参数再进行追溯查询；直接输入码值编号同样可用。
• traceBaseUrl 为空（未配置 mes.trace-base-url 的环境）时，二维码回退为纯码值，行为与后端一致，不报错。

数据带入说明

• 「查看二维码」入口沿用现有逻辑：批次用 code（正式批次号）优先、其次 tempCode；袋码/托盘码同理。弹窗内展示的追溯信息仍按码值编号查询，二维码展示内容才拼接为 H5 链接。

注意事项

1. 后端需**重新编译并重启**后才提供新接口 /mes/trace-config/qr-config；重启前前端调用返回 404，traceBaseUrl 为空，二维码仍显示纯码值（降级可用，不影响原有反查功能）。
2. 二维码内容的 H5 链接与 mes.trace-base-url 配置强相关，不同环境（local/test/生产）地址不同，前端不硬编码。
3. 二维码高容错级别、尺寸等展示样式不变。