+ 过期检查中提醒内容支持输入多行文本

+ 优化过期内容中过期项的显示效果
This commit is contained in:
2026-04-23 22:11:25 +08:00
parent 46134698b5
commit 13a1d62e4a

View File

@@ -84,6 +84,7 @@
// TODO 在这里可以添加打开编辑对话框并填充数据的逻辑
},
// 格式化日期 YYYY-MM-DD
formatDate(date) {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
@@ -91,6 +92,7 @@
return `${year}-${month}-${day}`
},
// 计算提醒日期 = 过期日期 - 提醒天数
subDate(date, day) {
r = new Date(date)
r.setDate(r.getDate() - day)
@@ -103,6 +105,8 @@
}
const URL = "https://solidaim.cn/clocks"
// for DEBUG
// const URL = "http://localhost:11223/clocks"
function get() {
return fetch(URL).then(response => response.json())
@@ -133,20 +137,17 @@
height: 100vh;
}
.el-table .green-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table .yellow-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
--el-table-tr-bg-color: var(--el-color-warning-light-7);
}
.el-table .red-row {
--el-table-tr-bg-color: var(--el-color-error-light-7);
}
.el-table .darkred-row {
--el-table-tr-bg-color: var(--el-color-error-light-5);
.descStyle {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
<title>过期检查</title>
@@ -156,7 +157,7 @@
<div id="app" width="100%" height="100vh">
<el-table :data="records" style="width: 100%; height: 95vh;" :row-class-name="checkOutdate"
@row-click="onRowClick" :default-sort="{ prop: 'expire_date', order: 'ascending' }">
<el-table-column prop="tag" label="标签" :filters="filters" :filter-method="filterTag" fixed
<el-table-column prop="tag" label="标签" :filters="filters" :filter-method="filterTag"
filter-placement="bottom-end">
<template #default="scope">
<el-tag :type="filters.find(f => f.value === scope.row.tag)?.color" disable-transitions>
@@ -164,7 +165,13 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="content" label="提醒内容" fixed min-width="200"></el-table-column>
<el-table-column prop="content" label="提醒内容" min-width="200">
<template #default="scope">
<el-tooltip :content="scope.row.content" placement="top">
<p class="descStyle">{{ scope.row.content }}</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="expire_date" label="过期日期" sortable min-width="110"></el-table-column>
<!-- <el-table-column prop="date" label="日期" min-width="100"></el-table-column> -->
<!-- <el-table-column prop="comment" label="备注" :show-overflow-tooltip="true"></el-table-column> -->
@@ -179,7 +186,7 @@
<el-form label-position="top" width="100%">
<el-form-item label="提醒内容*">
<el-input v-model="formData.content" width="100%"></el-input>
<el-input v-model="formData.content" type="textarea" :rows="3" width="100%"></el-input>
</el-form-item>
<el-form-item label="过期日期*" width="100%">
<div style="width: 100%;">
@@ -216,7 +223,8 @@
:show-close="false">
<el-form label-position="top" width="100%">
<el-form-item label="提醒内容">
<el-input v-model="formData.content" width="100%" :disabled="true"></el-input>
<el-input v-model="formData.content" type="textarea" :rows="3" width="100%"
:disabled="true"></el-input>
</el-form-item>
<el-form-item label="过期日期" width="100%">
<div style="width: 100%;">
@@ -237,7 +245,8 @@
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formData.remark" type="textarea" width="100%" :disabled="true"></el-input>
<el-input v-model="formData.remark" type="textarea" :rows="3" width="100%"
:disabled="true"></el-input>
</el-form-item>
<el-form-item label="创建日期" width="100%">
<div style="width: 100%;">