fix: implement traffic-light color warning and correct ascending sort for overdue borrow records

This commit is contained in:
DXC
2026-03-19 11:45:27 +08:00
parent a32d4f6b65
commit 8db1015f99
2 changed files with 23 additions and 14 deletions

View File

@ -164,7 +164,7 @@ const handlePage = (val: number) => {
fetchData()
}
// ★ 新增:格式化预计归还时间及倒计时逻辑
// ★ 新增:格式化预计归还时间及倒计时逻辑(交通灯预警系统)
const formatExpectedTime = (timeStr: string) => {
if (!timeStr) return { text: '无限期', diffText: '', style: {} }
@ -177,19 +177,22 @@ const formatExpectedTime = (timeStr: string) => {
let style: Record<string, string> = {}
// 这里的 timeStr 只展示前10位 (日期),或者展示完整
// 需求说单号规则是日期,预计归还也主要看日期
const displayTime = timeStr.substring(0, 10)
if (diffDays <= 1) {
// 剩余1天及已逾期 - 红色加粗
diffText = diffDays < 0 ? ` (逾期 ${Math.abs(diffDays)} 天)` : diffDays === 0 ? ` (今天到期)` : ` (剩 ${diffDays} 天)`
if (diffDays < 0) {
// 已逾期 - 红色加粗
diffText = ` (逾期 ${Math.abs(diffDays)} 天)`
style = { color: '#F56C6C', fontWeight: 'bold' }
} else if (diffDays <= 1) {
// 极其紧急(剩 0-1 天)- 警告黄加粗
diffText = diffDays === 0 ? ` (今天到期)` : ` (剩 ${diffDays} 天)`
style = { color: '#E6A23C', fontWeight: 'bold' }
} else if (diffDays <= 7) {
// 倒数7天内 - 警示黄
// 即将到期(剩 2-7 天)- 安全绿
diffText = ` (剩 ${diffDays} 天)`
style = { color: '#E6A23C' }
style = { color: '#67C23A' }
} else {
// 正常 - 默认颜色
// 安全/无期限 - 默认颜色
diffText = ` (剩 ${diffDays} 天)`
style = {}
}
@ -197,7 +200,7 @@ const formatExpectedTime = (timeStr: string) => {
return { text: displayTime, diffText, style }
}
// ★ 新增:表格行样式逻辑
// ★ 新增:表格行样式逻辑(交通灯预警)
const tableRowClassName = ({ row }: { row: any }) => {
// 如果已归还,不标颜色
if (row.status === 'returned') return ''
@ -208,9 +211,11 @@ const tableRowClassName = ({ row }: { row: any }) => {
const diffDays = expected.diff(today, 'day')
if (diffDays < 0) {
return 'danger-row' // 逾期标红
} else if (diffDays === 0) {
return 'warning-row' // 当天标黄
return 'danger-row' // 逾期 - 红色
} else if (diffDays <= 1) {
return 'warning-row' // 极其紧急0-1天- 黄色
} else if (diffDays <= 7) {
return 'success-row' // 即将到期2-7天- 绿色
}
return ''
}
@ -227,6 +232,10 @@ onMounted(fetchData)
--el-table-tr-bg-color: #fef0f0 !important; /* 浅红色 */
color: #F56C6C; /* 文字变红增强警示 */
}
.el-table .success-row {
--el-table-tr-bg-color: #f0f9eb !important; /* 浅绿色 */
color: #67C23A; /* 文字变绿增强提示 */
}
/* 文字颜色辅助类 */
.text-danger {