借助AI做的产品追溯系统(手机版和电脑端)

引言：在当前AI功能不断深入应用的背景下，利用AI快速开发程序是一个很明智的选择，它让所有的技术壁垒都变得模糊起来，只剩下终端使用经验和如何能向AI表达更专业更到位，以及后期的如何分发及细节维护改进，于此相对于纯技术开发人员，偏向于应用端的实施开发人员将更有行业生存能力了。

      下附AI自行整理的关于产品扫码系统说明

> 给**日常使用者**（采购、仓库、品保、业务）看的。装系统的事看《部署说明.md》。

> 一句话：**输入或扫一个「品号 + 批号」，就能看到它在 销售 → 生产 → 采购 → 检验 的来龙去脉。**

 目录

1. [快速上手（30 秒）](

-秒)

2. [电脑端怎么用](

)

3. [手机端怎么用](

)

4. [电脑端 / 手机端对照](

--手机端对照)

5. [怎么看懂查询结果](

)

6. [常见操作问题](

)

一、快速上手（30 秒）

**电脑上**（办公室）：

1. 浏览器打开 `http://<部署机IP>:8080/`（把 `<部署机IP>` 换成 IT 给你的地址，下同）；

2. 「品号」框里输入品号（如 `BM280B`），点 **查询**。

**手机上**（车间 / 仓库）：

1. 浏览器打开 `http://<部署机IP>:8080/m`；

2. 点底部 **📷 扫码** → **📷 拍照识别**，对准二维码拍一张 —— 自动出结果；

   或直接在底部输入框里输 `品号 空格 批号` 再点查询。

> **小提示**：手机端建议"添加到主屏幕"当 App 用，见 [§3.1](#31-打开手机端--添加到主屏幕)。

二、电脑端怎么用

地址：`http://<部署机IP>:8080/`

 2.1 认识界面

┌──────────────────────────────────────────────────────────────────────┐

│  易                                                            ⚙ ☰ 🖨 ◐ │

│  [按品号][按销货单]  品号[____] 批号[____] 销货单号[__] 深度[6] (查询) │

├───────────────┬──────────────────────────────────────────────────────┤

│ 查询概要       │                                                      │

│ 统计          │            追溯链路总览                              │

│ 追溯链路       │            销售信息                                  │

│ 连接信息       │            生产信息                                  │

│               │            采购信息                                  │

│               │            检验信息                                  │

└───────────────┴──────────────────────────────────────────────────────┘

顶栏右侧 4 个图标：

| 图标 | 作用 |

| ☰ | **从清单选择**：弹出品号清单（或销货单清单），点一下就查 |

| 🖨 | **打印 / 导出 PDF** |

| ◐ | 切换**浅色 / 深色**主题 |

### 2.2 按品号查询（最常用）

1. 确认左上是 **「按品号」** 模式；

2. 「品号」里填品号。**输入时会自动下拉提示**（带品名和有销货记录的行数），可以直接选；

3. 「批号」可留空（留空 = 按品号查全部批次）；

4. 「销货单号」可留空（填了就只看这张销货单里的记录）；

5. 「深度」默认 **6**，指沿着 BOM 往上追溯几层（多层自制件时才有区别，一般不用改）；

6. 点 **查询**。

> **偷懒技巧**：也可以直接把品号和批号一起写进「品号」框里，用**空格**或**逗号**隔开，

> 例如 `BM280B 20250101` —— 系统会自动拆成品号 + 批号。

 2.3 按销货单查询（整单视角）

1. 点顶栏 **「按销货单」**；

2. 「销货单号」里填单号（如 `20130909000001`，同样有下拉提示）；

3. 点 **查询**。

结果会列出**这张单的每一行**（品号 / 品名 / 数量 / 批号 / 是否可追溯），

每行右边有个 **「追溯」** 按钮 —— 点它就直接跳到该行的**单品追溯**，不用再手输品号。

> **自动切换**：在「按品号」模式下，如果你输入/粘贴的其实是一串**销货单号**

> （以 `19` 或 `20` 开头的 14 位数字），系统会**自动识别并切到按单查询**，不必手动切模式。

 2.4 从清单里挑（☰ 按钮）

- 「按品号」模式下点 ☰ → 弹出**品号清单**（来自有销货记录的品号），点「查询」直接查；

- 「按销货单」模式下点 ☰ → 弹出**销货单清单**（单号 / 日期 / 客户 / 行数），点「查整单」。

适合**不知道确切品号/单号**、想先浏览一下的场景。

 2.5 看懂「追溯链路」和「聚焦」

左栏的 **「追溯链路」** 是一棵**可点击的树**，显示 `成品 → 半成品 → 子件 → 供应商` 的层级。

- 点树里的**品号** → 右侧的「采购信息 / 检验信息」会**聚焦到该品号**并自动滚动定位；

- 再点链路上方的「清除」恢复看全部。

这是"我关心的其实是某个零件"时用的——比如一块电路板的追溯结果里跳去它的电阻供应商。

 2.6 四类信息分别说什么

主区从上到下依次是（没有内容的分区会自动隐藏）：

| 分区 | 回答什么问题 | 主要字段 |

|---|---|---|

| **追溯链路总览** | 这个品号一路怎么来的？ | ①销货单 → ②生产入库 → ③工单 → ④领料 → 子件 … |

| **销售信息** | 卖给谁、什么时候、多少 | 销货单号/序号、日期、客户、数量、仓库、批号、审核状态 |

| **生产信息** | 哪张工单做的、领了哪些料 | 生产入库单、工单号、生产量/已产量、领料单、BOM 子件与应领量 |

| **采购信息** | 向哪家供应商买的、交期如何 | 采购单/进货单、供应商、数量、预交货日、已交量、已收料量 |

| **检验信息** | 有没有检、检了多少 | 进货检验、生产检验、库存检验单；检验量、合格量、验退/报废 |

| **库存异动 / 供应商** | 有则显示 | 库存流水；相关供应商档 |

 2.7 打印 / 导出 PDF

点顶栏 **🖨** 按钮 → 浏览器打印对话框：

- 「目标打印机」选 **「另存为 PDF」** 即可导出 PDF；

- 打印版会自动**隐藏输入框、按钮**，只保留干净的查询结果。

> 想连同其他信息一起留档，直接打印即可；页面上方是单色友好的排版。

2.8 把查询链接发给同事

查询后，地址栏会带上参数，例如：

http://192.168.1.50:8080/?goods=BM280B

http://192.168.1.50:8080/?order=20130909000001

**把这个链接直接复制发给同事**（微信/邮件都行），对方一点开就自动出结果，不用再输一遍。

 2.9 深浅色切换

点顶栏 **◐** 切换浅色 / 深色。车间光线暗时用深色更护眼；设置会被浏览器记住。

三、手机端怎么用

地址：`http://<部署机IP>:8080/m`

 3.1 打开手机端 + 添加到主屏幕

1. 手机连上**公司 WiFi**（必须与部署机同一局域网）；

2. 浏览器打开 `http://<部署机IP>:8080/m`；

3. 加到主屏幕：

   - **Android（Chrome）**：右上角 ⋮ →「添加到主屏幕」/「安装应用」；

   - **iPhone（Safari）**：底部「分享」按钮 →「添加到主屏幕」。

之后桌面就有图标，点开即用（记得保持连着公司网络）。

> 顶栏的 **🖥** 图标可切到电脑端页面；**◐** 切深浅色。

### 3.2 扫码（主要用法）

1. 点底部 **📷 扫码**；

2. 弹出取景界面后，点 **📷 拍照识别**；

3. 对准二维码**拍一张**；

4. 识别成功会自动填入并开始查询；识别不到会有提示，靠近些、光线亮一点再拍。

> **为什么不是"实时扫码"？**

> 内网走的是 `http://`，浏览器出于安全考虑**禁用实时摄像头**，这是浏览器统一规定。

> 页面内置的 **「📷 拍照识别」** 不受此限制，实际用起来一样快。

> （如果 IT 配了 HTTPS，页面上会自动多出「🎥 实时扫码」按钮。）

3.3 手输

底部输入框支持这几种写法：

| 你输入 | 系统理解 |

|---|---|

| `BM280B` | 品号 BM280B，查全部批次 |

| `BM280B 20250101` | 品号 BM280B + 批号 20250101（**空格**分隔） |

| `BM280B,20250101` | 同上（逗号、分号、竖线都可以） |

| `20130909000001` | 识别为**销货单号**，自动切到按单查询 |

输入时上方会实时显示 **「识别为 品号 XXX · 批号 YYY」** 的提示，确认无误再点查询。

 3.4 扫到的到底是什么？——系统自动判断

不用先选模式，直接扫：

- 扫到**品号 + 批号** → 按品号追溯；

- 扫到**销货单号** → **自动切到「按销货单」**并查整单。

系统能认这些格式：`品号 批号` 纯文本、`品号,批号`、JSON（含 `goods`/`batch`/`品号`…）、

带参数的网址链接、以及"品号后面直接跟批号没分隔符"的情况。

> 扫出来但识别不到品号时，会**把原文填进输入框**让你手动修正，不会白扫。

 3.5 快捷条（最近查询 / 常用品号）

输入框上方会自动出现快捷条：

- **最近查询**：你在本机查过的品号（记最近 8 条，存在手机本地，不上传）；

- **常用品号**：系统里有销货记录的前 8 个品号；

- 「按销货单」模式下则是 **最近查过** 和 **近期单**。

**点一下 chip 直接查**，不用重新输入。适合反复查同几个品号。

 3.6 竖向时间轴 + 快速跳转

手机端结果按**卡片竖排**展示：

- 追溯链路总览

- 统计

- 销售 / 生产 / 采购 / 检验 四类信息（按时间轴排列）

分区较多时，顶部会出现**锚点小标签**（如「销售信息」「采购信息」），**点一下直接跳到那一节**。

 3.7 按销货单查整单（手机）

1. 点顶部 **「按销货单」**；

2. 输入单号（或扫单号二维码）；

3. 结果会列出整单明细，每行有 **「追溯该行」** 按钮 —— 点它跳到该行品号的单品追溯。

 3.8 折叠的「更多查询条件」

需要限定某张销货单、或调整递归深度时，展开 **「更多查询条件」**：

- **销货单号**：只看这张单里的记录；

- **递归深度**：默认 6，多层自制件时才有区别，一般不用动。

 四、电脑端 / 手机端对照

| 功能 | 电脑端 `/` | 手机端 `/m` |

|---|---|---|

| 按品号查询 | ✅ 输入框 + 下拉提示 | ✅ 扫码 / 手输 |

| 按销货单查询 | ✅ | ✅ |

| 从清单挑选 | ✅ ☰ 按钮 | ✅ 快捷 chip（最近/常用） |

| 扫码 | ❌ | ✅ 📷 拍照识别 |

| 追溯链路树（点击聚焦） | ✅ 左栏树 | ➖ 顶部锚点跳转 |

| 打印 / 导出 PDF | ✅ 🖨 | ➖ 用浏览器"分享 → 打印" |

| 分享查询链接 | ✅ 复制地址栏链接 | ✅ |

| 深浅色主题 | ✅ ◐ | ✅ ◐ |

| 添加到主屏幕（PWA） | ➖ | ✅ |

| 登录 | 都不需要，打开即用 | |

五、怎么看懂查询结果

 5.1 三个"总览"先看

- **查询概要**（左栏）：你这次查的**入参**——品号、批号、是否限定了销货单、追溯深度；

- **统计**：销售行数、涉及品号数、有采购信息的品号、有检验信息的品号；

- **连接信息**：当前连的是哪个库、数据库版本（确认没连错库时看这个）。

5.2 追溯链路总览怎么读

它是一条**从成品往上游走**的路径：

① 销货单          →  卖给谁、哪天出的

② 生产入库(84)     →  哪天入库的

③ 工单            →  哪张生产工单做的

④ 领料            →  用了哪些料

    └ 子件 → 若是自制件，继续往上追；若是采购件，到供应商为止

**自制件会递归上溯**（内置多层 + 环路保护），采购件追到供应商就停。

### 5.3 ⚠️ 关于"批号"的特别说明

现场数据里，**批号目前大多是占位符**（例如一串 `*`），这是 ERP 侧的录入现状，不是查询出错。

系统的处理方式是：

- 如果批号是占位符，会明确标出 **「占位批号已忽略」**，并按**品号**继续追溯；

- 也就是说：**批号暂时不可用的前提下，销售/生产/采购/检验四类信息依然完整可用**。

等到现场开始真实录批号后，按批号过滤就会自动生效，无需改系统。

 5.4 数量口径别混

采购/进货相关的数量有**几个不同口径**，界面上会分别列出：

| 口径 | 含义 |

|---|---|

| 采购数量 | 我们下单要买的 |

| **已交量** | **供应商交了多少**（判断交付进度看这个） |

| 已收料量 | 我们仓库收了多少 |

三者可能不相等（例如下单 2、已交 5、已收 0 是出现过的真实情况），**看数时注意区分**。

六、常见操作问题

| 问题 | 怎么处理 |

|---|---|

| 打开页面提示连不上 / 一直转圈 | 确认手机/电脑连着公司网络；确认 IT 说的服务地址没变；稍后重试或找 IT |

| 输入品号查不到 | ①品号是否拼错（注意大小写、字母数字）；②该品号是否在 ERP 里有销货记录（可用 ☰ 清单对照）；③可能是连错了库，找 IT 看「连接信息」里的业务库名 |

| 扫码识别不出 | 用 **「📷 拍照识别」**（不是实时扫码）；对准、光线充足、离近一点；仍不行就手输，把二维码原文反馈给 IT |

| 批号显示"占位批号已忽略" | 正常，见 [§5.3](#53--关于批号的特别说明)，不影响查询其他信息 |

| 结果里某个分区不见了 | 说明该品号在这类信息里**没有记录**（例如自制件本身没有"进货检验"），不是故障 |

| 手机端怎么打印 | 用浏览器菜单「分享 / 更多」→「打印」，可存为 PDF 或发送 |

| 想把结果发给同事 | 电脑端直接**复制地址栏链接**发过去，对方点开即得同样结果 |

| 「最近查询」不想要了 | 那是存在**你手机本地**的记录，清浏览器数据即清空，不影响别人 |

| 换台电脑/手机还能用吗 | 能，只要有网、打开同一个地址就行，**不用装任何东西** |

**用起来发现结果不对**：把「品号/单号 + 你看到的界面截图」发给系统维护人，附上右上角

「连接信息」里的**业务库名**，便于快速定位。