style(borrow): 持有人高亮统一为条件蓝色,姓名按两字补全角空格等宽

一、当前持有人高亮策略统一
----
还库页(return.vue)该列原为橙色标签(type="warning"),与列表页在上一轮
已完成的条件高亮不一致。现统一为:
  · 当前持有人 ≠ 借用人(确曾转交)→ 主题色 var(--el-color-primary) 加粗
  · 两者同一人(常态)→ 普通深色文本,不做任何高亮

比对前把两侧都归一化到「斜杠前段」:历史数据可能混入「姓名/拼音」的完整
username 写法,不归一化会把同一人误判成转交,让整列无故飘蓝。

(records.vue 该列在 ba5394f 已是此策略,本轮仅同步调用 formatName。)

二、姓名两字补全角空格,实现等宽对齐
----
新增 formatName()(放在 src/utils/format.ts,而非各组件内复制 —— 列表页与
还库页都要用,规则改动只需改一处):

  '高雪'     -> '高 雪'    U+3000 全角空格,占一个汉字宽
  '郭俊玥'   -> '郭俊玥'
  '欧阳娜娜' -> '欧阳娜娜'
  'AB'       -> 'AB'        纯拉丁不补,否则渲染出 'A B' 怪相
  null/'测试01'/混合字符 -> 原样

★ 纯展示层:只在模板 {{ formatName(row.borrower_name) }} 中调用,
  row.borrower_name 等底层对象**一个字节都没动**。
  姓名是转交/归还责任链的匹配键(records.vue 的 currentHolderList、
  return.vue 的 isTransferred),往数据里插不可见字符会让比对、检索、
  导出、复制全部带上它 —— 这正是上一轮拒绝「插空格」的原因,本轮改用
  渲染期格式化,视觉要求与数据纯洁性同时满足。

★ 为什么用 U+3000 而非普通空格:普通空格宽度随字体浮动(约半个汉字),
  补进去反而难对齐;U+3000 稳定占一个汉字宽,与「1 汉字 ≈ 1em」一致。

三、配套
----
· 归还人 / 当前持有人 / 借用人三列(含转交弹窗的持有人列)统一走 formatName;
· .name-fixed 增加 margin-right,避免同一格内多个姓名(同一单持有人/归还人
  不同)紧贴成「高 雪张 三」。
This commit is contained in:
yueli
2026-09-17 09:45:34 +08:00
parent ba5394f70c
commit b1f39acb97
3 changed files with 91 additions and 9 deletions

View File

@ -138,7 +138,7 @@
<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">
<template #default="{row}">
<span class="name-fixed">{{ row.borrower_name || '—' }}</span>
<span class="name-fixed">{{ formatName(row.borrower_name) || '—' }}</span>
</template>
</el-table-column>
<!-- ★ 当前持有人:转交后可能与「借用人」不是同一人;一张单的明细持有人
@ -153,7 +153,7 @@
:key="h.name"
class="name-fixed"
:class="{ 'text-primary': h.transferred }"
>{{ h.name }}</span>
>{{ formatName(h.name) }}</span>
</template>
<span v-else-if="row.status === 'returned' || row.status === 'scrapped'" class="text-info">已回库</span>
<span v-else class="text-info">—</span>
@ -173,7 +173,7 @@
<el-table-column v-if="hasColumnPermission('return_operator')" label="归还人" width="110">
<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">{{ op }}</span>
<span v-for="op in row.return_operators" :key="op" class="name-fixed">{{ formatName(op) }}</span>
</template>
<span v-else class="text-info">—</span>
</template>
@ -339,7 +339,7 @@
<el-table-column prop="sku" label="SKU" width="110" show-overflow-tooltip />
<el-table-column label="当前持有人" width="100" align="center">
<template #default="{row}">
<span v-if="row.current_holder_name" class="name-fixed">{{ row.current_holder_name }}</span>
<span v-if="row.current_holder_name" class="name-fixed">{{ formatName(row.current_holder_name) }}</span>
<span v-else class="text-info">—</span>
</template>
</el-table-column>
@ -435,6 +435,7 @@ import {
getBorrowUsers,
getBorrowSlipHistory,
} from '@/api/transaction'
import { formatName } from '@/utils/format'
const userStore = useUserStore()
@ -945,6 +946,9 @@ onBeforeUnmount(() => {
.name-fixed {
display: inline-block;
min-width: 3em;
/* 一格内有多个姓名时(同一单的明细持有人/归还人不同)留出间隔,
否则两个 3em 的盒子会紧贴成「高 雪张 三」难以分辨 */
margin-right: 6px;
}
/* 发生过转交的持有人:主题色加粗,替代原先的橙色色块标签 */