feat(outbound): 备选库位可见性，让「物理覆盖」不再盲扫

问题 ---- 预占会把货锁定在某个库位，但工人到现场可能进不去/找不到该库位，需要改扫同物料的其它批次。后端执行端已支持按 base_id 校验、允许换批次，但系统从不告诉他「还有哪些库位有货」—— 工人只能凭记忆或挨个翻。后端：新增 GET /api/v1/outbound/alternatives -------------------------------------------- 入参 base_id（必填）、source_table/stock_id（可选，用于标注推荐行）返回该物料全部可用库存行 + 合计可用量，推荐行置顶、其余按可用量降序。为什么不复用 stock/list 或 bom-match-stock 的查询模式：那两处按 stock_quantity > 0 过滤，会把「有货但已被别单全部预占」的库位也列出来，工人跑过去才发现拿不到。实测库中有 14 行处于该状态。本接口按 available_quantity > 0 过滤，只给真正能拿的库位。前端：计划清单库位列加图标 + popover ------------------------------------ [推荐] Y1/2/1 可用 5 ← 本单锁定行（来自 items_json 的 stock_id） [备选] Y2/3/4 可用 10 [备选] Z1/1/1 可用 2 三处取舍： · trigger="click" 而非 hover —— 车间用扫码枪/触摸屏，hover 在触屏不可用 · @show 时才发请求 —— 计划清单可能几十行，渲染即请求会打出一片并发 · 附提示文案「现场取不到推荐库位时可直接扫备选库位条码出库」注：历史单据的 items_json 无 stock_id，此时所有库位显示为「备选」（不影响可用性，仅少了推荐标记）；预占改造后新提交的单可正确标注。实测：造 3 批次 Y1/2/1(5) Y2/3/4(10) Z1/1/1(2)，预占首个后其 available=0，接口正确排除该库位，返回两个备选、合计可用 12。
2026-09-10 14:59:17 +08:00
parent b57c21a4cd
commit 209b29c10f
3 changed files with 231 additions and 4 deletions
--- a/inventory-web/src/api/outbound.ts
+++ b/inventory-web/src/api/outbound.ts
@ -170,4 +170,28 @@ export function bomMatchStock(payload: BomRequirement[] | { requirements: BomReq
        method: 'post',
        data
    })
-}
+}
+/**
+ * 备选库位查询 —— 为「物理覆盖」提供可见性
+ *
+ * 申请单把货预占在某个库位后，工人现场可能进不去该库位，需要改扫同物料的
+ * 其它批次。本接口按 available_quantity > 0 返回**真正能拿**的库位，
+ * 并标注哪一条是本单锁定的推荐行。
+ *
+ * @param baseId 物料 ID（申请明细里的 base_id）
+ * @param locked 本单锁定的批次（用于标注「推荐」），可选
+ */
+export function getStockAlternatives(
+    baseId: number,
+    locked?: { stock_id?: number; source_table?: string }
+) {
+    return request({
+        url: '/v1/outbound/alternatives',
+        method: 'get',
+        params: {
+            base_id: baseId,
+            stock_id: locked?.stock_id,
+            source_table: locked?.source_table
+        }
+    })
+}
--- a/inventory-web/src/views/outbound/create.vue
+++ b/inventory-web/src/views/outbound/create.vue
@ -63,7 +63,45 @@
          </el-table-column>
          <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
          <el-table-column prop="spec_model" label="规格" min-width="100" show-overflow-tooltip />
-          <el-table-column prop="warehouse_location" label="库位" width="100" show-overflow-tooltip />
+          <!-- ★ 库位 + 备选库位：现场进不去时可改扫其它批次 -->
+          <el-table-column label="库位" width="150" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span>{{ row.warehouse_location || '-' }}</span>
+              <el-popover
+                  v-if="row.base_id"
+                  placement="right"
+                  :width="340"
+                  trigger="click"
+                  @show="loadAlternatives(row)"
+              >
+                <template #reference>
+                  <el-icon class="alt-icon" title="查看备选库位">
+                    <LocationInformation />
+                  </el-icon>
+                </template>
+
+                <div v-loading="altLoading" class="alt-panel">
+                  <div class="alt-title">
+                    该物料的可选库位
+                    <span v-if="altTotal > 0" class="alt-total">合计可用 {{ altTotal }}</span>
+                  </div>
+                  <div v-if="!altLoading && altItems.length === 0" class="alt-empty">
+                    暂无其它可用库位
+                  </div>
+                  <div v-for="a in altItems" :key="a.source_table + '_' + a.stock_id" class="alt-row">
+                    <el-tag :type="a.is_locked ? 'success' : 'info'" size="small" effect="plain">
+                      {{ a.is_locked ? '推荐' : '备选' }}
+                    </el-tag>
+                    <span class="alt-loc">{{ a.warehouse_location || '(无库位)' }}</span>
+                    <span class="alt-qty">可用 {{ a.available_quantity }}</span>
+                  </div>
+                  <div v-if="altItems.length" class="alt-hint">
+                    现场取不到推荐库位时，可直接扫备选库位的条码出库
+                  </div>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
          <el-table-column label="计划数量" width="90" align="center">
            <template #default="{ row }">
              <span style="color: #E6A23C; font-weight: bold;">{{ row.quantity ?? '-' }}</span>
@ -335,9 +373,9 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick, onUnmounted, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Scissor, EditPen, Delete, CameraFilled, Close, Refresh, Select } from '@element-plus/icons-vue'
+import { Scissor, EditPen, Delete, CameraFilled, Close, Refresh, Select, LocationInformation } from '@element-plus/icons-vue'
 import QrScanner from '@/components/QrScanner/index.vue'
-import { getStockByBarcode, submitOutbound, getOutboundList, getApprovalRequestList } from '@/api/outbound'
+import { getStockByBarcode, submitOutbound, getOutboundList, getApprovalRequestList, getStockAlternatives } from '@/api/outbound'
 import { uploadFile } from '@/api/common/upload'
 import { useUserStore } from '@/stores/user'

@ -403,6 +441,39 @@ const selectedRequestId = computed({

 const plannedItems = computed(() => selectedRequest.value?.items ?? [])

+// ============================================================================
+// ★ 备选库位
+//
+// 背景：申请单已把货预占在某个库位，工人到现场发现该库位进不去/找不到，
+// 需要改扫同物料的其它批次（后端执行端已支持「物理覆盖」，按 base_id 校验
+// 身份、允许换批次）。但改造前系统不告诉他还有哪些库位有货，只能凭记忆翻。
+//
+// 这里按需查询：点击图标才发请求，避免计划清单渲染时打出一片请求。
+// 后端按 available_quantity > 0 过滤，只列**真正能拿**的库位。
+// ============================================================================
+const altLoading = ref(false)
+const altItems = ref<any[]>([])
+const altTotal = ref(0)
+
+const loadAlternatives = async (row: any) => {
+  if (!row?.base_id) return
+  altLoading.value = true
+  altItems.value = []
+  altTotal.value = 0
+  try {
+    const res: any = await getStockAlternatives(row.base_id, {
+      stock_id: row.stock_id,
+      source_table: row.source_table,
+    })
+    altItems.value = res?.data?.items || []
+    altTotal.value = res?.data?.total_available || 0
+  } catch (e) {
+    ElMessage.error('查询备选库位失败')
+  } finally {
+    altLoading.value = false
+  }
+}
+
 // ★ 扫码进度：总需扫数（计划数量总和）/ 已扫数（购物车数量总和）
 const scanTotalQty = computed(() =>
  plannedItems.value.reduce((sum, it) => sum + (Number(it.quantity) || 0), 0)
@ -901,6 +972,45 @@ onUnmounted(() => {
 }
 .planned-title { font-weight: bold; font-size: 14px; color: #67C23A; }

+/* ★ 备选库位：库位旁的图标与浮层 */
+.alt-icon {
+  margin-left: 4px;
+  color: #409EFF;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.alt-icon:hover { color: #66b1ff; }
+
+.alt-panel { font-size: 13px; }
+.alt-title {
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.alt-total { font-weight: normal; color: #67C23A; font-size: 12px; }
+.alt-empty { color: #909399; font-size: 12px; padding: 6px 0; }
+.alt-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0;
+  border-bottom: 1px dashed #ebeef5;
+}
+.alt-row:last-of-type { border-bottom: none; }
+.alt-loc { flex: 1; color: #409EFF; font-weight: 500; }
+.alt-qty { color: #606266; font-size: 12px; }
+.alt-hint {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #ebeef5;
+  color: #E6A23C;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 /* 扫码区（卡片内触发器） */
 .scan-section { margin-bottom: 20px; }
 .scan-progress {