style(borrow): 当前持有人列改为常亮蓝色,转交时加浅蓝底与细边框

背景
----
上一轮按「只有发生过转交才高亮」实现后,业务方反馈「当前持有人那里也应该
高亮才对」—— 该列回答的是「东西现在在谁手上」,比「当初谁借的」更需要一眼
看到,不该只在转交时才着色。本轮按新要求调整。

改动
----
· 基础态:当前持有人一律主题色加粗(不再区分是否转交);
· 转交态:额外加浅蓝底 + 细边框(--el-color-primary-light-9 / light-5),
  强调「经手人已变更,归还时必须由他本人来还」。
  用浅蓝而非实心色块,保持上一轮确立的降噪基调,只做一层轻标记。

覆盖三处「当前持有人」:借还记录列表、还库页、转交弹窗(弹窗按单条明细比对,
故新增 isRowTransferred;组行仍用 currentHolderList)。

★ 数据侧的事实(供验收参考):trans_borrow_transfer 目前 0 笔,34 条未还
  记录的「当前持有人 = 借用人」、53 条已还记录的持有人为空。
  也就是说转交态(浅蓝框)在产生第一笔真实转交前不会出现。
This commit is contained in:
yueli
2026-09-17 09:53:31 +08:00
parent 15d0c6b97a
commit 0eca1805b6
2 changed files with 55 additions and 15 deletions

View File

@ -145,14 +145,14 @@
也可能各不相同故去重后逐个展示
表达上做了降噪未转交=普通文本转过交=主题色加粗原先一律用橙色
标签一屏几十个色块会把真正需要关注的已转交淹没 -->
<el-table-column label="当前持有人" width="130">
<el-table-column label="当前持有人" width="140">
<template #default="{row}">
<template v-if="currentHolderList(row).length">
<span
v-for="h in currentHolderList(row)"
:key="h.name"
class="name-fixed"
:class="{ 'text-primary': h.transferred }"
class="holder-name"
:class="{ 'is-transferred': h.transferred }"
>{{ formatName(h.name) }}</span>
</template>
<span v-else-if="row.status === 'returned' || row.status === 'scrapped'" class="text-info">已回库</span>
@ -337,9 +337,13 @@
</el-table-column>
<el-table-column prop="material_name" label="物料名称" min-width="130" show-overflow-tooltip />
<el-table-column prop="sku" label="SKU" width="110" show-overflow-tooltip />
<el-table-column label="当前持有人" width="100" align="center">
<el-table-column label="当前持有人" width="120" align="center">
<template #default="{row}">
<span v-if="row.current_holder_name" class="name-fixed">{{ formatName(row.current_holder_name) }}</span>
<span
v-if="row.current_holder_name"
class="holder-name"
:class="{ 'is-transferred': isRowTransferred(row) }"
>{{ formatName(row.current_holder_name) }}</span>
<span v-else class="text-info">—</span>
</template>
</el-table-column>
@ -640,6 +644,14 @@ const currentHolderList = (row: any): Array<{ name: string; transferred: boolean
return Array.from(seen, ([name, transferred]) => ({ name, transferred }))
}
// 单条明细是否已转交 —— 供转交弹窗的行内展示使用。
// (组行有 children请用上面的 currentHolderList
const isRowTransferred = (row: any): boolean => {
const holder = String(row.current_holder_name || '').split('/')[0].trim()
const borrower = String(row.borrower_name || '').split('/')[0].trim()
return !!holder && holder !== borrower
}
// ==========================================================================
// ★ 整单汇总:主行字段原样取「首条明细」,多明细单会失真,此处按整单重算
//
@ -938,10 +950,9 @@ onBeforeUnmount(() => {
中文姓名以「字」为单位占宽1 个全角字 ≈ 1em故统一占 3em
「石利」与「郭俊玥」占同样的横向空间,一列名字纵向对齐、不再参差。
★ 为什么用 CSS 而不是往数据里插空格(如「石 利」):
插字符会污染真实数据 —— 复制出去、导出、检索、姓名比对全都带着那个空格,
而转交/归还的责任链恰恰依赖姓名比对(见 currentHolderList 的归一化逻辑)
同一个视觉目标,用样式实现不伤数据。
两字姓名由 formatName() 在**渲染副本**上补全角空格撑成三字宽(见
src/utils/format.ts这里是兜底单字姓名等异常长度也不会撑破列对齐。
row.borrower_name 等底层数据始终是原值
========================================================================== */
.name-fixed {
display: inline-block;
@ -951,11 +962,26 @@ onBeforeUnmount(() => {
margin-right: 6px;
}
/* 发生过转交的持有人:主题色加粗,替代原先的橙色色块标签 */
.text-primary {
/* ==========================================================================
★ 当前持有人
业务方要求该列**始终高亮** —— 「东西现在在谁手上」比「当初谁借的」更需要
一眼看到,故基础态即主题色加粗,不再区分是否转交。
发生过转交时额外加浅蓝底 + 细边框,强调「经手人已变更」。
(浅蓝而非实心色块:保持降噪基调,只做一层轻标记)
========================================================================== */
.holder-name {
display: inline-block;
min-width: 3em;
margin-right: 6px;
color: var(--el-color-primary);
font-weight: 600;
}
.holder-name.is-transferred {
background: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-primary-light-5);
border-radius: 4px;
padding: 1px 6px;
}
/* 中性/次要信息:灰字,不抢视觉重心 */
.text-info {

View File

@ -57,8 +57,8 @@
<template #default="{row}">
<span
v-if="row.current_holder_name"
class="name-fixed"
:class="{ 'text-primary': isTransferred(row) }"
class="holder-name"
:class="{ 'is-transferred': isTransferred(row) }"
>{{ formatName(row.current_holder_name) }}</span>
<span v-else class="text-info"></span>
</template>
@ -663,11 +663,25 @@ onUnmounted(() => {
min-width: 3em;
}
/* 发生过转交的当前持有人:主题色加粗,替代原先的橙色标签 */
.text-primary {
/* ==========================================================================
★ 当前持有人
该列**始终高亮** ——「东西现在在谁手上」比「当初谁借的」更需要一眼看到,
故基础态即主题色加粗。发生过转交时额外加浅蓝底 + 细边框,
强调「经手人已变更,归还时必须由他本人来还」。
========================================================================== */
.holder-name {
display: inline-block;
min-width: 3em;
margin-right: 6px;
color: var(--el-color-primary);
font-weight: 600;
}
.holder-name.is-transferred {
background: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-primary-light-5);
border-radius: 4px;
padding: 1px 6px;
}
/* 中性/次要信息:灰字,不抢视觉重心 */
.text-info {