<template>
|
<div class="scheduler-page">
|
<el-card shadow="never" class="card-item">
|
<template #header>
|
<span>调度服务控制</span>
|
</template>
|
<div class="button-row">
|
<el-button type="success" @click="handleSchedulerAction('StartSchedule')">启动调度服务</el-button>
|
<el-button type="warning" @click="handleSchedulerAction('StopSchedule')">停止调度服务</el-button>
|
</div>
|
</el-card>
|
|
<el-card shadow="never" class="card-item">
|
<template #header>
|
<span>任务调度操作</span>
|
</template>
|
<el-form :model="jobForm" label-width="110px" class="form-wrap">
|
<el-row :gutter="16">
|
<el-col :span="8">
|
<el-form-item label="任务名称">
|
<el-input v-model="jobForm.name" placeholder="请输入任务名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="任务分组">
|
<el-input v-model="jobForm.jobGroup" placeholder="请输入任务分组" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="执行类名">
|
<el-input v-model="jobForm.className" placeholder="请输入执行类名" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="button-row">
|
<el-button type="primary" @click="handleSchedulerAction('PauseJob')">暂停任务</el-button>
|
<el-button type="primary" @click="handleSchedulerAction('ResumeJob')">恢复任务</el-button>
|
<el-button type="primary" @click="handleSchedulerAction('ExecuteJob')">立即执行</el-button>
|
<el-button type="danger" @click="handleSchedulerAction('DeleteScheduleJob')">删除任务</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { defineComponent, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import http from "@/api/http";
|
|
export default defineComponent({
|
setup() {
|
const jobForm = ref({
|
name: "",
|
jobGroup: "",
|
className: "",
|
assemblyName: "",
|
intervalSecond: 0,
|
beginTime: "",
|
endTime: "",
|
remark: "",
|
});
|
|
/**
|
* 方法目的：校验任务级调度操作所需参数，避免提交无效请求。
|
* 参数含义：无（直接读取当前 jobForm）。
|
* 返回值：true 表示校验通过；false 表示校验失败并弹出提示。
|
* 异常处理：本地校验不抛异常，通过消息提示引导用户补全关键字段。
|
*/
|
const validateJobPayload = () => {
|
if (!jobForm.value.name || !jobForm.value.jobGroup || !jobForm.value.className) {
|
ElMessage.error("请先填写任务名称、任务分组、执行类名");
|
return false;
|
}
|
return true;
|
};
|
|
/**
|
* 方法目的：统一处理调度控制请求，兼容 GET 与 POST 两类接口。
|
* 参数含义：action 为调度动作名称，对应后端 api/Scheduler/{action}。
|
* 返回值：Promise<void>，执行完成后通过消息提示结果。
|
* 关键逻辑：
|
* 1. 全局动作（启动/停止）走 GET。
|
* 2. 任务动作（暂停/恢复/执行/删除）走 POST，并提交 jobForm。
|
* 3. 接口返回 status=false 时提示后端 message。
|
* 异常处理：使用 try-catch 捕获请求异常并保留错误上下文输出。
|
*/
|
const handleSchedulerAction = async (action) => {
|
try {
|
const isGlobalAction = action === "StartSchedule" || action === "StopSchedule";
|
if (!isGlobalAction && !validateJobPayload()) {
|
return;
|
}
|
|
let result;
|
if (isGlobalAction) {
|
result = await http.get(`/api/Scheduler/${action}`, {}, true);
|
} else {
|
result = await http.post(`/api/Scheduler/${action}`, jobForm.value, true);
|
}
|
|
if (result && result.status) {
|
ElMessage.success(result.message || "操作成功");
|
return;
|
}
|
|
ElMessage.error((result && result.message) || "操作失败");
|
} catch (error) {
|
console.error("调度请求异常", { action, jobForm: jobForm.value, error });
|
ElMessage.error("调度请求失败，请稍后重试");
|
}
|
};
|
|
return {
|
jobForm,
|
handleSchedulerAction,
|
};
|
},
|
});
|
</script>
|
|
<style scoped>
|
.scheduler-page {
|
padding: 12px;
|
}
|
|
.card-item {
|
margin-bottom: 12px;
|
}
|
|
.button-row {
|
display: flex;
|
gap: 10px;
|
flex-wrap: wrap;
|
}
|
</style>
|
