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 #default="{row}">
|
||||||
<template v-if="currentHolderList(row).length">
|
<template v-if="currentHolderList(row).length">
|
||||||
<span
|
<span
|
||||||
v-for="h in currentHolderList(row)"
|
v-for="h in currentHolderList(row)"
|
||||||
:key="h.name"
|
:key="h.name"
|
||||||
class="name-fixed"
|
class="holder-name"
|
||||||
:class="{ 'text-primary': h.transferred }"
|
:class="{ 'is-transferred': h.transferred }"
|
||||||
>{{ formatName(h.name) }}</span>
|
>{{ formatName(h.name) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="row.status === 'returned' || row.status === 'scrapped'" class="text-info">已回库</span>
|
<span v-else-if="row.status === 'returned' || row.status === 'scrapped'" class="text-info">已回库</span>
|
||||||
@ -337,9 +337,13 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="material_name" label="物料名称" min-width="130" show-overflow-tooltip />
|
<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 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}">
|
<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>
|
<span v-else class="text-info">—</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@ -640,6 +644,14 @@ const currentHolderList = (row: any): Array<{ name: string; transferred: boolean
|
|||||||
return Array.from(seen, ([name, transferred]) => ({ name, transferred }))
|
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:
|
中文姓名以「字」为单位占宽,1 个全角字 ≈ 1em,故统一占 3em:
|
||||||
「石利」与「郭俊玥」占同样的横向空间,一列名字纵向对齐、不再参差。
|
「石利」与「郭俊玥」占同样的横向空间,一列名字纵向对齐、不再参差。
|
||||||
|
|
||||||
★ 为什么用 CSS 而不是往数据里插空格(如「石 利」):
|
两字姓名由 formatName() 在**渲染副本**上补全角空格撑成三字宽(见
|
||||||
插字符会污染真实数据 —— 复制出去、导出、检索、姓名比对全都带着那个空格,
|
src/utils/format.ts),这里是兜底:单字姓名等异常长度也不会撑破列对齐。
|
||||||
而转交/归还的责任链恰恰依赖姓名比对(见 currentHolderList 的归一化逻辑)。
|
row.borrower_name 等底层数据始终是原值。
|
||||||
同一个视觉目标,用样式实现不伤数据。
|
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
.name-fixed {
|
.name-fixed {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -951,11 +962,26 @@ onBeforeUnmount(() => {
|
|||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 发生过转交的持有人:主题色加粗,替代原先的橙色色块标签 */
|
/* ==========================================================================
|
||||||
.text-primary {
|
★ 当前持有人
|
||||||
|
业务方要求该列**始终高亮** —— 「东西现在在谁手上」比「当初谁借的」更需要
|
||||||
|
一眼看到,故基础态即主题色加粗,不再区分是否转交。
|
||||||
|
发生过转交时额外加浅蓝底 + 细边框,强调「经手人已变更」。
|
||||||
|
(浅蓝而非实心色块:保持降噪基调,只做一层轻标记)
|
||||||
|
========================================================================== */
|
||||||
|
.holder-name {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 3em;
|
||||||
|
margin-right: 6px;
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
font-weight: 600;
|
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 {
|
.text-info {
|
||||||
|
|||||||
@ -57,8 +57,8 @@
|
|||||||
<template #default="{row}">
|
<template #default="{row}">
|
||||||
<span
|
<span
|
||||||
v-if="row.current_holder_name"
|
v-if="row.current_holder_name"
|
||||||
class="name-fixed"
|
class="holder-name"
|
||||||
:class="{ 'text-primary': isTransferred(row) }"
|
:class="{ 'is-transferred': isTransferred(row) }"
|
||||||
>{{ formatName(row.current_holder_name) }}</span>
|
>{{ formatName(row.current_holder_name) }}</span>
|
||||||
<span v-else class="text-info">—</span>
|
<span v-else class="text-info">—</span>
|
||||||
</template>
|
</template>
|
||||||
@ -663,11 +663,25 @@ onUnmounted(() => {
|
|||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 发生过转交的当前持有人:主题色加粗,替代原先的橙色标签 */
|
/* ==========================================================================
|
||||||
.text-primary {
|
★ 当前持有人
|
||||||
|
该列**始终高亮** ——「东西现在在谁手上」比「当初谁借的」更需要一眼看到,
|
||||||
|
故基础态即主题色加粗。发生过转交时额外加浅蓝底 + 细边框,
|
||||||
|
强调「经手人已变更,归还时必须由他本人来还」。
|
||||||
|
========================================================================== */
|
||||||
|
.holder-name {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 3em;
|
||||||
|
margin-right: 6px;
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
font-weight: 600;
|
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 {
|
.text-info {
|
||||||
|
|||||||
Reference in New Issue
Block a user