merge: 解决合并冲突——保留术语更新版本
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
# 溯源总览模块优化方案
|
||||
|
||||
> 整理时间：2026-05-22 | 状态：待讨论 | 关联页面：trace-query.html、trace-timeline.html
|
||||
|
||||
---
|
||||
|
||||
## 一、核心问题诊断
|
||||
|
||||
### 问题 1：模块定位与内容严重不匹配
|
||||
|
||||
"溯源总览"作为营养管理的**第一个一级 Tab**，目前只有 2 个页面（查询 + 链路可视化）。对比其他模块（绿色种采 10+ 页、健康生产 10+ 页、营养用餐 8+ 页），内容极度单薄。更关键的是——**叫"总览"却没有总览 Dashboard**，用户进入后直接看到的是一个查询列表，完全没有全局视角。
|
||||
|
||||
### 问题 2：trace-query 的数据粒度混乱（最致命）
|
||||
|
||||
表格的每一行粒度定义混乱：
|
||||
|
||||
| 列名 | 粒度 | 矛盾点 |
|
||||
|------|------|--------|
|
||||
| 餐品溯源码 / 菜品名称 | 餐品级 | 一道菜一个码 |
|
||||
| 来源类型 / 产地/供应商 / 种植批次 | **食材级** | 一道菜有多种食材，各有不同来源 |
|
||||
|
||||
以"宫保鸡丁"为例，它包含 4 种食材（鸡胸肉=外采、花生=外采、辣椒=自种、葱姜蒜=自种），但表中只显示了一条记录，来源标记为"自产养殖"——这只对应了鸡胸肉一种食材，**其他 3 种食材的溯源信息完全丢失**。
|
||||
|
||||
如果某天的花生检出黄曲霉毒素超标，从这个表里根本看不出来。
|
||||
|
||||
### 问题 3：trace-timeline 的信息负荷过重
|
||||
|
||||
鸡胸肉链路有 **14 个节点**，水平排列后管道极长。分支节点（如净菜加工 x4、按单烹制 x3）本质上是一个节点分裂出多条并行链路，但当前设计**只用角标数字表示**，点击后详情是把所有分支挤在一个卡片里（`分支A/B/C/D`），无法直观理解分支走向和收敛。
|
||||
|
||||
### 问题 4：两个页面之间的衔接断裂
|
||||
|
||||
trace-query 中每行的"查看食材链路"都指向同一个 `trace-timeline.html`（硬编码的宫保鸡丁数据），无论点哪道菜都看到同样的内容。作为原型，至少应该在页面状态上表达"跳转后应展示对应菜品"的意图。
|
||||
|
||||
---
|
||||
|
||||
## 二、重构优化方案
|
||||
|
||||
建议将"溯源总览"模块从 2 页扩展为 **4~5 页**：
|
||||
|
||||
```
|
||||
溯源总览（一级菜单）
|
||||
├── 溯源看板 trace-dashboard.html 【新增】总览 Dashboard
|
||||
├── 餐品溯源查询 trace-query.html 【重构】修正数据粒度
|
||||
├── 食材溯源查询 trace-ingredient.html 【新增】食材维度独立页
|
||||
├── 链路可视化 trace-timeline.html 【优化】交互减负
|
||||
└── 溯源码管理 trace-code.html 【新增，可选】溯源码规则配置
|
||||
```
|
||||
|
||||
### 2.1 新增：溯源看板（trace-dashboard）
|
||||
|
||||
作为模块的**入口页和默认页**，提供全局统计视角。
|
||||
|
||||
**顶部统计卡片行（4~5 张）：**
|
||||
- 今日溯源覆盖率（已溯源菜品数 / 总菜品数，如 95.2%）
|
||||
- 检测合格率（合格食材数 / 已检食材数，如 99.8%）
|
||||
- 自产食材占比（自种+自养数量 / 总食材数，如 42%）
|
||||
- 异常待处理数（检测不合格 + 链路断裂 + 数据缺失）
|
||||
- 可选：今日已完成溯源链路数
|
||||
|
||||
**中部双列布局：**
|
||||
- 左：近 7 天溯源趋势折线图（溯源覆盖率 + 合格率双曲线）
|
||||
- 右：食材来源分布饼图（自产种植 / 自产养殖 / 外采占比）
|
||||
|
||||
**底部：**
|
||||
- 近期异常事件列表（检测不合格的食材、链路中断记录、溯源码异常等）
|
||||
- 快捷入口卡片（跳转餐品查询、食材查询、链路可视化）
|
||||
|
||||
### 2.2 重构：餐品溯源查询（trace-query）
|
||||
|
||||
**核心改动：修正数据粒度为纯餐品级，食材信息下沉到展开行。**
|
||||
|
||||
表格列重设计：
|
||||
|
||||
| 餐品溯源码 | 菜品名称 | 就餐日期 | 餐次 | 食材数量 | 来源组成 | 检测结论 | 烹制厨师 | 上餐时间 | 操作 |
|
||||
|---|---|---|---|---|---|---|---|---|---|
|
||||
| TR-20260422-001 | 宫保鸡丁 | 2026-04-22 | 午餐 | 4种 | 自种2 外采2 | 全部合格 | 张厨师 | 11:30 | 展开 \| 查看链路 |
|
||||
|
||||
关键变化：
|
||||
- **删除**原来的"来源类型""产地/供应商""种植/养殖批次"（食材级信息不应出现在餐品级表中）
|
||||
- **新增**"食材数量"列 + "来源组成"列（标签组合展示，如 `自种×2 外采×2`）
|
||||
- **新增**"展开"操作：点击后在行下方展开食材子表
|
||||
|
||||
**展开后的食材子表示意：**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 🥩 鸡胸肉 8.5kg 外采 鲜肉直供 批次:JXRJ-.. 检测:合格 │
|
||||
│ 🥜 花生 1.2kg 外采 华盛干货 批次:HS-.. 检测:合格 │
|
||||
│ 🌶️ 辣椒 0.8kg 自种 南郊基地 批次:LJ-.. 检测:合格 │
|
||||
│ 🧄 葱姜蒜 0.5kg 自种 南郊基地 批次:CJS-.. 检测:合格 │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**筛选栏补充：**
|
||||
- 新增"餐次"筛选（早餐/午餐/晚餐/加餐）
|
||||
- "就餐日期"改为日期范围选择（默认今天）
|
||||
- 新增"食堂"筛选（对应多食堂场景）
|
||||
|
||||
### 2.3 新增：食材溯源查询（trace-ingredient）
|
||||
|
||||
**独立的食材维度查询页**，从 trace-timeline 的"食材维度 Tab"中抽离为完整页面。
|
||||
|
||||
表格列设计：
|
||||
|
||||
| 食材溯源码 | 食材名称 | 来源类型 | 产地/供应商 | 入库日期 | 入库量 | 剩余库存 | 关联菜品数 | 检测结论 | 操作 |
|
||||
|---|---|---|---|---|---|---|---|---|---|
|
||||
| ST-EX-XR01-MT-... | 鸡胸肉 | 外采 | 鲜肉直供公司 | 04-15 | 80kg | 32kg | 4道 | 合格 | 查看链路 \| 关联菜品 |
|
||||
|
||||
页面价值：
|
||||
- 追踪**一批食材被分配到了哪些菜品**（正向追溯）
|
||||
- 检测不合格时快速定位**受影响的所有菜品和订单**（反向召回）
|
||||
- 解决了 trace-query 中食材信息被压缩的问题
|
||||
|
||||
### 2.4 优化：链路可视化（trace-timeline）
|
||||
|
||||
**优化点 1：14 个节点太拥挤 → 分段折叠**
|
||||
|
||||
将 19 种节点归类为 5 个阶段，默认展示阶段概要，点击展开看细节：
|
||||
|
||||
```
|
||||
[采供阶段] ────→ [存储阶段] ────→ [加工阶段] ────→ [烹制上餐] ────→ [餐后追踪]
|
||||
采供入库 毛菜入库 净菜加工 按单烹制 余量处置
|
||||
卫生检测 毛菜存储 净菜入库 上餐监控 营养检验
|
||||
净菜内供 用户取餐
|
||||
净菜进柜
|
||||
净菜组配
|
||||
```
|
||||
|
||||
每个阶段用"超级节点"表示（阶段名 + 节点数 + 整体状态），点击展开该阶段详细节点管道。
|
||||
|
||||
**优化点 2：分支角标看不懂 → 分支卡片列表**
|
||||
|
||||
点击分支节点时，详情区域从单卡片改为**分支卡片列表**，每条分支单独一张卡片，标注分支走向（如"→ 宫保鸡丁""→ 辣子鸡"），用颜色/线条标注"当前追踪的是哪条分支"。
|
||||
|
||||
**优化点 3：食材维度数据不完整**
|
||||
|
||||
- 提供食材搜索框，支持按食材名称/溯源码搜索
|
||||
- 展示该食材的完整溯源链路（从源头到所有去向菜品）
|
||||
- 或者：将食材维度移到 trace-ingredient 页面，trace-timeline 专注餐品维度
|
||||
|
||||
### 2.5 可选新增：溯源码管理（trace-code）
|
||||
|
||||
管理溯源码的编码规则、前缀配置、批次规则等系统配置页面。当前溯源码格式 `ST-{来源}-{供应商编号}-{分类}-{品名}-{重量}-{日期}-{序号}` 是隐含在数据中的，如果需要运维人员管理这些规则，可以做一个配置页。优先级较低。
|
||||
|
||||
---
|
||||
|
||||
## 三、与文档 8.5 节已有建议的关系
|
||||
|
||||
文档 8.5 节的 8 条建议（导出筛选结果、快速预览浮层、PDF报告导出、数据一致性检查、视频播放器、食材历史链路、缩略图导航、分支收敛可视化）属于**细节优化**，可以在重构后的新页面中一并实现。但如果不先解决数据粒度混乱和模块定位不清的根本问题，单独做那些优化效果有限。
|
||||
|
||||
---
|
||||
|
||||
## 四、优先级
|
||||
|
||||
| 优先级 | 页面 | 工作量 | 理由 |
|
||||
|--------|------|--------|------|
|
||||
| P0 | trace-dashboard 新建 | 中 | 模块入口必须有总览 |
|
||||
| P0 | trace-query 重构 | 中 | 数据粒度问题是硬伤 |
|
||||
| P1 | trace-ingredient 新建 | 中 | 食材维度是溯源核心能力 |
|
||||
| P1 | trace-timeline 优化 | 大 | 可视化体验提升 |
|
||||
| P2 | trace-code 新建 | 小 | 系统配置，可后期补 |
|
||||
@@ -198,29 +198,29 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>加工批次号</th><th>关联单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>加工步骤</th><th>毛菜重量(kg)</th><th>净菜重量(kg)</th><th>出净率(%)</th><th>加工人员</th><th>开始时间</th><th>结束时间</th><th>质检结果</th><th>入库状态</th><th>操作</th>
|
||||
<th>加工批次号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>加工步骤</th><th>毛菜重量(kg)</th><th>净菜重量(kg)</th><th>出净率(%)</th><th>加工人员</th><th>开始时间</th><th>结束时间</th><th>质检结果</th><th>入库状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PROC-001</td><td><span class="link">NC-IN-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-001</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-002</td><td><span class="link">—</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-002</td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-003</td><td><span class="link">—</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-003</td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-004</td><td><span class="link">—</span></td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-004</td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-005</td><td><span class="link">NC-IN-004</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-005</td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-006</td><td><span class="link">NC-IN-005</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-006</td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-007</td><td><span class="link">—</span></td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-007</td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -273,7 +273,7 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="form-grid">
|
||||
<!-- 交互说明：先输入/选择溯源码 → 根据溯源码自动带出食材名称（只读）→ 根据食材名称带出净菜类型（下拉选择） -->
|
||||
<div class="form-item"><label>溯源码<span class="required">*</span></label><input type="text" placeholder="请输入或扫描溯源码"></div>
|
||||
<div class="form-item"><label>食材名称</label><input type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>食材名称</label><input type="text" placeholder="由溯源码自动带出或下拉选择" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>净菜类型<span class="required">*</span></label><select><option>由食材名称带出</option><option>整棵</option><option>整朵</option><option>段</option><option>丁</option><option>条</option><option>片</option><option>丝</option><option>末</option><option>块</option><option>滚刀块</option><option>其他（备注说明）</option></select></div>
|
||||
<div class="form-item"><label>加工步骤<span class="required">*</span></label><select><option>请选择</option><option>清洗</option><option>去皮</option><option>切割</option><option>分拣</option><option>综合加工</option></select></div>
|
||||
<div class="form-item"><label>毛菜重量(kg)<span class="required">*</span></label><input type="number" placeholder="请输入毛菜重量"></div>
|
||||
@@ -324,13 +324,13 @@ var _stockRowData=null;
|
||||
function confirmGenStock(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
/* 列序：0加工批次号 1关联单号 2溯源码 3食材名称 4净菜类型 5加工步骤 6毛菜重量 7净菜重量 */
|
||||
/* 列序：0加工批次号 1溯源码 2食材名称 3净菜类型 4加工步骤 5毛菜重量 6净菜重量 */
|
||||
_stockRowData={
|
||||
batch:tds[0].textContent,
|
||||
trace:tds[2].textContent,
|
||||
food:tds[3].textContent,
|
||||
cleanType:tds[4].textContent,
|
||||
weight:tds[7].textContent
|
||||
trace:tds[1].textContent,
|
||||
food:tds[2].textContent,
|
||||
cleanType:tds[3].textContent,
|
||||
weight:tds[6].textContent
|
||||
};
|
||||
document.getElementById('confirmStockModal').style.display='flex';
|
||||
}
|
||||
|
||||
@@ -194,23 +194,23 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>入库单号</th><th>关联单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>入库规格</th><th>入库数量</th><th>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</th><th>保质期至</th><th>存放区域</th><th>存放温度(℃)</th><th>操作人</th><th>操作类型</th><th>操作</th>
|
||||
<th>入库单号</th><th>操作类型</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>入库规格</th><th>入库数量</th><th>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</th><th>保质期至</th><th>存放区域</th><th>存放温度(℃)</th><th>操作人</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>NC-IN-001</td><td><span class="link">PROC-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-001</td><td><span class="tag tag-blue">设备自动</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-002</td><td><span class="link">PROC-002</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-002</td><td><span class="tag tag-blue">设备自动</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-003</td><td><span class="link">PROC-003</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-003</td><td><span class="tag tag-green">人工录入</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-004</td><td><span class="link">PROC-005</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-004</td><td><span class="tag tag-green">人工录入</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-005</td><td><span class="link">PROC-006</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-005</td><td><span class="tag tag-blue">设备自动</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -247,7 +247,6 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="form-item"><label>存放区域<span class="required">*</span></label><input type="text" placeholder="请输入存放区域"></div>
|
||||
<div class="form-item"><label>存放温度(℃)</label><input type="number" step="0.1" placeholder="请输入温度"></div>
|
||||
<div class="form-item"><label>操作人<span class="required">*</span></label><input type="text" placeholder="请输入操作人"></div>
|
||||
<div class="form-item"><label>操作类型<span class="required">*</span></label><select><option>请选择</option><option>设备自动</option><option>人工录入</option></select></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@@ -240,7 +240,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>溯源码<span class="required">*</span></label><input type="text" placeholder="请输入溯源码"></div>
|
||||
<div class="form-item"><label>来源类型<span class="required">*</span></label><select><option>请选择</option><option>外采</option><option>自产</option></select></div>
|
||||
<div class="form-item"><label>食材名称<span class="required">*</span></label><input type="text" placeholder="请输入食材名称"></div>
|
||||
<div class="form-item"><label>食材名称<span class="required">*</span></label><select><option>请选择</option><option>菠菜</option><option>土豆</option><option>胡萝卜</option><option>白菜</option><option>西蓝花</option><option>猪里脊</option><option>猪五花</option><option>牛腩</option><option>鸡胸肉</option><option>草鱼</option><option>基围虾</option></select></div>
|
||||
<div class="form-item"><label>供应商<span class="required">*</span></label><select><option>请选择</option><option>A区蔬菜基地</option><option>B区根茎基地</option><option>绿源蔬菜配送</option><option>鲜肉直供公司</option><option>海鲜水产配送</option></select></div>
|
||||
<div class="form-item"><label>入库规格<span class="required">*</span></label><select><option>请选择</option><option>25kg/件</option><option>20kg/箱</option><option>15kg/箱</option><option>10kg/筐</option><option>5kg/袋</option><option>1kg/包</option><option>散装(kg)</option></select></div>
|
||||
<div class="form-item"><label>入库数量<span class="required">*</span></label><input type="text" placeholder="请输入入库数量"></div>
|
||||
|
||||
@@ -112,6 +112,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.ingredient-row .btn-icon.btn-del:hover{color:var(--danger);border-color:var(--danger);}
|
||||
.btn-add-row{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-sm);color:var(--primary);cursor:pointer;border:none;background:none;padding:4px 0;margin-top:4px;}
|
||||
.btn-add-row:hover{color:#40a9ff;}
|
||||
/* 食材明细表格（弹窗内） */
|
||||
.ing-table{width:100%;border-collapse:collapse;margin-top:8px;}
|
||||
.ing-table th{background:#FAFAFA;padding:8px 12px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border:1px solid var(--border);}
|
||||
.ing-table td{padding:6px 12px;font-size:var(--font-sm);color:var(--text-primary);border:1px solid var(--border);}
|
||||
.ing-table td input,.ing-table td select{width:100%;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-xs);outline:none;background:#fff;}
|
||||
.ing-table td input:focus,.ing-table td select:focus{border-color:var(--primary);}
|
||||
.ing-table td select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 6px center;padding-right:22px;}
|
||||
.ing-table .btn-row-del{width:24px;height:24px;border:none;background:none;color:var(--text-placeholder);cursor:pointer;font-size:14px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;}
|
||||
.ing-table .btn-row-del:hover{color:var(--danger);background:#FFF1F0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -199,15 +208,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>包装批次号</th><th>溯源码</th><th>净菜名称</th><th>包装方式</th><th>包装规格</th><th>包装份数</th><th>包装日期</th><th>保质期至</th><th>存放温度(℃)</th><th>关联单号</th><th>包装人</th><th>终端设备</th><th>操作</th>
|
||||
<th>包装批次号</th><th>溯源码</th><th>净菜名称</th><th>包装方式</th><th>包装规格</th><th>包装份数</th><th>包装日期</th><th>保质期至</th><th>存放温度(℃)</th><th>包装人</th><th>终端设备</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>BATCH-NC-20260415-01</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-gray">真空袋</span></td><td>500g/袋</td><td>20</td><td>2026-04-15</td><td>2026-04-17</td><td>4.1</td><td>INT-001</td><td>李包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-01</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆（土豆泥）</td><td><span class="tag tag-gray">真空袋</span></td><td>500g/袋</td><td>20</td><td>2026-04-15</td><td>2026-04-17</td><td>4.1</td><td>INT-001</td><td>李包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-02</td><td>NC-PROC-HLUB-20260415-01</td><td>鸡肉（鸡爪）</td><td><span class="tag tag-gray">保鲜盒</span></td><td>1kg/盒</td><td>15</td><td>2026-04-15</td><td>2026-04-18</td><td>4.2</td><td>INT-002</td><td>王包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-02</td><td>NC-PROC-HLUB-20260415-01</td><td>鸡肉（鸡肉块）</td><td><span class="tag tag-gray">保鲜盒</span></td><td>1kg/盒</td><td>15</td><td>2026-04-15</td><td>2026-04-18</td><td>4.2</td><td>INT-002</td><td>王包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-03</td><td>NC-PROC-XGUO-20260415-01</td><td>菠菜</td><td><span class="tag tag-gray">散装托盘</span></td><td>2kg/盘</td><td>8</td><td>2026-04-15</td><td>2026-04-17</td><td>4.0</td><td>EXT-001</td><td>张包装</td><td>PKG-T02</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-04</td><td>NC-PROC-LAJP-20260415-01</td><td>豆腐（豆腐块）</td><td><span class="tag tag-gray">真空袋</span></td><td>1kg/袋</td><td>12</td><td>2026-04-15</td><td>2026-04-17</td><td>4.3</td><td>INT-003</td><td>李包装</td><td>PKG-T02</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-01</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-gray">真空袋</span></td><td>500g/袋</td><td>20</td><td>2026-04-15</td><td>2026-04-17</td><td>4.1</td><td>李包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-01</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆（土豆泥）</td><td><span class="tag tag-gray">真空袋</span></td><td>500g/袋</td><td>20</td><td>2026-04-15</td><td>2026-04-17</td><td>4.1</td><td>李包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-02</td><td>NC-PROC-HLUB-20260415-01</td><td>鸡肉（鸡爪）</td><td><span class="tag tag-gray">保鲜盒</span></td><td>1kg/盒</td><td>15</td><td>2026-04-15</td><td>2026-04-18</td><td>4.2</td><td>王包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-02</td><td>NC-PROC-HLUB-20260415-01</td><td>鸡肉（鸡肉块）</td><td><span class="tag tag-gray">保鲜盒</span></td><td>1kg/盒</td><td>15</td><td>2026-04-15</td><td>2026-04-18</td><td>4.2</td><td>王包装</td><td>PKG-T01</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-03</td><td>NC-PROC-XGUO-20260415-01</td><td>菠菜</td><td><span class="tag tag-gray">散装托盘</span></td><td>2kg/盘</td><td>8</td><td>2026-04-15</td><td>2026-04-17</td><td>4.0</td><td>张包装</td><td>PKG-T02</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-NC-20260415-04</td><td>NC-PROC-LAJP-20260415-01</td><td>豆腐（豆腐块）</td><td><span class="tag tag-gray">真空袋</span></td><td>1kg/袋</td><td>12</td><td>2026-04-15</td><td>2026-04-17</td><td>4.3</td><td>李包装</td><td>PKG-T02</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -244,14 +253,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>包装批次号</th><th>溯源码</th><th>包装餐品</th><th>包装规格</th><th>包装方式</th><th>包装份数</th><th>包含食材</th><th>包装日期</th><th>保质期至</th><th>存放温度(℃)</th><th>关联单号</th><th>包装人</th><th>终端设备</th><th>操作类型</th><th>操作</th>
|
||||
<th>包装批次号</th><th>包装餐品</th><th>包装规格</th><th>包装方式</th><th>包装份数</th><th>包含食材</th><th>包装日期</th><th>保质期至</th><th>存放温度(℃)</th><th>包装人</th><th>终端设备</th><th>操作类型</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td>鸡胸肉 120g<br>花生 20g<br>干辣椒 5g</td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td>鸡胸肉 120g<br>花生 20g<br>干辣椒 5g</td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-02</td><td>NC-PROC-CAYO-20260415-01</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>8</td><td>草鱼 100g<br>姜片适量</td><td>2026-04-15</td><td>2026-04-17</td><td>3.5</td><td>INT-002</td><td>陈配餐</td><td>PKG-T03</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-03</td><td>NC-PROC-BOCA-20260415-01</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>12</td><td>净菠菜 120g<br>大蒜 8g</td><td>2026-04-15</td><td>2026-04-17</td><td>4.0</td><td>EXT-001</td><td>陈配餐</td><td>PKG-T04</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-04</td><td>NC-PROC-HLUB-20260415-01</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份（800g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>6</td><td>净胡萝卜 260g<br>葱姜适量</td><td>2026-04-15</td><td>2026-04-17</td><td>4.2</td><td>INT-003</td><td>赵配餐</td><td>PKG-T04</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td><span class="link" onclick="showIngredients(0)">3种</span></td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>赵配餐</td><td>PKG-T03</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link" onclick="openEditDh(this)">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td><span class="link" onclick="showIngredients(0)">3种</span></td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>赵配餐</td><td>PKG-T03</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link" onclick="openEditDh(this)">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-02</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>8</td><td><span class="link" onclick="showIngredients(1)">2种</span></td><td>2026-04-15</td><td>2026-04-17</td><td>3.5</td><td>陈配餐</td><td>PKG-T03</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link" onclick="openEditDh(this)">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-03</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>12</td><td><span class="link" onclick="showIngredients(2)">2种</span></td><td>2026-04-15</td><td>2026-04-17</td><td>4.0</td><td>陈配餐</td><td>PKG-T04</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link" onclick="openEditDh(this)">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-04</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份（800g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>6</td><td><span class="link" onclick="showIngredients(3)">2种</span></td><td>2026-04-15</td><td>2026-04-17</td><td>4.2</td><td>赵配餐</td><td>PKG-T04</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link" onclick="openEditDh(this)">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -364,20 +373,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 弹窗：新增餐品净菜包 -->
|
||||
<div class="modal-mask" id="modal-dh">
|
||||
<div class="modal">
|
||||
<div class="modal" style="width:780px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">新增餐品净菜包</div>
|
||||
<div class="modal__title" id="modalDhTitle">新增餐品净菜包</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-dh')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">溯源码<span class="required">*</span></div>
|
||||
<input placeholder="请输入溯源码">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">包装餐品<span class="required">*</span></div>
|
||||
<select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
|
||||
<select id="dishSelect" onchange="onDishChange(this.value)"><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">包装规格<span class="required">*</span></div>
|
||||
@@ -393,13 +398,19 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<div class="form-item__label">包含食材<span class="required">*</span></div>
|
||||
<div class="ingredient-list" id="ingredientList">
|
||||
<div class="ingredient-row">
|
||||
<input placeholder="食材名称及用量，如：鸡胸肉 120g">
|
||||
<button class="btn-icon btn-del" onclick="removeIngredient(this)" title="删除">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-add-row" onclick="addIngredient()">＋ 添加食材</button>
|
||||
<table class="ing-table" id="ingFormTable">
|
||||
<thead><tr><th>食材溯源码</th><th>食材名称</th><th>分类</th><th>每份用量</th><th style="width:40px;">操作</th></tr></thead>
|
||||
<tbody id="ingFormBody">
|
||||
<tr>
|
||||
<td><input placeholder="溯源码"></td>
|
||||
<td><select><option value="">请选择</option><option>鸡胸肉</option></select></td>
|
||||
<td><select><option value="">请选择</option><option>主材</option><option>辅材</option><option>调料</option></select></td>
|
||||
<td><input placeholder="如 120g"></td>
|
||||
<td><button class="btn-row-del" onclick="removeIngRow(this)" title="删除">✕</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn-add-row" onclick="addIngRow()">＋ 添加食材</button>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">包装日期<span class="required">*</span></div>
|
||||
@@ -434,6 +445,25 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗：食材明细 -->
|
||||
<div class="modal-mask" id="modal-ing-detail">
|
||||
<div class="modal" style="width:640px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">食材明细 — <span id="ingDetailDish"></span></div>
|
||||
<button class="modal__close" onclick="closeModal('modal-ing-detail')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="padding:16px 24px;">
|
||||
<table class="ing-table" id="ingDetailTable">
|
||||
<thead><tr><th>食材溯源码</th><th>食材名称</th><th>分类</th><th>每份用量</th></tr></thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-ing-detail')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗：新增包装设备 -->
|
||||
<div class="modal-mask" id="modal-dev">
|
||||
<div class="modal" style="width:480px;">
|
||||
@@ -481,19 +511,94 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
document.querySelectorAll('.modal-mask').forEach(m=>{
|
||||
m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show');});
|
||||
});
|
||||
// 食材动态行：添加
|
||||
function addIngredient(){
|
||||
var list=document.getElementById('ingredientList');
|
||||
var row=document.createElement('div');
|
||||
row.className='ingredient-row';
|
||||
row.innerHTML='<input placeholder="食材名称及用量，如：花生 20g"><button class="btn-icon btn-del" onclick="removeIngredient(this)" title="删除">✕</button>';
|
||||
list.appendChild(row);
|
||||
|
||||
/* ========== 餐品食材数据 ========== */
|
||||
var dishIngredients={
|
||||
'宫保鸡丁':[
|
||||
{trace:'NC-PROC-JXR-20260415-01',name:'鸡胸肉',type:'主材',amount:'120g'},
|
||||
{trace:'NC-PROC-HUS-20260415-01',name:'花生',type:'辅材',amount:'20g'},
|
||||
{trace:'NC-PROC-GLJ-20260415-01',name:'干辣椒',type:'调料',amount:'5g'}
|
||||
],
|
||||
'清蒸鱼':[
|
||||
{trace:'NC-PROC-CYU-20260415-01',name:'草鱼',type:'主材',amount:'100g'},
|
||||
{trace:'NC-PROC-JPN-20260415-01',name:'姜片',type:'调料',amount:'适量'}
|
||||
],
|
||||
'蒜蓉菠菜':[
|
||||
{trace:'NC-PROC-BOC-20260415-01',name:'净菠菜',type:'主材',amount:'120g'},
|
||||
{trace:'NC-PROC-DSN-20260415-01',name:'大蒜',type:'调料',amount:'8g'}
|
||||
],
|
||||
'炒胡萝卜':[
|
||||
{trace:'NC-PROC-HLB-20260415-01',name:'净胡萝卜',type:'主材',amount:'260g'},
|
||||
{trace:'NC-PROC-CJG-20260415-01',name:'葱姜',type:'调料',amount:'适量'}
|
||||
]
|
||||
};
|
||||
// 列表行对应的餐品名（与tbody行序一致）
|
||||
var dishNames=['宫保鸡丁','宫保鸡丁','清蒸鱼','蒜蓉菠菜','炒胡萝卜'];
|
||||
|
||||
/* ========== 食材明细弹窗 ========== */
|
||||
function showIngredients(idx){
|
||||
var dish=dishNames[idx];
|
||||
var ings=dishIngredients[dish]||[];
|
||||
document.getElementById('ingDetailDish').textContent=dish;
|
||||
var tagCls={'主材':'tag-blue','辅材':'tag-green','调料':'tag-orange'};
|
||||
var tbody=document.querySelector('#ingDetailTable tbody');
|
||||
tbody.innerHTML=ings.map(function(i){
|
||||
return '<tr><td>'+i.trace+'</td><td>'+i.name+'</td><td><span class="tag '+tagCls[i.type]+'">'+i.type+'</span></td><td>'+i.amount+'</td></tr>';
|
||||
}).join('');
|
||||
openModal('modal-ing-detail');
|
||||
}
|
||||
// 食材动态行：删除（至少保留一行）
|
||||
function removeIngredient(btn){
|
||||
var list=document.getElementById('ingredientList');
|
||||
if(list.children.length>1)btn.parentElement.remove();
|
||||
|
||||
/* ========== 新增/编辑餐品净菜包弹窗 ========== */
|
||||
// 构建食材行 HTML
|
||||
function buildIngRow(trace,name,type,amount){
|
||||
var foods=['鸡胸肉','花生','干辣椒','草鱼','姜片','净菠菜','大蒜','净胡萝卜','葱姜'];
|
||||
var fOpts='<option value="">请选择</option>';
|
||||
foods.forEach(function(f){fOpts+='<option'+(name===f?' selected':'')+'>'+f+'</option>';});
|
||||
var types=['主材','辅材','调料'];
|
||||
var tOpts='<option value="">请选择</option>';
|
||||
types.forEach(function(t){tOpts+='<option'+(type===t?' selected':'')+'>'+t+'</option>';});
|
||||
return '<tr><td><input value="'+(trace||'')+'" placeholder="溯源码"></td><td><select>'+fOpts+'</select></td><td><select>'+tOpts+'</select></td><td><input value="'+(amount||'')+'" placeholder="如 120g"></td><td><button class="btn-row-del" onclick="removeIngRow(this)" title="删除">✕</button></td></tr>';
|
||||
}
|
||||
// 餐品选择变化 → 自动填充食材表格
|
||||
function onDishChange(val){
|
||||
var ings=dishIngredients[val]||[];
|
||||
var tbody=document.getElementById('ingFormBody');
|
||||
if(ings.length===0){tbody.innerHTML=buildIngRow('','','','');return;}
|
||||
tbody.innerHTML=ings.map(function(i){return buildIngRow(i.trace,i.name,i.type,i.amount);}).join('');
|
||||
}
|
||||
// 添加食材行
|
||||
function addIngRow(){
|
||||
var tbody=document.getElementById('ingFormBody');
|
||||
tbody.insertAdjacentHTML('beforeend',buildIngRow('','','',''));
|
||||
}
|
||||
// 删除食材行（至少保留一行）
|
||||
function removeIngRow(btn){
|
||||
var tbody=document.getElementById('ingFormBody');
|
||||
if(tbody.children.length>1)btn.closest('tr').remove();
|
||||
}
|
||||
// 编辑按钮：从列表行读取数据并打开弹窗
|
||||
function openEditDh(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('modalDhTitle').textContent='编辑餐品净菜包';
|
||||
var dishSel=document.getElementById('dishSelect');
|
||||
var dishName=tds[1].textContent;
|
||||
for(var i=0;i<dishSel.options.length;i++){
|
||||
if(dishSel.options[i].text===dishName){dishSel.selectedIndex=i;break;}
|
||||
}
|
||||
onDishChange(dishName);
|
||||
openModal('modal-dh');
|
||||
}
|
||||
// 新增时重置弹窗标题
|
||||
var _origOpenModal=openModal;
|
||||
openModal=function(id){
|
||||
if(id==='modal-dh'){
|
||||
document.getElementById('modalDhTitle').textContent='新增餐品净菜包';
|
||||
document.getElementById('dishSelect').selectedIndex=0;
|
||||
document.getElementById('ingFormBody').innerHTML=buildIngRow('','','','');
|
||||
}
|
||||
_origOpenModal(id);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user