feat(borrow): 扫码借库页的清单对齐扫码出库页

问题 ---- 扫码借库页（views/transaction/borrow.vue）的「审批计划清单」与扫码出库页的「计划出库清单」样式不一致： · 标题：审批计划清单 / 计划出库清单 · 类型列：借库有、出库已删 · 数量列：借库用「审批数量」且排在最右；出库是「计划数量」且前置 · 备选库位：借库没有 · 清单容器：借库灰底 #f5f7fa，出库是淡绿 #f0f9eb + 边框改动（五项全部对齐） -------------------- · 标题改为「计划借用清单」； · 移除「类型」列； · 「计划数量」前置到序号之后，橙色 #E6A23C 加粗 15px； · 新增备选库位：库位格子整体可点击 + popover（与出库页逐字相同的实现）； · 清单容器改为淡绿背景 #f0f9eb + #e1f3d8 边框 + 圆角，标题绿色加粗。备选库位复用了出库模块的 /alternatives 端点。已核实前提：借库申请单的 items_json 由预占改造写入 base_id / stock_id / source_table，故「推荐/备选」标注可正常工作（对历史单据无这些字段时会安全回退为纯文本）。定位说明 -------- 借库有三个页面（选单 / 扫码 / 审批），上一轮按「计划清单」关键词搜索时命中了审批页的展开行，改错了位置。本提交修正的是真正的扫码借库页。
2026-09-10 16:17:50 +08:00
parent f8267c6ee2
commit a07432981e
1 changed files with 139 additions and 13 deletions
--- a/inventory-web/src/views/transaction/borrow.vue
+++ b/inventory-web/src/views/transaction/borrow.vue
@ -39,25 +39,63 @@
        <p class="select-tip">仅显示已通过（status=1）的审批单</p>
      </div>

-      <!-- ★ 审批计划清单预览 -->
+      <!-- ★ 计划借用清单预览（与扫码出库页的「计划出库清单」对齐） -->
      <div v-if="selectedApproval" class="planned-items-section">
        <div class="planned-header">
-          <span class="planned-title">审批计划清单</span>
+          <span class="planned-title">计划借用清单</span>
          <el-tag type="success" size="small">{{ plannedItems.length }} 种</el-tag>
        </div>
        <el-table :data="plannedItems" border size="small" style="width: 100%;">
          <el-table-column type="index" label="序号" width="60" align="center" />
-          <el-table-column label="类型" width="80" align="center">
+          <!-- ★ 计划数量前置（与出库页一致）：原先排在表格最右，列多时易被裁掉 -->
+          <el-table-column label="计划数量" width="100" align="center">
            <template #default="{ row }">
-              <el-tag size="small" type="info">{{ row.material_type || '-' }}</el-tag>
+              <span style="color: #E6A23C; font-weight: bold; font-size: 15px;">
+                {{ row.quantity ?? '-' }}
+              </span>
            </template>
          </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="90" align="center">
+          <!-- ★ 库位 + 备选库位：现场进不去时可改扫其它批次 -->
+          <el-table-column label="库位" width="170">
            <template #default="{ row }">
-              <span style="color: #E6A23C; font-weight: bold;">{{ row.quantity ?? '-' }}</span>
+              <el-popover
+                  v-if="row.base_id"
+                  placement="right"
+                  :width="340"
+                  trigger="click"
+                  @show="loadAlternatives(row)"
+              >
+                <!-- ★ 整个库位格子都是点击热区，工人不必精准点图标 -->
+                <template #reference>
+                  <span class="loc-cell" title="点击查看该物料的所有可选库位">
+                    <span class="loc-text">{{ row.warehouse_location || '-' }}</span>
+                    <el-icon class="alt-icon"><LocationInformation /></el-icon>
+                  </span>
+                </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>
+              <span v-else>{{ row.warehouse_location || '-' }}</span>
            </template>
          </el-table-column>
        </el-table>
@ -318,9 +356,9 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick, onUnmounted, 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 } from '@/api/outbound'
+import { getStockByBarcode, getStockAlternatives } from '@/api/outbound'
 import { dispatchBorrow, getBorrowApprovalList } from '@/api/transaction'
 import { uploadFile } from '@/api/common/upload'
 import { useUserStore } from '@/stores/user'
@ -367,6 +405,37 @@ const selectedApproval = computed(() =>

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

+// ============================================================================
+// ★ 备选库位（与扫码出库页同款）
+//
+// 申请单已把货预占在某库位，工人现场可能进不去，需要改扫同物料的其它批次
+// （后端执行端按 base_id 校验身份、允许换批次）。此处复用出库模块的
+// /alternatives 端点：按 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)
@ -830,10 +899,67 @@ onUnmounted(() => {
 .approval-request-select { margin-bottom: 16px; }
 .select-tip { color: #909399; font-size: 12px; margin: 4px 0 0 0; }

-/* 计划清单 */
-.planned-items-section { margin-bottom: 16px; background: #f5f7fa; border-radius: 6px; padding: 12px; }
-.planned-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
-.planned-title { font-size: 13px; font-weight: bold; color: #606266; }
+/* 计划清单：与扫码出库页的「计划出库清单」保持一致的视觉 */
+.planned-items-section {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: #f0f9eb;
+  border: 1px solid #e1f3d8;
+  border-radius: 8px;
+}
+.planned-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.planned-title { font-weight: bold; font-size: 14px; color: #67C23A; }
+
+/* ★ 备选库位：库位格子整体可点击（与扫码出库页同款） */
+.loc-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.loc-cell:hover { background-color: #ecf5ff; }
+.loc-cell .loc-text { color: #409EFF; }
+
+.alt-icon {
+  font-size: 18px;
+  color: #409EFF;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.loc-cell:hover .alt-icon { 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; }