fix: restrict overdue warning color strictly to the countdown text and remove row-level style pollution
This commit is contained in:
@ -17,7 +17,6 @@
|
||||
stripe
|
||||
style="margin-top:20px"
|
||||
v-loading="loading"
|
||||
:row-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column v-if="hasColumnPermission('borrow_no')" prop="borrow_no" label="单号" width="180" show-overflow-tooltip />
|
||||
<el-table-column v-if="hasColumnPermission('borrower_name')" prop="borrower_name" label="借用人" width="100" />
|
||||
@ -50,9 +49,12 @@
|
||||
<el-tag type="primary" size="small">无限期</el-tag>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tag type="info" size="small">预计</el-tag>
|
||||
{{ formatExpectedTime(row.expected_return_time).text }}
|
||||
<span :style="formatExpectedTime(row.expected_return_time).style">
|
||||
<span>预计 {{ formatExpectedTime(row.expected_return_time).text }} </span>
|
||||
<span :style="{
|
||||
color: formatExpectedTime(row.expected_return_time).style.color || 'inherit',
|
||||
fontWeight: formatExpectedTime(row.expected_return_time).style.fontWeight || 'normal',
|
||||
marginLeft: '4px'
|
||||
}">
|
||||
{{ formatExpectedTime(row.expected_return_time).diffText }}
|
||||
</span>
|
||||
</div>
|
||||
@ -200,53 +202,8 @@ const formatExpectedTime = (timeStr: string) => {
|
||||
return { text: displayTime, diffText, style }
|
||||
}
|
||||
|
||||
// ★ 新增:表格行样式逻辑(交通灯预警)
|
||||
const tableRowClassName = ({ row }: { row: any }) => {
|
||||
// 如果已归还,不标颜色
|
||||
if (row.status === 'returned') return ''
|
||||
if (!row.expected_return_time) return ''
|
||||
|
||||
const expected = dayjs(row.expected_return_time).startOf('day')
|
||||
const today = dayjs().startOf('day')
|
||||
const diffDays = expected.diff(today, 'day')
|
||||
|
||||
if (diffDays < 0) {
|
||||
return 'danger-row' // 逾期 - 红色
|
||||
} else if (diffDays <= 1) {
|
||||
return 'warning-row' // 极其紧急(0-1天)- 黄色
|
||||
} else if (diffDays <= 7) {
|
||||
return 'success-row' // 即将到期(2-7天)- 绿色
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
onMounted(fetchData)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 注意:Element Plus Table 的 row-class-name 样式通常不能放在 scoped 中 */
|
||||
.el-table .warning-row {
|
||||
--el-table-tr-bg-color: #fdf6ec !important; /* 浅橙色/黄色 */
|
||||
}
|
||||
.el-table .danger-row {
|
||||
--el-table-tr-bg-color: #fef0f0 !important; /* 浅红色 */
|
||||
color: #F56C6C; /* 文字变红增强警示 */
|
||||
}
|
||||
.el-table .success-row {
|
||||
--el-table-tr-bg-color: #f0f9eb !important; /* 浅绿色 */
|
||||
color: #67C23A; /* 文字变绿增强提示 */
|
||||
}
|
||||
|
||||
/* 文字颜色辅助类 */
|
||||
.text-danger {
|
||||
color: #F56C6C;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-warning {
|
||||
color: #E6A23C;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-normal {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user