From d69ec9f5ecb386dc962c7bc47eed8ad67c92bb56 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 10 Sep 2026 15:57:26 +0800
Subject: [PATCH] =?UTF-8?q?style(outbound,borrow):=20=E5=BA=93=E4=BD=8D?=
 =?UTF-8?q?=E6=A0=BC=E5=AD=90=E6=95=B4=E4=BD=93=E5=8F=AF=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=EF=BC=8C=E5=9B=BE=E6=A0=87=E6=94=BE=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题
----
备选库位浮层的触发区原先只有一个小图标（默认 1em），工人需要精准
点击才能弹出 —— 戴手套或在触屏上操作时命中率很低。

改动
----
· #reference 从「仅图标」改为「库位文字 + 图标」整体，
  点格子任意位置都能弹出；
· 悬停时整格高亮（#ecf5ff），给出可点击的视觉反馈；
· 图标放大到 18px；
· 库位文字着蓝色（#409EFF），并加 title 提示；
· 无 base_id 时回退为纯文本（历史单据）——原先这种情况下会渲染空白。

出库执行页与借库审批页同款实现，一并同步。

注：编辑过程中曾因残留旧的 popover 闭合标签导致模板结构损坏
（SFC PARSE ERR），已通过编译检查发现并修复。
---
 .../src/views/borrow/approval/index.vue       | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/inventory-web/src/views/borrow/approval/index.vue b/inventory-web/src/views/borrow/approval/index.vue
index 11e2d71..5698738 100644
--- a/inventory-web/src/views/borrow/approval/index.vue
+++ b/inventory-web/src/views/borrow/approval/index.vue
@@ -44,9 +44,8 @@
               <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 label="库位" width="150" show-overflow-tooltip>
+              <el-table-column label="库位" width="170">
                 <template #default="{ row: item }">
-                  <span>{{ item.warehouse_location || '-' }}</span>
                   <el-popover
                       v-if="item.base_id"
                       placement="right"
@@ -54,10 +53,12 @@
                       trigger="click"
                       @show="loadAlternatives(item)"
                   >
+                    <!-- ★ 整个库位格子都是点击热区，工人不必精准点图标 -->
                     <template #reference>
-                      <el-icon class="alt-icon" title="查看备选库位">
-                        <LocationInformation />
-                      </el-icon>
+                      <span class="loc-cell" title="点击查看该物料的所有可选库位">
+                        <span class="loc-text">{{ item.warehouse_location || '-' }}</span>
+                        <el-icon class="alt-icon"><LocationInformation /></el-icon>
+                      </span>
                     </template>
 
                     <div v-loading="altLoading" class="alt-panel">
@@ -80,6 +81,7 @@
                       </div>
                     </div>
                   </el-popover>
+                  <span v-else>{{ item.warehouse_location || '-' }}</span>
                 </template>
               </el-table-column>
               <el-table-column prop="quantity" label="计划数量" width="100" align="center">
@@ -493,13 +495,26 @@ onMounted(() => {
 
 <style scoped>
 /* ★ 备选库位：库位旁的图标与浮层（与出库执行页同款） */
-.alt-icon {
-  margin-left: 4px;
-  color: #409EFF;
+/* 库位格子整体可点击：工人不必精准点小图标，点单元格任意位置即可 */
+.loc-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border-radius: 4px;
   cursor: pointer;
-  vertical-align: middle;
+  transition: background-color 0.2s;
 }
-.alt-icon:hover { color: #66b1ff; }
+.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 {