feat(borrow): 借库审批页备选库位，与出库保持一致

借库的执行入口在审批页 —— 展开行即为工人查看/去扫码的物料明细。申请单已把货预占在某库位，工人现场可能进不去，需要改扫同物料的其它批次（后端执行端按 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，故推荐行可正确标注；改造前的历史单无这些字段，此时全部显示为「备选」。
2026-09-10 15:02:22 +08:00
parent 24b7fd8373
commit 8c18586a94
1 changed files with 113 additions and 2 deletions
--- 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;
 }