From d09108043ffd46e1a1f52227065cebf4bce44db3 Mon Sep 17 00:00:00 2001
From: liriming <1343021927@qq.com>
Date: 星期一, 14 十月 2024 10:42:16 +0800
Subject: [PATCH] 定时任务
---
src/views/job/ScheduleJobForm.vue | 110 +++++++++++++++
src/views/job/index.vue | 221 +++++++++++++++++++++++++++++++
src/api/job/index.ts | 54 +++++++
3 files changed, 385 insertions(+), 0 deletions(-)
diff --git a/src/api/job/index.ts b/src/api/job/index.ts
new file mode 100644
index 0000000..bd4ad9c
--- /dev/null
+++ b/src/api/job/index.ts
@@ -0,0 +1,54 @@
+import request from '@/config/axios'
+
+export interface ScheduleJobVO {
+ id: number
+ beanName: string
+ params: string
+ cronExpression: string
+ status: number
+ remark: string
+}
+
+export interface ScheduleJobPageReqVO extends PageParam {
+ beanName?: string
+}
+
+// 查询ScheduleJob列表
+export const getScheduleJobPage = (params: ScheduleJobPageReqVO) => {
+ return request.get({ url: '/job/schedule/page', params })
+}
+
+// 查询ScheduleJob详情
+export const getScheduleJob = (id: number) => {
+ return request.get({ url: '/job/schedule/info?id=' + id})
+}
+
+// 新增ScheduleJob
+export const createScheduleJob = (data: ScheduleJobVO) => {
+ return request.post({ url: '/job/schedule/create', data })
+}
+
+// 修改ScheduleJob
+export const updateScheduleJob = (data: ScheduleJobVO) => {
+ return request.put({ url: '/job/schedule/update', data })
+}
+
+// 删除ScheduleJob
+export const deleteScheduleJob = (id: number) => {
+ return request.delete({ url: '/job/schedule/delete?id=' + id })
+}
+
+// 立即执行
+export const runScheduleJob = (id: number) => {
+ return request.put({ url: '/job/schedule/run?id=' + id })
+}
+
+// 暂停
+export const pauseScheduleJob = (id: number) => {
+ return request.put({ url: '/job/schedule/pause?id=' + id })
+}
+
+// 恢复
+export const resumeScheduleJob = (id: number) => {
+ return request.put({ url: '/job/schedule/resume?id=' + id })
+}
diff --git a/src/views/job/ScheduleJobForm.vue b/src/views/job/ScheduleJobForm.vue
new file mode 100644
index 0000000..87c89ed
--- /dev/null
+++ b/src/views/job/ScheduleJobForm.vue
@@ -0,0 +1,110 @@
+<template>
+ <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
+ <el-form
+ ref="formRef"
+ v-loading="formLoading"
+ :model="formData"
+ :rules="formRules"
+ label-width="120px"
+ >
+ <el-form-item label="bean名称" prop="beanName">
+ <el-input v-model="formData.beanName" placeholder="请输入bean名称" />
+ </el-form-item>
+ <el-form-item label="参数" prop="params">
+ <el-input v-model="formData.params" placeholder="请输入参数" />
+ </el-form-item>
+ <el-form-item label="cron表达式" prop="cronExpression">
+ <el-input v-model="formData.cronExpression" placeholder="请输入cron表达式" />
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import * as ScheduleJobApi from '@/api/job'
+
+defineOptions({ name: 'DataScheduleJobForm' })
+
+ const { t } = useI18n() // 国际化
+ const message = useMessage() // 消息弹窗
+ const dialogVisible = ref(false) // 弹窗的是否展示
+ const dialogTitle = ref('') // 弹窗的标题
+ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+ const formType = ref('') // 表单的类型：create - 新增；update - 修改
+ const formData = ref({
+ id: undefined,
+ beanName: undefined,
+ params: undefined,
+ cronExpression: undefined,
+ remark: undefined,
+ status: 0
+ })
+ const formRules = reactive({
+ beanName: [{ required: true, message: 'bean名称不能为空', trigger: 'blur' }],
+ cronExpression: [{ required: true, message: 'cron表达式不能为空', trigger: 'blur' }]
+ })
+ const formRef = ref() // 表单 Ref
+
+ /** 打开弹窗 */
+ const open = async (type: string, id?: number) => {
+ dialogVisible.value = true
+ dialogTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await ScheduleJobApi.getScheduleJob(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ }
+ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+ /** 提交表单 */
+ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+ const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as unknown as ScheduleJobApi.ScheduleJobVO
+ if (formType.value === 'create') {
+ await ScheduleJobApi.createScheduleJob(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ScheduleJobApi.updateScheduleJob(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+ }
+
+ /** 重置表单 */
+ const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ beanName: undefined,
+ params: undefined,
+ cronExpression: undefined,
+ remark: undefined,
+ status: 0
+ }
+ formRef.value?.resetFields()
+ }
+</script>
diff --git a/src/views/job/index.vue b/src/views/job/index.vue
new file mode 100644
index 0000000..a68f174
--- /dev/null
+++ b/src/views/job/index.vue
@@ -0,0 +1,221 @@
+<template>
+ <!-- 搜索 -->
+ <ContentWrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="80px"
+ >
+ <el-form-item label="bean名称" prop="beanName">
+ <el-input
+ v-model="queryParams.beanName"
+ placeholder="请输入bean名称"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery">
+ <Icon icon="ep:search" class="mr-5px" />
+ 搜索
+ </el-button>
+ <el-button @click="resetQuery">
+ <Icon icon="ep:refresh" class="mr-5px" />
+ 重置
+ </el-button>
+ <el-button
+ type="primary"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['data:schedule:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" />
+ 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="bean名称" align="center" prop="beanName" />
+ <el-table-column label="参数" align="center" prop="params" />
+ <el-table-column label="cron表达式" align="center" prop="cronExpression" />
+ <el-table-column label="备注" align="center" prop="remark" />
+ <el-table-column label="状态" align="center" prop="status" >
+ <template #default="scope">
+ <el-tag v-if="scope.row.status === 1" size="small">正常</el-tag>
+ <el-tag v-else size="small" type="danger">暂停</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" min-width="110" fixed="right">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['data:schedule:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['data:schedule:delete']"
+ >
+ 删除
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handlePause(scope.row.id)"
+ >
+ 暂停
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleResume(scope.row.id)"
+ >
+ 恢复
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleRun(scope.row.id)"
+ >
+ 执行
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <ScheduleJobForm ref="formRef" @success="getList" />
+
+</template>
+<script lang="ts" setup>
+import * as ScheduleJobApi from '@/api/job'
+import ScheduleJobForm from './ScheduleJobForm.vue'
+
+defineOptions({name: 'DataSchedule'})
+
+ const message = useMessage() // 消息弹窗
+ const {t} = useI18n() // 国际化
+
+ const loading = ref(true) // 列表的加载中
+ const total = ref(0) // 列表的总页数
+ const list = ref([]) // 列表的数据
+ const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: undefined,
+ address: undefined
+ })
+ const queryFormRef = ref() // 搜索的表单
+ const exportLoading = ref(false) // 导出的加载中
+
+ /** 查询列表 */
+ const getList = async () => {
+ loading.value = true
+ try {
+ const page = await ScheduleJobApi.getScheduleJobPage(queryParams)
+ list.value = page.list
+ total.value = page.total
+ } finally {
+ loading.value = false
+ }
+ }
+
+ /** 搜索按钮操作 */
+ const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+ }
+
+ /** 重置按钮操作 */
+ const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+ }
+
+ /** 添加/修改操作 */
+ const formRef = ref()
+ const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+ }
+
+ /** 删除按钮操作 */
+ const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await ScheduleJobApi.deleteScheduleJob(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {
+ }
+ }
+
+ /** 暂停按钮操作 */
+ const handlePause = async (id: number) => {
+ try {
+ // 暂停的二次确认
+ await message.confirm('确认暂停？', '暂停定时')
+ // 发起暂停
+ await ScheduleJobApi.pauseScheduleJob(id)
+ message.success('暂停成功')
+ // 刷新列表
+ await getList()
+ } catch {
+ }
+ }
+
+ /** 恢复按钮操作 */
+ const handleResume = async (id: number) => {
+ try {
+ // 恢复的二次确认
+ await message.confirm('确认恢复？', '恢复定时')
+ // 发起恢复
+ await ScheduleJobApi.resumeScheduleJob(id)
+ message.success('恢复成功')
+ // 刷新列表
+ await getList()
+ } catch {
+ }
+ }
+
+ /** 执行按钮操作 */
+ const handleRun = async (id: number) => {
+ try {
+ // 执行的二次确认
+ await message.confirm('确认执行？', '执行定时')
+ // 发起执行
+ await ScheduleJobApi.runScheduleJob(id)
+ message.success('执行成功')
+ // 刷新列表
+ await getList()
+ } catch {
+ }
+ }
+
+ /** 初始化 **/
+ onMounted(async () => {
+ await getList()
+ })
+</script>
--
Gitblit v1.9.3