style(borrow): 当前持有人列改为常亮蓝色,转交时加浅蓝底与细边框
背景 ---- 上一轮按「只有发生过转交才高亮」实现后,业务方反馈「当前持有人那里也应该 高亮才对」—— 该列回答的是「东西现在在谁手上」,比「当初谁借的」更需要一眼 看到,不该只在转交时才着色。本轮按新要求调整。 改动 ---- · 基础态:当前持有人一律主题色加粗(不再区分是否转交); · 转交态:额外加浅蓝底 + 细边框(--el-color-primary-light-9 / light-5), 强调「经手人已变更,归还时必须由他本人来还」。 用浅蓝而非实心色块,保持上一轮确立的降噪基调,只做一层轻标记。 覆盖三处「当前持有人」:借还记录列表、还库页、转交弹窗(弹窗按单条明细比对, 故新增 isRowTransferred;组行仍用 currentHolderList)。 ★ 数据侧的事实(供验收参考):trans_borrow_transfer 目前 0 笔,34 条未还 记录的「当前持有人 = 借用人」、53 条已还记录的持有人为空。 也就是说转交态(浅蓝框)在产生第一笔真实转交前不会出现。
This commit is contained in:
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user