From ea52c78f9e1c75bba5a2af67bd4bf235681f4cde Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 10 Sep 2026 15:57:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(outbound):=20=E8=AE=A1=E5=88=92=E5=87=BA?=
 =?UTF-8?q?=E5=BA=93=E6=B8=85=E5=8D=95=E6=95=B0=E9=87=8F=E5=89=8D=E7=BD=AE?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=E7=B1=BB=E5=9E=8B=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题
----
计划出库清单的「计划数量」列排在表格最右侧（名称/规格/库位之后）。
表格共 6 列且名称规格会撑宽，最右列容易被容器裁掉，工人反馈"看不见数量"。

改动
----
· 「计划数量」从最右移到「序号」之后，橙色加粗 + 字号放大到 15px；
· 移除「类型」列（material_type）；
· 库位列宽 150 → 170。

注：该列一直存在且数据正常（items_json 的 quantity 字段），
此前是可见性问题而非数据缺失。
---
 inventory-web/src/views/outbound/create.vue | 48 +++++++++++++--------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/inventory-web/src/views/outbound/create.vue b/inventory-web/src/views/outbound/create.vue
index 4415c87..1509ccc 100644
--- a/inventory-web/src/views/outbound/create.vue
+++ b/inventory-web/src/views/outbound/create.vue
@@ -56,17 +56,19 @@
         </div>
         <el-table :data="selectedRequest.items || []" 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 label="库位" width="150" show-overflow-tooltip>
+          <el-table-column label="库位" width="170">
             <template #default="{ row }">
-              <span>{{ row.warehouse_location || '-' }}</span>
               <el-popover
                   v-if="row.base_id"
                   placement="right"
@@ -74,10 +76,12 @@
                   trigger="click"
                   @show="loadAlternatives(row)"
               >
+                <!-- ★ 整个库位格子都是点击热区，工人不必精准点图标 -->
                 <template #reference>
-                  <el-icon class="alt-icon" title="查看备选库位">
-                    <LocationInformation />
-                  </el-icon>
+                  <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">
@@ -100,11 +104,7 @@
                   </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>
+              <span v-else>{{ row.warehouse_location || '-' }}</span>
             </template>
           </el-table-column>
         </el-table>
@@ -973,13 +973,27 @@ onUnmounted(() => {
 .planned-title { font-weight: bold; font-size: 14px; color: #67C23A; }
 
 /* ★ 备选库位：库位旁的图标与浮层 */
-.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; }
+
+/* 图标放大到 18px，并加圆形底衬，在触屏上更易命中 */
+.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 {