优化

2026-09-04 12:18:39 +08:00
parent 72520225d9
commit 4eda56acf1
8 changed files with 381 additions and 12 deletions
@@ -22,7 +22,12 @@ import {
  getWeightWorkspace,
  uploadWeightImage,
 } from '../api/weightOcr'
-import type { WeightPalletOption, WeightResultResource, WeightWorkspaceResource } from '../types'
+import type {
+  WeightPalletOption,
+  WeightPutawaySlotStatus,
+  WeightResultResource,
+  WeightWorkspaceResource,
+} from '../types'
 import WeightImageThumbnail from './WeightImageThumbnail.vue'

 const props = withDefaults(defineProps<{
@@ -180,6 +185,26 @@ function cardWeight(row: WeightResultResource) {
  return formatWeight(draft?.value ?? null, draft?.unit ?? 'KG')
 }

+function putawayStatusLabel(status: WeightResultResource['slotStatus']) {
+  return ({
+    RESERVED_EMPTY: '预留空位',
+    BOUND: '待上架',
+    TRANSFERRED: '已上架',
+    RELEASED: '已释放',
+  } as const)[status as Exclude<WeightResultResource['slotStatus'], null>] || '未分配'
+}
+
+function putawayStatusType(status: WeightResultResource['slotStatus']) {
+  if (status === 'TRANSFERRED') return 'success'
+  if (status === 'BOUND') return 'warning'
+  if (status === 'RELEASED') return 'info'
+  return 'info'
+}
+
+function guideSlotStatusType(status: WeightPutawaySlotStatus) {
+  return putawayStatusType(status)
+}
+
 function hasWeightDraftChanged(row: WeightResultResource) {
  const draft = weightDrafts.value[row.id]
  if (!draft) return false
@@ -403,8 +428,8 @@ async function removeResult(row: WeightResultResource) {
  try {
    await ElMessageBox.confirm(
      row.recognitionStatus === 'CONFIRMED'
-        ? '删除后将重新计算货物总重量，确认删除这张称重图片吗？'
-        : '确认删除这张称重图片吗？',
+        ? '删除后将重新计算货物总重量；对应库位仍为本票保留，不会释放给其他订单。确认删除这张称重图片吗？'
+        : '对应库位仍为本票保留，不会释放给其他订单。确认删除这张称重图片吗？',
      '删除称重图片',
      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
    )
@@ -532,6 +557,41 @@ defineExpose({ reload: loadWorkspace })
      </LoadErrorState>

      <template v-else>
+        <section v-if="workspace?.palletLocationGuide" class="putaway-guide" aria-labelledby="putaway-guide-title">
+          <div class="putaway-guide__heading">
+            <div>
+              <span class="putaway-guide__eyebrow">整票上架引导</span>
+              <h4 id="putaway-guide-title">整票预留库位</h4>
+            </div>
+            <div class="putaway-guide__metrics" aria-label="整票库位汇总">
+              <div><span>预留库位</span><strong>{{ workspace.palletLocationGuide.slots.map((slot) => slot.locationCode).join(' / ') }}</strong></div>
+              <div><span>预留槽位数</span><strong>{{ workspace.palletLocationGuide.reservedSlotCount }}</strong></div>
+              <div><span>实际托数</span><strong>{{ workspace.palletLocationGuide.actualPalletCount }}</strong></div>
+              <div><span>预留空位数</span><strong>{{ workspace.palletLocationGuide.reservedEmptySlotCount }}</strong></div>
+            </div>
+          </div>
+          <ol class="putaway-guide__slots" aria-label="整票预留槽位">
+            <li
+              v-for="slot in workspace.palletLocationGuide.slots"
+              :key="slot.reservationId"
+              :class="{ 'is-empty': slot.slotStatus === 'RESERVED_EMPTY', 'is-overflow': slot.sharedOverflow }"
+            >
+              <div class="putaway-guide__slot-title">
+                <strong>{{ slot.locationCode }}</strong>
+                <el-tag size="small" effect="light" :type="guideSlotStatusType(slot.slotStatus)">
+                  {{ putawayStatusLabel(slot.slotStatus) }}
+                </el-tag>
+              </div>
+              <span v-if="slot.palletSequence != null">第 {{ slot.palletSequence }} 托 · {{ slot.palletCode || '托盘编码未记录' }}</span>
+              <span v-else>本票预留空位</span>
+              <small v-if="slot.sharedOverflow">A0 临时溢出位</small>
+            </li>
+          </ol>
+        </section>
+        <div v-else-if="workspace" class="putaway-guide-empty" role="status">
+          <strong>尚未分配整票预留库位</strong>
+          <span>称重图片绑定库位后，将按服务端上架引导显示目标库位。</span>
+        </div>
        <LoadErrorState
          v-if="palletError"
          title="可选托盘加载失败"
@@ -579,6 +639,20 @@ defineExpose({ reload: loadWorkspace })
                ><Trash2 :size="16" /></el-button>
              </el-tooltip>
              <div class="weight-card__body">
+                <div class="weight-card__putaway" :class="{ 'is-overflow': row.sharedOverflow }">
+                  <div class="weight-card__putaway-title">
+                    <strong>{{ row.palletSequence == null ? '托盘未分配' : `第 ${row.palletSequence} 托` }}</strong>
+                    <el-tag size="small" effect="light" :type="putawayStatusType(row.slotStatus)">
+                      {{ putawayStatusLabel(row.slotStatus) }}
+                    </el-tag>
+                  </div>
+                  <div class="weight-card__location">
+                    <span>目标库位</span>
+                    <strong>{{ row.locationCode || '未分配' }}</strong>
+                  </div>
+                  <span v-if="row.sharedOverflow" class="weight-card__overflow">A0 临时溢出位</span>
+                  <span v-else-if="row.locationCode" class="weight-card__normal-location">整票预留库位</span>
+                </div>
                <button
                  type="button"
                  class="weight-card__value"
@@ -676,13 +750,44 @@ defineExpose({ reload: loadWorkspace })
 .weight-summary span { color: var(--cc-muted); font-size: 12px; }
 .weight-summary strong { color: #067647; font-size: 16px; }
 .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
- .weight-action-error { margin-bottom: 14px; }
+.weight-action-error { margin-bottom: 14px; }
+.putaway-guide { margin: 14px 0 18px; padding: 16px; border: 1px solid #84caff; border-radius: 8px; background: #f5fbff; }
+.putaway-guide__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
+.putaway-guide__eyebrow { color: #175cd3; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
+.putaway-guide h4 { margin: 3px 0 0; color: #102a56; font-size: 18px; }
+.putaway-guide__metrics { display: grid; grid-template-columns: minmax(180px, 1.8fr) repeat(3, minmax(90px, .6fr)); gap: 10px; flex: 1; max-width: 820px; }
+.putaway-guide__metrics div { display: grid; min-width: 0; gap: 3px; padding: 9px 11px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 6%); }
+.putaway-guide__metrics span { color: #667085; font-size: 11px; }
+.putaway-guide__metrics strong { color: #101828; font-size: 15px; overflow-wrap: anywhere; }
+.putaway-guide__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
+.putaway-guide__slots li { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid #b2ddff; border-radius: 6px; background: #fff; }
+.putaway-guide__slots li.is-empty { border-style: dashed; background: #f9fafb; }
+.putaway-guide__slots li.is-overflow { border-color: #fec84b; background: #fffaeb; }
+.putaway-guide__slot-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.putaway-guide__slot-title strong { color: #1849a9; font-size: 20px; }
+.putaway-guide__slots li.is-overflow .putaway-guide__slot-title strong { color: #93370d; }
+.putaway-guide__slots li > span { color: #475467; font-size: 12px; overflow-wrap: anywhere; }
+.putaway-guide__slots small { width: fit-content; color: #93370d; font-weight: 600; }
+.putaway-guide-empty { display: grid; gap: 3px; margin: 14px 0 18px; padding: 13px 15px; border: 1px dashed #98a2b3; border-radius: 8px; background: #f9fafb; }
+.putaway-guide-empty strong { color: #344054; font-size: 14px; }
+.putaway-guide-empty span { color: #667085; font-size: 12px; }
 .weight-list { min-height: 0; margin-top: 14px; }
 .weight-empty { display: flex; min-height: 0; align-items: center; gap: 10px; padding: 4px 0 0; color: var(--cc-muted); }
 .weight-empty strong { color: #344054; font-size: 14px; }
 .weight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
 .weight-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
- .weight-card__body { padding: 12px; text-align: center; }
+.weight-card__body { padding: 12px; text-align: center; }
+.weight-card__putaway { display: grid; gap: 8px; margin: -12px -12px 12px; padding: 12px; border-bottom: 1px solid #b2ddff; background: #eff8ff; text-align: left; }
+.weight-card__putaway.is-overflow { border-color: #fec84b; background: #fffaeb; }
+.weight-card__putaway-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.weight-card__putaway-title strong { color: #1849a9; font-size: 15px; }
+.weight-card__putaway.is-overflow .weight-card__putaway-title strong { color: #93370d; }
+.weight-card__location { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.weight-card__location span { color: #475467; font-size: 12px; }
+.weight-card__location strong { color: #101828; font-size: 22px; line-height: 1; overflow-wrap: anywhere; }
+.weight-card__overflow, .weight-card__normal-location { width: fit-content; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+.weight-card__overflow { background: #fef0c7; color: #93370d; }
+.weight-card__normal-location { background: #d1e9ff; color: #175cd3; }
 .weight-delete { position: absolute; z-index: 2; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid rgb(255 255 255 / 82%); background: rgb(255 255 255 / 92%); box-shadow: 0 1px 3px rgb(16 24 40 / 16%); }
 .weight-card__value { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; }
 .weight-card__value strong { color: #101828; font-size: 17px; }
@@ -709,6 +814,9 @@ defineExpose({ reload: loadWorkspace })
  .pallet-picker :deep(.el-select) { width: 100%; }
  .weight-heading__actions :deep(.el-button) { width: 100%; min-height: 44px; }
  .weight-summary-group { width: 100%; justify-content: space-between; }
+  .putaway-guide__heading { flex-direction: column; }
+  .putaway-guide__metrics { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .putaway-guide__metrics div:first-child { grid-column: 1 / -1; }
  .weight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }