From 13e014481e93c5ef4f62f0006a755dbf347ee34e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E6=99=AE?= <18691763612@163.com> Date: Fri, 22 May 2026 10:49:24 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E5=85=A8=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=A2=9E=E5=BC=BA=E2=80=94=E2=80=94=E5=8F=B3?= =?UTF-8?q?=E4=BE=A7=E6=8A=BD=E5=B1=89=E8=AF=A6=E6=83=85=E3=80=81=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E7=A1=AE=E8=AE=A4=E5=BC=B9=E7=AA=97=E3=80=81=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E8=81=94=E5=8A=A8toast?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 卫生供应(8页面):统一新增Drawer详情组件,sup-clean-external/internal新增 确认收货/备货完成/立即配送弹窗,sup-in-clean生成入库单跳转联动, sup-in-cleanin/sup-pkg-label新增操作类型列 健康生产(8页面):prod-proc-combo/cook新增toast状态联动交互, prod-proc-combo新增操作类型列,prod-clean-order新增确认收货弹窗, 全部页面统一新增Drawer详情组件 绿色种采(3页面):farm-land/monitor-crop/monitor-livestock详情从 Modal重构为Drawer抽屉(BEM命名规范) 文档:营养管理功能说明调整记录同步更新 Co-Authored-By: Claude Opus 4.6 --- web-admin/nutrition/doc/营养管理功能说明.md | 47 ++++- web-admin/nutrition/farm-land.html | 174 +++++++++-------- web-admin/nutrition/farm-monitor-crop.html | 61 +++--- .../nutrition/farm-monitor-livestock.html | 61 +++--- web-admin/nutrition/prod-clean-order.html | 98 +++++++++- web-admin/nutrition/prod-proc-cabinet.html | 63 +++++- web-admin/nutrition/prod-proc-combo.html | 124 +++++++++++- web-admin/nutrition/prod-proc-cook.html | 129 ++++++++++++- web-admin/nutrition/prod-proc-serve.html | 69 ++++++- web-admin/nutrition/prod-proc-surplus.html | 62 +++++- web-admin/nutrition/prod-qc-daily.html | 92 +++++++-- .../nutrition/prod-qc-nutrition-sync.html | 85 +++++++- web-admin/nutrition/sup-clean-external.html | 137 ++++++++++++- web-admin/nutrition/sup-clean-internal.html | 181 +++++++++++++++++- web-admin/nutrition/sup-hygiene-check.html | 98 +++++++++- web-admin/nutrition/sup-in-clean.html | 98 +++++++++- web-admin/nutrition/sup-in-cleanin.html | 97 +++++++++- web-admin/nutrition/sup-in-raw.html | 63 +++++- web-admin/nutrition/sup-pkg-label.html | 16 +- web-admin/nutrition/sup-warehouse.html | 163 ++++++++++++---- 20 files changed, 1630 insertions(+), 288 deletions(-) diff --git a/web-admin/nutrition/doc/营养管理功能说明.md b/web-admin/nutrition/doc/营养管理功能说明.md index 16b4ffe..f2d721c 100644 --- a/web-admin/nutrition/doc/营养管理功能说明.md +++ b/web-admin/nutrition/doc/营养管理功能说明.md @@ -1128,6 +1128,9 @@ - 菜品名称改为带加工规格格式(如"土豆(土豆丝)") - 新增"新建外售订单"弹窗(含溯源码、客户信息、净菜选择、金额自动计算等) - 新增行内"确认签收"操作及交互逻辑 +- 新增右侧抽屉详情组件,点击"详情"以抽屉形式展示当前行所有字段 +- 新增"确认收货"二次确认弹窗(配送中状态订单) +- 新增"备货完成"二次确认弹窗(备货中状态订单) ##### 2. sup-clean-internal.html(净菜内供) - 筛选栏"申领部门"改为"申领食堂" @@ -1135,44 +1138,61 @@ - 表格新增"包装规格""申领份数"列,移除"库存状态"列 - 菜品名称改为带加工规格格式 - 新增"新建申领单"弹窗 +- 新增右侧抽屉详情组件,点击"详情"以抽屉形式展示当前行所有字段 +- 新增"确认收货"二次确认弹窗 +- 新增"立即配送"弹窗(含配送人姓名、备注输入) +- 新增"备货完成"二次确认弹窗 ##### 3. sup-hygiene-check.html(卫生检测) - 新增监测弹窗以及交互 - 筛选栏新增"溯源码"输入框 - 操作栏移除"隔离处理"按钮,在数据行后加隔离处理按钮 +- 新增右侧抽屉详情组件,"详情"从居中弹窗改为抽屉展示 +- 新增"隔离处理"二次确认弹窗(不合格检测项) ##### 4. sup-in-clean.html(净菜加工) - "加工类型/加工规格"改为"净菜类型/加工步骤",移除"加工温度"列,新增"入库状态"列 - 操作列改为"查看视频 + 生成入库单 + 更多(下拉)"分层交互 - 新增"生成入库单"二次确认弹窗 - 弹窗表单:溯源码改为必填首位,食材名称改为只读自动带出 +- 新增右侧抽屉详情组件,下拉菜单"详情"改为抽屉展示 +- "生成入库单"确认后跳转至净菜入库页面并通过 URL 参数自动填充表单 ##### 5. sup-in-cleanin.html(净菜入库) - 新增表格列(食材名称、净菜类型、入库规格、入库数量 ) - 新增出库明细按钮已经交互 - 操作列 sticky 定位移除,改为"更多"下拉菜单交互模式 - CSS 重构与 sup-in-clean 保持一致 +- 新增「操作类型」列(操作人与操作列之间),值为"设备自动"(蓝色tag)/"人工录入"(绿色tag) +- 新增弹窗表单补充「操作类型」必填下拉字段 +- 新增右侧抽屉详情组件,下拉菜单"详情"改为抽屉展示 +- 新增 URL 参数自动填充逻辑:从净菜加工页跳转时自动解析参数并填充溯源码、食材名称等字段,自动打开新增弹窗 ##### 6. sup-in-raw.html(毛菜入库) - 弹窗新增"溯源码"必填字段 - "供应商/来源地块"改为下拉选择的"供应商" - 移除"卫生检测报告编号"字段,"验收人"改为"操作人" +- 新增右侧抽屉详情组件,点击"详情"以抽屉形式展示当前行所有字段 ##### 7. sup-pkg-label.html(净菜包装) - Tab1 净菜包:新增"新增净菜包"按钮及弹窗,"包装编号"改为"包装批次号",新增"包装规格""包装份数"列 - Tab2 餐品净菜包:新增"新增餐品净菜包"按钮及弹窗(含食材动态行) - Tab3 包装设备:新增"新增包装设备"按钮及弹窗 +- Tab2 餐品净菜包:新增「操作类型」列(终端设备与操作列之间),值为"设备自动"/"人工录入"标签 +- Tab2 新增弹窗表单补充「操作类型」必填下拉字段 ##### 8. sup-warehouse.html(仓储管理) - Tab 顺序重排:在库库存提升为默认首 Tab - 在库库存 Tab 全新重构:新筛选栏(物品类型、临期预警等)、新表格结构、新增分页组件 - 仓库档案 Tab:状态选项改为"使用中/空置中 +- 新增右侧抽屉详情组件:三个 Tab(在库库存/仓库档案/区域管理)分别有独立的详情抽屉函数 ##### 9.跨文件共性改动: - 所有页面侧边栏统一将"仓储管理"移到"毛菜入库"前面 - 溯源码字段在多个页面前移或新增 - 菜品名称统一为"食材名(加工规格)"格式 - 多个页面补充了完整的新建弹窗交互 +- 卫生供应全部 8 个页面统一新增右侧抽屉(Drawer)详情展示组件,替代原有无效链接或居中弹窗 #### 9.2 营养用餐 ##### 1.营养用餐-食堂管理(新增菜单) @@ -1248,6 +1268,10 @@ - 操作列重构:固定三项(食材溯源链路、查看视频、更多▾ hover 下拉)+ 状态按钮 - 新建组配任务弹窗重构:改用下拉选择餐品/规格/份数/来源,移除手动食材清单 - 食材明细弹窗新增「分类」列(主材/辅材/调料 标签) +- 「开始组配」「完成组配」按钮新增顶部 toast 提示交互(状态联动切换) +- 新增「操作类型」列(负责人与完成时间之间),值为"设备自动"(蓝色tag)/"人工录入"(绿色tag) +- 新建任务弹窗补充「操作类型」必填下拉字段 +- 新增右侧抽屉详情组件,下拉菜单"详情"以抽屉形式展示任务各字段 ##### 2. prod-proc-cook.html(按单烹制) - 筛选栏新增「当前食堂」「烹制日期」筛选,烹制日期默认当天 @@ -1256,6 +1280,8 @@ - 生熟比格式改为 1:0.8 - 操作列重构:固定三项 + hover 下拉 + 状态按钮(通知取餐/烹制完成/开始烹制) - 新增烹制状态对应不同的操作按钮 +- 「开始烹制」「烹制完成」「通知取餐」按钮新增顶部 toast 提示交互(状态联动切换) +- 新增右侧抽屉详情组件,下拉菜单"详情"以抽屉形式展示烹制任务各字段 ##### 3. prod-proc-serve.html(上餐监控) - 筛选栏新增「当前食堂」下拉 @@ -1263,6 +1289,7 @@ - 新增上餐弹窗:选择已完成烹制餐品后自动回填信息卡片(任务号/菜品/厨师/出锅时间/温度/餐次/识别方式/重量) - 新增 .action-more 下拉菜单样式体系 - 调整表格列的顺序和部分内容 +- 新增右侧抽屉详情组件,下拉菜单"详情"以抽屉形式展示上餐记录各字段 ##### 4. prod-proc-surplus.html(余量处置) - 筛选栏新增「当前食堂」下拉 @@ -1274,6 +1301,7 @@ - 新增余量登记弹窗重构:餐线→餐次→菜品三级联动选择(菜品来自上餐监控),选择后自动回填计划制作量/实际制作量/销售取餐量/余量信息卡片 - 处置方式选择「员工福利」时,弹窗下方动态显示员工领取记录表格(含操作列删除按钮),支持点击「+ 新增领取记录」按钮展开输入行 - 员工福利取餐明细弹窗:新增「操作」列(删除按钮),新增底部「+ 新增领取记录」交互(点击后显示输入行,支持确认/取消) +- 新增右侧抽屉详情组件,下拉菜单"详情"以抽屉形式展示处置单各字段 ##### 5. prod-proc-stats.html(生产统计) - 新增页面标题行 + 食堂切换下拉(canteen-select 高亮样式) @@ -1287,6 +1315,7 @@ - 新增页面标题行 + 食堂切换下拉切换 - 新增摄像头回放弹窗(含播放器、时间轴、分时段列表) - 新增新增证件、新增留样弹窗及交互 +- 新增右侧抽屉详情组件,多个表格(违规记录/安全巡检/人员健康证/能耗记录)的"详情"统一以抽屉形式展示 ##### 7. prod-clean-order.html(净菜订单) - 新增页面标题行 + 食堂切换下拉 @@ -1295,6 +1324,8 @@ - 订单状态选项调整为:备货中/待配送/配送中/已完成,配送中进行确认收货操作 - 新增弹窗通用样式与表单网格布局 - 调整表格字段(净菜类型,调整规格与计量方式) +- 「确认收货」按钮新增二次确认弹窗(含订单信息展示),确认后状态变为"已完成"并移除按钮 +- 新增右侧抽屉详情组件,操作列"详情"以抽屉形式展示订单各字段 ##### 8. prod-proc-cabinet.html(净菜进柜) - 新增页面标题行 + 食堂切换下拉 @@ -1302,14 +1333,28 @@ - 移除 Tab(食材净菜、餐品净菜包 、智能柜总览) 切换结构,改为左右分栏布局 - 新增标签/链接通用样式 - 新增手动存入净菜按钮及交互 +- 新增右侧抽屉详情组件,点击"详情"以抽屉形式展示格口详细信息 ##### 9. prod-recipe-plan.html(食谱规划) - 选择餐品弹窗增加营养信息展示,对齐食谱规划页弹窗样式 - 按周为单位进行食谱规划 +##### 10. prod-qc-nutrition-sync.html(营养同步) +- 新增右侧抽屉详情组件,操作列"详情"从居中弹窗改为抽屉展示(含同步信息和关联检验记录列表) + #### 9.4 绿色种采 ##### 1.绿色种采-土地环境模块 - 地块管理:表格改为二级表头(基本信息+最新监测数据); - 新增灌溉方式/土壤类型/负责人字段; - 操作从纯文本改为4个操作按钮; -- 新增地块/养殖区的新增/编辑/详情/采集记录弹窗 \ No newline at end of file +- 新增地块/养殖区的新增/编辑/详情/采集记录弹窗 +- 地块详情和养殖区详情从居中 Modal 重构为右侧 Drawer 抽屉,带 CSS 滑入动画 +- 详情内容 DOM 结构从 div 网格改为语义化 ul/li 列表(BEM 命名:detail-list__item) + +##### 2. farm-monitor-crop.html(种植监控) +- 种植记录详情从居中弹窗重构为右侧抽屉,带滑入动画和遮罩层 +- 详情内容从 div.detail-grid 改为 ul.detail-list(BEM 命名规范) + +##### 3. farm-monitor-livestock.html(养殖监控) +- 养殖批次详情从居中弹窗重构为右侧抽屉(宽度 480px),带滑入动画 +- 详情内容从 div.detail-grid 改为 ul.detail-list(BEM 命名规范) \ No newline at end of file diff --git a/web-admin/nutrition/farm-land.html b/web-admin/nutrition/farm-land.html index 65b2db0..839d5d6 100644 --- a/web-admin/nutrition/farm-land.html +++ b/web-admin/nutrition/farm-land.html @@ -124,18 +124,26 @@ table thead .sub-header th{font-size:12px;font-weight:500;} .search-select__option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;} .search-select__option:hover,.search-select__option.highlighted{background:var(--primary-light);color:var(--primary);} .search-select__empty{padding:8px 12px;font-size:var(--font-sm);color:var(--text-placeholder);text-align:center;} -/* 详情弹窗 */ -.detail-modal{width:720px;} -.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;} -.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;} -.detail-item.full{grid-column:1/-1;} -.detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);} -.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);} +/* 详情抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:200;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;} +.drawer-overlay.open{opacity:1;visibility:visible;} +.drawer{position:fixed;top:0;right:0;width:480px;height:100%;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,0.12);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);} +.drawer-overlay.open .drawer{transform:translateX(0);} +.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer-title{font-size:16px;font-weight:600;color:#262626;} +.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;} +.drawer-body{flex:1;overflow-y:auto;padding:0;} +.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;} +.detail-list{list-style:none;} +.detail-list__item{display:flex;padding:12px 24px;border-bottom:1px solid #f0f0f0;} +.detail-list__item:last-child{border-bottom:none;} +.detail-list__label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);} +.detail-list__value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;} /* 详情分模块 */ .detail-section{padding:16px 24px;border-bottom:1px solid #f0f0f0;} .detail-section:last-child{border-bottom:none;} .detail-section__title{font-size:var(--font-sm);font-weight:600;color:var(--primary);margin-bottom:12px;padding-left:8px;border-left:3px solid var(--primary);} -.detail-section .detail-grid{gap:0;} +.detail-section .detail-list{} @@ -427,29 +435,29 @@ table thead .sub-header th{font-size:12px;font-weight:500;} - -'; + } + overlay.innerHTML='
余量处置详情 — '+firstVal+'
基本信息
'+fieldsHtml+'
'; + document.body.appendChild(overlay); + overlay.addEventListener('click',function(e){if(e.target===overlay)closeDrawer(overlay.querySelector('.drawer__close'));}); +} +function closeDrawer(btn){ + var overlay=btn.closest('.drawer-overlay'); + overlay.classList.add('closing'); + setTimeout(function(){overlay.remove();},200); +} + function openWelfareModal(name,code,total){ document.getElementById('welfareTitle').textContent='员工福利取餐明细 — '+name; document.getElementById('welfareName').textContent=name; diff --git a/web-admin/nutrition/prod-qc-daily.html b/web-admin/nutrition/prod-qc-daily.html index 7108f39..7084fbe 100644 --- a/web-admin/nutrition/prod-qc-daily.html +++ b/web-admin/nutrition/prod-qc-daily.html @@ -192,6 +192,27 @@ tbody tr:hover{background:#F8FBFF;} thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;} thead th:last-child{background:#FAFAFA;} tbody tr:hover td.td-actions{background:#F8FBFF;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -315,11 +336,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} 时间摄像头位置违规类型违规人员状态操作 2026-04-22 11:15:20CAM-A-04洗手区入口未洗手直接操作张伟待处理视频回放 处理 - 2026-04-22 10:26:11CAM-B-03分拣区-2号位未戴厨师帽陈刚已处理视频回放 详情 + 2026-04-22 10:26:11CAM-B-03分拣区-2号位未戴厨师帽陈刚已处理视频回放 详情 2026-04-22 10:12:36CAM-A-01炒菜区-1号位未戴口罩赵敏待处理视频回放 处理 - 2026-04-21 14:38:05CAM-A-01炒菜区-1号位未戴口罩李娜已处理视频回放 详情 - 2026-04-21 09:55:47CAM-C-02配菜区-1号位违规使用手机王磊已处理视频回放 详情 - 2026-04-20 16:22:31CAM-B-03分拣区-2号位未穿工作服张伟已处理视频回放 详情 + 2026-04-21 14:38:05CAM-A-01炒菜区-1号位未戴口罩李娜已处理视频回放 详情 + 2026-04-21 09:55:47CAM-C-02配菜区-1号位违规使用手机王磊已处理视频回放 详情 + 2026-04-20 16:22:31CAM-B-03分拣区-2号位未穿工作服张伟已处理视频回放 详情 @@ -347,11 +368,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} - - - - - + + + + +
区域天然气浓度(ppm)天然气状态消防设施温度/湿度污废处理状态行为安全最近检查操作
炒菜区0.02正常正常28.6℃ / 62%正常正常2026-04-22 11:00详情 编辑
冷库区正常正常4.1℃ / 85%正常正常2026-04-22 11:00详情 编辑
粗加工间0.01正常正常22.4℃ / 68%正常正常2026-04-22 10:30详情 编辑
备餐区0.03告警正常24.8℃ / 71%预警告警2026-04-22 10:00详情 编辑
洗碗间正常异常26.2℃ / 78%异常正常2026-04-21 18:00详情 编辑
炒菜区0.02正常正常28.6℃ / 62%正常正常2026-04-22 11:00详情 编辑
冷库区正常正常4.1℃ / 85%正常正常2026-04-22 11:00详情 编辑
粗加工间0.01正常正常22.4℃ / 68%正常正常2026-04-22 10:30详情 编辑
备餐区0.03告警正常24.8℃ / 71%预警告警2026-04-22 10:00详情 编辑
洗碗间正常异常26.2℃ / 78%异常正常2026-04-21 18:00详情 编辑
@@ -405,11 +426,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} - - - - - + + + + +
人员编号姓名岗位工作区域人员照片健康证编号证件照片发证日期有效期至有效期状态操作
EMP001张伟厨师A区厨房📷 查看HC-2025-00128📷 查看2025-05-102026-05-09即将到期详情 编辑 删除
EMP002李娜配餐员B区厨房📷 查看HC-2025-00176📷 查看2025-09-122026-09-11有效详情 编辑 删除
EMP003王磊洗碗工C区后厨📷 查看HC-2024-00302📷 查看2024-03-012025-02-28已过期详情 编辑 删除
EMP004赵敏厨师A区厨房📷 查看HC-2025-00211📷 查看2025-11-182026-11-17有效详情 编辑 删除
EMP005陈刚分拣员B区后厨📷 查看HC-2025-00089📷 查看2025-04-202026-04-19即将到期详情 编辑 删除
EMP001张伟厨师A区厨房📷 查看HC-2025-00128📷 查看2025-05-102026-05-09即将到期详情 编辑 删除
EMP002李娜配餐员B区厨房📷 查看HC-2025-00176📷 查看2025-09-122026-09-11有效详情 编辑 删除
EMP003王磊洗碗工C区后厨📷 查看HC-2024-00302📷 查看2024-03-012025-02-28已过期详情 编辑 删除
EMP004赵敏厨师A区厨房📷 查看HC-2025-00211📷 查看2025-11-182026-11-17有效详情 编辑 删除
EMP005陈刚分拣员B区后厨📷 查看HC-2025-00089📷 查看2025-04-202026-04-19即将到期详情 编辑 删除
@@ -488,13 +509,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} - - - - - - - + + + + + + +
记录日期用电量(kWh)电费(元)用水量(m³)水费(元)用气量(m³)气费(元)合计能耗成本(元)分摊每份餐(元)操作
2026-05-07372¥334.840¥144.0120¥750.0¥1,228.8¥0.83详情
2026-05-06398¥358.245¥162.0130¥812.5¥1,332.7¥0.89详情
2026-05-05386¥347.442¥151.2126¥787.5¥1,286.1¥0.86详情
2026-05-04362¥325.838¥136.8115¥718.8¥1,181.4¥0.81详情
2026-05-03405¥364.546¥165.6132¥825.0¥1,355.1¥0.91详情
2026-05-02380¥342.041¥147.6122¥762.5¥1,252.1¥0.85详情
2026-05-01358¥322.236¥129.6110¥687.5¥1,139.3¥0.79详情
2026-05-07372¥334.840¥144.0120¥750.0¥1,228.8¥0.83详情
2026-05-06398¥358.245¥162.0130¥812.5¥1,332.7¥0.89详情
2026-05-05386¥347.442¥151.2126¥787.5¥1,286.1¥0.86详情
2026-05-04362¥325.838¥136.8115¥718.8¥1,181.4¥0.81详情
2026-05-03405¥364.546¥165.6132¥825.0¥1,355.1¥0.91详情
2026-05-02380¥342.041¥147.6122¥762.5¥1,252.1¥0.85详情
2026-05-01358¥322.236¥129.6110¥687.5¥1,139.3¥0.79详情
@@ -737,6 +758,35 @@ function cancelEnergyEdit(type){ var btn=card.querySelector('.energy-entry-btn'); disp.style.display='block';edit.style.display='none';btn.textContent='✏️ 录入';btn.style.color='var(--primary)'; } +/* 抽屉组件 */ +var Drawer={ + open:function(title,bodyHtml){ + this.close(); + var overlay=document.createElement('div'); + overlay.className='drawer-overlay'; + overlay.innerHTML='
'+title+'
'+bodyHtml+'
'; + overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();}); + document.body.appendChild(overlay); + }, + close:function(){ + var o=document.querySelector('.drawer-overlay'); + if(!o)return; + o.classList.add('closing'); + setTimeout(function(){o.remove();},200); + } +}; +function showDetail(el){ + var row=el.closest('tr'); + var table=row.closest('table'); + var headers=table.querySelectorAll('thead th'); + var cells=row.querySelectorAll('td'); + var html='
详细信息
'; + for(var i=0;i'+cells[i].innerHTML.trim()+'
'; + } + html+='
'; + Drawer.open('详情 — '+cells[0].textContent.trim(),html); +} \ No newline at end of file diff --git a/web-admin/nutrition/prod-qc-nutrition-sync.html b/web-admin/nutrition/prod-qc-nutrition-sync.html index f497706..fa21fc3 100644 --- a/web-admin/nutrition/prod-qc-nutrition-sync.html +++ b/web-admin/nutrition/prod-qc-nutrition-sync.html @@ -130,6 +130,28 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei .detail-item__value{font-size:var(--font-sm);color:var(--text-primary);} .section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} + /* Dialog 顶部均值区 */ .dialog__avg{flex-shrink:0;border-bottom:1px solid var(--border);padding:16px 24px 12px;background:#FAFBFC;} .dialog__avg-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;display:flex;align-items:center;gap:6px;} @@ -350,7 +372,7 @@ function renderTable(){ +''+s.syncTime+'' +''+s.operator+'' +''+s.recordIdxs.length+'' - +'详情' + +'详情' +''; }).join(''); document.getElementById('tableBody').innerHTML = html; @@ -615,6 +637,67 @@ function toggleSubgroup(header){ header.parentElement.classList.toggle('open'); if(s) s.classList.add('open'); })(); +/* ===== 右侧抽屉组件 ===== */ +function showDetail(syncIdx){ + var s = SYNC_DATA[syncIdx]; + var recs = s.recordIdxs.map(function(i){ return RECORDS[i]; }); + + var html = '
' + +'
同步信息
' + +'
' + +'
餐品
'+s.dish+'
' + +'
同步时间
'+s.syncTime+'
' + +'
操作人
'+s.operator+'
' + +'
已选检验记录
'+s.recordIdxs.length+' 条
' + +'
'; + + /* 关联检验记录列表 */ + html += '
' + +'
关联检验记录
'; + recs.forEach(function(r){ + html += '
' + +'
检验单号
'+r.no+'
' + +'
检验时间
'+r.time+'
' + +'
检验人员
'+r.inspector+'
' + +'
批次
'+r.batch+'
' + +'
食堂
'+r.category+'
' + +'
餐线
'+r.line+'
' + +'
营养检验
'+nutriTag(r.nutri)+'
' + +'
味道评级
'+gradeTag(r.tasteData.grade)+'
' + +'
口感评级
'+gradeTag(r.textureData.grade)+'
' + +'
色泽评级
'+gradeTag(r.colorData.grade)+'
' + +'
'; + }); + html += '
'; + + openDrawer('同步记录详情 - ' + s.dish, html); +} + +function openDrawer(title, bodyHtml){ + /* 移除已有抽屉 */ + var old = document.querySelector('.drawer-overlay'); + if(old) old.remove(); + + var overlay = document.createElement('div'); + overlay.className = 'drawer-overlay'; + overlay.onclick = function(e){ if(e.target === overlay) closeDrawer(overlay); }; + overlay.innerHTML = '
' + +'
' + +''+title+'' + +'' + +'
' + +'
'+bodyHtml+'
' + +'
'; + document.body.appendChild(overlay); +} + +function closeDrawer(overlay){ + if(!overlay) overlay = document.querySelector('.drawer-overlay'); + if(!overlay) return; + overlay.classList.add('closing'); + setTimeout(function(){ overlay.remove(); }, 200); +} + /* ===== 初始化 ===== */ renderTable(); diff --git a/web-admin/nutrition/sup-clean-external.html b/web-admin/nutrition/sup-clean-external.html index d26b55d..41bd20f 100644 --- a/web-admin/nutrition/sup-clean-external.html +++ b/web-admin/nutrition/sup-clean-external.html @@ -101,6 +101,27 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60 .form-divider{grid-column:1/-1;border:none;border-top:1px solid var(--border);margin:4px 0;} /* 只读字段 */ .form-control[readonly]{background:#F5F5F5;color:var(--text-secondary);cursor:default;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -188,14 +209,14 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60 订单号溯源码客户名称净菜类型净菜/餐品包装规格售卖份数计量(kg)单价(元/kg)小计金额出库区域下单时间物流单号订单状态操作 - EXT-001NC-INT-BOCA-20260422-01社区便民超市🥬 净菜包土豆(土豆丝)5kg/箱1050¥3.5¥175A仓-蔬菜区-012026-04-22 08:00SF1234567890已完成详情 删除 - EXT-001NC-INT-HLUB-20260422-01社区便民超市🥬 净菜包土豆(土豆块)5kg/箱630¥3.5¥105A仓-蔬菜区-032026-04-22 08:00SF1234567890已完成详情 删除 - EXT-002NC-INT-ZLRJ-20260422-01周边餐饮企业🥬 净菜包净猪里脊1kg/箱550¥28¥1,400B仓-肉类区-012026-04-22 09:30SF9876543210配送中确认收货 详情 删除 - EXT-003NC-INT-JXRJ-20260422-01周边餐饮企业🍱 餐品净菜包宫保鸡丁标准份(500g)4020¥12¥240B仓-肉类区-022026-04-22 09:30SF9876543210配送中确认收货 详情 删除 - EXT-004NC-INT-BCAI-20260422-01学校食堂🥬 净菜包鸡肉(鸡肉块)1kg/箱660¥2.0¥120A仓-蔬菜区-022026-04-22 10:00—待配送立即发货 详情 删除 - EXT-004NC-INT-XLHU-20260422-01学校食堂🥬 净菜包净西兰花5kg/箱840¥4.5¥180A仓-蔬菜区-042026-04-22 10:00—待配送立即发货 详情 删除 - EXT-005NC-INT-QZYU-20260422-01职工家属区团购🍱 餐品净菜包清蒸鱼标准份(500g)2010¥15¥150C仓-水产区-012026-04-22 10:30—备货中备货完成 详情 删除 - EXT-006NC-INT-SRBC-20260422-01职工家属区团购🍱 餐品净菜包蒜蓉菠菜标准份(500g)3015¥8¥120A仓-蔬菜区-012026-04-22 10:30—备货中备货完成 详情 删除 + EXT-001NC-INT-BOCA-20260422-01社区便民超市🥬 净菜包土豆(土豆丝)5kg/箱1050¥3.5¥175A仓-蔬菜区-012026-04-22 08:00SF1234567890已完成详情 删除 + EXT-001NC-INT-HLUB-20260422-01社区便民超市🥬 净菜包土豆(土豆块)5kg/箱630¥3.5¥105A仓-蔬菜区-032026-04-22 08:00SF1234567890已完成详情 删除 + EXT-002NC-INT-ZLRJ-20260422-01周边餐饮企业🥬 净菜包净猪里脊1kg/箱550¥28¥1,400B仓-肉类区-012026-04-22 09:30SF9876543210配送中确认收货 详情 删除 + EXT-003NC-INT-JXRJ-20260422-01周边餐饮企业🍱 餐品净菜包宫保鸡丁标准份(500g)4020¥12¥240B仓-肉类区-022026-04-22 09:30SF9876543210配送中确认收货 详情 删除 + EXT-004NC-INT-BCAI-20260422-01学校食堂🥬 净菜包鸡肉(鸡肉块)1kg/箱660¥2.0¥120A仓-蔬菜区-022026-04-22 10:00—待配送立即发货 详情 删除 + EXT-004NC-INT-XLHU-20260422-01学校食堂🥬 净菜包净西兰花5kg/箱840¥4.5¥180A仓-蔬菜区-042026-04-22 10:00—待配送立即发货 详情 删除 + EXT-005NC-INT-QZYU-20260422-01职工家属区团购🍱 餐品净菜包清蒸鱼标准份(500g)2010¥15¥150C仓-水产区-012026-04-22 10:30—备货中备货完成 详情 删除 + EXT-006NC-INT-SRBC-20260422-01职工家属区团购🍱 餐品净菜包蒜蓉菠菜标准份(500g)3015¥8¥120A仓-蔬菜区-012026-04-22 10:30—备货中备货完成 详情 删除 @@ -362,6 +383,44 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60 + + + + + + diff --git a/web-admin/nutrition/sup-clean-internal.html b/web-admin/nutrition/sup-clean-internal.html index 6f2c332..3b57c7c 100644 --- a/web-admin/nutrition/sup-clean-internal.html +++ b/web-admin/nutrition/sup-clean-internal.html @@ -96,6 +96,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} .form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;} .form-item input:focus,.form-item select:focus{border-color:var(--primary);} .form-item 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 10px center;padding-right:28px;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -165,14 +186,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} 申领单号溯源码申领食堂净菜类型净菜/餐品包装规格申领份数申领数量(kg)订单状态关联仓库区域申领时间预定配送时间配送人操作 - INT-001NC-INT-BOCA-20260422-01一号食堂厨房🥬 净菜包菠菜500g/袋5025已完成A仓-蔬菜区-012026-04-22 07:302026-04-22 09:00李配送详情 删除 - INT-001NC-INT-BCAI-20260422-01一号食堂厨房🥬 净菜包玉米(玉米粒)1kg/盒2020已完成A仓-蔬菜区-022026-04-22 07:302026-04-22 09:00李配送详情 删除 - INT-002NC-INT-ZLRJ-20260422-01二号食堂厨房🥬 净菜包猪排骨2kg/盘2040配送中B仓-肉类区-012026-04-22 08:002026-04-22 10:00王配送确认收货 详情 删除 - INT-003NC-INT-JXRJ-20260422-01二号食堂厨房🍱 餐品净菜包宫保鸡丁标准份(500g)3015配送中B仓-肉类区-022026-04-22 08:002026-04-22 10:00王配送确认收货 详情 删除 - INT-004NC-INT-CAYO-20260422-01三号食堂厨房🥬 净菜包草鱼(鱼片)2kg/盘2040待配送C仓-水产区-012026-04-22 08:302026-04-22 10:30—立即配送 详情 删除 - INT-005NC-INT-QZYU-20260422-01一号食堂厨房🍱 餐品净菜包清蒸鱼标准份(500g)157.5待配送C仓-水产区-022026-04-22 09:002026-04-22 11:00—立即配送 详情 删除 - INT-006NC-INT-TDSI-20260422-01三号食堂厨房🥬 净菜包土豆(土豆丝)500g/袋4020备货中A仓-蔬菜区-032026-04-22 09:152026-04-22 11:30—备货完成 详情 删除 - INT-007NC-INT-SRBC-20260422-01二号食堂厨房🍱 餐品净菜包蒜蓉菠菜标准份(500g)2512.5备货中A仓-蔬菜区-012026-04-22 09:302026-04-22 12:00—备货完成 详情 删除 + INT-001NC-INT-BOCA-20260422-01一号食堂厨房🥬 净菜包菠菜500g/袋5025已完成A仓-蔬菜区-012026-04-22 07:302026-04-22 09:00李配送详情 删除 + INT-001NC-INT-BCAI-20260422-01一号食堂厨房🥬 净菜包玉米(玉米粒)1kg/盒2020已完成A仓-蔬菜区-022026-04-22 07:302026-04-22 09:00李配送详情 删除 + INT-002NC-INT-ZLRJ-20260422-01二号食堂厨房🥬 净菜包猪排骨2kg/盘2040配送中B仓-肉类区-012026-04-22 08:002026-04-22 10:00王配送确认收货 详情 删除 + INT-003NC-INT-JXRJ-20260422-01二号食堂厨房🍱 餐品净菜包宫保鸡丁标准份(500g)3015配送中B仓-肉类区-022026-04-22 08:002026-04-22 10:00王配送确认收货 详情 删除 + INT-004NC-INT-CAYO-20260422-01三号食堂厨房🥬 净菜包草鱼(鱼片)2kg/盘2040待配送C仓-水产区-012026-04-22 08:302026-04-22 10:30—立即配送 详情 删除 + INT-005NC-INT-QZYU-20260422-01一号食堂厨房🍱 餐品净菜包清蒸鱼标准份(500g)157.5待配送C仓-水产区-022026-04-22 09:002026-04-22 11:00—立即配送 详情 删除 + INT-006NC-INT-TDSI-20260422-01三号食堂厨房🥬 净菜包土豆(土豆丝)500g/袋4020备货中A仓-蔬菜区-032026-04-22 09:152026-04-22 11:30—备货完成 详情 删除 + INT-007NC-INT-SRBC-20260422-01二号食堂厨房🍱 餐品净菜包蒜蓉菠菜标准份(500g)2512.5备货中A仓-蔬菜区-012026-04-22 09:302026-04-22 12:00—备货完成 详情 删除 @@ -250,6 +271,74 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + + + + + + + + diff --git a/web-admin/nutrition/sup-hygiene-check.html b/web-admin/nutrition/sup-hygiene-check.html index 7d1898f..c83a588 100644 --- a/web-admin/nutrition/sup-hygiene-check.html +++ b/web-admin/nutrition/sup-hygiene-check.html @@ -105,6 +105,27 @@ tbody tr:hover{background:#F8FBFF;} thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;} thead th:last-child{background:#FAFAFA;} tbody tr:hover td.td-actions{background:#F8FBFF;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -177,22 +198,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} - HYG-20260415-001ST-FH-FA01-VG-BOCA-286K-20260415-001菠菜农药残留合格0.02mg/kg<0.1mg/kg2026-04-15 10:00内部检测室李检测电子报告扫描RPT-20260415-001查看视频 详情 编辑 删除 + HYG-20260415-001ST-FH-FA01-VG-BOCA-286K-20260415-001菠菜农药残留合格0.02mg/kg<0.1mg/kg2026-04-15 10:00内部检测室李检测电子报告扫描RPT-20260415-001查看视频 详情 编辑 删除 - HYG-20260415-002ST-EX-XR01-MT-ZLRJ-080K-20260415-005猪里脊瘦肉精合格未检出未检出2026-04-15 10:30内部检测室王检测纸质OCR识别RPT-20260415-002查看视频 详情 编辑 删除 + HYG-20260415-002ST-EX-XR01-MT-ZLRJ-080K-20260415-005猪里脊瘦肉精合格未检出未检出2026-04-15 10:30内部检测室王检测纸质OCR识别RPT-20260415-002查看视频 详情 编辑 删除 - HYG-20260415-003ST-EX-HS01-SF-CAYO-060K-20260414-001草鱼甲醛不合格0.15mg/kg<0.05mg/kg2026-04-15 11:00第三方检测机构外部检测员电子报告扫描RPT-20260415-003查看视频 详情 编辑删除 隔离处理 + HYG-20260415-003ST-EX-HS01-SF-CAYO-060K-20260414-001草鱼甲醛不合格0.15mg/kg<0.05mg/kg2026-04-15 11:00第三方检测机构外部检测员电子报告扫描RPT-20260415-003查看视频 详情 编辑删除 隔离处理 - HYG-20260416-004ST-FH-FB01-VG-HLUB-420K-20260415-002胡萝卜重金属(铅)合格0.01mg/kg<0.1mg/kg2026-04-16 09:00内部检测室李检测手动录入RPT-20260416-004查看视频 详情 编辑 删除 + HYG-20260416-004ST-FH-FB01-VG-HLUB-420K-20260415-002胡萝卜重金属(铅)合格0.01mg/kg<0.1mg/kg2026-04-16 09:00内部检测室李检测手动录入RPT-20260416-004查看视频 详情 编辑 删除 - HYG-20260416-005ST-EX-LY01-VG-BOCA-050K-20260415-002菠菜(外采批)农药残留合格0.03mg/kg<0.1mg/kg2026-04-16 09:30内部检测室李检测纸质OCR识别RPT-20260416-005查看视频 详情 编辑 删除 + HYG-20260416-005ST-EX-LY01-VG-BOCA-050K-20260415-002菠菜(外采批)农药残留合格0.03mg/kg<0.1mg/kg2026-04-16 09:30内部检测室李检测纸质OCR识别RPT-20260416-005查看视频 详情 编辑 删除 - HYG-20260416-006ST-EX-XR01-MT-ZLRJ-080K-20260415-005猪里脊微生物(大肠杆菌)合格未检出未检出2026-04-16 10:00内部检测室王检测电子报告扫描RPT-20260416-006查看视频 详情 编辑 删除 + HYG-20260416-006ST-EX-XR01-MT-ZLRJ-080K-20260415-005猪里脊微生物(大肠杆菌)合格未检出未检出2026-04-16 10:00内部检测室王检测电子报告扫描RPT-20260416-006查看视频 详情 编辑 删除 @@ -262,6 +283,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + + diff --git a/web-admin/nutrition/sup-in-clean.html b/web-admin/nutrition/sup-in-clean.html index 3a137ac..0a31a95 100644 --- a/web-admin/nutrition/sup-in-clean.html +++ b/web-admin/nutrition/sup-in-clean.html @@ -113,6 +113,27 @@ tbody td.td-actions{white-space:nowrap;} .action-more .dropdown a:hover{background:var(--primary-light);color:var(--primary);} .action-more .dropdown a.danger{color:var(--danger);} .action-more .dropdown a.danger:hover{background:#FFF1F0;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -181,25 +202,25 @@ tbody td.td-actions{white-space:nowrap;} - PROC-001NC-IN-001NC-PROC-BOCA-20260415-01土豆土豆丝去皮/切割1008686.0李加工2026-04-15 08:002026-04-15 08:45合格已入库查看视频 更多 ▾ + PROC-001NC-IN-001NC-PROC-BOCA-20260415-01土豆土豆丝去皮/切割1008686.0李加工2026-04-15 08:002026-04-15 08:45合格已入库查看视频 更多 ▾ - PROC-002NC-PROC-HLUB-20260415-01土豆土豆片去皮/切割14012085.7王加工2026-04-15 08:302026-04-15 09:20合格未入库查看视频 生成入库单 更多 ▾ + PROC-002NC-PROC-HLUB-20260415-01土豆土豆片去皮/切割14012085.7王加工2026-04-15 08:302026-04-15 09:20合格未入库查看视频 生成入库单 更多 ▾ - PROC-003NC-PROC-XGUO-20260415-01土豆土豆泥去皮/切割564885.7李加工2026-04-15 09:002026-04-15 09:40合格未入库查看视频 生成入库单 更多 ▾ + PROC-003NC-PROC-XGUO-20260415-01土豆土豆泥去皮/切割564885.7李加工2026-04-15 09:002026-04-15 09:40合格未入库查看视频 生成入库单 更多 ▾ - PROC-004NC-PROC-SJDOU-20260415-01四季豆段(5cm)清洗605286.7张加工2026-04-15 09:302026-04-15 10:00待处理未入库查看视频 更多 ▾ + PROC-004NC-PROC-SJDOU-20260415-01四季豆段(5cm)清洗605286.7张加工2026-04-15 09:302026-04-15 10:00待处理未入库查看视频 更多 ▾ - PROC-005NC-IN-004NC-PROC-BCAI-20260415-01白菜整棵清洗807087.5张加工2026-04-15 07:302026-04-15 08:10合格未入库查看视频 生成入库单 更多 ▾ + PROC-005NC-IN-004NC-PROC-BCAI-20260415-01白菜整棵清洗807087.5张加工2026-04-15 07:302026-04-15 08:10合格未入库查看视频 生成入库单 更多 ▾ - PROC-006NC-IN-005NC-PROC-ZLRJ-20260415-01猪里脊丁(1.5cm)切割807695.0王加工2026-04-15 09:302026-04-15 09:55合格未入库查看视频 生成入库单 更多 ▾ + PROC-006NC-IN-005NC-PROC-ZLRJ-20260415-01猪里脊丁(1.5cm)切割807695.0王加工2026-04-15 09:302026-04-15 09:55合格未入库查看视频 生成入库单 更多 ▾ - PROC-007NC-PROC-ZLRJ-20260415-02猪里脊条(4cm)切割908594.4李加工2026-04-15 10:002026-04-15 10:30待处理未入库查看视频 更多 ▾ + PROC-007NC-PROC-ZLRJ-20260415-02猪里脊条(4cm)切割908594.4李加工2026-04-15 10:002026-04-15 10:30待处理未入库查看视频 更多 ▾ @@ -282,11 +303,11 @@ tbody td.td-actions{white-space:nowrap;} @@ -298,9 +319,66 @@ document.getElementById('videoModal').addEventListener('click',function(e){if(e. function openModal(){document.getElementById('modalOverlay').style.display='flex';} function closeModal(){document.getElementById('modalOverlay').style.display='none';} document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();}); -function confirmGenStock(){document.getElementById('confirmStockModal').style.display='flex';} +/* 生成入库单 */ +var _stockRowData=null; +function confirmGenStock(el){ + var tr=el.closest('tr'); + var tds=tr.querySelectorAll('td'); + /* 列序:0加工批次号 1关联单号 2溯源码 3食材名称 4净菜类型 5加工步骤 6毛菜重量 7净菜重量 */ + _stockRowData={ + batch:tds[0].textContent, + trace:tds[2].textContent, + food:tds[3].textContent, + cleanType:tds[4].textContent, + weight:tds[7].textContent + }; + document.getElementById('confirmStockModal').style.display='flex'; +} function closeConfirmStock(){document.getElementById('confirmStockModal').style.display='none';} document.getElementById('confirmStockModal').addEventListener('click',function(e){if(e.target===this)closeConfirmStock();}); +function doGenStock(){ + if(!_stockRowData)return; + var params=new URLSearchParams(); + params.set('from','clean'); + params.set('batch',_stockRowData.batch); + params.set('trace',_stockRowData.trace); + params.set('food',_stockRowData.food); + params.set('cleanType',_stockRowData.cleanType); + params.set('weight',_stockRowData.weight); + window.location.href='sup-in-cleanin.html?'+params.toString(); +} + +/* 右侧抽屉组件 */ +var Drawer={ + open:function(title,bodyHtml){ + this.close(); + var overlay=document.createElement('div'); + overlay.className='drawer-overlay'; + overlay.innerHTML='
'+title+'
'+bodyHtml+'
'; + overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();}); + document.body.appendChild(overlay); + }, + close:function(){ + var o=document.querySelector('.drawer-overlay'); + if(!o)return; + o.classList.add('closing'); + setTimeout(function(){o.remove();},200); + } +}; + +/* 详情抽屉 */ +function showDetail(el){ + var tr=el.closest('tr'); + var ths=tr.closest('table').querySelectorAll('thead th'); + var tds=tr.querySelectorAll('td'); + var html='
基本信息
'; + for(var i=0;i
'+tds[i].innerHTML+'
'; + } + html+='
'; + var title='净菜加工详情 — '+tds[0].textContent; + Drawer.open(title,html); +} diff --git a/web-admin/nutrition/sup-in-cleanin.html b/web-admin/nutrition/sup-in-cleanin.html index efc65c2..b219c3f 100644 --- a/web-admin/nutrition/sup-in-cleanin.html +++ b/web-admin/nutrition/sup-in-cleanin.html @@ -113,6 +113,27 @@ tbody td.td-actions{white-space:nowrap;} .action-more .dropdown a:hover{background:var(--primary-light);color:var(--primary);} .action-more .dropdown a.danger{color:var(--danger);} .action-more .dropdown a.danger:hover{background:#FFF1F0;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -173,23 +194,23 @@ tbody td.td-actions{white-space:nowrap;}
- + - + - + - + - + - +
入库单号关联单号溯源码食材名称净菜类型入库规格入库数量入库重量(kg)当前库存(kg)操作时间保质期至存放区域存放温度(℃)操作人操作入库单号关联单号溯源码食材名称净菜类型入库规格入库数量入库重量(kg)当前库存(kg)操作时间保质期至存放区域存放温度(℃)操作人操作类型操作
NC-IN-001PROC-001NC-PROC-BOCA-20260415-01土豆土豆丝袋装/500g8643.031.02026-04-15 09:152026-04-17 09:15A仓-蔬菜区-014.1李入库查看视频 出库明细 更多 ▾NC-IN-001PROC-001NC-PROC-BOCA-20260415-01土豆土豆丝袋装/500g8643.031.02026-04-15 09:152026-04-17 09:15A仓-蔬菜区-014.1李入库设备自动查看视频 出库明细 更多 ▾
NC-IN-002PROC-002NC-PROC-HLUB-20260415-01土豆土豆片袋装/500g12060.047.52026-04-15 09:452026-04-18 09:45A仓-蔬菜区-024.2王入库查看视频 出库明细 更多 ▾NC-IN-002PROC-002NC-PROC-HLUB-20260415-01土豆土豆片袋装/500g12060.047.52026-04-15 09:452026-04-18 09:45A仓-蔬菜区-024.2王入库设备自动查看视频 出库明细 更多 ▾
NC-IN-003PROC-003NC-PROC-XGUO-20260415-01土豆土豆泥盒装/300g4814.49.02026-04-15 11:002026-04-17 11:00A仓-蔬菜区-034.0李入库查看视频 出库明细 更多 ▾NC-IN-003PROC-003NC-PROC-XGUO-20260415-01土豆土豆泥盒装/300g4814.49.02026-04-15 11:002026-04-17 11:00A仓-蔬菜区-034.0李入库人工录入查看视频 出库明细 更多 ▾
NC-IN-004PROC-005NC-PROC-BCAI-20260415-01白菜整棵散装/整棵7035.022.52026-04-15 11:302026-04-18 11:30A仓-蔬菜区-043.8张入库查看视频 出库明细 更多 ▾NC-IN-004PROC-005NC-PROC-BCAI-20260415-01白菜整棵散装/整棵7035.022.52026-04-15 11:302026-04-18 11:30A仓-蔬菜区-043.8张入库人工录入查看视频 出库明细 更多 ▾
NC-IN-005PROC-006NC-PROC-ZLRJ-20260415-01猪里脊丁(1.5cm)袋装/400g7630.418.82026-04-15 12:002026-04-16 12:00B仓-肉类区-01-2.0王入库查看视频 出库明细 更多 ▾NC-IN-005PROC-006NC-PROC-ZLRJ-20260415-01猪里脊丁(1.5cm)袋装/400g7630.418.82026-04-15 12:002026-04-16 12:00B仓-肉类区-01-2.0王入库设备自动查看视频 出库明细 更多 ▾
@@ -214,17 +235,19 @@ tbody td.td-actions{white-space:nowrap;}
diff --git a/web-admin/nutrition/sup-in-raw.html b/web-admin/nutrition/sup-in-raw.html index cedb568..3ce53d3 100644 --- a/web-admin/nutrition/sup-in-raw.html +++ b/web-admin/nutrition/sup-in-raw.html @@ -108,6 +108,27 @@ tbody tr:hover{background:#F8FBFF;} .form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;} .form-item textarea{height:80px;padding:8px 12px;resize:vertical;} .action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;} +.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;} +@keyframes modalFadeIn{from{opacity:0}to{opacity:1}} +@keyframes modalFadeOut{from{opacity:1}to{opacity:0}} +.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;} +.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;} +@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} +@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} +.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;} +.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;} +.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);} +.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;} +.drawer-section{margin-top:20px;} +.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;} +.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;} +.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;} +.drawer-field{display:flex;flex-direction:column;gap:2px;} +.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);} +.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;} @@ -180,19 +201,19 @@ tbody tr:hover{background:#F8FBFF;} - IN-20260415-001设备自动ST-FH-FA01-VG-BOCA-286K-20260415-001自产菠菜A区蔬菜基地25kg/件12件2862026-04-15 10:30A仓-蔬菜区-01张三丰查看视频 编辑 详情 删除 + IN-20260415-001设备自动ST-FH-FA01-VG-BOCA-286K-20260415-001自产菠菜A区蔬菜基地25kg/件12件2862026-04-15 10:30A仓-蔬菜区-01张三丰查看视频 编辑 详情 删除 - IN-20260415-002设备自动ST-EX-LY01-VG-BOCA-050K-20260415-002外采菠菜绿源蔬菜配送10kg/筐5筐502026-04-15 08:30A仓-蔬菜区-02李三丰查看视频 编辑 详情 删除 + IN-20260415-002设备自动ST-EX-LY01-VG-BOCA-050K-20260415-002外采菠菜绿源蔬菜配送10kg/筐5筐502026-04-15 08:30A仓-蔬菜区-02李三丰查看视频 编辑 详情 删除 - IN-20260415-003人工录入ST-EX-XR01-MT-ZLRJ-080K-20260415-005外采猪里脊鲜肉直供公司20kg/箱4箱802026-04-15 09:15B仓-肉类区-01王三丰查看视频 编辑 详情 删除 + IN-20260415-003人工录入ST-EX-XR01-MT-ZLRJ-080K-20260415-005外采猪里脊鲜肉直供公司20kg/箱4箱802026-04-15 09:15B仓-肉类区-01王三丰查看视频 编辑 详情 删除 - IN-20260415-004人工录入ST-EX-HS01-SF-CAYO-060K-20260414-001外采草鱼海鲜水产配送散装(kg)60kg602026-04-15 09:45C仓-水产区-01李三丰查看视频 编辑 详情 删除 + IN-20260415-004人工录入ST-EX-HS01-SF-CAYO-060K-20260414-001外采草鱼海鲜水产配送散装(kg)60kg602026-04-15 09:45C仓-水产区-01李三丰查看视频 编辑 详情 删除 - IN-20260416-005设备自动ST-FH-FB01-VG-HLUB-420K-20260415-002自产胡萝卜B区根茎基地25kg/件17件4202026-04-16 11:00A仓-蔬菜区-03张三丰查看视频 编辑 详情 删除 + IN-20260416-005设备自动ST-FH-FB01-VG-HLUB-420K-20260415-002自产胡萝卜B区根茎基地25kg/件17件4202026-04-16 11:00A仓-蔬菜区-03张三丰查看视频 编辑 详情 删除 @@ -281,6 +302,38 @@ document.getElementById('modalOverlay').addEventListener('click',function(e){if( function openVideo(){document.getElementById('videoOverlay').style.display='flex';} function closeVideo(){document.getElementById('videoOverlay').style.display='none';} document.getElementById('videoOverlay').addEventListener('click',function(e){if(e.target===this)closeVideo();}); + +/* 右侧抽屉组件 */ +var Drawer={ + open:function(title,bodyHtml){ + this.close(); + var overlay=document.createElement('div'); + overlay.className='drawer-overlay'; + overlay.innerHTML='
'+title+'
'+bodyHtml+'
'; + overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();}); + document.body.appendChild(overlay); + }, + close:function(){ + var o=document.querySelector('.drawer-overlay'); + if(!o)return; + o.classList.add('closing'); + setTimeout(function(){o.remove();},200); + } +}; + +/* 详情抽屉 */ +function showDetail(el){ + var tr=el.closest('tr'); + var ths=tr.closest('table').querySelectorAll('thead th'); + var tds=tr.querySelectorAll('td'); + var html='
入库信息
'; + for(var i=0;i
'+tds[i].innerHTML+'
'; + } + html+='
'; + var title='入库详情 — '+tds[0].textContent; + Drawer.open(title,html); +} diff --git a/web-admin/nutrition/sup-pkg-label.html b/web-admin/nutrition/sup-pkg-label.html index 9ad93d0..2cad9bf 100644 --- a/web-admin/nutrition/sup-pkg-label.html +++ b/web-admin/nutrition/sup-pkg-label.html @@ -244,14 +244,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
- + - - - - - + + + + +
包装批次号溯源码包装餐品包装规格包装方式包装份数包含食材包装日期保质期至存放温度(℃)关联单号包装人终端设备操作包装批次号溯源码包装餐品包装规格包装方式包装份数包含食材包装日期保质期至存放温度(℃)关联单号包装人终端设备操作类型操作
BATCH-DH-20260415-01NC-PROC-JXRJ-20260415-01宫保鸡丁标准份(500g)冷鲜袋10鸡胸肉 120g
花生 20g
干辣椒 5g
2026-04-152026-04-173.8INT-001赵配餐PKG-T03查看视频 编辑 删除
BATCH-DH-20260415-01NC-PROC-JXRJ-20260415-01宫保鸡丁标准份(500g)冷鲜袋10鸡胸肉 120g
花生 20g
干辣椒 5g
2026-04-152026-04-173.8INT-001赵配餐PKG-T03查看视频 编辑 删除
BATCH-DH-20260415-02NC-PROC-CAYO-20260415-01清蒸鱼标准份(500g)保鲜盒8草鱼 100g
姜片适量
2026-04-152026-04-173.5INT-002陈配餐PKG-T03查看视频 编辑 删除
BATCH-DH-20260415-03NC-PROC-BOCA-20260415-01蒜蓉菠菜标准份(500g)冷鲜袋12净菠菜 120g
大蒜 8g
2026-04-152026-04-174.0EXT-001陈配餐PKG-T04查看视频 编辑 删除
BATCH-DH-20260415-04NC-PROC-HLUB-20260415-01炒胡萝卜大份(800g)保鲜盒6净胡萝卜 260g
葱姜适量
2026-04-152026-04-174.2INT-003赵配餐PKG-T04查看视频 编辑 删除
BATCH-DH-20260415-01NC-PROC-JXRJ-20260415-01宫保鸡丁标准份(500g)冷鲜袋10鸡胸肉 120g
花生 20g
干辣椒 5g
2026-04-152026-04-173.8INT-001赵配餐PKG-T03设备自动查看视频 编辑 删除
BATCH-DH-20260415-01NC-PROC-JXRJ-20260415-01宫保鸡丁标准份(500g)冷鲜袋10鸡胸肉 120g
花生 20g
干辣椒 5g
2026-04-152026-04-173.8INT-001赵配餐PKG-T03设备自动查看视频 编辑 删除
BATCH-DH-20260415-02NC-PROC-CAYO-20260415-01清蒸鱼标准份(500g)保鲜盒8草鱼 100g
姜片适量
2026-04-152026-04-173.5INT-002陈配餐PKG-T03人工录入查看视频 编辑 删除
BATCH-DH-20260415-03NC-PROC-BOCA-20260415-01蒜蓉菠菜标准份(500g)冷鲜袋12净菠菜 120g
大蒜 8g
2026-04-152026-04-174.0EXT-001陈配餐PKG-T04人工录入查看视频 编辑 删除
BATCH-DH-20260415-04NC-PROC-HLUB-20260415-01炒胡萝卜大份(800g)保鲜盒6净胡萝卜 260g
葱姜适量
2026-04-152026-04-174.2INT-003赵配餐PKG-T04设备自动查看视频 编辑 删除
@@ -421,6 +421,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
终端设备
+
+
操作类型*
+ +
@@ -244,13 +265,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} - WH-AA仓-蔬菜常温库加工中心一楼北侧常温500张仓管138-0000-1001使用中编辑 详情 + WH-AA仓-蔬菜常温库加工中心一楼北侧常温500张仓管138-0000-1001使用中编辑 详情 - WH-BB仓-肉类冷藏库加工中心一楼南侧冷藏(0~4℃)200王仓管138-0000-1002使用中编辑 详情 + WH-BB仓-肉类冷藏库加工中心一楼南侧冷藏(0~4℃)200王仓管138-0000-1002使用中编辑 详情 - WH-CC仓-水产冷冻库加工中心地下一层冷冻(-18℃)150李仓管138-0000-1003空置中编辑 详情 + WH-CC仓-水产冷冻库加工中心地下一层冷冻(-18℃)150李仓管138-0000-1003空置中编辑 详情 @@ -289,15 +310,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} 区域编号区域名称所属仓库适存品类容量(㎥)状态操作 - WH-A-01A仓-蔬菜区-01A仓-蔬菜常温库叶菜类80使用中编辑 详情 - WH-A-02A仓-蔬菜区-02A仓-蔬菜常温库叶菜类80使用中编辑 详情 - WH-A-03A仓-蔬菜区-03A仓-蔬菜常温库根茎类100使用中编辑 详情 - WH-A-04A仓-蔬菜区-04A仓-蔬菜常温库瓜果类80空置中编辑 详情 - WH-B-01B仓-肉类区-01B仓-肉类冷藏库猪肉类60使用中编辑 详情 - WH-B-02B仓-肉类区-02B仓-肉类冷藏库禽肉类60使用中编辑 详情 - WH-B-03B仓-肉类区-03B仓-肉类冷藏库蛋品类40空置中编辑 详情 - WH-C-01C仓-水产区-01C仓-水产冷冻库淡水鱼类80使用中编辑 详情 - WH-C-02C仓-水产区-02C仓-水产冷冻库海水产类70空置中编辑 详情 + WH-A-01A仓-蔬菜区-01A仓-蔬菜常温库叶菜类80使用中编辑 详情 + WH-A-02A仓-蔬菜区-02A仓-蔬菜常温库叶菜类80使用中编辑 详情 + WH-A-03A仓-蔬菜区-03A仓-蔬菜常温库根茎类100使用中编辑 详情 + WH-A-04A仓-蔬菜区-04A仓-蔬菜常温库瓜果类80空置中编辑 详情 + WH-B-01B仓-肉类区-01B仓-肉类冷藏库猪肉类60使用中编辑 详情 + WH-B-02B仓-肉类区-02B仓-肉类冷藏库禽肉类60使用中编辑 详情 + WH-B-03B仓-肉类区-03B仓-肉类冷藏库蛋品类40空置中编辑 详情 + WH-C-01C仓-水产区-01C仓-水产冷冻库淡水鱼类80使用中编辑 详情 + WH-C-02C仓-水产区-02C仓-水产冷冻库海水产类70空置中编辑 详情 @@ -312,22 +333,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} - - + + From bd22b62299287d9c775b6e60e018105dfa358f99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E6=99=AE?= <18691763612@163.com> Date: Fri, 22 May 2026 17:28:47 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E7=BB=BF=E8=89=B2=E7=A7=8D?= =?UTF-8?q?=E9=87=87=E6=A8=A1=E5=9D=97=E5=85=A8=E9=9D=A2=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E2=80=94=E2=80=94=E9=87=87=E4=BE=9B=E7=AE=A1=E7=90=86=E6=95=B4?= =?UTF-8?q?=E9=A1=B5=E9=87=8D=E6=9E=84=E3=80=81=E9=87=87=E6=94=B6=E5=85=A5?= =?UTF-8?q?=E5=BA=93/=E4=BE=9B=E5=BA=94=E5=95=86/=E7=9B=91=E6=8E=A7?= =?UTF-8?q?=E5=A4=9A=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 采供管理(farm-purchase)整页重构:采购单维度主表+可展开子表,5种订单状态联动操作按钮(接单/配送/收货/取消),新建弹窗联系人回显,详情抽屉按状态动态展示配送/取消信息 - 采收入库(farm-harvest):详情改为右侧抽屉,新增来源类型/产地筛选,表格增加种养殖批次和采收单位列,新增养殖出栏数据 - 供应商管理(farm-supplier):自供基地表格新增产能/订单列,外部供应商新增联系人/资质证书/合作状态列,新增多选下拉和图片上传组件 - 种植监控/养殖监控:筛选栏优化(下拉选择替代文本输入) - 功能说明文档9.4绿色种采章节同步更新调整记录 Co-Authored-By: Claude Opus 4.6 --- web-admin/nutrition/doc/营养管理功能说明.md | 45 +- web-admin/nutrition/farm-harvest.html | 163 +++- web-admin/nutrition/farm-monitor-crop.html | 13 +- .../nutrition/farm-monitor-livestock.html | 22 +- web-admin/nutrition/farm-purchase.html | 904 ++++++++++++++---- web-admin/nutrition/farm-supplier.html | 178 ++-- 6 files changed, 1035 insertions(+), 290 deletions(-) diff --git a/web-admin/nutrition/doc/营养管理功能说明.md b/web-admin/nutrition/doc/营养管理功能说明.md index f2d721c..bfb063a 100644 --- a/web-admin/nutrition/doc/营养管理功能说明.md +++ b/web-admin/nutrition/doc/营养管理功能说明.md @@ -1357,4 +1357,47 @@ ##### 3. farm-monitor-livestock.html(养殖监控) - 养殖批次详情从居中弹窗重构为右侧抽屉(宽度 480px),带滑入动画 -- 详情内容从 div.detail-grid 改为 ul.detail-list(BEM 命名规范) \ No newline at end of file +- 详情内容从 div.detail-grid 改为 ul.detail-list(BEM 命名规范) +- 筛选栏「养殖区」下拉位置前移至「批次号/品种」前 +- 弹窗中「养殖区/舍」字段从文本输入改为下拉选择 + +##### 4. farm-monitor-crop.html(种植监控) +- 筛选栏「地块名称」从文本输入改为下拉选择(A/B/C/D/E 区基地选项) +- 筛选栏新增「种植批次号」文本输入框 + +##### 5. farm-harvest.html(采收入库) +- 详情从居中弹窗重构为右侧抽屉(480px),CSS 滑入动画 + 遮罩层 +- 统计卡片重构:「本月入库总量」「A级占比」「今日入库批次」改为「种植采收批次」「养殖出栏批次」「A级占比」 +- 筛选栏新增「来源类型」下拉(种植采收/养殖出栏)、「产地/养殖区」下拉 +- 筛选栏「批次号/作物名」改为「批次号/食材名」;「入库日期范围」改为日期范围双输入框(起止日期) +- 表格新增「种养殖批次」列、「采收单位」列;「入库数量(kg)」改为「采收数量」 +- 新增 2 条养殖出栏示例数据(猪肉白条、整鸡),数据行从 4 条扩展为 6 条 +- 弹窗表单新增「种养殖批次」字段;「入库数量(kg)」改为「采收数量」+ 独立「采收单位」下拉(公斤/头/只/箱/桶) + +##### 6. farm-supplier.html(供应商管理) +- 自供基地 Tab:表格新增「负责人电话」「年均产能」「产能单位」「累计订单」列;「当前产能(kg/月)」移除 +- 自供基地 Tab:地块/养殖区列改为多行展示(含地块编号+名称),基地名称更贴近业务(「A1-猪舍」→「生猪养殖基地」等) +- 外部供应商 Tab:表格新增「联系人」「资质证书」(缩略图+数量)「合作期限」「合作状态」列;移除「资质状态」「最近评价」列;移除「评价供应商」按钮 +- 外部供应商 Tab:筛选「资质状态」改为「合作状态」(正常/即将到期/合同终止/黑名单) +- 新增多选下拉组件样式(multi-select),用于弹窗中地块/养殖区多选 +- 新增图片上传区域样式(upload-area/upload-preview/upload-btn),用于资质证书上传 +- 新增只读字段样式(form-readonly),用于弹窗中自动生成的编号展示 + +##### 7. farm-purchase.html(采供管理)— 整页重构 +- **页面结构重构**:从食材明细维度的平铺表格,重构为采购单维度的主表 + 可展开食材明细子表(手风琴模式) +- **主表列**:展开、采购单号、采购食堂、供应商、食材种类、采购总金额、下单日期、预计到货、采购单来源、订单状态、操作 +- **展开子表列**:溯源码、食材名称、食材分类、采购数量、规格(手动输入,如 25kg/件、散装(kg)、5L/桶)、单价、小计金额、备注 +- **订单状态体系**:待接单(橙)、待发货(蓝)、待收货(橙)、已完成(绿)、已取消(红),5 条示例数据各覆盖一种状态 +- **操作按钮按状态动态显示**: + - 待接单:详情、编辑、立即接单、取消订单 + - 待发货:详情、编辑、开始配送、取消订单 + - 待收货:详情、确认收货 + - 已完成:详情、删除 + - 已取消:详情、删除 +- **新建/编辑采购单弹窗**(960px):选择食堂/供应商后下方回显联系人和电话;食材明细动态行(添加/删除/自动小计);食材名称为下拉选择;去掉底部备注和保存草稿按钮 +- **详情抽屉**(640px):订单信息、采购食堂信息(含联系人/电话)、供应商信息(含联系人/电话)、食材明细表;按状态动态显示「配送信息」区块(待收货/已完成)或「取消信息」区块(已取消,红色高亮) +- **立即接单**:页面顶部绿色 toast 浮窗提示 +- **取消订单弹窗**:二次确认 + 手动输入取消原因(textarea 必填) +- **开始配送弹窗**(480px):填写配送方式(下拉)、配送人姓名、配送人电话(必填)、预计送达时间 +- **确认收货弹窗**:二次确认,确认后 toast 提示 +- **其他**:导出按钮统一为 SVG 图标样式;删除确认弹窗保留 \ No newline at end of file diff --git a/web-admin/nutrition/farm-harvest.html b/web-admin/nutrition/farm-harvest.html index cae64e8..f70d573 100644 --- a/web-admin/nutrition/farm-harvest.html +++ b/web-admin/nutrition/farm-harvest.html @@ -114,13 +114,19 @@ tbody tr:hover{background:#F8FBFF;} thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;} thead th:last-child{background:#FAFAFA;} tbody tr:hover td.td-actions{background:#F8FBFF;} -/* 详情弹窗 */ -.detail-modal{width:720px;} -.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;} -.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;} -.detail-item.full{grid-column:1/-1;} +/* 右侧抽屉 */ +.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:none;} +.drawer{position:fixed;top:0;right:-480px;width:480px;height:100%;background:#fff;z-index:1001;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transition:right .3s ease;display:flex;flex-direction:column;} +.drawer.open{right:0;} +.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;flex-shrink:0;} +.drawer-title{font-size:16px;font-weight:600;color:#262626;} +.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;} +.drawer-body{flex:1;overflow-y:auto;padding:0;} +.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e8e8e8;flex-shrink:0;} +.detail-grid{display:flex;flex-direction:column;} +.detail-item{display:flex;padding:14px 24px;border-bottom:1px solid #f0f0f0;} .detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);} -.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);} +.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;} @@ -176,24 +182,32 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
186
入库批次总数
-
-
930 kg
本月入库总量
+
🌱
+
142
种植采收批次
-
+
🐄
+
44
养殖出栏批次
+
+
+
78%
A级占比
-
-
🌱
-
4
今日入库批次
-
- - + + +
+
+ +
@@ -205,8 +219,24 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
- - + + +
+
+ + + +
@@ -228,12 +258,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + - + + @@ -243,12 +276,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + + @@ -256,12 +292,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + + @@ -269,12 +308,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + + @@ -282,24 +324,59 @@ tbody tr:hover td.td-actions{background:#F8FBFF;} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
采收批次号 溯源码 食材名称 品种种养殖批次 产地/地块 采收/出栏日期入库数量(kg)采收数量采收单位 品质等级 入库日期 经办人员
HC-20260415-001 ST-FH-FA01-VG-BOCA-286K-20260415-001 菠菜 尖叶菠菜ZZ-A01-2026-003 A区蔬菜基地 2026-04-15 286公斤 A级 2026-04-15 李采收查看视频 详情 编辑 删除
HC-20260415-002 ST-FH-FB01-VG-HLUB-420K-20260415-002 胡萝卜 红芯胡萝卜ZZ-B01-2026-007 B区根茎基地 2026-04-15 420公斤 A级 2026-04-15 王采收查看视频 详情 编辑 删除
HC-20260414-003 ST-FH-FC01-VG-XGUO-068K-20260414-003 香菇 808香菇ZZ-C01-2026-012 C区菌菇大棚 2026-04-14 68公斤 B级 2026-04-14 李采收查看视频 详情 编辑 删除
HC-20260414-004 ST-FH-FD01-VG-SJJD-156K-20260414-004 四季豆 架豆王ZZ-D01-2026-005 D区豆类基地 2026-04-14 156公斤 A级 2026-04-14 张采收 RPT-20260414-004 查看视频 详情 编辑 删除
HC-20260416-005ST-FH-A1ZS-LS-DLKZ-320T-20260416-005猪肉(白条)杜洛克LS-2604-001A1-猪舍2026-04-1650A级2026-04-16陈大勇RPT-20260416-005查看视频 详情 编辑 删除
HC-20260416-006ST-FH-B3JS-LS-HYJJ-200Z-20260416-006鸡(整只)黄羽鸡LS-2603-002B3-鸡舍2026-04-16200A级2026-04-16刘芳RPT-20260416-006查看视频 详情 编辑 删除
+
+ + +
@@ -364,8 +445,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
- - + + +
+
+ +
@@ -392,19 +477,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
- -