添加定时任务配置页面

src/api/system-boot/csDictData.ts

@@ -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
+    })
+}

src/utils/formatTime.ts

@@ -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')
+  ]
+}

src/views/setting/dictionary/version/index.vue

@@ -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>

src/views/system/scheduledTasks/form.vue

@@ -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>

src/views/system/scheduledTasks/index.vue

@@ -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>