259 lines
12 KiB
HTML
259 lines
12 KiB
HTML
<!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="https://cdn.jsdelivr.net/npm/vue@3.5.33/dist/vue.global.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.13.7/dist/index.full.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.13.7/dist/locale/zh-cn.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.13.7/dist/index.min.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 = this.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 = "https://solidaim.cn/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>过期检查</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> |