From f8267c6ee2924abca2c2a8ac12ed3cc8f786d4aa Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 10 Sep 2026 16:17:42 +0800
Subject: [PATCH] =?UTF-8?q?style(borrow):=20=E5=AE=A1=E6=89=B9=E9=A1=B5?=
 =?UTF-8?q?=E7=89=A9=E6=96=99=E6=98=8E=E7=BB=86=E6=95=B0=E9=87=8F=E5=89=8D?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=B8=85=E5=8D=95=E6=A0=87=E9=A2=98=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E5=87=BA=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

背景
----
借库审批页展开行的「计划数量」排在表格最右（库位之后），与扫码出库页
的前置做法不一致 —— 列多时容易被容器裁掉，工人看不到数量。

改动
----
· 计划数量从最右移到序号之后，橙色加粗 + 字号 15px；
· 清单标题由朴素文字改为与出库页同款的标题栏结构
  （planned-header + planned-title + 绿色标签）；
· 补上 .planned-header / .planned-title 样式定义（该页原先没有）。

注：本轮定位时曾误以为这是用户反馈的「扫码借库页」，实际扫码借库页是
views/transaction/borrow.vue（见下一提交）。此处是同类问题的另一处，
一并修正，非误改。
---
 .../src/views/borrow/approval/index.vue       | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/inventory-web/src/views/borrow/approval/index.vue b/inventory-web/src/views/borrow/approval/index.vue
index 5698738..dc932d1 100644
--- a/inventory-web/src/views/borrow/approval/index.vue
+++ b/inventory-web/src/views/borrow/approval/index.vue
@@ -30,9 +30,11 @@
       <el-table-column type="expand" width="60" align="center">
         <template #default="{ row }">
           <div style="padding: 12px 24px; background: #f5f7fa;">
-            <p style="margin: 0 0 10px 0; font-weight: bold; font-size: 13px; color: #606266;">
-              物料明细（共 {{ row.items?.length || 0 }} 项）
-            </p>
+            <!-- 与扫码出库页的「计划出库清单」标题样式对齐 -->
+            <div class="planned-header">
+              <span class="planned-title">计划借用清单</span>
+              <el-tag type="success" size="small">{{ row.items?.length || 0 }} 种</el-tag>
+            </div>
             <el-table
                 v-if="row.items?.length"
                 :data="row.items"
@@ -41,6 +43,15 @@
                 style="width: 100%;"
             >
               <el-table-column type="index" label="序号" width="60" align="center" />
+              <!-- ★ 计划数量前置：与扫码出库页保持一致。
+                   原先排在表格最右（库位之后），列多时容易被容器裁掉看不见。 -->
+              <el-table-column label="计划数量" width="100" align="center">
+                <template #default="{ row: item }">
+                  <span style="color: #E6A23C; font-weight: bold; font-size: 15px;">
+                    {{ item.quantity ?? '-' }}
+                  </span>
+                </template>
+              </el-table-column>
               <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 />
               <!-- ★ 库位 + 备选库位：现场进不去时可改扫其它批次 -->
@@ -84,11 +95,6 @@
                   <span v-else>{{ item.warehouse_location || '-' }}</span>
                 </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>
-                </template>
-              </el-table-column>
             </el-table>
             <el-empty v-else description="暂无物料明细" :image-size="60" />
           </div>
@@ -494,6 +500,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* ★ 计划清单标题：与扫码出库页的「计划出库清单」保持一致 */
+.planned-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.planned-title { font-weight: bold; font-size: 14px; color: #67C23A; }
+
 /* ★ 备选库位：库位旁的图标与浮层（与出库执行页同款） */
 /* 库位格子整体可点击：工人不必精准点小图标，点单元格任意位置即可 */
 .loc-cell {