fix: implement traffic-light color warning and correct ascending sort for overdue borrow records
This commit is contained in:
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user