feat: 净菜内供/外售页面优化——精简表格列、新增详情抽屉、术语更新(食堂→场所)

This commit is contained in:
冯普
2026-05-26 11:42:38 +08:00
parent 5e3d55ae9b
commit d05cc30097
2 changed files with 363 additions and 154 deletions
+197 -96
View File
@@ -122,6 +122,10 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
.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;}
/* 食材明细表格(抽屉内) */
.ing-detail-table{width:100%;border-collapse:collapse;margin-top:8px;}
.ing-detail-table th{background:#FAFAFA;padding:8px 12px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border:1px solid var(--border);}
.ing-detail-table td{padding:6px 12px;font-size:var(--font-sm);color:var(--text-primary);border:1px solid var(--border);}
</style>
</head>
<body>
@@ -206,17 +210,17 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
<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>计量(kg)</th><th>单价(元/kg)</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" 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>
<tr><td>EXT-001</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>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>社区便民超市</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>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>周边餐饮企业</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>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>周边餐饮企业</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>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>学校食堂</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>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>学校食堂</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>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>职工家属区团购</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>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>职工家属区团购</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>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>
@@ -239,44 +243,15 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
</div>
<div class="modal__body">
<div class="form-grid">
<div class="form-group">
<label class="form-label">溯源码<span class="required">*</span></label>
<input class="form-control" id="orderTraceCode" placeholder="请输入溯源码">
</div>
<div class="form-group">
<label class="form-label">客户名称<span class="required">*</span></label>
<select class="form-control" id="orderCustomer">
<option value="">请选择客户</option>
<option>社区便民超市</option>
<option>周边餐饮企业</option>
<option>学校场所</option>
<option>职工家属区团购</option>
</select>
</div>
<div class="form-group">
<label class="form-label">净菜类型<span class="required">*</span></label>
<select class="form-control" id="orderType" onchange="toggleOrderName()">
<select class="form-control" id="orderType">
<option value="">请选择</option>
<option value="nc">净菜包</option>
<option value="cp">餐品净菜包</option>
</select>
</div>
<div class="form-group">
<label class="form-label">联系人</label>
<input class="form-control" placeholder="请输入联系人姓名">
</div>
<div class="form-group">
<label class="form-label">联系电话</label>
<input class="form-control" placeholder="请输入联系电话">
</div>
<div class="form-group full">
<label class="form-label">收货地址</label>
<input class="form-control" placeholder="请输入收货地址">
</div>
<hr class="form-divider">
<div class="form-group" id="orderNameNC">
<label class="form-label">净菜名称<span class="required">*</span></label>
<select class="form-control" id="orderItem" onchange="onItemChange()">
<option value="">请选择净菜</option>
@@ -288,23 +263,34 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
<option value="净胡萝卜" data-price="4.0" data-pkg="5kg/箱">净胡萝卜</option>
</select>
</div>
<div class="form-group" id="orderNameCP" style="display:none;">
<label class="form-label">餐品名称<span class="required">*</span></label>
<select class="form-control" id="orderItemCP" onchange="onItemChange()">
<option value="">请选择餐品</option>
<option value="宫保鸡丁" data-price="12" data-pkg="标准份(500g">宫保鸡丁</option>
<option value="清蒸鱼" data-price="15" data-pkg="标准份(500g">清蒸鱼</option>
<option value="蒜蓉菠菜" data-price="8" data-pkg="标准份(500g">蒜蓉菠菜</option>
<option value="炒胡萝卜" data-price="6" data-pkg="大份(800g">炒胡萝卜</option>
<option value="红烧排骨" data-price="25" data-pkg="标准份(500g">红烧排骨</option>
<div class="form-group">
<label class="form-label">包装批次号</label>
<select class="form-control" id="orderBatchSelect" onchange="onOrderBatchChange(this.value)">
<option value="">请选择批次号(选填)</option>
<option>BATCH-DH-20260415-01</option>
<option>BATCH-DH-20260415-02</option>
<option>BATCH-DH-20260415-03</option>
<option>BATCH-DH-20260415-04</option>
</select>
</div>
<div class="form-group full" id="orderBatchInfoPanel" style="display:none;">
<label class="form-label">批次包装信息</label>
<div style="background:#FAFAFA;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:var(--font-sm);">
<div><span style="color:var(--text-secondary);">包装餐品:</span><span id="obDish" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装规格:</span><span id="obSpec" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装方式:</span><span id="obMethod" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装份数:</span><span id="obQty" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装日期:</span><span id="obDate" style="font-weight:500;"></span></div>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">包装规格</label>
<input class="form-control" id="orderPkg" readonly placeholder="选择净菜后自动填充">
</div>
<div class="form-group">
<label class="form-label">申领份数<span class="required">*</span></label>
<label class="form-label">售卖份数<span class="required">*</span></label>
<input class="form-control" id="orderQty" type="number" min="1" value="1" oninput="calcOrder()">
</div>
<div class="form-group">
@@ -319,16 +305,24 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
<label class="form-label">小计金额</label>
<input class="form-control" id="orderSubtotal" readonly placeholder="自动计算">
</div>
<hr class="form-divider">
<div class="form-group">
<label class="form-label">出库区域<span class="required">*</span></label>
<select class="form-control" id="orderArea">
<option value="">请选择出库区域</option>
<option>A仓-蔬菜区-01</option>
<option>A仓-蔬菜区-02</option>
<option>A仓-蔬菜区-03</option>
<option>A仓-蔬菜区-04</option>
<option>B仓-肉类区-01</option>
</select>
<label class="form-label">客户名称<span class="required">*</span></label>
<input class="form-control" id="orderCustomer" placeholder="请输入客户名称">
</div>
<div class="form-group">
<label class="form-label">联系人</label>
<input class="form-control" placeholder="请输入联系人姓名">
</div>
<div class="form-group">
<label class="form-label">联系电话</label>
<input class="form-control" placeholder="请输入联系电话">
</div>
<div class="form-group full">
<label class="form-label">收货地址</label>
<input class="form-control" placeholder="请输入收货地址">
</div>
<hr class="form-divider">
@@ -402,27 +396,81 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
</div>
</div>
<!-- 备货完成二次确认弹窗 -->
<!-- 备货完成弹窗(补全备货信息) -->
<div class="modal-mask" id="readyModal">
<div class="modal" style="width:420px;">
<div class="modal" style="width:520px;">
<div class="modal__header">
<div class="modal__title">确认备货完成</div>
<div class="modal__title">补全备货信息</div>
<button class="modal__close" onclick="closeReadyConfirm()">&times;</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 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="readyOrderNo"></strong> 净菜/餐品:<strong id="readyFoodName"></strong></span>
</div>
<div class="form-grid" style="grid-template-columns:1fr;">
<div class="form-group">
<label class="form-label">包装批次号<span class="required">*</span></label>
<select class="form-control" id="readyBatchSelect" onchange="onReadyBatchChange(this.value)">
<option value="">请选择批次号</option>
<option>BATCH-DH-20260415-01</option>
<option>BATCH-DH-20260415-02</option>
<option>BATCH-DH-20260415-03</option>
<option>BATCH-DH-20260415-04</option>
</select>
</div>
<div class="form-group" id="readyBatchInfoPanel" style="display:none;">
<label class="form-label">批次包装信息</label>
<div style="background:#FAFAFA;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:var(--font-sm);">
<div><span style="color:var(--text-secondary);">包装餐品:</span><span id="readyBatchDish" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装规格:</span><span id="readyBatchSpec" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装方式:</span><span id="readyBatchMethod" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装份数:</span><span id="readyBatchQty" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装日期:</span><span id="readyBatchDate" style="font-weight:500;"></span></div>
</div>
</div>
</div>
</div>
<p style="font-size:var(--font-xs);color:var(--text-placeholder);margin-top:12px;">选择包装批次号后,订单状态将变为「待配送」</p>
</div>
<div class="modal__footer" style="justify-content:center;">
<div class="modal__footer">
<button class="btn btn-default" onclick="closeReadyConfirm()">取消</button>
<button class="btn btn-primary" style="background:var(--success);" onclick="doReady()">确认完成</button>
<button class="btn btn-primary" onclick="doReady()">确认备货完成</button>
</div>
</div>
</div>
<script>
/* 新建订单弹窗 */
/* ========== 数据 ========== */
var batchInfo={
'BATCH-DH-20260415-01':{dish:'宫保鸡丁',spec:'标准份(500g',method:'冷鲜袋',qty:'10',date:'2026-04-15'},
'BATCH-DH-20260415-02':{dish:'清蒸鱼',spec:'标准份(500g',method:'保鲜盒',qty:'8',date:'2026-04-15'},
'BATCH-DH-20260415-03':{dish:'蒜蓉菠菜',spec:'标准份(500g',method:'冷鲜袋',qty:'12',date:'2026-04-15'},
'BATCH-DH-20260415-04':{dish:'炒胡萝卜',spec:'大份(800g',method:'保鲜盒',qty:'6',date:'2026-04-15'}
};
var dishIngredients={
'宫保鸡丁':[{trace:'NC-PROC-JXR-20260415-01',name:'鸡胸肉',type:'主材',amount:'120g'},{trace:'NC-PROC-HUS-20260415-01',name:'花生',type:'辅材',amount:'20g'},{trace:'NC-PROC-GLJ-20260415-01',name:'干辣椒',type:'调料',amount:'5g'}],
'清蒸鱼':[{trace:'NC-PROC-CYU-20260415-01',name:'草鱼',type:'主材',amount:'100g'},{trace:'NC-PROC-JPN-20260415-01',name:'姜片',type:'调料',amount:'适量'}],
'蒜蓉菠菜':[{trace:'NC-PROC-BOC-20260415-01',name:'净菠菜',type:'主材',amount:'120g'},{trace:'NC-PROC-DSN-20260415-01',name:'大蒜',type:'调料',amount:'8g'}],
'炒胡萝卜':[{trace:'NC-PROC-HLB-20260415-01',name:'净胡萝卜',type:'主材',amount:'260g'},{trace:'NC-PROC-CJG-20260415-01',name:'葱姜',type:'调料',amount:'适量'}]
};
var dishBatch={
'宫保鸡丁':'BATCH-DH-20260415-01',
'清蒸鱼':'BATCH-DH-20260415-02',
'蒜蓉菠菜':'BATCH-DH-20260415-03',
'炒胡萝卜':'BATCH-DH-20260415-04'
};
var traceMap={
'净菠菜':'NC-PROC-BOC-20260415-01',
'净胡萝卜':'NC-PROC-HLB-20260415-01',
'净土豆丝':'NC-PROC-TDS-20260415-01',
'净西兰花':'NC-PROC-XLH-20260415-01',
'净白菜':'NC-PROC-BCA-20260415-01',
'净黄瓜':'NC-PROC-HGU-20260415-01'
};
/* ========== 新建订单弹窗 ========== */
function openCreateOrder(){
document.getElementById('createOrderModal').classList.add('show');
}
@@ -433,17 +481,23 @@ document.getElementById('createOrderModal').addEventListener('click',function(e)
if(e.target===this) closeCreateOrder();
});
/* 净菜类型切换:显示净菜名称或餐品名称 */
function toggleOrderName(){
var v=document.getElementById('orderType').value;
document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'block');
document.getElementById('orderNameCP').style.display=(v==='cp'?'block':'none');
/* 选择批次号后回显包装信息 */
function onOrderBatchChange(val){
var panel=document.getElementById('orderBatchInfoPanel');
if(!val){panel.style.display='none';return;}
var info=batchInfo[val];
if(!info){panel.style.display='none';return;}
document.getElementById('obDish').textContent=info.dish;
document.getElementById('obSpec').textContent=info.spec;
document.getElementById('obMethod').textContent=info.method;
document.getElementById('obQty').textContent=info.qty;
document.getElementById('obDate').textContent=info.date;
panel.style.display='grid';
}
/* 选择净菜后自动填充包装规格并计算 */
function onItemChange(){
var typeVal=document.getElementById('orderType').value;
var sel=typeVal==='cp'?document.getElementById('orderItemCP'):document.getElementById('orderItem');
var sel=document.getElementById('orderItem');
var opt=sel.options[sel.selectedIndex];
var pkg=opt.getAttribute('data-pkg')||'';
document.getElementById('orderPkg').value=pkg;
@@ -466,21 +520,19 @@ function calcOrder(){
/* 提交订单 */
function submitOrder(){
var traceCode=document.getElementById('orderTraceCode').value.trim();
if(!traceCode){alert('请输入溯源码');return;}
var customer=document.getElementById('orderCustomer').value;
if(!customer){alert('请选择客户名称');return;}
var typeVal=document.getElementById('orderType').value;
if(!typeVal){alert('请选择净菜类型');return;}
var item=document.getElementById('orderItem').value;
if(!item){alert('请选择净菜名称');return;}
var price=document.getElementById('orderPrice').value;
if(!price){alert('请输入单价');return;}
var area=document.getElementById('orderArea').value;
if(!area){alert('请选择出库区域');return;}
var customer=document.getElementById('orderCustomer').value.trim();
if(!customer){alert('请输入客户名称');return;}
alert('订单提交成功!');
closeCreateOrder();
}
/* 发货确认弹窗 */
/* ========== 发货确认弹窗 ========== */
function openShipModal(orderNo){
document.getElementById('shipOrderNo').value=orderNo;
document.getElementById('shipCompany').value='';
@@ -502,12 +554,12 @@ function confirmShip(){
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('receiveFoodName').textContent=tds[3].textContent;
document.getElementById('receiveModal').classList.add('show');
}
function closeReceiveConfirm(){document.getElementById('receiveModal').classList.remove('show');}
@@ -517,22 +569,39 @@ function doReceive(){
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('readyFoodName').textContent=tds[3].textContent;
// 重置批次选择和面板
document.getElementById('readyBatchSelect').selectedIndex=0;
document.getElementById('readyBatchInfoPanel').style.display='none';
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 onReadyBatchChange(val){
var panel=document.getElementById('readyBatchInfoPanel');
if(!val){panel.style.display='none';return;}
var info=batchInfo[val];
if(!info){panel.style.display='none';return;}
document.getElementById('readyBatchDish').textContent=info.dish;
document.getElementById('readyBatchSpec').textContent=info.spec;
document.getElementById('readyBatchMethod').textContent=info.method;
document.getElementById('readyBatchQty').textContent=info.qty;
document.getElementById('readyBatchDate').textContent=info.date;
panel.style.display='block';
}
function doReady(){
var batch=document.getElementById('readyBatchSelect').value;
if(!batch){alert('请选择包装批次号');return;}
closeReadyConfirm();
alert('备货已确认完成,订单状态已变为「待配送」');
alert('备货信息已补全,订单状态已变为「待配送」\n包装批次号:'+batch);
}
/* 右侧抽屉组件 */
/* ========== 右侧抽屉组件 ========== */
var Drawer={
open:function(title,bodyHtml){
this.close();
@@ -550,12 +619,23 @@ var Drawer={
}
};
/* 详情抽屉 */
/* ========== 详情抽屉(按净菜类型定制渲染) ========== */
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 orderNo=tds[0].textContent.trim();
var customer=tds[1].textContent.trim();
var ncType=tds[2].textContent.trim();
var foodName=tds[3].textContent.trim();
var pkg=tds[4].textContent.trim();
var qty=tds[5].textContent.trim();
var weight=tds[6].textContent.trim();
var price=tds[7].textContent.trim();
var subtotal=tds[8].textContent.trim();
var orderTime=tds[9].textContent.trim();
var logistics=tds[10].textContent.trim();
var status=tds[11].innerHTML;
var html='<div class="drawer-section"><div class="drawer-section__title">订单信息</div><div class="drawer-fields">';
html+='<div class="drawer-field"><div class="drawer-field__label">订单号</div><div class="drawer-field__value">'+orderNo+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">客户名称</div><div class="drawer-field__value">'+customer+'</div></div>';
@@ -568,15 +648,36 @@ function showDetail(el){
html+='<div class="drawer-field"><div class="drawer-field__label">包装批次号</div><div class="drawer-field__value">'+batchNo+'</div></div>';
}else{
var trace=traceMap[foodName]||'—';
var ncBatchMap={'净菠菜':'BATCH-NC-20260415-01','净胡萝卜':'BATCH-NC-20260415-02','净土豆丝':'BATCH-NC-20260415-03','净西兰花':'BATCH-NC-20260415-04','净白菜':'BATCH-NC-20260415-05','净黄瓜':'BATCH-NC-20260415-06','土豆(土豆丝)':'BATCH-NC-20260415-03','土豆(土豆块)':'BATCH-NC-20260415-07'};
html+='<div class="drawer-field"><div class="drawer-field__label">溯源码</div><div class="drawer-field__value">'+trace+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">包装批次号</div><div class="drawer-field__value">'+(ncBatchMap[foodName]||'—')+'</div></div>';
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 class="drawer-field"><div class="drawer-field__label">净菜/餐品</div><div class="drawer-field__value">'+foodName+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">包装规格</div><div class="drawer-field__value">'+pkg+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">售卖份数</div><div class="drawer-field__value">'+qty+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">计量(kg)</div><div class="drawer-field__value">'+weight+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">单价(元/kg)</div><div class="drawer-field__value">'+price+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">小计金额</div><div class="drawer-field__value">'+subtotal+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">下单时间</div><div class="drawer-field__value">'+orderTime+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">物流单号</div><div class="drawer-field__value">'+logistics+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">订单状态</div><div class="drawer-field__value">'+status+'</div></div>';
html+='</div></div>';
/* 餐品净菜包显示净菜包明细 */
if(isCP){
var ings=dishIngredients[foodName];
if(ings&&ings.length){
html+='<div class="drawer-section"><div class="drawer-section__title">净菜包明细</div>';
html+='<table class="ing-detail-table"><thead><tr><th>食材溯源码</th><th>食材名称</th><th>分类</th><th>每份用量</th></tr></thead><tbody>';
for(var i=0;i<ings.length;i++){
var tagClass=ings[i].type==='主材'?'tag-blue':ings[i].type==='辅材'?'tag-green':'tag-orange';
html+='<tr><td>'+ings[i].trace+'</td><td>'+ings[i].name+'</td><td><span class="status-tag '+tagClass+'">'+ings[i].type+'</span></td><td>'+ings[i].amount+'</td></tr>';
}
html+='</tbody></table></div>';
}
}
Drawer.open('外售详情 — '+orderNo, html);
};}
}
</script>
</body>
+166 -58
View File
@@ -117,6 +117,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
.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;}
/* 食材明细表格(抽屉内) */
.ing-detail-table{width:100%;border-collapse:collapse;margin-top:8px;}
.ing-detail-table th{background:#FAFAFA;padding:8px 12px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border:1px solid var(--border);}
.ing-detail-table td{padding:6px 12px;font-size:var(--font-sm);color:var(--text-primary);border:1px solid var(--border);}
</style>
</head>
<body>
@@ -162,7 +166,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
<div class="filter-bar">
<div class="filter-item"><label>申领单号/食材名称</label><input class="filter-input" placeholder="请输入申领单号或食材名称"></div>
<div class="filter-item"><label>申领场所</label>
<select class="filter-select"><option>全部</option><option>一号场所厨房</option><option>二号场所厨房</option><option>三号场所厨房</option></select>
<select class="filter-select"><option>全部</option><option>一号食堂厨房</option><option>二号食堂厨房</option><option>三号食堂厨房</option></select>
</div>
<div class="filter-item"><label>净菜类型</label>
<select class="filter-select"><option>全部</option><option>净菜包</option><option>餐品净菜包</option></select>
@@ -183,17 +187,17 @@ 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>申领数量(kg)</th><th>订单状态</th><th>关联仓库区域</th><th>申领时间</th><th>预定配送时间</th><th>配送人</th><th>操作</th>
<th>申领单号</th><th>申领场所</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>申领份数</th><th>申领数量(kg)</th><th>订单状态</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" 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>
<tr><td>INT-001</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>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>一号食堂厨房</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>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>二号食堂厨房</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: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>二号食堂厨房</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: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>三号食堂厨房</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>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>一号食堂厨房</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" 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>三号食堂厨房</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: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>二号食堂厨房</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>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>
@@ -218,25 +222,33 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
</div>
<div class="modal__body">
<div class="form-grid">
<div class="form-item">
<div class="form-item__label">溯源码<span class="required">*</span></div>
<input placeholder="输入溯源码可带出净菜信息以及仓库信息">
</div>
<div class="form-item">
<div class="form-item__label">净菜类型<span class="required">*</span></div>
<select id="claimType" onchange="toggleClaimName()"><option value="">请选择</option><option value="nc">净菜包</option><option value="cp">餐品净菜包</option></select>
<select id="claimType"><option value="">请选择</option><option value="nc">净菜包</option><option value="cp">餐品净菜包</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><option>三号场所厨房</option></select>
<select><option value="">请选择</option><option>一号食堂厨房</option><option>二号食堂厨房</option><option>三号食堂厨房</option></select>
</div>
<div class="form-item" id="claimNameNC">
<div class="form-item">
<div class="form-item__label">净菜名称<span class="required">*</span></div>
<select><option value="">请选择净菜</option><option>菠菜</option><option>玉米(玉米粒)</option><option>猪排骨</option><option>鸡胸肉(鸡肉丝)</option><option>草鱼(鱼片)</option><option>土豆(土豆丝)</option></select>
</div>
<div class="form-item" id="claimNameCP" style="display:none;">
<div class="form-item__label">餐品名称<span class="required">*</span></div>
<select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
<div class="form-item">
<div class="form-item__label">包装批次号</div>
<select id="claimBatchSelect" onchange="onBatchChange(this.value)"><option value="">请选择批次号(选填)</option><option>BATCH-DH-20260415-01</option><option>BATCH-DH-20260415-02</option><option>BATCH-DH-20260415-03</option><option>BATCH-DH-20260415-04</option></select>
</div>
<div class="form-item full" id="batchInfoPanel" style="display:none;">
<div class="form-item__label">批次包装信息</div>
<div style="background:#FAFAFA;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:var(--font-sm);">
<div><span style="color:var(--text-secondary);">包装餐品:</span><span id="batchDish" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装规格:</span><span id="batchSpec" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装方式:</span><span id="batchMethod" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装份数:</span><span id="batchQty" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装日期:</span><span id="batchDate" style="font-weight:500;"></span></div>
</div>
</div>
</div>
<div class="form-item">
<div class="form-item__label">包装规格<span class="required">*</span></div>
@@ -250,10 +262,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
<div class="form-item__label">申领数量(kg)<span class="required">*</span></div>
<input type="number" placeholder="请输入数量">
</div>
<div class="form-item">
<div class="form-item__label">关联仓库区域</div>
<select><option value="">请选择</option><option>A仓-蔬菜区-01</option><option>A仓-蔬菜区-02</option><option>B仓-肉类区-01</option><option>B仓-肉类区-02</option><option>C仓-水产区-01</option></select>
</div>
<div class="form-item">
<div class="form-item__label">预定配送时间</div>
<input type="datetime-local" placeholder="请选择配送时间">
@@ -320,21 +328,41 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
</div>
</div>
<!-- 备货完成二次确认弹窗 -->
<!-- 备货完成弹窗(补全备货信息) -->
<div class="modal-mask" id="modal-ready">
<div class="modal" style="width:420px;">
<div class="modal" style="width:520px;">
<div class="modal__header">
<div class="modal__title">确认备货完成</div>
<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 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="readyOrderNo"></strong> 净菜/餐品:<strong id="readyFoodName"></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>
<select id="readyBatchSelect" onchange="onReadyBatchChange(this.value)"><option value="">请选择批次号</option><option>BATCH-DH-20260415-01</option><option>BATCH-DH-20260415-02</option><option>BATCH-DH-20260415-03</option><option>BATCH-DH-20260415-04</option></select>
</div>
<div class="form-item" id="readyBatchInfoPanel" style="display:none;">
<div class="form-item__label">批次包装信息</div>
<div style="background:#FAFAFA;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:var(--font-sm);">
<div><span style="color:var(--text-secondary);">包装餐品:</span><span id="readyBatchDish" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装规格:</span><span id="readyBatchSpec" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装方式:</span><span id="readyBatchMethod" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装份数:</span><span id="readyBatchQty" style="font-weight:500;"></span></div>
<div><span style="color:var(--text-secondary);">包装日期:</span><span id="readyBatchDate" style="font-weight:500;"></span></div>
</div>
</div>
</div>
</div>
<p style="font-size:var(--font-xs);color:var(--text-placeholder);margin-top:12px;">选择包装批次号后,订单状态将变为「待配送」</p>
</div>
<div class="modal__footer" style="justify-content:center;">
<div class="modal__footer">
<button class="btn btn-default" onclick="closeModal('modal-ready')">取消</button>
<button class="btn btn-primary" style="background:var(--success);" onclick="doReady()">确认完成</button>
<button class="btn btn-primary" onclick="doReady()">确认备货完成</button>
</div>
</div>
</div>
@@ -347,20 +375,50 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
document.querySelectorAll('.modal-mask').forEach(m=>{
m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show');});
});
// 净菜类型切换:显示净菜名称或餐品名称
function toggleClaimName(){
var v=document.getElementById('claimType').value;
document.getElementById('claimNameNC').style.display=(v==='cp'?'none':'flex');
document.getElementById('claimNameCP').style.display=(v==='cp'?'flex':'none');
/* ========== 批次包装信息数据 ========== */
var batchInfo={
'BATCH-DH-20260415-01':{dish:'宫保鸡丁',spec:'标准份(500g',method:'冷鲜袋',qty:'10',date:'2026-04-15'},
'BATCH-DH-20260415-02':{dish:'清蒸鱼',spec:'标准份(500g',method:'保鲜盒',qty:'8',date:'2026-04-15'},
'BATCH-DH-20260415-03':{dish:'蒜蓉菠菜',spec:'标准份(500g',method:'冷鲜袋',qty:'12',date:'2026-04-15'},
'BATCH-DH-20260415-04':{dish:'炒胡萝卜',spec:'大份(800g',method:'保鲜盒',qty:'6',date:'2026-04-15'}
};
// 新建申领单 — 选择批次号回显信息
function onBatchChange(val){
var panel=document.getElementById('batchInfoPanel');
var info=batchInfo[val];
if(!info){panel.style.display='none';return;}
document.getElementById('batchDish').textContent=info.dish;
document.getElementById('batchSpec').textContent=info.spec;
document.getElementById('batchMethod').textContent=info.method;
document.getElementById('batchQty').textContent=info.qty;
document.getElementById('batchDate').textContent=info.date;
panel.style.display='flex';
}
// 备货完成弹窗 — 选择批次号回显信息
function onReadyBatchChange(val){
var panel=document.getElementById('readyBatchInfoPanel');
var info=batchInfo[val];
if(!info){panel.style.display='none';return;}
document.getElementById('readyBatchDish').textContent=info.dish;
document.getElementById('readyBatchSpec').textContent=info.spec;
document.getElementById('readyBatchMethod').textContent=info.method;
document.getElementById('readyBatchQty').textContent=info.qty;
document.getElementById('readyBatchDate').textContent=info.date;
panel.style.display='flex';
}
/* ========== 列索引(去掉溯源码和关联仓库区域后) ========== */
/* 0申领单号 1申领场所 2净菜类型 3净菜/餐品 4包装规格 5申领份数 6申领数量 7订单状态 8申领时间 9预定配送时间 10配送人 11操作 */
/* 确认收货 */
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;
document.getElementById('receiveFoodName').textContent=tds[3].textContent;
openModal('modal-receive');
}
function doReceive(){
@@ -373,7 +431,7 @@ 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('deliverFoodName').textContent=tds[3].textContent;
document.getElementById('deliverPerson').value='';
document.getElementById('deliverRemark').value='';
openModal('modal-deliver');
@@ -385,19 +443,52 @@ function doDeliver(){
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;
document.getElementById('readyFoodName').textContent=tds[3].textContent;
// 重置批次选择和面板
document.getElementById('readyBatchSelect').selectedIndex=0;
document.getElementById('readyBatchInfoPanel').style.display='none';
openModal('modal-ready');
}
function doReady(){
var batch=document.getElementById('readyBatchSelect').value;
if(!batch){alert('请选择包装批次号');return;}
closeModal('modal-ready');
alert('备货已确认完成,订单状态已变为「待配送」');
alert('备货信息已补全,订单状态已变为「待配送」\n包装批次号:'+batch);
}
/* ========== 餐品食材数据(与 sup-pkg-label 保持一致) ========== */
var dishIngredients={
'宫保鸡丁':[
{trace:'NC-PROC-JXR-20260415-01',name:'鸡胸肉',type:'主材',amount:'120g'},
{trace:'NC-PROC-HUS-20260415-01',name:'花生',type:'辅材',amount:'20g'},
{trace:'NC-PROC-GLJ-20260415-01',name:'干辣椒',type:'调料',amount:'5g'}
],
'清蒸鱼':[
{trace:'NC-PROC-CYU-20260415-01',name:'草鱼',type:'主材',amount:'100g'},
{trace:'NC-PROC-JPN-20260415-01',name:'姜片',type:'调料',amount:'适量'}
],
'蒜蓉菠菜':[
{trace:'NC-PROC-BOC-20260415-01',name:'净菠菜',type:'主材',amount:'120g'},
{trace:'NC-PROC-DSN-20260415-01',name:'大蒜',type:'调料',amount:'8g'}
],
'炒胡萝卜':[
{trace:'NC-PROC-HLB-20260415-01',name:'净胡萝卜',type:'主材',amount:'260g'},
{trace:'NC-PROC-CJG-20260415-01',name:'葱姜',type:'调料',amount:'适量'}
]
};
// 餐品净菜包对应的包装批次号
var dishBatch={
'宫保鸡丁':'BATCH-DH-20260415-01',
'清蒸鱼':'BATCH-DH-20260415-02',
'蒜蓉菠菜':'BATCH-DH-20260415-03',
'炒胡萝卜':'BATCH-DH-20260415-04'
};
/* 右侧抽屉组件 */
var Drawer={
open:function(title,bodyHtml){
@@ -416,12 +507,11 @@ var Drawer={
}
};
/* 详情抽屉 */
/* ========== 详情抽屉(定制化渲染) ========== */
function showDetail(el){
var tr=el.closest('tr');
var ths=tr.closest('table').querySelectorAll('thead th');
var tds=tr.querySelectorAll('td');
/* 列序:0申领单号 1申领食堂 2净菜类型 3净菜/餐品 4包装规格 5申领份数 6申领数量 7订单状态 8申领时间 9预定配送时间 10配送人 */
/* 列序:0申领单号 1申领场所 2净菜类型 3净菜/餐品 4包装规格 5申领份数 6申领数量 7订单状态 8申领时间 9预定配送时间 10配送人 */
var orderNo=tds[0].textContent;
var canteen=tds[1].textContent;
var typeHtml=tds[2].innerHTML;
@@ -441,28 +531,46 @@ function showDetail(el){
var html='<div class="drawer-section"><div class="drawer-section__title">基础信息</div><div class="drawer-fields">';
html+='<div class="drawer-field"><div class="drawer-field__label">申领单号</div><div class="drawer-field__value">'+orderNo+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">净菜类型</div><div class="drawer-field__value">'+typeHtml+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">申领食堂</div><div class="drawer-field__value">'+canteen+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">申领场所</div><div class="drawer-field__value">'+canteen+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">净菜/餐品</div><div class="drawer-field__value">'+foodName+'</div></div>';
// 根据类型显示不同字段
if(!isCp){
// 净菜包 → 显示溯源码 + 包装批次号
// 净菜包 → 显示溯源码
var traceMap={'菠菜':'NC-INT-BOCA-20260422-01','玉米(玉米粒)':'NC-INT-BCAI-20260422-01','猪排骨':'NC-INT-ZLRJ-20260422-01','草鱼(鱼片)':'NC-INT-CAYO-20260422-01','土豆(土豆丝)':'NC-INT-TDSI-20260422-01'};
var ncBatch={'菠菜':'BATCH-NC-20260422-01','玉米(玉米粒)':'BATCH-NC-20260422-02','猪排骨':'BATCH-NC-20260422-03','草鱼(鱼片)':'BATCH-NC-20260422-04','土豆(土豆丝)':'BATCH-NC-20260422-05'};
html+='<div class="drawer-field"><div class="drawer-field__label">溯源码</div><div class="drawer-field__value">'+(traceMap[foodName]||'—')+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">包装批次号</div><div class="drawer-field__value">'+(ncBatch[foodName]||'—')+'</div></div>';
} else {
// 餐品净菜包 → 显示包装批次号
html+='<div class="drawer-field"><div class="drawer-field__label">包装批次号</div><div class="drawer-field__value">'+(dishBatch[foodName]||'—')+'</div></div>';
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 class="drawer-field"><div class="drawer-field__label">包装规格</div><div class="drawer-field__value">'+spec+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">申领份数</div><div class="drawer-field__value">'+qty+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">申领数量(kg)</div><div class="drawer-field__value">'+weight+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">订单状态</div><div class="drawer-field__value">'+statusHtml+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">申领时间</div><div class="drawer-field__value">'+claimTime+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">预定配送时间</div><div class="drawer-field__value">'+deliverTime+'</div></div>';
html+='<div class="drawer-field"><div class="drawer-field__label">配送人</div><div class="drawer-field__value">'+deliverPerson+'</div></div>';
html+='</div></div>';
var key=tds[0].textContent;
Drawer.open('净菜内供详情 — '+key, html);
}}
// 餐品净菜包 → 追加净菜包明细表格
if(isCp){
var ings=dishIngredients[foodName]||[];
var tagCls={'主材':'tag-blue','辅材':'tag-green','调料':'tag-orange'};
html+='<div class="drawer-section"><div class="drawer-section__title">净菜包明细</div>';
html+='<table class="ing-detail-table"><thead><tr><th>食材溯源码</th><th>食材名称</th><th>分类</th><th>每份用量</th></tr></thead><tbody>';
if(ings.length>0){
ings.forEach(function(i){
html+='<tr><td>'+i.trace+'</td><td>'+i.name+'</td><td><span class="tag '+(tagCls[i.type]||'')+'">'+i.type+'</span></td><td>'+i.amount+'</td></tr>';
});
} else {
html+='<tr><td colspan="4" style="text-align:center;color:var(--text-placeholder);">暂无明细数据</td></tr>';
}
html+='</tbody></table></div>';
}
Drawer.open('净菜内供详情 — '+orderNo, html);
}
</script>
</body>