feat:净菜进柜关联到净菜订单号
This commit is contained in:
冯普
@@ -330,14 +330,14 @@ tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<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>
|
||||
<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" 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 class="row-active" data-slot="0" data-type="净菜" data-order="JC-2026-0422-001" data-trace="NC-CAB-BOCA-0422-01"><td>A1-01</td><td><a class="link" href="prod-clean-order.html">JC-2026-0422-001</a></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" data-type="净菜" data-order="JC-2026-0422-002" data-trace="NC-CAB-HLUB-0422-01"><td>A1-02</td><td><a class="link" href="prod-clean-order.html">JC-2026-0422-002</a></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" data-type="净菜" data-order="JC-2026-0422-003" data-trace="NC-CAB-XGUO-0422-01"><td>A1-03</td><td><a class="link" href="prod-clean-order.html">JC-2026-0422-003</a></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" data-type="净菜" data-order="JC-2026-0422-004" data-trace="NC-CAB-XLHU-0422-01"><td>A1-04</td><td><a class="link" href="prod-clean-order.html">JC-2026-0422-004</a></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" data-type="餐品包" data-order="JC-2026-0422-005" data-trace="PKG-DH-001"><td>A1-05</td><td><a class="link" href="prod-clean-order.html">JC-2026-0422-005</a></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" data-type="净菜" data-order="JC-2026-0422-006" data-trace="NC-CAB-BCAI-0422-01"><td>A1-06</td><td><a class="link" href="prod-clean-order.html">JC-2026-0422-006</a></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>
|
||||
@@ -362,17 +362,31 @@ tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
<div class="form-item__label">目标格口<span class="required">*</span></div>
|
||||
<select><option>请选择空闲格口</option><option>A1-07</option><option>A1-08</option><option>A1-09</option><option>A1-10</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">溯源码</div>
|
||||
<input type="text" placeholder="输入溯源码可带出净菜信息">
|
||||
</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 class="form-item">
|
||||
<div class="form-item__label">存放净菜名称<span class="required">*</span></div>
|
||||
<select><option value="">请选择</option><option>土豆丝</option><option>净香菇</option></select>
|
||||
<div class="form-item full">
|
||||
<div class="form-item__label">选择净菜订单<span class="required">*</span></div>
|
||||
<select id="orderSelect" onchange="onOrderSelect(this)">
|
||||
<option value="">请选择净菜订单</option>
|
||||
<option value="JC-2026-0422-007">JC-2026-0422-007 — 土豆丝 20份</option>
|
||||
<option value="JC-2026-0422-008">JC-2026-0422-008 — 净黄瓜 15份</option>
|
||||
<option value="JC-2026-0422-009">JC-2026-0422-009 — 宫保鸡丁(餐品包) 30份</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 选择订单后回显区域 -->
|
||||
<div class="form-item full" id="orderEchoArea" style="display:none;">
|
||||
<div style="background:#F8FBFF;border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;">
|
||||
<div style="font-size:var(--font-sm);font-weight:600;margin-bottom:12px;color:var(--primary);">净菜订单</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 20px;">
|
||||
<div class="drawer-field"><span class="drawer-field__label">净菜/餐品</span><span class="drawer-field__value" id="echo-name">—</span></div>
|
||||
<div class="drawer-field"><span class="drawer-field__label">包装规格</span><span class="drawer-field__value" id="echo-spec">—</span></div>
|
||||
<div class="drawer-field"><span class="drawer-field__label">需求份数</span><span class="drawer-field__value" id="echo-qty">—</span></div>
|
||||
<div class="drawer-field"><span class="drawer-field__label">需求计量(kg)</span><span class="drawer-field__value" id="echo-weight">—</span></div>
|
||||
<div class="drawer-field"><span class="drawer-field__label">申领时间</span><span class="drawer-field__value" id="echo-time">—</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">初始重量(kg)<span class="required">*</span></div>
|
||||
@@ -406,11 +420,9 @@ document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener(
|
||||
|
||||
/* 格口点击 → 左侧高亮 + 右侧表格行高亮联动 */
|
||||
function selectSlot(idx){
|
||||
/* 左侧格口高亮 */
|
||||
document.querySelectorAll('.cabinet-slot').forEach(function(s){s.classList.remove('active');});
|
||||
var slot=document.querySelector('.cabinet-slot[data-slot="'+idx+'"]');
|
||||
if(slot) slot.classList.add('active');
|
||||
/* 右侧表格行高亮 */
|
||||
document.querySelectorAll('#detailTable tr').forEach(function(r){r.classList.remove('row-active');});
|
||||
var row=document.querySelector('#detailTable tr[data-slot="'+idx+'"]');
|
||||
if(row){row.classList.add('row-active');row.scrollIntoView({behavior:'smooth',block:'center'});}
|
||||
@@ -435,6 +447,26 @@ function showVideo(code,name){
|
||||
}
|
||||
function closeVideoModal(){var m=document.getElementById('videoModal');if(m)m.remove();}
|
||||
|
||||
/* 存入净菜弹窗 — 选择净菜订单后回显信息 */
|
||||
var orderData={
|
||||
'JC-2026-0422-007':{name:'土豆丝',spec:'5kg/袋',qty:'20份',weight:'12.5',time:'2026-04-22 08:00'},
|
||||
'JC-2026-0422-008':{name:'净黄瓜',spec:'3kg/袋',qty:'15份',weight:'9.0',time:'2026-04-22 08:30'},
|
||||
'JC-2026-0422-009':{name:'宫保鸡丁(餐品包)',spec:'6份/箱',qty:'30份',weight:'18.0',time:'2026-04-22 07:45'}
|
||||
};
|
||||
function onOrderSelect(sel){
|
||||
var v=sel.value;
|
||||
var area=document.getElementById('orderEchoArea');
|
||||
if(!v){area.style.display='none';return;}
|
||||
var d=orderData[v];
|
||||
if(!d){area.style.display='none';return;}
|
||||
area.style.display='';
|
||||
document.getElementById('echo-name').textContent=d.name;
|
||||
document.getElementById('echo-spec').textContent=d.spec;
|
||||
document.getElementById('echo-qty').textContent=d.qty;
|
||||
document.getElementById('echo-weight').textContent=d.weight+' kg';
|
||||
document.getElementById('echo-time').textContent=d.time;
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
@@ -452,17 +484,64 @@ var Drawer={
|
||||
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>';
|
||||
}
|
||||
var type=row.getAttribute('data-type');
|
||||
var orderNo=row.getAttribute('data-order')||'—';
|
||||
var traceCode=row.getAttribute('data-trace')||'—';
|
||||
var slotId=cells[0].textContent.trim();
|
||||
var itemName=cells[2].textContent.trim();
|
||||
var typeHtml=cells[3].innerHTML.trim();
|
||||
var initWeight=cells[4].textContent.trim();
|
||||
var curWeight=cells[5].textContent.trim();
|
||||
var operator=cells[6].textContent.trim();
|
||||
var temp=cells[7].textContent.trim();
|
||||
var remain=cells[8].textContent.trim();
|
||||
var storeTime=cells[9].textContent.trim();
|
||||
var status=cells[10].innerHTML.trim();
|
||||
|
||||
/* 基础信息区 */
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">基础信息</div><div class="drawer-fields">';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">格口</span><span class="drawer-field__value">'+slotId+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">关联净菜订单</span><span class="drawer-field__value"><a class="link" href="prod-clean-order.html">'+orderNo+'</a></span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">存放净菜</span><span class="drawer-field__value">'+itemName+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">类型</span><span class="drawer-field__value">'+typeHtml+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">初始重量(kg)</span><span class="drawer-field__value">'+initWeight+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">当前余量(kg)</span><span class="drawer-field__value">'+curWeight+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">操作人</span><span class="drawer-field__value">'+operator+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">温度(℃)</span><span class="drawer-field__value">'+temp+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">保质剩余</span><span class="drawer-field__value">'+remain+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">存入时间</span><span class="drawer-field__value">'+storeTime+'</span></div>';
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">状态</span><span class="drawer-field__value">'+status+'</span></div>';
|
||||
html+='</div></div>';
|
||||
Drawer.open('保温柜详情 — '+cells[0].textContent.trim(),html);
|
||||
|
||||
/* 按类型区分渲染 */
|
||||
if(type==='净菜'){
|
||||
/* 净菜类型：显示溯源码 */
|
||||
html+='<div class="drawer-section"><div class="drawer-section__title">溯源信息</div><div class="drawer-fields">';
|
||||
html+='<div class="drawer-field" style="grid-column:1/-1"><span class="drawer-field__label">溯源码</span><span class="drawer-field__value" style="color:var(--primary);font-family:monospace">'+traceCode+'</span></div>';
|
||||
html+='</div></div>';
|
||||
}else if(type==='餐品包'){
|
||||
/* 餐品包类型：显示食材明细表 */
|
||||
html+='<div class="drawer-section"><div class="drawer-section__title">食材明细</div>';
|
||||
html+='<div style="overflow-x:auto"><table style="width:100%;border-collapse:collapse;margin-top:4px;font-size:var(--font-sm)">';
|
||||
html+='<thead><tr><th style="background:#FAFAFA;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border)">溯源码</th>';
|
||||
html+='<th style="background:#FAFAFA;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border)">食材名称</th>';
|
||||
html+='<th style="background:#FAFAFA;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border)">分类</th>';
|
||||
html+='<th style="background:#FAFAFA;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border)">每份用量</th>';
|
||||
html+='<th style="background:#FAFAFA;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border)">合计用量</th></tr></thead>';
|
||||
html+='<tbody>';
|
||||
html+='<tr><td style="padding:10px 12px;border-bottom:1px solid var(--border);font-family:monospace;color:var(--primary)">NC-JD-0422-01</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">鸡丁</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)"><span class="tag tag-green">肉禽类</span></td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">150g</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">2.25kg</td></tr>';
|
||||
html+='<tr><td style="padding:10px 12px;border-bottom:1px solid var(--border);font-family:monospace;color:var(--primary)">NC-HS-0422-02</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">花生米</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)"><span class="tag tag-orange">干果类</span></td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">30g</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">0.45kg</td></tr>';
|
||||
html+='<tr><td style="padding:10px 12px;border-bottom:1px solid var(--border);font-family:monospace;color:var(--primary)">NC-GJ-0422-03</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">干辣椒</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)"><span class="tag tag-red">调味料</span></td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">10g</td><td style="padding:10px 12px;border-bottom:1px solid var(--border)">0.15kg</td></tr>';
|
||||
html+='<tr><td style="padding:10px 12px;font-family:monospace;color:var(--primary)">NC-HC-0422-04</td><td style="padding:10px 12px">黄瓜丁</td><td style="padding:10px 12px"><span class="tag tag-green">蔬菜类</span></td><td style="padding:10px 12px">80g</td><td style="padding:10px 12px">1.20kg</td></tr>';
|
||||
html+='</tbody></table></div></div>';
|
||||
}
|
||||
|
||||
Drawer.open('保温柜详情 — '+slotId,html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user