Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加定时任务配置页面

Browse Source
This commit is contained in:
GGJ
2025-01-09 09:30:49 +08:00
parent fbd26bc15b
commit 979765db76
5 changed files with 669 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/api/system-boot/csDictData.ts
View File

@@ -53,3 +53,50 @@ export const updateCsDictData = (data: any) => {
})
}
// 执行算法
export const timerRun = (params: any) => {
return request({
url: '/system-boot/timer/run',
method: 'GET',
params
})
}
// 任务表达式
export const getActionClasses = () => {
return request({
url: '/system-boot/timer/getActionClasses',
method: 'GET'
})
}
// 新增任务
export const addTimer = (data: any) => {
return request({
url: '/system-boot/timer/add',
method: 'POST',
data
})
}
// 修改任务
export const updateTimer = (data: any) => {
return request({
url: '/system-boot/timer/update',
method: 'POST',
data
})
}
// 补招配置
export const runTimer = (data: any) => {
return request({
url: '/system-boot/timer/run',
method: 'GET',
params: data
})
}
// 删除任务
export const deleteTimer = (data: any) => {
return request({
url: '/system-boot/timer/delete',
method: 'POST',
data: data
})
}

332
src/utils/formatTime.ts Normal file
View File

@@ -0,0 +1,332 @@
import dayjs from 'dayjs'
import type { TableColumnCtx } from 'element-plus'
/**
* 日期快捷选项适用于 el-date-picker
*/
export const defaultShortcuts = [
{
text: '今天',
value: () => {
return new Date()
}
},
{
text: '昨天',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return [date, date]
}
},
{
text: '最近七天',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return [date, new Date()]
}
},
{
text: '最近 30 天',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
return [date, new Date()]
}
},
{
text: '本月',
value: () => {
const date = new Date()
date.setDate(1) // 设置为当前月的第一天
return [date, new Date()]
}
},
{
text: '今年',
value: () => {
const date = new Date()
return [new Date(`${date.getFullYear()}-01-01`), date]
}
}
]
/**
* 时间日期转换
* @param date 当前时间，new Date() 格式
* @param format 需要转换的时间格式字符串
* @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
* @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
* @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
* @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串
*/
export function formatDate(date: Date, format?: string): string {
// 日期不存在，则返回空
if (!date) {
return ''
}
// 日期存在，则进行格式化
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
}
/**
* 获取当前的日期+时间
*/
export function getNowDateTime() {
return dayjs()
}
/**
* 获取当前日期是第几周
* @param dateTime 当前传入的日期值
* @returns 返回第几周数字值
*/
export function getWeek(dateTime: Date): number {
const temptTime = new Date(dateTime.getTime())
// 周几
const weekday = temptTime.getDay() || 7
// 周1+5天=周六
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
let firstDay = new Date(temptTime.getFullYear(), 0, 1)
const dayOfWeek = firstDay.getDay()
let spendDay = 1
if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
return Math.ceil(d / 7)
}
/**
* 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
* @param param 当前时间，new Date() 格式或者字符串时间格式
* @param format 需要转换的时间格式字符串
* @description param 10秒： 10 * 1000
* @description param 1分： 60 * 1000
* @description param 1小时： 60 * 60 * 1000
* @description param 24小时：60 * 60 * 24 * 1000
* @description param 3天： 60 * 60* 24 * 1000 * 3
* @returns 返回拼接后的时间字符串
*/
export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
// 传入格式处理、存储转换值
let t: any, s: number
// 获取js 时间戳
let time: number = new Date().getTime()
// 是否是对象
typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
// 当前时间戳 - 传入时间戳
time = Number.parseInt(`${time - t}`)
if (time < 10000) {
// 10秒内
return '刚刚'
} else if (time < 60000 && time >= 10000) {
// 超过10秒少于1分钟内
s = Math.floor(time / 1000)
return `${s}秒前`
} else if (time < 3600000 && time >= 60000) {
// 超过1分钟少于1小时
s = Math.floor(time / 60000)
return `${s}分钟前`
} else if (time < 86400000 && time >= 3600000) {
// 超过1小时少于24小时
s = Math.floor(time / 3600000)
return `${s}小时前`
} else if (time < 259200000 && time >= 86400000) {
// 超过1天少于3天内
s = Math.floor(time / 86400000)
return `${s}天前`
} else {
// 超过3天
const date = typeof param === 'string' || 'object' ? new Date(param) : param
return formatDate(date, format)
}
}
/**
* 时间问候语
* @param param 当前时间，new Date() 格式
* @description param 调用 `formatAxis(new Date())` 输出 `上午好`
* @returns 返回拼接后的时间字符串
*/
export function formatAxis(param: Date): string {
const hour: number = new Date(param).getHours()
if (hour < 6) return '凌晨好'
else if (hour < 9) return '早上好'
else if (hour < 12) return '上午好'
else if (hour < 14) return '中午好'
else if (hour < 17) return '下午好'
else if (hour < 19) return '傍晚好'
else if (hour < 22) return '晚上好'
else return '夜里好'
}
/**
* 将毫秒，转换成时间字符串。例如说，xx 分钟
*
* @param ms 毫秒
* @returns {string} 字符串
*/
export function formatPast2(ms: number): string {
const day = Math.floor(ms / (24 * 60 * 60 * 1000))
const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
if (day > 0) {
return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
}
if (hour > 0) {
return hour + ' 小时 ' + minute + ' 分钟'
}
if (minute > 0) {
return minute + ' 分钟'
}
if (second > 0) {
return second + ' 秒'
} else {
return 0 + ' 秒'
}
}
/**
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
*
* @param row 行数据
* @param column 字段
* @param cellValue 字段值
*/
export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
return cellValue ? formatDate(cellValue) : ''
}
/**
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD 格式
*
* @param row 行数据
* @param column 字段
* @param cellValue 字段值
*/
export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
}
/**
* 设置起始日期，时间为00:00:00
* @param param 传入日期
* @returns 带时间00:00:00的日期
*/
export function beginOfDay(param: Date): Date {
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
}
/**
* 设置结束日期，时间为23:59:59
* @param param 传入日期
* @returns 带时间23:59:59的日期
*/
export function endOfDay(param: Date): Date {
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
}
/**
* 计算两个日期间隔天数
* @param param1 日期1
* @param param2 日期2
*/
export function betweenDay(param1: Date, param2: Date): number {
param1 = convertDate(param1)
param2 = convertDate(param2)
// 计算差值
return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
}
/**
* 日期计算
* @param param1 日期
* @param param2 添加的时间
*/
export function addTime(param1: Date, param2: number): Date {
param1 = convertDate(param1)
return new Date(param1.getTime() + param2)
}
/**
* 日期转换
* @param param 日期
*/
export function convertDate(param: Date | string): Date {
if (typeof param === 'string') {
return new Date(param)
}
return param
}
/**
* 指定的两个日期, 是否为同一天
* @param a 日期 A
* @param b 日期 B
*/
export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
if (!a || !b) return false
const aa = dayjs(a)
const bb = dayjs(b)
return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
}
/**
* 获取一天的开始时间、截止时间
* @param date 日期
* @param days 天数
*/
export function getDayRange(
date: dayjs.ConfigType,
days: number
): [dayjs.ConfigType, dayjs.ConfigType] {
const day = dayjs(date).add(days, 'd')
return getDateRange(day, day)
}
/**
* 获取最近7天的开始时间、截止时间
*/
export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
const lastWeekDay = dayjs().subtract(7, 'd')
const yesterday = dayjs().subtract(1, 'd')
return getDateRange(lastWeekDay, yesterday)
}
/**
* 获取最近30天的开始时间、截止时间
*/
export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
const lastMonthDay = dayjs().subtract(30, 'd')
const yesterday = dayjs().subtract(1, 'd')
return getDateRange(lastMonthDay, yesterday)
}
/**
* 获取最近1年的开始时间、截止时间
*/
export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
const lastYearDay = dayjs().subtract(1, 'y')
const yesterday = dayjs().subtract(1, 'd')
return getDateRange(lastYearDay, yesterday)
}
/**
* 获取指定日期的开始时间、截止时间
* @param beginDate 开始日期
* @param endDate 截止日期
*/
export function getDateRange(
beginDate: dayjs.ConfigType,
endDate: dayjs.ConfigType
): [string, string] {
return [
dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
]
}

2
src/views/setting/dictionary/version/index.vue
View File

@@ -33,7 +33,7 @@
</el-form-item>
<el-form-item label="版本类型">
<el-select v-model.trim="form.versionType" placeholder="please select your zone">
<el-select v-model.trim="form.versionType" placeholder="请选择版本类型">
<el-option label="web" value="WEB" />
<el-option label="app" value="APP" />
</el-select>

108
src/views/system/scheduledTasks/form.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<el-dialog draggable width="600px" v-model="dialogVisible" :title="title">
<el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
<el-form-item label="任务名称" prop="timerName">
<el-input v-model.trim="form.timerName" clearable maxlength="32" show-word-limit
placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="任务执行器" prop="actionClass">
<el-select v-model.trim="form.actionClass" placeholder="请选择任务执行器" filterable>
<el-option v-for="item in actionClassesOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="任务表达式" prop="cron">
<el-input v-model.trim="form.cron" clearable placeholder="请输入任务表达式" />
</el-form-item>
<el-form-item label="排序">
<el-input-number style="width: 100%" v-model="form.sort" :min="0" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model.trim="form.remark" clearable :rows="2" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getActionClasses, addTimer, updateTimer } from '@/api/system-boot/csDictData'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
const emit = defineEmits(['submit'])
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
cron: '',
actionClass: '',
timerName: '',
remark: '',
jobStatus: 1,
sort: 100,
id: '',
})
const actionClassesOptions = ref([])
const rules = {
actionClass: [{ required: true, message: '请选择任务执行器', trigger: 'change' }],
timerName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
cron: [{ required: true, message: '任务表达式', trigger: 'blur' }],
sort: [{ required: true, message: '排序号', trigger: 'blur' }],
date: [{ required: true, message: '日期不可为空', trigger: 'blur' }],
}
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
} else {
// 在此处恢复默认表单
for (let key in form) {
key == 'sort' ? form[key] = 100 : form[key] = ''
}
}
}
onMounted(() => {
getActionClasses().then(res => {
actionClassesOptions.value = res.data
})
})
const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (title.value == '新增定时任务') {
addTimer(form).then(res => {
ElMessage.success('新增成功')
dialogVisible.value = false
emit('submit')
})
} else {
updateTimer(form).then(res => {
ElMessage.success('新增成功')
dialogVisible.value = false
emit('submit')
})
}
}
})
}
defineExpose({ open })
</script>

181
src/views/system/scheduledTasks/index.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<div class="default-main">
<div>
<TableHeader ref="TableHeaderRef">
<template #select>
<el-form-item label="任务名称">
<el-input v-model="tableStore.table.params.searchValue" maxlength="32" show-word-limit clearable
placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="任务状态:">
<el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择任务状态">
<el-option label="运行" :value="1"></el-option>
<el-option label="停止" :value="2"></el-option>
</el-select>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增定时任务</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
</div>
<!-- 新增 -->
<taskForm ref="taskFormRef" @submit="tableStore.index()" />
<!-- 补招 -->
<el-dialog v-model="dialogVisible" title="选择补招时间" width="500">
<el-date-picker v-model="formDate.date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期">
</el-date-picker>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="okRun">
确认
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import taskForm from '@/views/system/scheduledTasks/form.vue'
import { formatDate } from '@/utils/formatTime'
import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus'
import { timerRun, runTimer, deleteTimer } from '@/api/system-boot/csDictData'
defineOptions({
name: 'Distributedphotovoltaic/templateConfiguration'
})
const formDate = ref({
date: '',
id: ''
})
const taskFormRef = ref()
const dialogVisible = ref(false)
const selectedTime = ref('')
const tableStore: any = new TableStore({
url: '/system-boot/timer/list',
method: 'POST',
isWebPaging: true,
column: [
{ field: 'timerName', title: '任务名称', },
{ field: 'actionClass', title: '任务执行器' },
{ field: 'cron', title: '定时任务表达式' },
{ field: 'remark', title: '备注' },
{
field: 'jobStatus', title: '状态', width: '100',
render: 'tag',
custom: {
0: 'danger',
1: 'success',
2: 'danger'
},
replaceValue: {
0: '未启动',
1: '运行中',
2: '未启动',
}
},
{ field: 'sort', title: '排序', width: '80' },
{
title: '操作',
width: '220',
render: 'buttons',
buttons: [
{
name: 'primary',
title: '执行',
type: 'primary',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'primary',
title: '是否确认执行该定时任务'
},
click: row => {
timerRun({ id: row.id }).then(res => {
ElMessage.success('执行成功')
tableStore.index()
})
}
},
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
taskFormRef.value.open('编辑定时任务', row)
}
},
{
name: 'edit',
title: '补招',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
formDate.value.date = formatDate(new Date(), 'YYYY-MM-DD')
formDate.value.id = row.id
dialogVisible.value = true
}
},
{
name: 'del',
text: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除？'
},
click: row => {
deleteTimer([row.id ]).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
},
]
}
],
loadCallback: () => { }
})
tableStore.table.params.searchValue = ''
tableStore.table.params.searchState = ''
provide('tableStore', tableStore)
const add = () => {
setTimeout(() => {
taskFormRef.value.open('新增定时任务')
}, 10)
}
const okRun = () => {
runTimer(formDate.value).then(res => {
ElMessage.success('操作成功')
dialogVisible.value = false
tableStore.index()
})
}
onMounted(() => {
tableStore.index()
})
</script>