hbk01/qctool
1
0
Fork 0
Code Issues Pull Requests Activity

+ 添加过期检查功能

Browse Source 
+ 添加 Vue 和 Element-Plus 依赖

Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
艾志坚
2026-04-23 20:06:36 +08:00
parent 4f3f27a5b0
commit 2077737dc6
6 changed files with 37908 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
views/clock.html Normal file
View File

@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="../statics/modules/vue.global.js"></script>
<script src="../statics/modules/element-plus.js"></script>
<script src="../statics/modules/element-plus_zhCN.js"></script>
<link rel="stylesheet" href="../statics/element-plus.css" />
<script>
const { createApp, ref } = Vue
const { ElMessage } = ElementPlus
window.onload = function () {
const app = createApp({
setup() {
const formData = ref({})
const filters = ref([
{ text: '稳定性', value: '稳定性', color: 'primary' },
{ text: '对照品', value: '对照品', color: 'success' },
{ text: '其它', value: '其它', color: 'warning' },
])
const records = ref(get().then(data => {
records.value = data
}))
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
return {
formData, records, addDialogVisible, editDialogVisible, filters
}
},
methods: {
// 添加记录的函数
addRecord() {
if (!this.formData.content || !this.formData.expire_date ||
!this.formData.notify_days || !this.formData.tag) {
ElMessage.error('有必填项未填写，请检查后再试！')
return
}
// TODO 在这里可以添加将记录保存到数据库或本地存储的逻辑
this.formData.expire_date = formatDate(new Date(this.formData.expire_date))
post(this.formData).then(data => {
this.records.push(data)
ElMessage.success('记录添加成功')
})
console.log('添加的记录:', this.formData)
this.addDialogVisible = false
this.formData = {}
},
// 编辑记录的函数
editRecord() {
this.editDialogVisible = false
},
// 过滤标签
filterTag(value, row, column) {
return row.tag === value
},
// 根据过期日期设置行的样式
checkOutdate(row, rowIndex) {
const today = new Date()
data = Vue.toRaw(row.row)
const outdate = new Date(data.expire_date)
let day = 24 * 60 * 60 * 1000
if (outdate - today <= 0) {
return 'red-row'
} else if (outdate - today <= data.notify_days * day) {
return 'yellow-row'
}
},
// 在日期选择器中禁用过去的日期
disabledDate(date) {
return date < new Date()
},
// 点击表格中的行时的处理函数
onRowClick(row, column, event) {
this.formData = Vue.toRaw(row)
this.editDialogVisible = true
// TODO 在这里可以添加打开编辑对话框并填充数据的逻辑
},
formatDate(date) {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
subDate(date, day) {
r = new Date(date)
r.setDate(r.getDate() - day)
return this.formatDate(r)
}
}
})
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn })
app.mount('#app')
}
const URL = "http://solidaim.cn:11223/clocks"
function get() {
return fetch(URL).then(response => response.json())
}
async function post(data) {
const response = await fetch(URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
return response.json()
}
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
#app {
display: flex;
flex-direction: column;
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 .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);
}
</style>
<title>Clock</title>
</head>
<body>
<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
filter-placement="bottom-end">
<template #default="scope">
<el-tag :type="filters.find(f => f.value === scope.row.tag)?.color" disable-transitions>
{{ scope.row.tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="content" label="提醒内容" fixed min-width="200"></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> -->
</el-table>
<el-affix position="bottom" offset="10">
<el-button type="primary" size="large" style="width: 100%;" @click="addDialogVisible = true; formData = {
expire_date: new Date(), notify_days: 3
}">添 加 记 录</el-button>
</el-affix>
<el-dialog v-model="addDialogVisible" title="添加记录" width="90%" align-center :close-on-click-modal="false"
:show-close="false">
<el-form label-position="top" width="100%">
<el-form-item label="提醒内容*">
<el-input v-model="formData.content" width="100%"></el-input>
</el-form-item>
<el-form-item label="过期日期*" width="100%">
<div style="width: 100%;">
<el-date-picker v-model="formData.expire_date" type="date" :editable="false" :clearable="false"
style="width: 100%;" :disabled-date="disabledDate"></el-date-picker>
</div>
</el-form-item>
<el-form-item label="提醒天数*" width="100%">
<div style="width: 100%;">
<el-input-number v-model="formData.notify_days" width="100%"></el-input-number>
</div>
</el-form-item>
<p>将在 {{ subDate(formData.expire_date, formData.notify_days) }} 后在列表中以黄色行提醒。</p>
<el-form-item label="标签*">
<el-select v-model="formData.tag" placeholder="请选择标签" width="100%">
<el-option v-for="option in filters" :key="option.value" :label="option.text"
:value="option.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formData.remark" type="textarea" width="100%"></el-input>
</el-form-item>
<span>标注 * 为必填项</span>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addRecord">确 定</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="editDialogVisible" title="查看记录" width="90%" align-center :close-on-click-modal="false"
: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-form-item>
<el-form-item label="过期日期" width="100%">
<div style="width: 100%;">
<el-date-picker v-model="formData.expire_date" type="date" :editable="false" :clearable="false"
:disabled="true" style="width: 100%;" :disabled-date="disabledDate"></el-date-picker>
</div>
</el-form-item>
<el-form-item label="提醒天数" width="100%">
<div style="width: 100%;">
<el-input v-model="formData.notify_days" type="number" width="100%" :disabled="true"></el-input>
</div>
</el-form-item>
<el-form-item label="标签">
<el-select v-model="formData.tag" placeholder="请选择标签" width="100%" :disabled="true">
<el-option v-for="option in filters" :key="option.value" :label="option.text"
:value="option.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formData.remark" type="textarea" width="100%" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="创建日期" width="100%">
<div style="width: 100%;">
<el-date-picker v-model="formData.create_date" type="date" :editable="false" :clearable="false"
:disabled="true" style="width: 100%;" :disabled-date="disabledDate"></el-date-picker>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<!-- <el-button @click="editDialogVisible = false">取 消</el-button> -->
<el-button type="primary" @click="editRecord">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</body>
</html>