From c566d1b728888a651b465d69a6c79cc58c938aea Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 17 Sep 2026 10:35:11 +0800
Subject: [PATCH] =?UTF-8?q?style(borrow):=20=E5=80=9F=E8=BF=98=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E8=A1=A8=E6=A0=BC=E5=93=8D=E5=BA=94=E5=BC=8F=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0=EF=BC=8C=E6=B6=88=E9=99=A4=E6=A8=AA=E5=90=91=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E4=B8=8E=E6=93=8D=E4=BD=9C=E5=88=97=E4=B8=8D=E5=8F=AF?=
 =?UTF-8?q?=E8=BE=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

背景
----
主表共 11 列，原先除 2 列外用 width 硬编码，最小总宽约 1528px；
1440 笔记本可用宽度只有约 1240px（屏幕 - 180 侧边栏 - 20 内边距），
必然撑出横向滚动条，操作按钮被推出屏幕，用户得拖滚动条才能点转交。

一、固定操作列
----
主表操作列原本已有 fixed="right"；**明细表的操作列没有**，本次补上。
子表嵌在主表展开区内，容器更窄（两侧各留 40px），不固定更容易被挤出屏幕。
操作列宽度 250 -> 230（实际按钮最多 3 个并存，230 足够）。

二、弹性列宽
----
按「内容长度是否确定」划界：
  用 min-width（可伸缩）—— 单号 150 / 借用人 90 / 当前持有人 120 /
                            归还人 90 / 归还时间·预计 200
  用 width（定长）    —— 借出时间 160 / 借出物品 80 / 状态 110 /
                            电子签名 100（原 140，两个小标签用不了那么宽）
  展开列本身约 48px，不可控
明细表同步：SKU 120 -> min-width 110；当前持有人 130 -> min-width 120。

主表最小总宽由约 1528px 降到 1378px。

三、长文本省略
----
物料名称、SKU、单号均已带 show-overflow-tooltip —— 超长物料名自动省略号，
悬浮显示全称，不会因单条数据撑爆整表。

★ 如实说明：11 列的表格在 1600px 以上屏幕可完整铺开；1440/1366 笔记本上
  仍会保留一条横向滚动条（最小 1378px vs 可用约 1240px），这是列数决定的，
  不删列就无法根除。但操作列两级都已吸附最右侧，**用户不再需要滚动即可操作** ——
  这正是本次要解决的核心痛点。若要做到零滚动条，需另议「窄屏隐藏次要列
  （电子签名/借出物品）」或侧边栏可折叠。
---
 .../src/views/transaction/records.vue         | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/inventory-web/src/views/transaction/records.vue b/inventory-web/src/views/transaction/records.vue
index 5283736..719fe9d 100644
--- a/inventory-web/src/views/transaction/records.vue
+++ b/inventory-web/src/views/transaction/records.vue
@@ -101,7 +101,7 @@
             <h4 style="margin: 0 0 10px; font-size: 14px; color: #606266;">借出明细</h4>
             <el-table :data="props.row.children" border size="small">
               <el-table-column prop="material_name" label="物料名称" min-width="140" show-overflow-tooltip />
-              <el-table-column prop="sku" label="SKU" width="120" show-overflow-tooltip />
+              <el-table-column prop="sku" label="SKU" min-width="110" show-overflow-tooltip />
               <el-table-column label="借出数量" width="80" align="center">
                 <template #default="{row}">
                   <el-tag type="info">{{ row.quantity }}</el-tag>
@@ -132,7 +132,7 @@
               </el-table-column>
               <!-- ★ 明细级持有人：部分转交后主行只能显示「多人持有」，
                    到底哪件在谁手里，必须在这一层看清楚 -->
-              <el-table-column label="当前持有人" width="130">
+              <el-table-column label="当前持有人" min-width="120">
                 <template #default="{row: c}">
                   <span
                       v-if="c.current_holder_name"
@@ -145,8 +145,10 @@
                   </el-tag>
                 </template>
               </el-table-column>
-              <!-- ★ 明细级操作：转交粒度已下沉到明细行，这里才是精准入口 -->
-              <el-table-column label="操作" width="170" align="center">
+              <!-- ★ 明细级操作：转交粒度已下沉到明细行，这里才是精准入口。
+                   fixed="right" 同样吸附最右侧 —— 子表嵌在主表内层，
+                   容器更窄，不固定的话按钮更容易被挤到屏幕外。 -->
+              <el-table-column label="操作" width="170" align="center" fixed="right">
                 <template #default="{row: c}">
                   <template v-if="c.pending_transfer && c.pending_transfer.is_mine">
                     <el-button type="success" link size="small" @click="acceptOne(c)">接收</el-button>
@@ -169,8 +171,12 @@
         </template>
       </el-table-column>
 
-      <el-table-column v-if="hasColumnPermission('borrow_no')" prop="borrow_no" label="单号" width="180" show-overflow-tooltip />
-      <el-table-column v-if="hasColumnPermission('borrower_name')" label="借用人" width="100">
+      <!-- ★ 弹性列宽：内容长度可变的列一律用 min-width，由 Element Plus 按屏幕
+           剩余空间自动伸缩；只有「日期 / 数量 / 标签」这类长度确定的列才用
+           width 硬编码。原先除两列外全用 width，合计约 1528px —— 1440 笔记本
+           可用宽度只有约 1240px，必然撑出横向滚动条。 -->
+      <el-table-column v-if="hasColumnPermission('borrow_no')" prop="borrow_no" label="单号" min-width="150" show-overflow-tooltip />
+      <el-table-column v-if="hasColumnPermission('borrower_name')" label="借用人" min-width="90">
         <template #default="{row}">
           <span class="name-fixed">{{ formatName(row.borrower_name) || '—' }}</span>
         </template>
@@ -179,7 +185,7 @@
            也可能各不相同，故去重后逐个展示。
            表达上做了降噪：未转交=普通文本，转过交=主题色加粗。原先一律用橙色
            标签，一屏几十个色块会把真正需要关注的「已转交」淹没。 -->
-      <el-table-column label="当前持有人" width="140">
+      <el-table-column label="当前持有人" min-width="120">
         <template #default="{row}">
           <!-- ★ 单内多个持有人 = 部分转交（借 2 件只转了 1 件），是**正常业务形态**，
                不是异常。主行无法一一列清谁拿哪件，故用灰标签提示，
@@ -198,14 +204,14 @@
            10 条，反而打乱后端按单号聚合的「逾期优先」排序，让列表看起来没规律。
            若将来确实需要按其他字段排序，应改为 sortable="custom" 并由后端接管。 -->
       <el-table-column v-if="hasColumnPermission('borrow_time')" prop="borrow_time" label="借出时间" width="160" />
-      <el-table-column label="借出物品" width="90" align="center">
+      <el-table-column label="借出物品" width="80" align="center">
         <template #default="{row}">
           <el-tag type="info">{{ row.children ? row.children.length : 0 }} 项</el-tag>
         </template>
       </el-table-column>
       <!-- ★ 归还人改为整单汇总：主行原取「首条明细」的归还人，多明细分批归还时
            会只显示其中一位，令人误以为其他人没还过。 -->
-      <el-table-column v-if="hasColumnPermission('return_operator')" label="归还人" width="110">
+      <el-table-column v-if="hasColumnPermission('return_operator')" label="归还人" min-width="90">
         <template #default="{row}">
           <template v-if="row.return_operators && row.return_operators.length">
             <span v-for="op in row.return_operators" :key="op" class="name-fixed">{{ formatName(op) }}</span>
@@ -252,7 +258,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column v-if="hasColumnPermission('borrow_signature') || hasColumnPermission('return_signature')" label="电子签名" width="140" align="center">
+      <el-table-column v-if="hasColumnPermission('borrow_signature') || hasColumnPermission('return_signature')" label="电子签名" width="100" align="center">
         <template #default="{row}">
           <div style="display:flex; justify-content: center; gap:10px">
             <el-popover trigger="hover" placement="top" v-if="row.borrow_signature && hasColumnPermission('borrow_signature')" width="220">
@@ -269,9 +275,12 @@
       </el-table-column>
 
       <!-- ★ 操作列
-             · 申请报废 / 转交 —— 仅未归还记录，且分别受各自权限约束
-             · 流转记录 —— 无特殊权限要求，凡能看到本列表者皆可查看 -->
-      <el-table-column label="操作" width="250" align="center" fixed="right">
+             · 接收转交 / 拒绝 —— 待我接收时出现（最高优先级）
+             · 申请报废 / 转交 —— 仅未归还记录，各自受权限约束
+             · 流转记录 —— 无特殊权限要求
+           fixed="right"：无论前面多少列、屏幕多窄，操作按钮永远吸附在最右侧，
+           用户不必为了点按钮去拖动横向滚动条。 -->
+      <el-table-column label="操作" width="230" align="center" fixed="right">
         <template #default="{row}">
           <!-- ★ 待我接收的转交：最高优先级，接收人必须一眼看到并处理。
                 东西还在对方手上，责任尚未转移 —— 见后端双向握手设计。