duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(borrow): 借还记录表格响应式改造，消除横向滚动与操作列不可达

Browse Source 
背景
----
主表共 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），这是列数决定的，
  不删列就无法根除。但操作列两级都已吸附最右侧，**用户不再需要滚动即可操作** ——
  这正是本次要解决的核心痛点。若要做到零滚动条，需另议「窄屏隐藏次要列
  （电子签名/借出物品）」或侧边栏可折叠。
This commit is contained in:
yueli
2026-09-17 10:35:11 +08:00
parent 2c732a9a3a
commit c566d1b728
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
inventory-web/src/views/transaction/records.vue
View File

@ -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}">
<!-- ★ 待我接收的转交：最高优先级，接收人必须一眼看到并处理。
东西还在对方手上，责任尚未转移 —— 见后端双向握手设计。