From 8c18586a9458dbe0dd174c430d13570f5d603ace Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 10 Sep 2026 15:02:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(borrow):=20=E5=80=9F=E5=BA=93=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E9=A1=B5=E5=A4=87=E9=80=89=E5=BA=93=E4=BD=8D=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8E=E5=87=BA=E5=BA=93=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

借库的执行入口在审批页 —— 展开行即为工人查看/去扫码的物料明细。
申请单已把货预占在某库位，工人现场可能进不去，需要改扫同物料的其它
批次（后端执行端按 base_id 校验身份、允许换批次），但改造前系统不告诉
他还有哪些库位有货。

复用出库模块的 /api/v1/outbound/alternatives 端点（逻辑完全一致：
按 available_quantity > 0 过滤，只给真正能拿的库位，排除已被别单占满的行），
在明细表的库位列加图标 + popover：

  [推荐] L5/1/2/1  可用 840      ← 本单锁定行
  [备选] L2/1/2/1  可用 1

与出库页同款取舍：
  · trigger="click" —— 车间用扫码枪/触摸屏，hover 在触屏不可用
  · @show 时才发请求 —— 展开单据时不会打出一片并发查询
  · 附提示文案「现场取不到推荐库位时可直接扫备选库位条码借用」

注：借库申请经预占改造后 items_json 已带 base_id/stock_id/source_table，
故推荐行可正确标注；改造前的历史单无这些字段，此时全部显示为「备选」。
---
 .../src/views/borrow/approval/index.vue       | 115 +++++++++++++++++-
 1 file changed, 113 insertions(+), 2 deletions(-)

diff --git a/inventory-web/src/views/borrow/approval/index.vue b/inventory-web/src/views/borrow/approval/index.vue
index f4e96ec..c310f2a 100644
--- a/inventory-web/src/views/borrow/approval/index.vue
+++ b/inventory-web/src/views/borrow/approval/index.vue
@@ -43,7 +43,45 @@
               <el-table-column type="index" label="序号" width="60" align="center" />
               <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
               <el-table-column prop="spec_model" label="规格型号" min-width="120" show-overflow-tooltip />
-              <el-table-column prop="warehouse_location" label="库位" width="120" show-overflow-tooltip />
+              <!-- ★ 库位 + 备选库位：现场进不去时可改扫其它批次 -->
+              <el-table-column label="库位" width="150" show-overflow-tooltip>
+                <template #default="{ row: item }">
+                  <span>{{ item.warehouse_location || '-' }}</span>
+                  <el-popover
+                      v-if="item.base_id"
+                      placement="right"
+                      :width="340"
+                      trigger="click"
+                      @show="loadAlternatives(item)"
+                  >
+                    <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 prop="quantity" label="计划数量" width="100" align="center">
                 <template #default="{ row: item }">
                   <span style="color: #F56C6C; font-weight: bold;">{{ item.quantity ?? '-' }}</span>
@@ -197,9 +235,10 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { Refresh, Warning } from '@element-plus/icons-vue'
+import { Refresh, Warning, LocationInformation } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getBorrowApprovalList, approveBorrowRequest, closeBorrowRequest } from '@/api/transaction'
+import { getStockAlternatives } from '@/api/outbound'
 import { useUserStore } from '@/stores/user'
 
 const userStore = useUserStore()
@@ -243,6 +282,39 @@ const pageSize = ref(20)
 const filterStatus = ref<number | ''>(0)  // 默认筛选待审批
 const expandedRows = ref<string[]>([])
 
+// ============================================================================
+// ★ 备选库位
+//
+// 借库的执行入口在审批页：展开行即为工人查看/去扫码的物料明细。申请单已把
+// 货预占在某库位，工人现场可能进不去，需要改扫同物料的其它批次（后端执行端
+// 按 base_id 校验身份、允许换批次）。此处复用出库模块的 /alternatives 端点，
+// 逻辑完全一致：按 available_quantity > 0 过滤，只给真正能拿的库位。
+//
+// 点击图标才发请求，避免展开单据时打出一片并发查询。
+// ============================================================================
+const altLoading = ref(false)
+const altItems = ref<any[]>([])
+const altTotal = ref(0)
+
+const loadAlternatives = async (item: any) => {
+  if (!item?.base_id) return
+  altLoading.value = true
+  altItems.value = []
+  altTotal.value = 0
+  try {
+    const res: any = await getStockAlternatives(item.base_id, {
+      stock_id: item.stock_id,
+      source_table: item.source_table,
+    })
+    altItems.value = res?.data?.items || []
+    altTotal.value = res?.data?.total_available || 0
+  } catch (e) {
+    ElMessage.error('查询备选库位失败')
+  } finally {
+    altLoading.value = false
+  }
+}
+
 // 驳回 Dialog
 const rejectDialogVisible = ref(false)
 const currentRejectRow = ref<any>(null)
@@ -414,6 +486,45 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* ★ 备选库位：库位旁的图标与浮层（与出库执行页同款） */
+.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;
+}
+
 .app-container {
   padding: 20px;
 }