refine boxing UI: restructure info bar, scan bar, and mode switch
- Info bar: left-right layout with progress bar below, detail button on right - Scan bar: remove '已识别' badge, show 工令号/总件数/已装X with larger font - Mode switch: move to title right side, adopt rectangular style with 18px bold font Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -189,7 +189,7 @@ body {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.scan-code {
|
.scan-code {
|
||||||
font-size: 13px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -197,6 +197,14 @@ body {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.scan-zongpai-extra {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-2);
|
||||||
|
font-weight: 500;
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
.scan-badge {
|
.scan-badge {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -216,7 +224,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 8px 86px 8px 12px;
|
padding: 8px 12px 8px 12px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
@@ -248,13 +256,19 @@ body {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 进度条+详情同行 */
|
||||||
|
.progress-with-detail {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
/* 进度条 */
|
/* 进度条 */
|
||||||
.progress-wrap {
|
.progress-wrap {
|
||||||
|
flex: 1;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: #e0e0e0;
|
background: #e0e0e0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 2px 0;
|
|
||||||
}
|
}
|
||||||
.progress-fill {
|
.progress-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -264,29 +278,13 @@ body {
|
|||||||
}
|
}
|
||||||
.progress-fill.full { background: var(--green); }
|
.progress-fill.full { background: var(--green); }
|
||||||
|
|
||||||
.info-row2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.info-meta-text {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-3);
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.info-meta-text .hl { color: var(--amber); font-weight: 700; }
|
|
||||||
.info-meta-text .packed { color: var(--blue); font-weight: 600; }
|
|
||||||
|
|
||||||
.detail-link {
|
.detail-link {
|
||||||
position: absolute;
|
|
||||||
right: 12px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
justify-content: center;
|
||||||
height: 34px;
|
height: 28px;
|
||||||
font-size: 12px;
|
min-width: 48px;
|
||||||
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
background: var(--blue-lt);
|
background: var(--blue-lt);
|
||||||
@@ -309,10 +307,21 @@ body {
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-row2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.info-meta-text {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-3);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.info-meta-text .hl { color: var(--amber); font-weight: 700; }
|
||||||
|
.info-meta-text .packed { color: var(--blue); font-weight: 600; }
|
||||||
|
|
||||||
/* 空状态的 info-bar */
|
/* 空状态的 info-bar */
|
||||||
.info-bar.empty .info-paichan,
|
.info-bar.empty .info-paichan,
|
||||||
.info-bar.empty .info-wo,
|
|
||||||
.info-bar.empty .info-erp,
|
|
||||||
.info-bar.empty .info-meta-text { color: #ccc; }
|
.info-bar.empty .info-meta-text { color: #ccc; }
|
||||||
|
|
||||||
/* ── 已分配列表区 (可滚动) ── */
|
/* ── 已分配列表区 (可滚动) ── */
|
||||||
@@ -661,15 +670,15 @@ body {
|
|||||||
<div class="info-bar empty">
|
<div class="info-bar empty">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">排产号 —</span>
|
<span class="info-paichan">排产号 —</span>
|
||||||
<span class="info-wo">工单 —</span>
|
|
||||||
<span class="info-erp">— 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:0%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:0%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link disabled">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 — 箱 · 最大箱号 —</span>
|
<span class="info-meta-text">已有 — 箱 · 最大箱号 —</span>
|
||||||
<button class="detail-link disabled">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -718,6 +727,7 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -725,15 +735,15 @@ body {
|
|||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:25%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:25%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 已装 50/200</span>
|
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 已装 50/200</span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -781,21 +791,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:75%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:75%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -866,21 +877,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:75%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:75%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -951,21 +963,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:75%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:75%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span></span>
|
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span></span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1041,21 +1054,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:25%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:25%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span></span>
|
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span></span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1109,21 +1123,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:25%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:25%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">2 箱</span> · 最大箱号 <span class="hl">5</span></span>
|
<span class="info-meta-text">已有 <span class="packed">2 箱</span> · 最大箱号 <span class="hl">5</span></span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1175,21 +1190,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:25%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:25%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 剩余可装 150</span>
|
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 剩余可装 150</span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1241,21 +1257,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180002</span>
|
<span class="scan-code">ZP202605180002</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0901 / 100件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-B202</span>
|
<span class="info-paichan">PC-2605-B202</span>
|
||||||
<span class="info-wo">WO-2026-0901</span>
|
|
||||||
<span class="info-erp">100 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill full" style="width:100%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill full" style="width:100%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">3</span> · <span style="color:var(--green);font-weight:700">100/100 已装完</span></span>
|
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">3</span> · <span style="color:var(--green);font-weight:700">100/100 已装完</span></span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1347,21 +1364,22 @@ body {
|
|||||||
<div class="scan-bar scanned">
|
<div class="scan-bar scanned">
|
||||||
<div class="scan-check">✓</div>
|
<div class="scan-check">✓</div>
|
||||||
<span class="scan-code">ZP202605180001</span>
|
<span class="scan-code">ZP202605180001</span>
|
||||||
|
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||||||
<span class="scan-badge">已识别</span>
|
<span class="scan-badge">已识别</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-bar">
|
<div class="info-bar">
|
||||||
<div class="info-row1">
|
<div class="info-row1">
|
||||||
<span class="info-paichan">PC-2605-A101</span>
|
<span class="info-paichan">PC-2605-A101</span>
|
||||||
<span class="info-wo">WO-2026-0882</span>
|
|
||||||
<span class="info-erp">200 件</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-wrap">
|
<div class="progress-with-detail">
|
||||||
<div class="progress-fill" style="width:75%"></div>
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-fill" style="width:75%"></div>
|
||||||
|
</div>
|
||||||
|
<button class="detail-link">详情</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row2">
|
<div class="info-row2">
|
||||||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
||||||
<button class="detail-link">详情</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1456,10 +1474,10 @@ body {
|
|||||||
│ "装箱编号" [⇄ 单码装箱 P2] │ AppBar
|
│ "装箱编号" [⇄ 单码装箱 P2] │ AppBar
|
||||||
├──────────────────────────────────────────┤
|
├──────────────────────────────────────────┤
|
||||||
│ [通知条] 可叠加显示,每条 ~30px │ 可选
|
│ [通知条] 可叠加显示,每条 ~30px │ 可选
|
||||||
├──────────────────────────────────────────┤ 38px
|
├──────────────────────────────────────────┤ ~50px
|
||||||
│ ✓ ZP202605180001 已识别 │ 扫码条
|
│ ✓ ZP202605180001 WO-0882 / 200件 已识别 │ 扫码条
|
||||||
├──────────────────────────────────────────┤ ~52px
|
├──────────────────────────────────────────┤ ~45px
|
||||||
│ PC-2605-A101 WO-2026-0882 200件 [详情]│
|
│ PC-2605-A101 [详情] │
|
||||||
│ ▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 进度条 │ info-bar
|
│ ▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 进度条 │ info-bar
|
||||||
│ 已有 2箱 · 最大箱号 5 · 已装50/200 │
|
│ 已有 2箱 · 最大箱号 5 · 已装50/200 │
|
||||||
├──────────────────────────────────────────┤
|
├──────────────────────────────────────────┤
|
||||||
|
|||||||
@@ -1305,10 +1305,15 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
onKeyEvent: _onKeyEvent,
|
onKeyEvent: _onKeyEvent,
|
||||||
child: Scaffold(
|
child: Scaffold(
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
title: const Text('装箱编号'),
|
title: Row(
|
||||||
|
children: [
|
||||||
|
const Text('装箱编号'),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
_buildModePill(),
|
||||||
|
],
|
||||||
|
),
|
||||||
toolbarHeight: 44,
|
toolbarHeight: 44,
|
||||||
titleSpacing: 12,
|
titleSpacing: 12,
|
||||||
actions: [_buildModePill(), const SizedBox(width: 8)],
|
|
||||||
),
|
),
|
||||||
body: Column(
|
body: Column(
|
||||||
children: [
|
children: [
|
||||||
@@ -1446,27 +1451,10 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildSingleCodeBody(ColorScheme colorScheme) {
|
|
||||||
final isWaiting = _phase == _Phase.waiting && _zongpaiNo == null;
|
|
||||||
final isFinished =
|
|
||||||
_phase == _Phase.scanned &&
|
|
||||||
_zongpaiNo != null &&
|
|
||||||
_remainingQuantity <= 0;
|
|
||||||
|
|
||||||
return Column(
|
|
||||||
children: [
|
|
||||||
_buildSingleScanBar(isWaiting),
|
|
||||||
_buildSingleInfoBar(isWaiting, colorScheme),
|
|
||||||
_buildSingleAssignedList(isWaiting, isFinished),
|
|
||||||
_buildSingleBottomArea(isWaiting || isFinished),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildSingleScanBar(bool isWaiting) {
|
Widget _buildSingleScanBar(bool isWaiting) {
|
||||||
if (isWaiting) {
|
if (isWaiting) {
|
||||||
return Container(
|
return Container(
|
||||||
height: 38,
|
height: 50,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Colors.grey.shade100,
|
color: Colors.grey.shade100,
|
||||||
@@ -1486,7 +1474,7 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return Container(
|
return Container(
|
||||||
height: 38,
|
height: 50,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Colors.green.shade50,
|
color: Colors.green.shade50,
|
||||||
@@ -1499,23 +1487,17 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
Expanded(
|
Expanded(
|
||||||
child: Text(
|
child: Text(
|
||||||
_zongpaiNo ?? '',
|
_zongpaiNo ?? '',
|
||||||
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w700),
|
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Container(
|
const SizedBox(width: 8),
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
Text(
|
||||||
decoration: BoxDecoration(
|
'${_workOrderNo ?? "--"} / ${_erpQuantity ?? 0}件 / 已装$_packedQuantity',
|
||||||
color: Colors.green.shade100,
|
style: const TextStyle(
|
||||||
borderRadius: BorderRadius.circular(8),
|
fontSize: 15,
|
||||||
),
|
fontWeight: FontWeight.w500,
|
||||||
child: Text(
|
color: Colors.black54,
|
||||||
'已识别',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: FontWeight.w700,
|
|
||||||
color: Colors.green.shade700,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@@ -1523,6 +1505,23 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildSingleCodeBody(ColorScheme colorScheme) {
|
||||||
|
final isWaiting = _phase == _Phase.waiting && _zongpaiNo == null;
|
||||||
|
final isFinished =
|
||||||
|
_phase == _Phase.scanned &&
|
||||||
|
_zongpaiNo != null &&
|
||||||
|
_remainingQuantity <= 0;
|
||||||
|
|
||||||
|
return Column(
|
||||||
|
children: [
|
||||||
|
_buildSingleScanBar(isWaiting),
|
||||||
|
_buildSingleInfoBar(isWaiting, colorScheme),
|
||||||
|
_buildSingleAssignedList(isWaiting, isFinished),
|
||||||
|
_buildSingleBottomArea(isWaiting || isFinished),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
Widget _buildSingleInfoBar(bool isWaiting, ColorScheme colorScheme) {
|
Widget _buildSingleInfoBar(bool isWaiting, ColorScheme colorScheme) {
|
||||||
final total = _erpQuantity ?? 0;
|
final total = _erpQuantity ?? 0;
|
||||||
final packed = isWaiting ? 0 : _packedQuantity;
|
final packed = isWaiting ? 0 : _packedQuantity;
|
||||||
@@ -1531,90 +1530,68 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
final detailEnabled = !isWaiting && _existingBoxes.isNotEmpty;
|
final detailEnabled = !isWaiting && _existingBoxes.isNotEmpty;
|
||||||
|
|
||||||
return Container(
|
return Container(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Colors.grey.shade50,
|
color: Colors.grey.shade50,
|
||||||
border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
|
border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: IntrinsicHeight(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
child: Row(
|
||||||
children: [
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
Expanded(
|
children: [
|
||||||
child: Column(
|
Expanded(
|
||||||
mainAxisSize: MainAxisSize.min,
|
child: Column(
|
||||||
children: [
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
Row(
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
Row(
|
||||||
child: Text(
|
children: [
|
||||||
|
Text(
|
||||||
isWaiting ? '排产号 --' : (_paichanNo ?? '--'),
|
isWaiting ? '排产号 --' : (_paichanNo ?? '--'),
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: FontWeight.w700,
|
fontWeight: FontWeight.w700,
|
||||||
color: isWaiting
|
color: isWaiting ? Colors.grey.shade400 : Colors.black87,
|
||||||
? Colors.grey.shade400
|
|
||||||
: Colors.black87,
|
|
||||||
),
|
),
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
),
|
),
|
||||||
),
|
const SizedBox(width: 10),
|
||||||
const SizedBox(width: 8),
|
Expanded(
|
||||||
Text(
|
child: Text(
|
||||||
isWaiting ? '工单 --' : (_workOrderNo ?? '--'),
|
isWaiting
|
||||||
style: TextStyle(
|
? '已有 -- 箱 · 最大箱号 --'
|
||||||
fontSize: 12,
|
: '已有 ${_existingBoxes.length} 箱 · 最大箱号 $_maxBoxNo',
|
||||||
color: isWaiting
|
style: TextStyle(
|
||||||
? Colors.grey.shade400
|
fontSize: 10,
|
||||||
: Colors.black54,
|
color: isWaiting
|
||||||
|
? Colors.grey.shade400
|
||||||
|
: Colors.grey.shade600,
|
||||||
|
),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
textAlign: TextAlign.right,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 4),
|
||||||
|
ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(2),
|
||||||
|
child: LinearProgressIndicator(
|
||||||
|
value: progress,
|
||||||
|
minHeight: 3,
|
||||||
|
backgroundColor: Colors.grey.shade300,
|
||||||
|
valueColor: AlwaysStoppedAnimation<Color>(
|
||||||
|
finished ? Colors.green.shade700 : colorScheme.primary,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(width: 8),
|
|
||||||
Text(
|
|
||||||
isWaiting ? '-- 件' : '$total 件',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w700,
|
|
||||||
color: isWaiting
|
|
||||||
? Colors.grey.shade400
|
|
||||||
: Colors.black87,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SizedBox(height: 5),
|
|
||||||
ClipRRect(
|
|
||||||
borderRadius: BorderRadius.circular(2),
|
|
||||||
child: LinearProgressIndicator(
|
|
||||||
value: progress,
|
|
||||||
minHeight: 3,
|
|
||||||
backgroundColor: Colors.grey.shade300,
|
|
||||||
valueColor: AlwaysStoppedAnimation<Color>(
|
|
||||||
finished ? Colors.green.shade700 : colorScheme.primary,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
const SizedBox(height: 5),
|
),
|
||||||
Align(
|
|
||||||
alignment: Alignment.centerLeft,
|
|
||||||
child: Text(
|
|
||||||
isWaiting
|
|
||||||
? '已有 -- 箱 · 最大箱号 --'
|
|
||||||
: '已有 ${_existingBoxes.length} 箱 · 最大箱号 $_maxBoxNo · 已装 $packed/$total',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 11,
|
|
||||||
color: isWaiting
|
|
||||||
? Colors.grey.shade400
|
|
||||||
: Colors.grey.shade600,
|
|
||||||
),
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
const SizedBox(width: 10),
|
||||||
const SizedBox(width: 10),
|
_buildDetailButton(detailEnabled, colorScheme),
|
||||||
_buildDetailButton(detailEnabled, colorScheme),
|
],
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -2064,44 +2041,45 @@ class _BoxingPageState extends State<BoxingPage> with WidgetsBindingObserver {
|
|||||||
final isSingle = _mode == BoxingMode.singleCode;
|
final isSingle = _mode == BoxingMode.singleCode;
|
||||||
final bgColor = isSingle ? Colors.blue.shade700 : Colors.orange.shade700;
|
final bgColor = isSingle ? Colors.blue.shade700 : Colors.orange.shade700;
|
||||||
|
|
||||||
return GestureDetector(
|
return Material(
|
||||||
onTap: _isAutoProcessing ? null : _cycleMode,
|
borderRadius: BorderRadius.circular(8),
|
||||||
child: Container(
|
color: bgColor,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
|
child: InkWell(
|
||||||
decoration: BoxDecoration(
|
borderRadius: BorderRadius.circular(8),
|
||||||
color: bgColor,
|
onTap: _isAutoProcessing ? null : _cycleMode,
|
||||||
borderRadius: BorderRadius.circular(12),
|
child: Container(
|
||||||
),
|
height: 36,
|
||||||
child: Row(
|
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||||
mainAxisSize: MainAxisSize.min,
|
child: Row(
|
||||||
children: [
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
const Icon(Icons.swap_horiz, color: Colors.white, size: 14),
|
children: [
|
||||||
const SizedBox(width: 4),
|
const Icon(Icons.swap_horiz, color: Colors.white, size: 18),
|
||||||
Text(
|
const SizedBox(width: 6),
|
||||||
_modeLabel,
|
Flexible(
|
||||||
style: const TextStyle(
|
child: FittedBox(
|
||||||
color: Colors.white,
|
fit: BoxFit.scaleDown,
|
||||||
fontSize: 11,
|
child: Text(
|
||||||
fontWeight: FontWeight.w700,
|
_modeLabel,
|
||||||
),
|
maxLines: 1,
|
||||||
),
|
style: const TextStyle(
|
||||||
const SizedBox(width: 4),
|
color: Colors.white,
|
||||||
Container(
|
fontSize: 18,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
fontWeight: FontWeight.w800,
|
||||||
decoration: BoxDecoration(
|
),
|
||||||
color: Colors.white.withValues(alpha: 0.22),
|
),
|
||||||
borderRadius: BorderRadius.circular(4),
|
|
||||||
),
|
|
||||||
child: const Text(
|
|
||||||
'P2',
|
|
||||||
style: TextStyle(
|
|
||||||
color: Colors.white,
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
const SizedBox(width: 8),
|
||||||
],
|
Text(
|
||||||
|
'P2',
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.white.withValues(alpha: 0.88),
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user