+ 添加过期检查功能
+ 添加 Vue 和 Element-Plus 依赖 Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
@@ -36,6 +36,10 @@
|
|||||||
{
|
{
|
||||||
"name": "操作规程",
|
"name": "操作规程",
|
||||||
"location": "./views/sop.html"
|
"location": "./views/sop.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "过期检查",
|
||||||
|
"location": "./views/clock.html"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
18798
statics/element-plus.css
Normal file
18798
statics/element-plus.css
Normal file
File diff suppressed because it is too large
Load Diff
69
statics/modules/element-plus.js
Normal file
69
statics/modules/element-plus.js
Normal file
File diff suppressed because one or more lines are too long
189
statics/modules/element-plus_zhCN.js
Normal file
189
statics/modules/element-plus_zhCN.js
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
/*! Element Plus v2.13.7 */
|
||||||
|
|
||||||
|
(function(global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||||
|
typeof define === 'function' && define.amd ? define([], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.ElementPlusLocaleZhCn = factory()));
|
||||||
|
})(this, function() {
|
||||||
|
|
||||||
|
//#region ../../packages/locale/lang/zh-cn.ts
|
||||||
|
var zh_cn_default = {
|
||||||
|
name: "zh-cn",
|
||||||
|
el: {
|
||||||
|
breadcrumb: { label: "面包屑" },
|
||||||
|
colorpicker: {
|
||||||
|
confirm: "确定",
|
||||||
|
clear: "清空",
|
||||||
|
defaultLabel: "颜色选择器",
|
||||||
|
description: "当前颜色 {color}，按 Enter 键选择新颜色",
|
||||||
|
alphaLabel: "选择透明度的值",
|
||||||
|
alphaDescription: "透明度 {alpha}, 当前颜色 {color}",
|
||||||
|
hueLabel: "选择色相值",
|
||||||
|
hueDescription: "色相 {hue}, 当前颜色 {color}",
|
||||||
|
svLabel: "选择饱和度与明度的值",
|
||||||
|
svDescription: "饱和度 {saturation}, 明度 {brightness}, 当前颜色 {color}",
|
||||||
|
predefineDescription: "选择 {value} 作为颜色"
|
||||||
|
},
|
||||||
|
datepicker: {
|
||||||
|
now: "此刻",
|
||||||
|
today: "今天",
|
||||||
|
cancel: "取消",
|
||||||
|
clear: "清空",
|
||||||
|
confirm: "确定",
|
||||||
|
dateTablePrompt: "使用方向键与 Enter 键可选择日期",
|
||||||
|
monthTablePrompt: "使用方向键与 Enter 键可选择月份",
|
||||||
|
yearTablePrompt: "使用方向键与 Enter 键可选择年份",
|
||||||
|
selectedDate: "已选日期",
|
||||||
|
selectDate: "选择日期",
|
||||||
|
selectTime: "选择时间",
|
||||||
|
startDate: "开始日期",
|
||||||
|
startTime: "开始时间",
|
||||||
|
endDate: "结束日期",
|
||||||
|
endTime: "结束时间",
|
||||||
|
prevYear: "前一年",
|
||||||
|
nextYear: "后一年",
|
||||||
|
prevMonth: "上个月",
|
||||||
|
nextMonth: "下个月",
|
||||||
|
year: "年",
|
||||||
|
month1: "1 月",
|
||||||
|
month2: "2 月",
|
||||||
|
month3: "3 月",
|
||||||
|
month4: "4 月",
|
||||||
|
month5: "5 月",
|
||||||
|
month6: "6 月",
|
||||||
|
month7: "7 月",
|
||||||
|
month8: "8 月",
|
||||||
|
month9: "9 月",
|
||||||
|
month10: "10 月",
|
||||||
|
month11: "11 月",
|
||||||
|
month12: "12 月",
|
||||||
|
weeks: {
|
||||||
|
sun: "日",
|
||||||
|
mon: "一",
|
||||||
|
tue: "二",
|
||||||
|
wed: "三",
|
||||||
|
thu: "四",
|
||||||
|
fri: "五",
|
||||||
|
sat: "六"
|
||||||
|
},
|
||||||
|
weeksFull: {
|
||||||
|
sun: "星期日",
|
||||||
|
mon: "星期一",
|
||||||
|
tue: "星期二",
|
||||||
|
wed: "星期三",
|
||||||
|
thu: "星期四",
|
||||||
|
fri: "星期五",
|
||||||
|
sat: "星期六"
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
jan: "一月",
|
||||||
|
feb: "二月",
|
||||||
|
mar: "三月",
|
||||||
|
apr: "四月",
|
||||||
|
may: "五月",
|
||||||
|
jun: "六月",
|
||||||
|
jul: "七月",
|
||||||
|
aug: "八月",
|
||||||
|
sep: "九月",
|
||||||
|
oct: "十月",
|
||||||
|
nov: "十一月",
|
||||||
|
dec: "十二月"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inputNumber: {
|
||||||
|
decrease: "减少数值",
|
||||||
|
increase: "增加数值"
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
loading: "加载中",
|
||||||
|
noMatch: "无匹配数据",
|
||||||
|
noData: "无数据",
|
||||||
|
placeholder: "请选择"
|
||||||
|
},
|
||||||
|
mention: { loading: "加载中" },
|
||||||
|
dropdown: { toggleDropdown: "切换下拉选项" },
|
||||||
|
cascader: {
|
||||||
|
noMatch: "无匹配数据",
|
||||||
|
loading: "加载中",
|
||||||
|
placeholder: "请选择",
|
||||||
|
noData: "暂无数据"
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
goto: "前往",
|
||||||
|
pagesize: "条/页",
|
||||||
|
total: "共 {total} 条",
|
||||||
|
pageClassifier: "页",
|
||||||
|
page: "页",
|
||||||
|
prev: "上一页",
|
||||||
|
next: "下一页",
|
||||||
|
currentPage: "第 {pager} 页",
|
||||||
|
prevPages: "向前 {pager} 页",
|
||||||
|
nextPages: "向后 {pager} 页",
|
||||||
|
deprecationWarning: "你使用了一些已被废弃的用法，请参考 el-pagination 的官方文档"
|
||||||
|
},
|
||||||
|
dialog: { close: "关闭此对话框" },
|
||||||
|
drawer: { close: "关闭此对话框" },
|
||||||
|
messagebox: {
|
||||||
|
title: "提示",
|
||||||
|
confirm: "确定",
|
||||||
|
cancel: "取消",
|
||||||
|
error: "输入的数据不合法!",
|
||||||
|
close: "关闭此对话框"
|
||||||
|
},
|
||||||
|
upload: {
|
||||||
|
deleteTip: "按 Delete 键可删除",
|
||||||
|
delete: "删除",
|
||||||
|
preview: "查看图片",
|
||||||
|
continue: "继续上传"
|
||||||
|
},
|
||||||
|
slider: {
|
||||||
|
defaultLabel: "滑块介于 {min} 至 {max}",
|
||||||
|
defaultRangeStartLabel: "选择起始值",
|
||||||
|
defaultRangeEndLabel: "选择结束值"
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
emptyText: "暂无数据",
|
||||||
|
confirmFilter: "筛选",
|
||||||
|
resetFilter: "重置",
|
||||||
|
clearFilter: "全部",
|
||||||
|
sumText: "合计",
|
||||||
|
selectAllLabel: "选择所有行",
|
||||||
|
selectRowLabel: "选择当前行",
|
||||||
|
expandRowLabel: "展开当前行",
|
||||||
|
collapseRowLabel: "收起当前行",
|
||||||
|
sortLabel: "按 {column} 排序",
|
||||||
|
filterLabel: "按 {column} 过滤"
|
||||||
|
},
|
||||||
|
tag: { close: "关闭此标签" },
|
||||||
|
tour: {
|
||||||
|
next: "下一步",
|
||||||
|
previous: "上一步",
|
||||||
|
finish: "结束导览",
|
||||||
|
close: "关闭此对话框"
|
||||||
|
},
|
||||||
|
tree: { emptyText: "暂无数据" },
|
||||||
|
transfer: {
|
||||||
|
noMatch: "无匹配数据",
|
||||||
|
noData: "无数据",
|
||||||
|
titles: ["列表 1", "列表 2"],
|
||||||
|
filterPlaceholder: "请输入搜索内容",
|
||||||
|
noCheckedFormat: "共 {total} 项",
|
||||||
|
hasCheckedFormat: "已选 {checked}/{total} 项"
|
||||||
|
},
|
||||||
|
image: { error: "加载失败" },
|
||||||
|
pageHeader: { title: "返回" },
|
||||||
|
popconfirm: {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消"
|
||||||
|
},
|
||||||
|
carousel: {
|
||||||
|
leftArrow: "上一张幻灯片",
|
||||||
|
rightArrow: "下一张幻灯片",
|
||||||
|
indicator: "幻灯片切换至索引 {index}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//#endregion
|
||||||
|
return zh_cn_default;
|
||||||
|
});
|
||||||
18588
statics/modules/vue.global.js
Normal file
18588
statics/modules/vue.global.js
Normal file
File diff suppressed because it is too large
Load Diff
260
views/clock.html
Normal file
260
views/clock.html
Normal 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>
|
||||||
Reference in New Issue
Block a user