feat: 全模块交互增强——右侧抽屉详情、操作确认弹窗、状态联动toast
卫生供应(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 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -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个操作按钮；
|
||||
- 新增地块/养殖区的新增/编辑/详情/采集记录弹窗
|
||||
- 新增地块/养殖区的新增/编辑/详情/采集记录弹窗
|
||||
- 地块详情和养殖区详情从居中 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 命名规范）
|
||||
@@ -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{}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -427,29 +435,29 @@ table thead .sub-header th{font-size:12px;font-weight:500;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地块详情弹窗（只读） -->
|
||||
<div class="modal-overlay" id="plotDetailModal">
|
||||
<div class="modal detail-modal" style="width:760px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">地块详情</span>
|
||||
<span class="modal-close" onclick="closePlotDetail()">×</span>
|
||||
<!-- 地块详情抽屉（只读） -->
|
||||
<div class="drawer-overlay" id="plotDetailDrawer" onclick="if(event.target===this)closePlotDetail();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">地块详情</span>
|
||||
<span class="drawer-close" onclick="closePlotDetail()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;" id="plotDetailContent"></div>
|
||||
<div class="modal-footer">
|
||||
<div class="drawer-body" id="plotDetailContent"></div>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closePlotDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 养殖区详情弹窗（只读） -->
|
||||
<div class="modal-overlay" id="breedDetailModal">
|
||||
<div class="modal detail-modal" style="width:760px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">养殖区详情</span>
|
||||
<span class="modal-close" onclick="closeBreedDetail()">×</span>
|
||||
<!-- 养殖区详情抽屉（只读） -->
|
||||
<div class="drawer-overlay" id="breedDetailDrawer" onclick="if(event.target===this)closeBreedDetail();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">养殖区详情</span>
|
||||
<span class="drawer-close" onclick="closeBreedDetail()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;" id="breedDetailContent"></div>
|
||||
<div class="modal-footer">
|
||||
<div class="drawer-body" id="breedDetailContent"></div>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeBreedDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -579,46 +587,44 @@ function showPlotDetail(el){
|
||||
var n=cells[11].textContent, p=cells[12].textContent, k=cells[13].textContent;
|
||||
var pest=cells[14].textContent, water=cells[15].textContent;
|
||||
var time=cells[16].textContent, warn=cells[17].textContent;
|
||||
// 模拟备注数据
|
||||
var remarks={'LAND-001':'有机种植示范区，禁止使用化学农药','LAND-002':'适合根茎类作物，排水良好','LAND-003':'恒温恒湿大棚，需定期通风','LAND-004':'休耕期进行土壤改良，计划下季种植大豆'};
|
||||
var remark=remarks[id]||'暂无备注';
|
||||
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">地块编号</span><span class="detail-value">'+id+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">地块名称</span><span class="detail-value">'+name+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">面积(亩)</span><span class="detail-value">'+area+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">地块状态</span><span class="detail-value">'+status+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">负责人</span><span class="detail-value">'+person+'</span></div>';
|
||||
html+='</div></div>';
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">地块编号</span><span class="detail-list__value">'+id+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">地块名称</span><span class="detail-list__value">'+name+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">面积(亩)</span><span class="detail-list__value">'+area+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">地块状态</span><span class="detail-list__value">'+status+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">负责人</span><span class="detail-list__value">'+person+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">种植信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">种植作物</span><span class="detail-value">'+crop+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">灌溉方式</span><span class="detail-value">'+irrigation+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">土壤类型</span><span class="detail-value">'+soil+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">种植信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">种植作物</span><span class="detail-list__value">'+crop+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">灌溉方式</span><span class="detail-list__value">'+irrigation+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">土壤类型</span><span class="detail-list__value">'+soil+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">温度(℃)</span><span class="detail-value">'+temp+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">湿度(%RH)</span><span class="detail-value">'+hum+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">土壤pH</span><span class="detail-value">'+ph+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">氮(mg/kg)</span><span class="detail-value">'+n+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">磷(mg/kg)</span><span class="detail-value">'+p+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">钾(mg/kg)</span><span class="detail-value">'+k+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">农药残留</span><span class="detail-value">'+pest+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">水质等级</span><span class="detail-value">'+water+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">采集时间</span><span class="detail-value">'+time+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">预警等级</span><span class="detail-value">'+warn+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">温度(℃)</span><span class="detail-list__value">'+temp+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">湿度(%RH)</span><span class="detail-list__value">'+hum+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">土壤pH</span><span class="detail-list__value">'+ph+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">氮(mg/kg)</span><span class="detail-list__value">'+n+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">磷(mg/kg)</span><span class="detail-list__value">'+p+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">钾(mg/kg)</span><span class="detail-list__value">'+k+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">农药残留</span><span class="detail-list__value">'+pest+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">水质等级</span><span class="detail-list__value">'+water+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">采集时间</span><span class="detail-list__value">'+time+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">预警等级</span><span class="detail-list__value">'+warn+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item full"><span class="detail-label">备注信息</span><span class="detail-value">'+remark+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">备注信息</span><span class="detail-list__value">'+remark+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
document.getElementById('plotDetailContent').innerHTML=html;
|
||||
document.getElementById('plotDetailModal').style.display='flex';
|
||||
document.getElementById('plotDetailDrawer').classList.add('open');
|
||||
}
|
||||
function closePlotDetail(){document.getElementById('plotDetailModal').style.display='none';}
|
||||
document.getElementById('plotDetailModal').addEventListener('click',function(e){if(e.target===this)closePlotDetail();});
|
||||
function closePlotDetail(){document.getElementById('plotDetailDrawer').classList.remove('open');}
|
||||
|
||||
// --- 养殖区详情 ---
|
||||
function showBreedDetail(el){
|
||||
@@ -630,45 +636,43 @@ function showBreedDetail(el){
|
||||
var nh3=cells[9].textContent, co2=cells[10].textContent, lux=cells[11].textContent;
|
||||
var vent=cells[12].textContent, water=cells[13].textContent, waste=cells[14].textContent;
|
||||
var time=cells[15].textContent, warn=cells[16].textContent;
|
||||
// 模拟备注数据
|
||||
var remarks={'BREED-A1':'标准化猪舍，配备自动喂料系统','BREED-B3':'散养鸡舍，林下养殖模式','BREED-C2':'水禽养殖区，需加强通风管理','BREED-D1':'空置中，计划下月引进新批次湖羊'};
|
||||
var remark=remarks[id]||'暂无备注';
|
||||
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖区编号</span><span class="detail-value">'+id+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖区名称</span><span class="detail-value">'+name+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">面积(㎡)</span><span class="detail-value">'+area+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">负责人</span><span class="detail-value">'+person+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖状态</span><span class="detail-value">'+status+'</span></div>';
|
||||
html+='</div></div>';
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖区编号</span><span class="detail-list__value">'+id+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖区名称</span><span class="detail-list__value">'+name+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">面积(㎡)</span><span class="detail-list__value">'+area+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">负责人</span><span class="detail-list__value">'+person+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖状态</span><span class="detail-list__value">'+status+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">养殖信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">动物种类</span><span class="detail-value">'+animal+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖方式</span><span class="detail-value">'+method+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">养殖信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">动物种类</span><span class="detail-list__value">'+animal+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖方式</span><span class="detail-list__value">'+method+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">温度(℃)</span><span class="detail-value">'+temp+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">湿度(%RH)</span><span class="detail-value">'+hum+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">氨气(ppm)</span><span class="detail-value">'+nh3+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">CO₂(ppm)</span><span class="detail-value">'+co2+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">光照(lux)</span><span class="detail-value">'+lux+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">通风状态</span><span class="detail-value">'+vent+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">饮水水质</span><span class="detail-value">'+water+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">粪污处理</span><span class="detail-value">'+waste+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">采集时间</span><span class="detail-value">'+time+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">预警等级</span><span class="detail-value">'+warn+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">温度(℃)</span><span class="detail-list__value">'+temp+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">湿度(%RH)</span><span class="detail-list__value">'+hum+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">氨气(ppm)</span><span class="detail-list__value">'+nh3+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">CO₂(ppm)</span><span class="detail-list__value">'+co2+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">光照(lux)</span><span class="detail-list__value">'+lux+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">通风状态</span><span class="detail-list__value">'+vent+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">饮水水质</span><span class="detail-list__value">'+water+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">粪污处理</span><span class="detail-list__value">'+waste+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">采集时间</span><span class="detail-list__value">'+time+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">预警等级</span><span class="detail-list__value">'+warn+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item full"><span class="detail-label">备注信息</span><span class="detail-value">'+remark+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">备注信息</span><span class="detail-list__value">'+remark+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
document.getElementById('breedDetailContent').innerHTML=html;
|
||||
document.getElementById('breedDetailModal').style.display='flex';
|
||||
document.getElementById('breedDetailDrawer').classList.add('open');
|
||||
}
|
||||
function closeBreedDetail(){document.getElementById('breedDetailModal').style.display='none';}
|
||||
document.getElementById('breedDetailModal').addEventListener('click',function(e){if(e.target===this)closeBreedDetail();});
|
||||
function closeBreedDetail(){document.getElementById('breedDetailDrawer').classList.remove('open');}
|
||||
|
||||
// --- 种植作物搜索选择框 ---
|
||||
(function(){
|
||||
|
||||
@@ -115,13 +115,21 @@ 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;}
|
||||
.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:1000;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:1001;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;}
|
||||
/* 巡检记录弹窗 */
|
||||
.inspection-modal{width:960px;max-height:85vh;}
|
||||
.inspection-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
@@ -470,18 +478,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">种植记录详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
<!-- 详情抽屉 -->
|
||||
<div class="drawer-overlay" id="detailDrawer" onclick="if(event.target===this)closeDetailDrawer();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">种植记录详情</span>
|
||||
<span class="drawer-close" onclick="closeDetailDrawer()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
<div class="drawer-body">
|
||||
<ul class="detail-list" id="detailList"></ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -539,23 +547,22 @@ function openModal(mode){
|
||||
}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 详情弹窗
|
||||
// 详情抽屉
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var grid=document.getElementById('detailGrid');
|
||||
grid.innerHTML='';
|
||||
var list=document.getElementById('detailList');
|
||||
list.innerHTML='';
|
||||
for(var i=0;i<tds.length-1;i++){
|
||||
var div=document.createElement('div');
|
||||
div.className='detail-item';
|
||||
div.innerHTML='<div class="detail-label">'+ths[i].textContent+'</div><div class="detail-value">'+tds[i].innerHTML+'</div>';
|
||||
grid.appendChild(div);
|
||||
var li=document.createElement('li');
|
||||
li.className='detail-list__item';
|
||||
li.innerHTML='<span class="detail-list__label">'+ths[i].textContent+'</span><span class="detail-list__value">'+tds[i].innerHTML+'</span>';
|
||||
list.appendChild(li);
|
||||
}
|
||||
document.getElementById('detailModal').style.display='flex';
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
function closeDetailDrawer(){document.getElementById('detailDrawer').classList.remove('open');}
|
||||
// 巡检记录弹窗
|
||||
var inspectionData={
|
||||
'CROP-202601-001':[
|
||||
|
||||
@@ -114,13 +114,21 @@ 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;}
|
||||
.detail-label{width:140px;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:1000;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:1001;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:140px;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;}
|
||||
/* 疫苗接种记录弹窗 */
|
||||
.vaccine-modal{width:960px;max-height:85vh;}
|
||||
.vaccine-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
@@ -488,18 +496,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 养殖批次详情弹窗（只读） -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">养殖批次详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
<!-- 养殖批次详情抽屉（只读） -->
|
||||
<div class="drawer-overlay" id="detailDrawer" onclick="if(event.target===this)closeDetailDrawer();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">养殖批次详情</span>
|
||||
<span class="drawer-close" onclick="closeDetailDrawer()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
<div class="drawer-body">
|
||||
<ul class="detail-list" id="detailList"></ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -516,23 +524,22 @@ function openModal(mode){
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
|
||||
// 详情弹窗
|
||||
// 详情抽屉
|
||||
var detailLabels=['养殖批次号','动物种类','品种','养殖区/舍编号','入栏数量(头/只)','入栏日期','当前存栏数','平均体重(kg)','养殖方式','健康状态','负责人','负责人电话','养殖状态','预计出栏日期'];
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var grid=document.getElementById('detailGrid');
|
||||
grid.innerHTML='';
|
||||
var list=document.getElementById('detailList');
|
||||
list.innerHTML='';
|
||||
for(var i=0;i<detailLabels.length;i++){
|
||||
var div=document.createElement('div');
|
||||
div.className='detail-item'+(i===0?' full':'');
|
||||
div.innerHTML='<span class="detail-label">'+detailLabels[i]+'</span><span class="detail-value">'+tds[i].innerHTML+'</span>';
|
||||
grid.appendChild(div);
|
||||
var li=document.createElement('li');
|
||||
li.className='detail-list__item';
|
||||
li.innerHTML='<span class="detail-list__label">'+detailLabels[i]+'</span><span class="detail-list__value">'+tds[i].innerHTML+'</span>';
|
||||
list.appendChild(li);
|
||||
}
|
||||
document.getElementById('detailModal').style.display='flex';
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
function closeDetailDrawer(){document.getElementById('detailDrawer').classList.remove('open');}
|
||||
|
||||
// 疫苗接种记录弹窗
|
||||
var vaccineData={
|
||||
|
||||
@@ -100,6 +100,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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -161,12 +182,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>订单号</th><th>溯源码</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>需求份数</th><th>需求计量(kg)</th><th>订单状态</th><th>申领时间</th><th>预定配送时间</th><th>创建人</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CO-001</td><td>NC-INT-BOCA-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 07:30</td><td>2026-04-22 10:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-002</td><td>NC-INT-ZLRJ-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-003</td><td>NC-INT-JXRJ-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-005</td><td>NC-INT-QZYU-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-006</td><td>NC-INT-TDSI-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>2026-04-22 09:15</td><td>2026-04-22 11:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-008</td><td>NC-INT-XLHU-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>西兰花</td><td>500g/袋</td><td>30</td><td>15</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 10:00</td><td>2026-04-22 11:30</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-001</td><td>NC-INT-BOCA-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 07:30</td><td>2026-04-22 10:00</td><td>张厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-002</td><td>NC-INT-ZLRJ-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="confirmReceive(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-003</td><td>NC-INT-JXRJ-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="confirmReceive(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-005</td><td>NC-INT-QZYU-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>王厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-006</td><td>NC-INT-TDSI-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>2026-04-22 09:15</td><td>2026-04-22 11:00</td><td>张厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-008</td><td>NC-INT-XLHU-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>西兰花</td><td>500g/袋</td><td>30</td><td>15</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 10:00</td><td>2026-04-22 11:30</td><td>王厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -233,6 +254,23 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗：确认收货 -->
|
||||
<div class="modal-mask" id="modal-confirm-receive">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认收货</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-confirm-receive')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<div id="confirmReceiveMsg" style="font-size:var(--font-base);color:var(--text-primary);">确认已收到该订单的净菜配送？</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-confirm-receive')">取消</button>
|
||||
<button class="btn btn-primary" onclick="doConfirmReceive()">确认收货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 弹窗开关
|
||||
function openModal(id){document.getElementById(id).classList.add('show');}
|
||||
@@ -241,6 +279,54 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});});
|
||||
// 净菜类型切换：显示净菜名称或餐品名称
|
||||
function toggleOrderName(){var v=document.getElementById('orderType').value;document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'flex');document.getElementById('orderNameCP').style.display=(v==='cp'?'flex':'none');}
|
||||
|
||||
// 确认收货
|
||||
var _confirmReceiveRow=null;
|
||||
function confirmReceive(el){
|
||||
_confirmReceiveRow=el.closest('tr');
|
||||
var orderNo=_confirmReceiveRow.querySelectorAll('td')[0].textContent;
|
||||
var foodName=_confirmReceiveRow.querySelectorAll('td')[3].textContent;
|
||||
document.getElementById('confirmReceiveMsg').innerHTML='确认已收到订单 <b>'+orderNo+'</b>（'+foodName+'）的净菜配送？';
|
||||
openModal('modal-confirm-receive');
|
||||
}
|
||||
function doConfirmReceive(){
|
||||
if(!_confirmReceiveRow)return;
|
||||
// 更新状态列为"已完成"
|
||||
var statusTd=_confirmReceiveRow.querySelectorAll('td')[7];
|
||||
statusTd.innerHTML='<span class="tag tag-green">已完成</span>';
|
||||
// 移除"确认收货"按钮
|
||||
var actionTd=_confirmReceiveRow.querySelector('.td-actions');
|
||||
var confirmBtn=actionTd.querySelector('span[onclick*="confirmReceive"]');
|
||||
if(confirmBtn)confirmBtn.remove();
|
||||
_confirmReceiveRow=null;
|
||||
closeModal('modal-confirm-receive');
|
||||
}
|
||||
|
||||
// 抽屉组件
|
||||
function closeDrawer(){
|
||||
var overlay=document.querySelector('.drawer-overlay');
|
||||
if(!overlay)return;
|
||||
overlay.classList.add('closing');
|
||||
setTimeout(function(){overlay.remove();},200);
|
||||
}
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var ths=document.querySelectorAll('thead th');
|
||||
// 获取订单号（第一列）
|
||||
var orderNo=tds[0].textContent;
|
||||
// 构建字段数据（排除最后的操作列）
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
var html='<div class="drawer-overlay" onclick="if(event.target===this)closeDrawer()">'
|
||||
+'<div class="drawer">'
|
||||
+'<div class="drawer__header"><div class="drawer__title">净菜订单详情 — '+orderNo+'</div><button class="drawer__close" onclick="closeDrawer()">✕</button></div>'
|
||||
+'<div class="drawer__body"><div class="drawer-section"><div class="drawer-section__title">订单信息</div><div class="drawer-fields">'+fields+'</div></div></div>'
|
||||
+'</div></div>';
|
||||
document.body.insertAdjacentHTML('beforeend',html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -160,6 +160,27 @@ tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
.video-info{display:flex;gap:24px;margin-top:16px;padding:12px 0;border-top:1px solid var(--border);}
|
||||
.video-info__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.video-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
/* 右侧抽屉 */
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -311,12 +332,12 @@ tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
<table>
|
||||
<thead><tr><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 id="detailTable">
|
||||
<tr class="row-active" data-slot="0"><td>A1-01</td><td>NC-CAB-BOCA-0422-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-green">🥬 净菜</span></td><td>12.5</td><td>10.2</td><td>张厨师</td><td>4.2</td><td>剩余32h</td><td>04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-01','土豆')">视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="1"><td>A1-02</td><td>NC-CAB-HLUB-0422-01</td><td>净胡萝卜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>18.0</td><td>15.6</td><td>李主管</td><td>4.1</td><td>剩余46h</td><td>04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="2"><td>A1-03</td><td>NC-CAB-XGUO-0422-01</td><td>净香菇</td><td><span class="tag tag-green">🥬 净菜</span></td><td>9.0</td><td>6.8</td><td>王厨师</td><td>4.3</td><td>剩余6h</td><td>04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-03','净香菇')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="3"><td>A1-04</td><td>NC-CAB-XLHU-0422-01</td><td>净西兰花</td><td><span class="tag tag-green">🥬 净菜</span></td><td>10.0</td><td>8.5</td><td>张厨师</td><td>4.0</td><td>剩余50h</td><td>04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-04','净西兰花')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="4"><td>A1-05</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-orange">🍱 餐品包</span></td><td>6.0</td><td>5.4</td><td>李主管</td><td>3.8</td><td>剩余44h</td><td>04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-05','宫保鸡丁')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="5"><td>A1-06</td><td>NC-CAB-BCAI-0422-01</td><td>净白菜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>22.0</td><td>18.0</td><td>王厨师</td><td>7.8</td><td>剩余40h</td><td>04-22 08:50</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-06','净白菜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr class="row-active" data-slot="0"><td>A1-01</td><td>NC-CAB-BOCA-0422-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-green">🥬 净菜</span></td><td>12.5</td><td>10.2</td><td>张厨师</td><td>4.2</td><td>剩余32h</td><td>04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-01','土豆')">视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="1"><td>A1-02</td><td>NC-CAB-HLUB-0422-01</td><td>净胡萝卜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>18.0</td><td>15.6</td><td>李主管</td><td>4.1</td><td>剩余46h</td><td>04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="2"><td>A1-03</td><td>NC-CAB-XGUO-0422-01</td><td>净香菇</td><td><span class="tag tag-green">🥬 净菜</span></td><td>9.0</td><td>6.8</td><td>王厨师</td><td>4.3</td><td>剩余6h</td><td>04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-03','净香菇')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="3"><td>A1-04</td><td>NC-CAB-XLHU-0422-01</td><td>净西兰花</td><td><span class="tag tag-green">🥬 净菜</span></td><td>10.0</td><td>8.5</td><td>张厨师</td><td>4.0</td><td>剩余50h</td><td>04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-04','净西兰花')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="4"><td>A1-05</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-orange">🍱 餐品包</span></td><td>6.0</td><td>5.4</td><td>李主管</td><td>3.8</td><td>剩余44h</td><td>04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-05','宫保鸡丁')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="5"><td>A1-06</td><td>NC-CAB-BCAI-0422-01</td><td>净白菜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>22.0</td><td>18.0</td><td>王厨师</td><td>7.8</td><td>剩余40h</td><td>04-22 08:50</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-06','净白菜')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="6"><td>A1-07</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="7"><td>A1-08</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="8"><td>A1-09</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
@@ -413,6 +434,36 @@ function showVideo(code,name){
|
||||
document.body.appendChild(mask);
|
||||
}
|
||||
function closeVideoModal(){var m=document.getElementById('videoModal');if(m)m.remove();}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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='<div class="drawer-section"><div class="drawer-section__title">详细信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<headers.length-1;i++){
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">'+headers[i].textContent.trim()+'</span><span class="drawer-field__value">'+cells[i].innerHTML.trim()+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('保温柜详情 — '+cells[0].textContent.trim(),html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -97,6 +97,30 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.action-more__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more__item--danger{color:var(--danger);}
|
||||
.action-more__item--danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
/* 右侧抽屉 */
|
||||
.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;}
|
||||
/* 顶部提示条 */
|
||||
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);background:#f6ffed;border:1px solid #b7eb8f;color:#52c41a;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:500;z-index:9999;box-shadow:var(--shadow-md);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -155,14 +179,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__header"><div class="table-card__title">净菜组配</div></div>
|
||||
<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></tr></thead>
|
||||
<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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('宫保鸡丁')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td>2026-05-20 10:30:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('番茄炒蛋')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td>2026-05-20 10:45:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>2026-05-20 11:30</td><td><a class="link" onclick="openRecipeModal('红烧肉')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" style="color:var(--success)">完成组配</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('清蒸鱼')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link">开始组配</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('炒时蔬')">食材明细</a></td><td><span class="tag tag-gray">录入</span></td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td>2026-05-20 10:50:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('豆腐')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link">开始组配</a></td></tr>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('宫保鸡丁')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td><span class="tag tag-blue">设备自动</span></td><td>2026-05-20 10:30:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('番茄炒蛋')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td><span class="tag tag-blue">设备自动</span></td><td>2026-05-20 10:45:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>2026-05-20 11:30</td><td><a class="link" onclick="openRecipeModal('红烧肉')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td><span class="tag tag-green">人工录入</span></td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" style="color:var(--success)" onclick="finishCombo(this)">完成组配</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('清蒸鱼')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td><span class="tag tag-green">人工录入</span></td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" onclick="startCombo(this)">开始组配</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('炒时蔬')">食材明细</a></td><td><span class="tag tag-gray">录入</span></td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td><span class="tag tag-blue">设备自动</span></td><td>2026-05-20 10:50:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('豆腐')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td><span class="tag tag-green">人工录入</span></td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" onclick="startCombo(this)">开始组配</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -213,6 +237,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<label>任务来源<span class="required">*</span></label>
|
||||
<select><option value="">请选择</option><option>录入</option><option>点餐</option><option>餐线</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>操作类型<span class="required">*</span></label>
|
||||
<select><option value="">请选择</option><option>设备自动</option><option>人工录入</option></select>
|
||||
</div>
|
||||
<div class="form-item full" style="margin-top:8px;padding:12px 16px;background:#F8FBFF;border-radius:var(--radius-sm);border:1px dashed var(--primary);">
|
||||
<label style="color:var(--primary);font-size:12px;">💡 食材明细将根据所选餐品与规格自动计算生成，无需手动填写</label>
|
||||
</div>
|
||||
@@ -260,6 +288,88 @@ document.getElementById('modalOverlay').addEventListener('click',function(e){if(
|
||||
function openRecipeModal(name){document.getElementById('recipeModalTitle').textContent='食材明细 - '+name;document.getElementById('recipeModal').style.display='flex';}
|
||||
function closeRecipeModal(){document.getElementById('recipeModal').style.display='none';}
|
||||
document.getElementById('recipeModal').addEventListener('click',function(e){if(e.target===this)closeRecipeModal();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
/* 顶部提示条 */
|
||||
var _toastTimer=null;
|
||||
function showToast(msg){
|
||||
var el=document.getElementById('globalToast');
|
||||
if(!el){
|
||||
el=document.createElement('div');
|
||||
el.id='globalToast';
|
||||
el.className='toast';
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
clearTimeout(_toastTimer);
|
||||
el.innerHTML=msg;
|
||||
el.classList.remove('show');
|
||||
void el.offsetWidth;
|
||||
el.classList.add('show');
|
||||
_toastTimer=setTimeout(function(){el.classList.remove('show');},2000);
|
||||
}
|
||||
|
||||
/* 开始组配 */
|
||||
function startCombo(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列(第7列)改为"组配中"
|
||||
tds[7].innerHTML='<span class="tag tag-blue">组配中</span>';
|
||||
// 按钮替换为"完成组配"
|
||||
el.style.color='var(--success)';
|
||||
el.setAttribute('onclick','finishCombo(this)');
|
||||
el.textContent='完成组配';
|
||||
showToast('✅ '+taskId+' 已开始组配');
|
||||
}
|
||||
|
||||
/* 完成组配 */
|
||||
function finishCombo(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列改为"已完成"
|
||||
tds[7].innerHTML='<span class="tag tag-green">已完成</span>';
|
||||
// 完成时间列(第10列)填入当前时间
|
||||
var now=new Date();
|
||||
var ts=now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0')+' '+String(now.getHours()).padStart(2,'0')+':'+String(now.getMinutes()).padStart(2,'0')+':'+String(now.getSeconds()).padStart(2,'0');
|
||||
tds[10].textContent=ts;
|
||||
// 移除按钮
|
||||
el.remove();
|
||||
showToast('✅ '+taskId+' 组配已完成');
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var labels=[];
|
||||
for(var i=0;i<ths.length-1;i++){labels.push(ths[i].textContent.trim());}
|
||||
var taskId=tds[0].textContent.trim();
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<labels.length;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+labels[i]+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('组合详情 — '+taskId,html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -110,6 +110,30 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.temp-chart__x{position:absolute;left:48px;right:16px;bottom:8px;display:flex;justify-content:space-between;font-size:11px;color:#999;}
|
||||
.temp-chart__area{width:100%;height:100%;position:relative;}
|
||||
.temp-chart__svg{width:100%;height:100%;}
|
||||
/* 右侧抽屉 */
|
||||
.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;}
|
||||
/* 顶部提示条 */
|
||||
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);background:#f6ffed;border:1px solid #b7eb8f;color:#52c41a;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:500;z-index:9999;box-shadow:var(--shadow-md);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -171,13 +195,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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>生重(kg)</th><th>熟重(kg)</th><th>生熟比</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>50</td><td>2026-05-20</td><td>11:00</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('宫保鸡丁')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">92分</span></a></td><td>8.5</td><td>7.2</td><td>1：0.85</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>80</td><td>2026-05-20</td><td>11:05</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>李厨师</td><td><a class="link" onclick="openIngredientModal('番茄炒蛋')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">88分</span></a></td><td>12.0</td><td>10.4</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>—</td><td>2026-05-20</td><td>11:10</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>王厨师</td><td><a class="link" onclick="openIngredientModal('红烧肉')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>10.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>—</td><td>2026-05-20</td><td>11:15</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('清蒸鱼')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>6.5</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>标准份（300g）</td><td>100</td><td>—</td><td>2026-05-20</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td>—</td><td><a class="link" onclick="openIngredientModal('蒜蓉菠菜')">食材明细</a></td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">开始烹制</span></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>20</td><td>2026-05-20</td><td>11:10</td><td>11:30</td><td><span class="tag tag-green">已完成</span></td><td>赵厨师</td><td><a class="link" onclick="openIngredientModal('炒时蔬')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">95分</span></a></td><td>18.0</td><td>15.6</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>35</td><td>2026-05-20</td><td>11:20</td><td>11:35</td><td><span class="tag tag-green">已完成</span></td><td>陈厨师</td><td><a class="link" onclick="openIngredientModal('豆腐')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">78分</span></a></td><td>4.2</td><td>3.9</td><td>1：0.93</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>50</td><td>2026-05-20</td><td>11:00</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('宫保鸡丁')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">92分</span></a></td><td>8.5</td><td>7.2</td><td>1：0.85</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>80</td><td>2026-05-20</td><td>11:05</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>李厨师</td><td><a class="link" onclick="openIngredientModal('番茄炒蛋')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">88分</span></a></td><td>12.0</td><td>10.4</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>—</td><td>2026-05-20</td><td>11:10</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>王厨师</td><td><a class="link" onclick="openIngredientModal('红烧肉')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>10.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="finishCook(this)">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>—</td><td>2026-05-20</td><td>11:15</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('清蒸鱼')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>6.5</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="finishCook(this)">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>标准份（300g）</td><td>100</td><td>—</td><td>2026-05-20</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td>—</td><td><a class="link" onclick="openIngredientModal('蒜蓉菠菜')">食材明细</a></td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="startCook(this)">开始烹制</span></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>20</td><td>2026-05-20</td><td>11:10</td><td>11:30</td><td><span class="tag tag-green">已完成</span></td><td>赵厨师</td><td><a class="link" onclick="openIngredientModal('炒时蔬')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">95分</span></a></td><td>18.0</td><td>15.6</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>35</td><td>2026-05-20</td><td>11:20</td><td>11:35</td><td><span class="tag tag-green">已完成</span></td><td>陈厨师</td><td><a class="link" onclick="openIngredientModal('豆腐')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">78分</span></a></td><td>4.2</td><td>3.9</td><td>1：0.93</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -298,6 +322,97 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
function openIngredientModal(name){document.getElementById('ingredientTitle').textContent='食材明细 - '+name;document.getElementById('ingredientModal').style.display='flex';}
|
||||
function openTempModal(){document.getElementById('tempModal').style.display='flex';}
|
||||
function openModelModal(){document.getElementById('modelModal').style.display='flex';}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
/* 顶部提示条 */
|
||||
var _toastTimer=null;
|
||||
function showToast(msg){
|
||||
var el=document.getElementById('globalToast');
|
||||
if(!el){
|
||||
el=document.createElement('div');
|
||||
el.id='globalToast';
|
||||
el.className='toast';
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
clearTimeout(_toastTimer);
|
||||
el.innerHTML=msg;
|
||||
el.classList.remove('show');
|
||||
void el.offsetWidth;
|
||||
el.classList.add('show');
|
||||
_toastTimer=setTimeout(function(){el.classList.remove('show');},2000);
|
||||
}
|
||||
function _timeNow(){var d=new Date();return String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0');}
|
||||
|
||||
/* 开始烹制 */
|
||||
function startCook(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列(第10列)改为"烹制中"
|
||||
tds[10].innerHTML='<span class="tag tag-blue">烹制中</span>';
|
||||
// 烹制开始列(第8列)填入当前时间
|
||||
tds[8].textContent=_timeNow();
|
||||
// 按钮替换为"烹制完成"
|
||||
el.setAttribute('onclick','finishCook(this)');
|
||||
el.textContent='烹制完成';
|
||||
showToast('✅ '+taskId+' 已开始烹制');
|
||||
}
|
||||
|
||||
/* 烹制完成 */
|
||||
function finishCook(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列改为"已完成"
|
||||
tds[10].innerHTML='<span class="tag tag-green">已完成</span>';
|
||||
// 烹制结束列(第9列)填入当前时间
|
||||
tds[9].textContent=_timeNow();
|
||||
// 按钮替换为"通知取餐"
|
||||
el.setAttribute('onclick','notifyPickup(this)');
|
||||
el.textContent='通知取餐';
|
||||
showToast('✅ '+taskId+' 烹制已完成');
|
||||
}
|
||||
|
||||
/* 通知取餐 */
|
||||
function notifyPickup(el){
|
||||
var tr=el.closest('tr');
|
||||
var taskId=tr.querySelectorAll('td')[0].textContent;
|
||||
var dishName=tr.querySelectorAll('td')[3].textContent;
|
||||
showToast('✅ '+taskId+'（'+dishName+'）已通知取餐');
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
var label=ths[i].textContent;
|
||||
var value=tds[i].innerHTML;
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+label+'</div><div class="drawer-field__value">'+value+'</div></div>';
|
||||
}
|
||||
var key=tds[0].textContent;
|
||||
var bodyHtml='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">'+fields+'</div></div>';
|
||||
Drawer.open('烹饪详情 — '+key, bodyHtml);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -95,6 +95,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.autofill-card__item{display:flex;flex-direction:column;gap:2px;}
|
||||
.autofill-card__label{font-size:11px;color:#8c8c8c;}
|
||||
.autofill-card__value{font-size:13px;color:#262626;font-weight:500;}
|
||||
/* 右侧抽屉 */
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -139,12 +160,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><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>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>宫保鸡丁</td><td>12.5</td><td>38.2</td><td>11:18</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-001</td><td>82</td><td>张厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>番茄炒蛋</td><td>8.3</td><td>22.6</td><td>11:20</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-002</td><td>78</td><td>李厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00027号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>红烧肉</td><td>1.2</td><td>42.6</td><td>11:22</td><td>11:38</td><td><span class="tag tag-red">余量不足</span></td><td>COOK-003</td><td>86</td><td>王厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00022号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>小米粥</td><td>0</td><td>12.6</td><td>07:20</td><td>07:28</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-006</td><td>75</td><td>赵厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00023号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>燕麦粥</td><td>2.1</td><td>8.4</td><td>07:22</td><td>07:35</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-007</td><td>72</td><td>陈厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>C区快餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00028号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>蒜蓉菠菜</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-gray">待上餐</span></td><td>COOK-005</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>宫保鸡丁</td><td>12.5</td><td>38.2</td><td>11:18</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-001</td><td>82</td><td>张厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>番茄炒蛋</td><td>8.3</td><td>22.6</td><td>11:20</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-002</td><td>78</td><td>李厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00027号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>红烧肉</td><td>1.2</td><td>42.6</td><td>11:22</td><td>11:38</td><td><span class="tag tag-red">余量不足</span></td><td>COOK-003</td><td>86</td><td>王厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00022号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>小米粥</td><td>0</td><td>12.6</td><td>07:20</td><td>07:28</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-006</td><td>75</td><td>赵厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00023号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>燕麦粥</td><td>2.1</td><td>8.4</td><td>07:22</td><td>07:35</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-007</td><td>72</td><td>陈厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>C区快餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00028号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>蒜蓉菠菜</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-gray">待上餐</span></td><td>COOK-005</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -260,6 +281,42 @@ function onDishChange(sel){
|
||||
document.getElementById('af_recog').textContent=d.recog;
|
||||
document.getElementById('af_weight').textContent=d.weight+' kg';
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 —— 通用函数，根据 thead 动态生成字段 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var table=tr.closest('table');
|
||||
var ths=table.querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var dishName='';
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
var label=ths[i].textContent.trim();
|
||||
var value=tds[i]?tds[i].innerHTML.trim():'';
|
||||
if(label==='菜品名称')dishName=tds[i].textContent.trim();
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+label+'</div><div class="drawer-field__value">'+value+'</div></div>';
|
||||
}
|
||||
var body='<div class="drawer-section"><div class="drawer-section__title">上餐信息</div><div class="drawer-fields">'+fields+'</div></div>';
|
||||
Drawer.open('上餐详情 — '+dishName,body);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -108,6 +108,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.welfare-meta__label{font-size:12px;color:#8c8c8c;}
|
||||
.welfare-meta__value{font-size:14px;color:#262626;font-weight:500;}
|
||||
.welfare-summary{margin-top:16px;padding:12px 16px;background:#f6ffed;border-radius:6px;border:1px solid #b7eb8f;font-size:13px;color:#595959;}
|
||||
/* 右侧抽屉 */
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -171,14 +192,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>处置单号</th><th>菜品名称</th><th>餐线</th><th>餐次</th><th>计划制作(kg)</th><th>实际制作(kg)</th><th>销售/取餐(kg)</th><th>余量(kg)</th><th>余量率(%)</th><th>处置方式</th><th>备注</th><th>处置数量(kg)</th><th>交叉核对状态</th><th>处置时间</th><th>处置人员</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td>捐赠</td><td>捐赠予未央环卫</td><td>5.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td><a class="link" onclick="openWelfareModal('白米饭','SUR-002','3.0')">员工福利</a></td><td>加班餐</td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>废弃</td><td>叶片发黄</td><td>3.0</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>加工再利用</td><td>制作蔬菜饼</td><td>1.8</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td><a class="link" onclick="openWelfareModal('宫保鸡丁','SUR-001','2.0')">员工福利</a></td><td>加班餐</td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td>捐赠</td><td>捐赠予安保部</td><td>1.5</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-005</td><td>红烧肉</td><td>B区中餐线</td><td>午餐</td><td>50.0</td><td>48.5</td><td>45.3</td><td class="td-surplus">3.2</td><td>6.6%</td><td><a class="link" onclick="openWelfareModal('红烧肉','SUR-005','3.2')">员工福利</a></td><td>加班餐</td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-003</td><td>香辣大虾</td><td>C区快餐线</td><td>午餐</td><td>20.0</td><td>20.5</td><td>18.3</td><td class="td-surplus">2.2</td><td>10.7%</td><td>废弃</td><td>只剩辣椒和虾头</td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td>捐赠</td><td>捐赠予未央环卫</td><td>5.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td><a class="link" onclick="openWelfareModal('白米饭','SUR-002','3.0')">员工福利</a></td><td>加班餐</td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>废弃</td><td>叶片发黄</td><td>3.0</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>加工再利用</td><td>制作蔬菜饼</td><td>1.8</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td><a class="link" onclick="openWelfareModal('宫保鸡丁','SUR-001','2.0')">员工福利</a></td><td>加班餐</td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td>捐赠</td><td>捐赠予安保部</td><td>1.5</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-005</td><td>红烧肉</td><td>B区中餐线</td><td>午餐</td><td>50.0</td><td>48.5</td><td>45.3</td><td class="td-surplus">3.2</td><td>6.6%</td><td><a class="link" onclick="openWelfareModal('红烧肉','SUR-005','3.2')">员工福利</a></td><td>加班餐</td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-003</td><td>香辣大虾</td><td>C区快餐线</td><td>午餐</td><td>20.0</td><td>20.5</td><td>18.3</td><td class="td-surplus">2.2</td><td>10.7%</td><td>废弃</td><td>只剩辣椒和虾头</td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -344,6 +365,31 @@ function onSurplusMethodChange(){
|
||||
document.getElementById('surplusWelfareSection').style.display=(v==='员工福利')?'block':'none';
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var ths=document.querySelectorAll('.table-card table thead th');
|
||||
var firstVal=tds[0].textContent.trim();
|
||||
// 构建抽屉
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
var fieldsHtml='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
var label=ths[i].textContent.trim();
|
||||
var value=tds[i].innerHTML.trim();
|
||||
fieldsHtml+='<div class="drawer-field"><span class="drawer-field__label">'+label+'</span><span class="drawer-field__value">'+value+'</span></div>';
|
||||
}
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><span class="drawer__title">余量处置详情 — '+firstVal+'</span><button class="drawer__close" onclick="closeDrawer(this)">×</button></div><div class="drawer__body"><div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">'+fieldsHtml+'</div></div></div></div>';
|
||||
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;
|
||||
|
||||
@@ -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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -315,11 +336,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<thead><tr><th>时间</th><th>摄像头</th><th>位置</th><th>违规类型</th><th>违规人员</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-04-22 11:15:20</td><td>CAM-A-04</td><td>洗手区入口</td><td>未洗手直接操作</td><td>张伟</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td>陈刚</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td>陈刚</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-04-22 10:12:36</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>赵敏</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>李娜</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td>王磊</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td>张伟</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>李娜</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td>王磊</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td>张伟</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -347,11 +368,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>区域</th><th>天然气浓度(ppm)</th><th>天然气状态</th><th>消防设施</th><th>温度/湿度</th><th>污废处理状态</th><th>行为安全</th><th>最近检查</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>炒菜区</td><td>0.02</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>28.6℃ / 62%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>冷库区</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>4.1℃ / 85%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>粗加工间</td><td>0.01</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>22.4℃ / 68%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 10:30</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>备餐区</td><td>0.03</td><td><span class="tag tag-orange">告警</span></td><td><span class="tag tag-green">正常</span></td><td>24.8℃ / 71%</td><td><span class="tag tag-orange">预警</span></td><td><span class="tag tag-orange">告警</span></td><td>2026-04-22 10:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>洗碗间</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-red">异常</span></td><td>26.2℃ / 78%</td><td><span class="tag tag-red">异常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-21 18:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>炒菜区</td><td>0.02</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>28.6℃ / 62%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>冷库区</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>4.1℃ / 85%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>粗加工间</td><td>0.01</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>22.4℃ / 68%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 10:30</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>备餐区</td><td>0.03</td><td><span class="tag tag-orange">告警</span></td><td><span class="tag tag-green">正常</span></td><td>24.8℃ / 71%</td><td><span class="tag tag-orange">预警</span></td><td><span class="tag tag-orange">告警</span></td><td>2026-04-22 10:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>洗碗间</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-red">异常</span></td><td>26.2℃ / 78%</td><td><span class="tag tag-red">异常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-21 18:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -405,11 +426,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>EMP001</td><td>张伟</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00128</td><td><a class="link">📷 查看</a></td><td>2025-05-10</td><td>2026-05-09</td><td><span class="tag tag-orange">即将到期</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>EMP002</td><td>李娜</td><td>配餐员</td><td>B区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00176</td><td><a class="link">📷 查看</a></td><td>2025-09-12</td><td>2026-09-11</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>EMP003</td><td>王磊</td><td>洗碗工</td><td>C区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2024-00302</td><td><a class="link">📷 查看</a></td><td>2024-03-01</td><td>2025-02-28</td><td><span class="tag tag-red">已过期</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>EMP004</td><td>赵敏</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00211</td><td><a class="link">📷 查看</a></td><td>2025-11-18</td><td>2026-11-17</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>EMP005</td><td>陈刚</td><td>分拣员</td><td>B区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2025-00089</td><td><a class="link">📷 查看</a></td><td>2025-04-20</td><td>2026-04-19</td><td><span class="tag tag-orange">即将到期</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>EMP001</td><td>张伟</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00128</td><td><a class="link">📷 查看</a></td><td>2025-05-10</td><td>2026-05-09</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP002</td><td>李娜</td><td>配餐员</td><td>B区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00176</td><td><a class="link">📷 查看</a></td><td>2025-09-12</td><td>2026-09-11</td><td><span class="tag tag-green">有效</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP003</td><td>王磊</td><td>洗碗工</td><td>C区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2024-00302</td><td><a class="link">📷 查看</a></td><td>2024-03-01</td><td>2025-02-28</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP004</td><td>赵敏</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00211</td><td><a class="link">📷 查看</a></td><td>2025-11-18</td><td>2026-11-17</td><td><span class="tag tag-green">有效</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP005</td><td>陈刚</td><td>分拣员</td><td>B区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2025-00089</td><td><a class="link">📷 查看</a></td><td>2025-04-20</td><td>2026-04-19</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -488,13 +509,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>记录日期</th><th>用电量(kWh)</th><th>电费(元)</th><th>用水量(m³)</th><th>水费(元)</th><th>用气量(m³)</th><th>气费(元)</th><th>合计能耗成本(元)</th><th>分摊每份餐(元)</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-05-07</td><td>372</td><td>¥334.8</td><td>40</td><td>¥144.0</td><td>120</td><td>¥750.0</td><td>¥1,228.8</td><td>¥0.83</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-06</td><td>398</td><td>¥358.2</td><td>45</td><td>¥162.0</td><td>130</td><td>¥812.5</td><td>¥1,332.7</td><td>¥0.89</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-05</td><td>386</td><td>¥347.4</td><td>42</td><td>¥151.2</td><td>126</td><td>¥787.5</td><td>¥1,286.1</td><td>¥0.86</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-04</td><td>362</td><td>¥325.8</td><td>38</td><td>¥136.8</td><td>115</td><td>¥718.8</td><td>¥1,181.4</td><td>¥0.81</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-03</td><td>405</td><td>¥364.5</td><td>46</td><td>¥165.6</td><td>132</td><td>¥825.0</td><td>¥1,355.1</td><td>¥0.91</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-02</td><td>380</td><td>¥342.0</td><td>41</td><td>¥147.6</td><td>122</td><td>¥762.5</td><td>¥1,252.1</td><td>¥0.85</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-01</td><td>358</td><td>¥322.2</td><td>36</td><td>¥129.6</td><td>110</td><td>¥687.5</td><td>¥1,139.3</td><td>¥0.79</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-07</td><td>372</td><td>¥334.8</td><td>40</td><td>¥144.0</td><td>120</td><td>¥750.0</td><td>¥1,228.8</td><td>¥0.83</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-06</td><td>398</td><td>¥358.2</td><td>45</td><td>¥162.0</td><td>130</td><td>¥812.5</td><td>¥1,332.7</td><td>¥0.89</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-05</td><td>386</td><td>¥347.4</td><td>42</td><td>¥151.2</td><td>126</td><td>¥787.5</td><td>¥1,286.1</td><td>¥0.86</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-04</td><td>362</td><td>¥325.8</td><td>38</td><td>¥136.8</td><td>115</td><td>¥718.8</td><td>¥1,181.4</td><td>¥0.81</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-03</td><td>405</td><td>¥364.5</td><td>46</td><td>¥165.6</td><td>132</td><td>¥825.0</td><td>¥1,355.1</td><td>¥0.91</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-02</td><td>380</td><td>¥342.0</td><td>41</td><td>¥147.6</td><td>122</td><td>¥762.5</td><td>¥1,252.1</td><td>¥0.85</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-01</td><td>358</td><td>¥322.2</td><td>36</td><td>¥129.6</td><td>110</td><td>¥687.5</td><td>¥1,139.3</td><td>¥0.79</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -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='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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='<div class="drawer-section"><div class="drawer-section__title">详细信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<headers.length-1;i++){
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">'+headers[i].textContent.trim()+'</span><span class="drawer-field__value">'+cells[i].innerHTML.trim()+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('详情 — '+cells[0].textContent.trim(),html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</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(){
|
||||
+'<td>'+s.syncTime+'</td>'
|
||||
+'<td>'+s.operator+'</td>'
|
||||
+'<td><span class="num-link" onclick="openDialog('+si+')">'+s.recordIdxs.length+'</span></td>'
|
||||
+'<td class="td-actions"><span class="link" onclick="openDialog('+si+')">详情</span></td>'
|
||||
+'<td class="td-actions"><span class="link" onclick="showDetail('+si+')">详情</span></td>'
|
||||
+'</tr>';
|
||||
}).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 = '<div class="drawer-section">'
|
||||
+'<div class="drawer-section__title">同步信息</div>'
|
||||
+'<div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">餐品</div><div class="drawer-field__value">'+s.dish+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">同步时间</div><div class="drawer-field__value">'+s.syncTime+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">操作人</div><div class="drawer-field__value">'+s.operator+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">已选检验记录</div><div class="drawer-field__value">'+s.recordIdxs.length+' 条</div></div>'
|
||||
+'</div></div>';
|
||||
|
||||
/* 关联检验记录列表 */
|
||||
html += '<div class="drawer-section">'
|
||||
+'<div class="drawer-section__title">关联检验记录</div>';
|
||||
recs.forEach(function(r){
|
||||
html += '<div class="drawer-fields" style="margin-bottom:12px;padding:10px;background:#FAFAFA;border-radius:var(--radius-sm);">'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">检验单号</div><div class="drawer-field__value">'+r.no+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">检验时间</div><div class="drawer-field__value">'+r.time+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">检验人员</div><div class="drawer-field__value">'+r.inspector+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">批次</div><div class="drawer-field__value">'+r.batch+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">食堂</div><div class="drawer-field__value">'+r.category+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">餐线</div><div class="drawer-field__value">'+r.line+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">营养检验</div><div class="drawer-field__value">'+nutriTag(r.nutri)+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">味道评级</div><div class="drawer-field__value">'+gradeTag(r.tasteData.grade)+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">口感评级</div><div class="drawer-field__value">'+gradeTag(r.textureData.grade)+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">色泽评级</div><div class="drawer-field__value">'+gradeTag(r.colorData.grade)+'</div></div>'
|
||||
+'</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
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 = '<div class="drawer">'
|
||||
+'<div class="drawer__header">'
|
||||
+'<span class="drawer__title">'+title+'</span>'
|
||||
+'<button class="drawer__close" onclick="closeDrawer(this.closest(\'.drawer-overlay\'))">×</button>'
|
||||
+'</div>'
|
||||
+'<div class="drawer__body">'+bodyHtml+'</div>'
|
||||
+'</div>';
|
||||
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();
|
||||
</script>
|
||||
|
||||
@@ -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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -188,14 +209,14 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<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>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>40</td><td>20</td><td>¥12</td><td>¥240</td><td>B仓-肉类区-02</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-005</td><td>NC-INT-QZYU-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>20</td><td>10</td><td>¥15</td><td>¥150</td><td>C仓-水产区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-006</td><td>NC-INT-SRBC-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>30</td><td>15</td><td>¥8</td><td>¥120</td><td>A仓-蔬菜区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>40</td><td>20</td><td>¥12</td><td>¥240</td><td>B仓-肉类区-02</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-005</td><td>NC-INT-QZYU-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>20</td><td>10</td><td>¥15</td><td>¥150</td><td>C仓-水产区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-006</td><td>NC-INT-SRBC-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>30</td><td>15</td><td>¥8</td><td>¥120</td><td>A仓-蔬菜区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -362,6 +383,44 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认收货二次确认弹窗 -->
|
||||
<div class="modal-mask" id="receiveModal">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认收货</div>
|
||||
<button class="modal__close" onclick="closeReceiveConfirm()">×</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">✅</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认对订单 <span id="receiveOrderNo"></span> 进行收货？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="receiveFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「已完成」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeReceiveConfirm()">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReceive()">确认收货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备货完成二次确认弹窗 -->
|
||||
<div class="modal-mask" id="readyModal">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认备货完成</div>
|
||||
<button class="modal__close" onclick="closeReadyConfirm()">×</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认订单 <span id="readyOrderNo"></span> 已备货完成？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="readyFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「待配送」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeReadyConfirm()">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReady()">确认完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 新建订单弹窗 */
|
||||
function openCreateOrder(){
|
||||
@@ -442,6 +501,68 @@ function confirmShip(){
|
||||
alert('订单 '+document.getElementById('shipOrderNo').value+' 已发货！\n物流公司：'+company+'\n物流单号：'+trackNo);
|
||||
closeShipModal();
|
||||
}
|
||||
|
||||
/* 确认收货 */
|
||||
function openReceiveConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('receiveOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('receiveFoodName').textContent=tds[4].textContent;
|
||||
document.getElementById('receiveModal').classList.add('show');
|
||||
}
|
||||
function closeReceiveConfirm(){document.getElementById('receiveModal').classList.remove('show');}
|
||||
document.getElementById('receiveModal').addEventListener('click',function(e){if(e.target===this)closeReceiveConfirm();});
|
||||
function doReceive(){
|
||||
closeReceiveConfirm();
|
||||
alert('收货确认成功，订单状态已变为「已完成」');
|
||||
}
|
||||
|
||||
/* 备货完成 */
|
||||
function openReadyConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('readyOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('readyFoodName').textContent=tds[4].textContent;
|
||||
document.getElementById('readyModal').classList.add('show');
|
||||
}
|
||||
function closeReadyConfirm(){document.getElementById('readyModal').classList.remove('show');}
|
||||
document.getElementById('readyModal').addEventListener('click',function(e){if(e.target===this)closeReadyConfirm();});
|
||||
function doReady(){
|
||||
closeReadyConfirm();
|
||||
alert('备货已确认完成，订单状态已变为「待配送」');
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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 orderNo=tds[0].textContent;
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">订单信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('外售详情 — '+orderNo, html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -165,14 +186,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>申领单号</th><th>溯源码</th><th>申领食堂</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>申领份数</th><th>申领数量(kg)</th><th>订单状态</th><th>关联仓库区域</th><th>申领时间</th><th>预定配送时间</th><th>配送人</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-004</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>2026-04-22 10:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-005</td><td>NC-INT-QZYU-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-02</td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-006</td><td>NC-INT-TDSI-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-03</td><td>2026-04-22 09:15</td><td>2026-04-22 11:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-007</td><td>NC-INT-SRBC-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>25</td><td>12.5</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 09:30</td><td>2026-04-22 12:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-004</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>2026-04-22 10:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openDeliverModal(this)">立即配送</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-005</td><td>NC-INT-QZYU-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-02</td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openDeliverModal(this)">立即配送</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-006</td><td>NC-INT-TDSI-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-03</td><td>2026-04-22 09:15</td><td>2026-04-22 11:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-007</td><td>NC-INT-SRBC-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>25</td><td>12.5</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 09:30</td><td>2026-04-22 12:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -250,6 +271,74 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认收货二次确认弹窗 -->
|
||||
<div class="modal-mask" id="modal-receive">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认收货</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-receive')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">✅</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认对申领单 <span id="receiveOrderNo"></span> 进行收货？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="receiveFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「已完成」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-receive')">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReceive()">确认收货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 立即配送弹窗 -->
|
||||
<div class="modal-mask" id="modal-deliver">
|
||||
<div class="modal" style="width:480px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">立即配送</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-deliver')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="background:var(--primary-light);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:20px;font-size:var(--font-sm);color:var(--primary);display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:16px;">📋</span>
|
||||
<span>申领单号：<strong id="deliverOrderNo"></strong> ｜ 净菜/餐品：<strong id="deliverFoodName"></strong></span>
|
||||
</div>
|
||||
<div class="form-grid" style="grid-template-columns:1fr;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">配送人<span class="required">*</span></div>
|
||||
<input id="deliverPerson" placeholder="请输入配送人姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">备注</div>
|
||||
<textarea id="deliverRemark" style="height:80px;padding:8px 12px;resize:vertical;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);outline:none;" placeholder="请输入配送备注（如特殊要求、温度要求等）"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-deliver')">取消</button>
|
||||
<button class="btn btn-primary" onclick="doDeliver()">确认配送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备货完成二次确认弹窗 -->
|
||||
<div class="modal-mask" id="modal-ready">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认备货完成</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-ready')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认申领单 <span id="readyOrderNo"></span> 已备货完成？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="readyFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「待配送」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-ready')">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReady()">确认完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 弹窗打开/关闭
|
||||
function openModal(id){document.getElementById(id).classList.add('show');}
|
||||
@@ -264,6 +353,82 @@ function toggleClaimName(){
|
||||
document.getElementById('claimNameNC').style.display=(v==='cp'?'none':'flex');
|
||||
document.getElementById('claimNameCP').style.display=(v==='cp'?'flex':'none');
|
||||
}
|
||||
|
||||
/* 确认收货 */
|
||||
function openReceiveConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
/* 列：0申领单号 4净菜/餐品 */
|
||||
document.getElementById('receiveOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('receiveFoodName').textContent=tds[4].textContent;
|
||||
openModal('modal-receive');
|
||||
}
|
||||
function doReceive(){
|
||||
closeModal('modal-receive');
|
||||
alert('收货确认成功，订单状态已变为「已完成」');
|
||||
}
|
||||
|
||||
/* 立即配送 */
|
||||
function openDeliverModal(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('deliverOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('deliverFoodName').textContent=tds[4].textContent;
|
||||
document.getElementById('deliverPerson').value='';
|
||||
document.getElementById('deliverRemark').value='';
|
||||
openModal('modal-deliver');
|
||||
}
|
||||
function doDeliver(){
|
||||
var person=document.getElementById('deliverPerson').value.trim();
|
||||
if(!person){alert('请输入配送人姓名');return;}
|
||||
closeModal('modal-deliver');
|
||||
alert('配送任务已创建，配送人：'+person+'，订单状态已变为「配送中」');
|
||||
}
|
||||
|
||||
/* 备货完成 */
|
||||
function openReadyConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('readyOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('readyFoodName').textContent=tds[4].textContent;
|
||||
openModal('modal-ready');
|
||||
}
|
||||
function doReady(){
|
||||
closeModal('modal-ready');
|
||||
alert('备货已确认完成，订单状态已变为「待配送」');
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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='<div class="drawer-section"><div class="drawer-section__title">详细信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var key=tds[0].textContent;
|
||||
Drawer.open('净菜内供详情 — '+key, html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -177,22 +198,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HYG-20260415-001</td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td>菠菜</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.02mg/kg</td><td><0.1mg/kg</td><td>2026-04-15 10:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-001</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260415-001</td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td>菠菜</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.02mg/kg</td><td><0.1mg/kg</td><td>2026-04-15 10:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-001</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260415-002</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>瘦肉精</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-15 10:30</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260415-002</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260415-002</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>瘦肉精</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-15 10:30</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260415-002</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260415-003</td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td>草鱼</td><td>甲醛</td><td><span class="tag tag-red">不合格</span></td><td>0.15mg/kg</td><td><0.05mg/kg</td><td>2026-04-15 11:00</td><td>第三方检测机构</td><td>外部检测员</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-003</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span><span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span> <span class="link" style="color:var(--danger)">隔离处理</span></td>
|
||||
<td>HYG-20260415-003</td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td>草鱼</td><td>甲醛</td><td><span class="tag tag-red">不合格</span></td><td>0.15mg/kg</td><td><0.05mg/kg</td><td>2026-04-15 11:00</td><td>第三方检测机构</td><td>外部检测员</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-003</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span><span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span> <span class="link" style="color:var(--danger)" onclick="openIsolateConfirm('草鱼')">隔离处理</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-004</td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td>胡萝卜</td><td>重金属（铅）</td><td><span class="tag tag-green">合格</span></td><td>0.01mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-orange">手动录入</span></td><td>RPT-20260416-004</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260416-004</td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td>胡萝卜</td><td>重金属（铅）</td><td><span class="tag tag-green">合格</span></td><td>0.01mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-orange">手动录入</span></td><td>RPT-20260416-004</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-005</td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td>菠菜（外采批）</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.03mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:30</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260416-005</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260416-005</td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td>菠菜（外采批）</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.03mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:30</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260416-005</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-006</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>微生物（大肠杆菌）</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-16 10:00</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260416-006</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260416-006</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>微生物（大肠杆菌）</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-16 10:00</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260416-006</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -262,6 +283,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 隔离处理确认弹窗 -->
|
||||
<div class="modal-overlay" id="isolateModal" style="display:none;">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">隔离处理确认</span>
|
||||
<span class="modal-close" onclick="closeIsolateConfirm()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:#FFF7E6;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L1 21h22L12 2z" fill="#FAAD14"/><path d="M12 14V9" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="17" r="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
<div style="font-size:15px;font-weight:600;color:#262626;margin-bottom:8px;">是否要对该菜品（<span id="isolateFoodName"></span>）进行隔离处理？</div>
|
||||
<div style="font-size:13px;color:#8c8c8c;line-height:1.6;">隔离后对应采购单状态将变为<span style="color:var(--danger);font-weight:500;">隔离处理中</span></div>
|
||||
</div>
|
||||
<div class="modal-footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeIsolateConfirm()">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--danger);" onclick="confirmIsolate()">确认隔离</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openVideoModal(){document.getElementById('videoModal').style.display='flex';}
|
||||
function closeVideoModal(){document.getElementById('videoModal').style.display='none';}
|
||||
@@ -269,6 +311,50 @@ 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();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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 openIsolateConfirm(foodName){
|
||||
document.getElementById('isolateFoodName').textContent=foodName;
|
||||
document.getElementById('isolateModal').style.display='flex';
|
||||
}
|
||||
function closeIsolateConfirm(){document.getElementById('isolateModal').style.display='none';}
|
||||
document.getElementById('isolateModal').addEventListener('click',function(e){if(e.target===this)closeIsolateConfirm();});
|
||||
function confirmIsolate(){
|
||||
closeIsolateConfirm();
|
||||
alert('已提交隔离处理，对应采购单状态已变为"隔离处理中"');
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
var title='检测详情 — '+tds[0].textContent;
|
||||
var body='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">'+fields+'</div></div>';
|
||||
Drawer.open(title,body);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -181,25 +202,25 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
</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="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</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()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</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()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</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="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</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()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</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()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</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="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -282,11 +303,11 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="modal-body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<p style="font-size:15px;color:#333;margin-bottom:8px;">确认将该加工批次生成净菜入库单？</p>
|
||||
<p style="font-size:13px;color:#999;">生成后将自动同步至净菜入库模块</p>
|
||||
<p style="font-size:13px;color:#999;">确认后将跳转至净菜入库页面并自动填充信息</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeConfirmStock()">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeConfirmStock();alert('入库单已生成');">确认生成</button>
|
||||
<button class="btn btn-primary" onclick="doGenStock()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var title='净菜加工详情 — '+tds[0].textContent;
|
||||
Drawer.open(title,html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -173,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>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</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 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="openModal()">详情</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="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>
|
||||
</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 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="openModal()">详情</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="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>
|
||||
</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 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="openModal()">详情</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="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>
|
||||
</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 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="openModal()">详情</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="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>
|
||||
</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 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="openModal()">详情</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="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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -214,17 +235,19 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<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" id="fi-batch" style="display:none;"><label>关联加工批次</label><input id="f-batch" type="text" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>溯源码<span class="required">*</span></label><input id="f-trace" type="text" placeholder="请输入溯源码"></div>
|
||||
<div class="form-item"><label>食材名称</label><input id="f-food" type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>净菜类型</label><input id="f-cleanType" type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>入库规格<span class="required">*</span></label><select><option>请选择</option><option>袋装/500g</option><option>袋装/400g</option><option>盒装/300g</option><option>散装/整棵</option><option>其他</option></select></div>
|
||||
<div class="form-item"><label>入库数量<span class="required">*</span></label><input type="number" placeholder="请输入入库数量"></div>
|
||||
<div class="form-item"><label>入库重量(kg)<span class="required">*</span></label><input type="number" step="0.1" placeholder="请输入入库重量"></div>
|
||||
<div class="form-item"><label>入库重量(kg)<span class="required">*</span></label><input id="f-weight" type="number" step="0.1" placeholder="请输入入库重量"></div>
|
||||
<div class="form-item"><label>操作时间<span class="required">*</span></label><input type="datetime-local"></div>
|
||||
<div class="form-item"><label>保质期至</label><input type="datetime-local"></div>
|
||||
<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">
|
||||
@@ -258,6 +281,38 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var title='入库详情 — '+tds[0].textContent;
|
||||
Drawer.open(title,html);
|
||||
}
|
||||
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
function openVideoModal(){alert('播放入库操作视频（原型演示）');}
|
||||
@@ -265,6 +320,28 @@ function openOutModal(id){document.getElementById('outModalOverlay').style.displ
|
||||
function closeOutModal(){document.getElementById('outModalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
document.getElementById('outModalOverlay').addEventListener('click',function(e){if(e.target===this)closeOutModal();});
|
||||
|
||||
/* 从净菜加工页跳转过来时，自动打开新增弹窗并填充数据 */
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
if(params.get('from')!=='clean')return;
|
||||
/* 填充字段 */
|
||||
var batch=params.get('batch')||'';
|
||||
var trace=params.get('trace')||'';
|
||||
var food=params.get('food')||'';
|
||||
var cleanType=params.get('cleanType')||'';
|
||||
var weight=params.get('weight')||'';
|
||||
if(batch){
|
||||
document.getElementById('fi-batch').style.display='';
|
||||
document.getElementById('f-batch').value=batch;
|
||||
}
|
||||
if(trace) document.getElementById('f-trace').value=trace;
|
||||
if(food) document.getElementById('f-food').value=food;
|
||||
if(cleanType) document.getElementById('f-cleanType').value=cleanType;
|
||||
if(weight) document.getElementById('f-weight').value=weight;
|
||||
/* 自动打开弹窗 */
|
||||
openModal();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -180,19 +201,19 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>IN-20260415-001</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td><span class="tag tag-blue">自产</span></td><td>菠菜</td><td>A区蔬菜基地</td><td>25kg/件</td><td>12件</td><td>286</td><td>2026-04-15 10:30</td><td>A仓-蔬菜区-01</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-001</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td><span class="tag tag-blue">自产</span></td><td>菠菜</td><td>A区蔬菜基地</td><td>25kg/件</td><td>12件</td><td>286</td><td>2026-04-15 10:30</td><td>A仓-蔬菜区-01</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-002</td><td><span class="tag tag-green">设备自动</span></td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td><span class="tag tag-gray">外采</span></td><td>菠菜</td><td>绿源蔬菜配送</td><td>10kg/筐</td><td>5筐</td><td>50</td><td>2026-04-15 08:30</td><td>A仓-蔬菜区-02</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-002</td><td><span class="tag tag-green">设备自动</span></td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td><span class="tag tag-gray">外采</span></td><td>菠菜</td><td>绿源蔬菜配送</td><td>10kg/筐</td><td>5筐</td><td>50</td><td>2026-04-15 08:30</td><td>A仓-蔬菜区-02</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-003</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td><span class="tag tag-gray">外采</span></td><td>猪里脊</td><td>鲜肉直供公司</td><td>20kg/箱</td><td>4箱</td><td>80</td><td>2026-04-15 09:15</td><td>B仓-肉类区-01</td><td>王三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-003</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td><span class="tag tag-gray">外采</span></td><td>猪里脊</td><td>鲜肉直供公司</td><td>20kg/箱</td><td>4箱</td><td>80</td><td>2026-04-15 09:15</td><td>B仓-肉类区-01</td><td>王三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-004</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td><span class="tag tag-gray">外采</span></td><td>草鱼</td><td>海鲜水产配送</td><td>散装(kg)</td><td>60kg</td><td>60</td><td>2026-04-15 09:45</td><td>C仓-水产区-01</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-004</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td><span class="tag tag-gray">外采</span></td><td>草鱼</td><td>海鲜水产配送</td><td>散装(kg)</td><td>60kg</td><td>60</td><td>2026-04-15 09:45</td><td>C仓-水产区-01</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260416-005</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td><span class="tag tag-blue">自产</span></td><td>胡萝卜</td><td>B区根茎基地</td><td>25kg/件</td><td>17件</td><td>420</td><td>2026-04-16 11:00</td><td>A仓-蔬菜区-03</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260416-005</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td><span class="tag tag-blue">自产</span></td><td>胡萝卜</td><td>B区根茎基地</td><td>25kg/件</td><td>17件</td><td>420</td><td>2026-04-16 11:00</td><td>A仓-蔬菜区-03</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -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='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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='<div class="drawer-section"><div class="drawer-section__title">入库信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var title='入库详情 — '+tds[0].textContent;
|
||||
Drawer.open(title,html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -244,14 +244,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><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 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 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 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 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 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-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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -421,6 +421,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-item__label">终端设备</div>
|
||||
<select><option value="">请选择</option><option>PKG-T01</option><option>PKG-T02</option><option>PKG-T03</option><option>PKG-T04</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">操作类型<span class="required">*</span></div>
|
||||
<select><option value="">请选择</option><option>设备自动</option><option>人工录入</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
|
||||
@@ -101,6 +101,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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -199,11 +220,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>食材名称</th><th>物品类型</th><th>入库单号</th><th>所在区域</th><th>入库量(kg)</th><th>已出量(kg)</th><th>在库量(kg)</th><th>入库时间</th><th>保质期至</th><th>临期预警</th><th>库存状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-001</td><td>A仓-蔬菜区-01</td><td>286</td><td>61</td><td>225</td><td>2026-04-15 10:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-002</td><td>A仓-蔬菜区-02</td><td>50</td><td>20</td><td>30</td><td>2026-04-15 08:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>猪里脊</td><td><span class="tag tag-blue">净菜</span></td><td>IN-20260415-003</td><td>B仓-肉类区-01</td><td>80</td><td>40</td><td>40</td><td>2026-04-15 09:15</td><td>2026-04-19</td><td><span class="tag tag-orange">临期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>草鱼</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-004</td><td>C仓-水产区-01</td><td>60</td><td>0</td><td>60</td><td>2026-04-15 09:45</td><td>2026-04-15</td><td><span class="tag tag-red">已过期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>胡萝卜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260416-005</td><td>A仓-蔬菜区-03</td><td>420</td><td>0</td><td>420</td><td>2026-04-16 11:00</td><td>2026-04-23</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-001</td><td>A仓-蔬菜区-01</td><td>286</td><td>61</td><td>225</td><td>2026-04-15 10:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-002</td><td>A仓-蔬菜区-02</td><td>50</td><td>20</td><td>30</td><td>2026-04-15 08:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>猪里脊</td><td><span class="tag tag-blue">净菜</span></td><td>IN-20260415-003</td><td>B仓-肉类区-01</td><td>80</td><td>40</td><td>40</td><td>2026-04-15 09:15</td><td>2026-04-19</td><td><span class="tag tag-orange">临期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>草鱼</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-004</td><td>C仓-水产区-01</td><td>60</td><td>0</td><td>60</td><td>2026-04-15 09:45</td><td>2026-04-15</td><td><span class="tag tag-red">已过期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>胡萝卜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260416-005</td><td>A仓-蔬菜区-03</td><td>420</td><td>0</td><td>420</td><td>2026-04-16 11:00</td><td>2026-04-23</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -244,13 +265,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>WH-A</td><td>A仓-蔬菜常温库</td><td>加工中心一楼北侧</td><td><span class="tag tag-gray">常温</span></td><td>500</td><td>张仓管</td><td>138-0000-1001</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="openWhModal()">详情</span></td>
|
||||
<td>WH-A</td><td>A仓-蔬菜常温库</td><td>加工中心一楼北侧</td><td><span class="tag tag-gray">常温</span></td><td>500</td><td>张仓管</td><td>138-0000-1001</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="showWhDetail(this)">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WH-B</td><td>B仓-肉类冷藏库</td><td>加工中心一楼南侧</td><td><span class="tag tag-blue">冷藏(0~4℃)</span></td><td>200</td><td>王仓管</td><td>138-0000-1002</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="openWhModal()">详情</span></td>
|
||||
<td>WH-B</td><td>B仓-肉类冷藏库</td><td>加工中心一楼南侧</td><td><span class="tag tag-blue">冷藏(0~4℃)</span></td><td>200</td><td>王仓管</td><td>138-0000-1002</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="showWhDetail(this)">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WH-C</td><td>C仓-水产冷冻库</td><td>加工中心地下一层</td><td><span class="tag tag-blue">冷冻(-18℃)</span></td><td>150</td><td>李仓管</td><td>138-0000-1003</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="openWhModal()">详情</span></td>
|
||||
<td>WH-C</td><td>C仓-水产冷冻库</td><td>加工中心地下一层</td><td><span class="tag tag-blue">冷冻(-18℃)</span></td><td>150</td><td>李仓管</td><td>138-0000-1003</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="showWhDetail(this)">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -289,15 +310,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>区域编号</th><th>区域名称</th><th>所属仓库</th><th>适存品类</th><th>容量(㎥)</th><th>状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>WH-A-01</td><td>A仓-蔬菜区-01</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-02</td><td>A仓-蔬菜区-02</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-03</td><td>A仓-蔬菜区-03</td><td>A仓-蔬菜常温库</td><td>根茎类</td><td>100</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-04</td><td>A仓-蔬菜区-04</td><td>A仓-蔬菜常温库</td><td>瓜果类</td><td>80</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-B-01</td><td>B仓-肉类区-01</td><td>B仓-肉类冷藏库</td><td>猪肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-B-02</td><td>B仓-肉类区-02</td><td>B仓-肉类冷藏库</td><td>禽肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-B-03</td><td>B仓-肉类区-03</td><td>B仓-肉类冷藏库</td><td>蛋品类</td><td>40</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-C-01</td><td>C仓-水产区-01</td><td>C仓-水产冷冻库</td><td>淡水鱼类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-C-02</td><td>C仓-水产区-02</td><td>C仓-水产冷冻库</td><td>海水产类</td><td>70</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-01</td><td>A仓-蔬菜区-01</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-A-02</td><td>A仓-蔬菜区-02</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-A-03</td><td>A仓-蔬菜区-03</td><td>A仓-蔬菜常温库</td><td>根茎类</td><td>100</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-A-04</td><td>A仓-蔬菜区-04</td><td>A仓-蔬菜常温库</td><td>瓜果类</td><td>80</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-B-01</td><td>B仓-肉类区-01</td><td>B仓-肉类冷藏库</td><td>猪肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-B-02</td><td>B仓-肉类区-02</td><td>B仓-肉类冷藏库</td><td>禽肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-B-03</td><td>B仓-肉类区-03</td><td>B仓-肉类冷藏库</td><td>蛋品类</td><td>40</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-C-01</td><td>C仓-水产区-01</td><td>C仓-水产冷冻库</td><td>淡水鱼类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-C-02</td><td>C仓-水产区-02</td><td>C仓-水产冷冻库</td><td>海水产类</td><td>70</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -312,22 +333,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
// 仓库档案弹窗
|
||||
function openWhModal(){document.getElementById('whModal').style.display='flex';}
|
||||
function closeWhModal(){document.getElementById('whModal').style.display='none';}
|
||||
document.getElementById('whModal').addEventListener('click',function(e){if(e.target===this)closeWhModal();});
|
||||
// 区域管理弹窗
|
||||
function openZoneModal(){document.getElementById('zoneModal').style.display='flex';}
|
||||
function closeZoneModal(){document.getElementById('zoneModal').style.display='none';}
|
||||
document.getElementById('zoneModal').addEventListener('click',function(e){if(e.target===this)closeZoneModal();});
|
||||
</script>
|
||||
|
||||
<!-- 仓库档案弹窗 -->
|
||||
<div class="modal-overlay" id="whModal" style="display:none;">
|
||||
<div class="modal">
|
||||
@@ -380,5 +385,97 @@ document.getElementById('zoneModal').addEventListener('click',function(e){if(e.t
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
// 仓库档案弹窗
|
||||
function openWhModal(){document.getElementById('whModal').style.display='flex';}
|
||||
function closeWhModal(){document.getElementById('whModal').style.display='none';}
|
||||
document.getElementById('whModal').addEventListener('click',function(e){if(e.target===this)closeWhModal();});
|
||||
// 区域管理弹窗
|
||||
function openZoneModal(){document.getElementById('zoneModal').style.display='flex';}
|
||||
function closeZoneModal(){document.getElementById('zoneModal').style.display='none';}
|
||||
document.getElementById('zoneModal').addEventListener('click',function(e){if(e.target===this)closeZoneModal();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
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 showStockDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var g=function(i){return cells[i]?cells[i].textContent.trim():'—';};
|
||||
var h=function(i){return cells[i]?cells[i].innerHTML.trim():'—';};
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">库存信息</div><div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">食材名称</span><span class="drawer-field__value">'+g(0)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">物品类型</span><span class="drawer-field__value">'+h(1)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">入库单号</span><span class="drawer-field__value">'+g(2)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">所在区域</span><span class="drawer-field__value">'+g(3)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">入库量(kg)</span><span class="drawer-field__value">'+g(4)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">已出量(kg)</span><span class="drawer-field__value">'+g(5)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">在库量(kg)</span><span class="drawer-field__value">'+g(6)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">入库时间</span><span class="drawer-field__value">'+g(7)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">保质期至</span><span class="drawer-field__value">'+g(8)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">临期预警</span><span class="drawer-field__value">'+h(9)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">库存状态</span><span class="drawer-field__value">'+h(10)+'</span></div>'
|
||||
+'</div></div>';
|
||||
Drawer.open('库存详情 — '+g(0)+' ('+g(2)+')',html);
|
||||
}
|
||||
|
||||
/* 仓库档案详情 */
|
||||
function showWhDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var g=function(i){return cells[i]?cells[i].textContent.trim():'—';};
|
||||
var h=function(i){return cells[i]?cells[i].innerHTML.trim():'—';};
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">仓库信息</div><div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">仓库编号</span><span class="drawer-field__value">'+g(0)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">仓库名称</span><span class="drawer-field__value">'+g(1)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">位置</span><span class="drawer-field__value">'+g(2)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">温区类型</span><span class="drawer-field__value">'+h(3)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">总容量(㎥)</span><span class="drawer-field__value">'+g(4)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">负责人</span><span class="drawer-field__value">'+g(5)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">负责人电话</span><span class="drawer-field__value">'+g(6)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">状态</span><span class="drawer-field__value">'+h(7)+'</span></div>'
|
||||
+'</div></div>';
|
||||
Drawer.open('仓库详情 — '+g(1),html);
|
||||
}
|
||||
|
||||
/* 区域管理详情 */
|
||||
function showZoneDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var g=function(i){return cells[i]?cells[i].textContent.trim():'—';};
|
||||
var h=function(i){return cells[i]?cells[i].innerHTML.trim():'—';};
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">区域信息</div><div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">区域编号</span><span class="drawer-field__value">'+g(0)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">区域名称</span><span class="drawer-field__value">'+g(1)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">所属仓库</span><span class="drawer-field__value">'+g(2)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">适存品类</span><span class="drawer-field__value">'+g(3)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">容量(㎥)</span><span class="drawer-field__value">'+g(4)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">状态</span><span class="drawer-field__value">'+h(5)+'</span></div>'
|
||||
+'</div></div>';
|
||||
Drawer.open('区域详情 — '+g(1),html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user