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

## 背景

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

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

## 涉及页面

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

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

## API

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /admin-api/mes/trace-config/qr-config | 获得溯源 H5 页面基础地址（二维码内容前缀） |

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

**响应示例：**

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

**字段说明：**

| 字段 | 类型 | 说明 |
|------|------|------|
| traceBaseUrl | String | 溯源 H5 页面基础地址，对应后端配置 `mes.trace-base-url`；为空时前端二维码回退为纯码值 |

## 前端修改点

### 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. 二维码高容错级别、尺寸等展示样式不变。