<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="pageEl.showSearch" label-width="68px">
|
<el-form-item label="任务名称" prop="jobName">
|
<el-input
|
v-model="queryParams.jobName"
|
placeholder="请输入任务名称"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="任务组名" prop="jobGroup">
|
<el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable>
|
<el-option
|
v-for="dict in sys_job_group"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="任务状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
|
<el-option
|
v-for="dict in sys_job_status"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="Plus"
|
@click="handleAdd"
|
v-hasPermi="['monitor:job:add']"
|
>新增</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="success"
|
plain
|
icon="Edit"
|
:disabled="pageEl.single"
|
@click="handleUpdate"
|
v-hasPermi="['monitor:job:edit']"
|
>修改</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="Delete"
|
:disabled="pageEl.multiple"
|
@click="handleDelete"
|
v-hasPermi="['monitor:job:remove']"
|
>删除</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
plain
|
icon="Download"
|
@click="handleExport"
|
v-hasPermi="['monitor:job:export']"
|
>导出</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="info"
|
plain
|
icon="Operation"
|
@click="handleJobLog"
|
v-hasPermi="['monitor:job:query']"
|
>日志</el-button>
|
</el-col>
|
<right-toolbar v-model:showSearch="pageEl.showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="pageEl.loading" :data="jobList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="任务编号" width="100" align="center" prop="jobId" />
|
<el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
|
<el-table-column label="任务组名" align="center" prop="jobGroup">
|
<template #default="scope">
|
<dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
|
</template>
|
</el-table-column>
|
<el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
|
<el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
|
<el-table-column label="状态" align="center">
|
<template #default="scope">
|
<el-switch
|
v-model="scope.row.status"
|
active-value="0"
|
inactive-value="1"
|
@change="handleStatusChange(scope.row)"
|
></el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-tooltip content="修改" placement="top">
|
<el-button
|
type="text"
|
icon="Edit"
|
@click="handleUpdate(scope.row)"
|
v-hasPermi="['monitor:job:edit']"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top">
|
<el-button
|
type="text"
|
icon="Delete"
|
@click="handleDelete(scope.row)"
|
v-hasPermi="['monitor:job:remove']"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="执行一次" placement="top">
|
<el-button
|
type="text"
|
icon="CaretRight"
|
@click="handleRun(scope.row)"
|
v-hasPermi="['monitor:job:changeStatus']"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="任务详细" placement="top">
|
<el-button
|
type="text"
|
icon="View"
|
@click="handleView(scope.row)"
|
v-hasPermi="['monitor:job:query']"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="调度日志" placement="top">
|
<el-button
|
type="text"
|
icon="Operation"
|
@click="handleJobLog(scope.row)"
|
v-hasPermi="['monitor:job:query']"
|
></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="pageEl.total > 0"
|
:total="pageEl.total"
|
v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
<!-- 添加或修改定时任务对话框 -->
|
<el-dialog :title="pageEl.title" v-model="pageEl.open" width="800px" append-to-body>
|
<el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="任务名称" prop="jobName">
|
<el-input v-model="form.jobName" placeholder="请输入任务名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="任务分组" prop="jobGroup">
|
<el-select v-model="form.jobGroup" placeholder="请选择">
|
<el-option
|
v-for="dict in sys_job_group"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item prop="invokeTarget">
|
<template #label>
|
<span>
|
调用方法
|
<el-tooltip placement="top">
|
<template #content>
|
<div>
|
Bean调用示例：ryTask.ryParams('ry')
|
<br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
|
<br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
|
</div>
|
</template>
|
<i class="el-icon-question"></i>
|
</el-tooltip>
|
</span>
|
</template>
|
<el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="cron表达式" prop="cronExpression">
|
<el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
|
<template #append>
|
<el-button type="primary" @click="handleShowCron">
|
生成表达式
|
<i class="el-icon-time el-icon--right"></i>
|
</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="执行策略" prop="misfirePolicy">
|
<el-radio-group v-model="form.misfirePolicy">
|
<el-radio-button label="1">立即执行</el-radio-button>
|
<el-radio-button label="2">执行一次</el-radio-button>
|
<el-radio-button label="3">放弃执行</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否并发" prop="concurrent">
|
<el-radio-group v-model="form.concurrent">
|
<el-radio-button label="0">允许</el-radio-button>
|
<el-radio-button label="1">禁止</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="状态">
|
<el-radio-group v-model="form.status">
|
<el-radio
|
v-for="dict in sys_job_status"
|
:key="dict.value"
|
:label="dict.value"
|
>{{ dict.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 任务日志详细 -->
|
<el-dialog title="任务详细" v-model="pageEl.openView" width="700px" append-to-body>
|
<el-form :model="form" label-width="120px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
|
<el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
|
<el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下次执行时间：">{{ proxy.parseTime(form.nextValidTime) }}</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="任务状态：">
|
<div v-if="form.status == '0'">正常</div>
|
<div v-else-if="form.status == '1'">失败</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否并发：">
|
<div v-if="form.concurrent == '0'">允许</div>
|
<div v-else-if="form.concurrent == '1'">禁止</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="执行策略：">
|
<div v-if="form.misfirePolicy == '0'">默认策略</div>
|
<div v-else-if="form.misfirePolicy == '1'">立即执行</div>
|
<div v-else-if="form.misfirePolicy == '2'">执行一次</div>
|
<div v-else-if="form.misfirePolicy == '3'">放弃执行</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="pageEl.openView = false">关 闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, ref, toRefs} from "vue";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import {addJob, changeJobStatus, delJob, getJob, listJob, runJob, updateJob} from "@/api/monitor/job";
|
import {ElForm} from "element-plus";
|
import router from "@/router";
|
const {proxy} = useCurrentInstance();
|
type FormInstance = InstanceType<typeof ElForm>
|
const queryRef = ref<FormInstance>()
|
const jobRef = ref<FormInstance>()
|
interface jobF{
|
jobId?: number,
|
jobName: string,
|
jobGroup:string,
|
invokeTarget?:string,
|
cronExpression?:string,
|
misfirePolicy?:string,
|
concurrent?:string
|
createTime?:string
|
nextValidTime?:string
|
status:string
|
}
|
interface pageQuery{
|
pageNum: 1,
|
pageSize: 10,
|
}
|
const data = reactive({
|
form:<jobF>{},
|
queryParams:<jobF&pageQuery>{},
|
rules:{
|
jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
|
invokeTarget: [{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }],
|
cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "blur" }]
|
}
|
})
|
const { queryParams, form, rules } = toRefs(data);
|
const ids = ref<(number|undefined)[]>()
|
|
// 页面元素
|
const pageEl = reactive({
|
showSearch:true,
|
single:true,
|
multiple:true,
|
loading:true,
|
total:0,
|
open:false,
|
title:"",
|
expression:<string|undefined>undefined,
|
openCron:false,
|
openView:false
|
})
|
// table
|
const jobList = ref([])
|
// 字典
|
const {sys_job_group,sys_job_status} = proxy.useDict("sys_job_group","sys_job_status");
|
|
|
function getList() {
|
pageEl.loading = true;
|
console.log(queryParams.value)
|
listJob(queryParams.value).then(res=>{
|
jobList.value = res.rows;
|
pageEl.total = res.total;
|
pageEl.loading = false;
|
})
|
}
|
// 字典翻译
|
function jobGroupFormat(row:any) {
|
return proxy.selectDictLabel(sys_job_group.value,row.jobGroup);
|
}
|
|
function handleQuery() {
|
queryParams.value.pageNum = 1;
|
getList();
|
}
|
function resetQuery(){
|
proxy.resetForm(queryRef);
|
handleQuery();
|
}
|
function handleAdd(){
|
reset();
|
pageEl.open = true;
|
pageEl.title = "添加任务";
|
}
|
// 修改按钮操作
|
function handleUpdate(payload: MouseEvent,row?:jobF){
|
reset();
|
const jobId = row?.jobId || ids.value;
|
getJob(jobId).then(res=>{
|
form.value = res.data;
|
pageEl.open = true;
|
pageEl.title = "修改任务";
|
})
|
}
|
// 删除按钮操作
|
function handleDelete(payload: MouseEvent,row?:jobF){
|
const jobIds = row?.jobId ||ids.value;
|
proxy.$modal.confirm(`是否确认删除定时任务编号为"${jobIds}"的数据项？`).then(function () {
|
return delJob(jobIds);
|
}).then(()=>{
|
getList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
}
|
//导出按钮操作
|
function handleExport(){
|
proxy.download("monitor/job/export",{
|
...queryParams.value
|
},`job_${new Date().getTime()}.xlsx`)
|
}
|
//执行一次
|
function handleRun(row:jobF) {
|
proxy.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?').then(function () {
|
return runJob({jobId:row.jobId, jobGroup:row.jobGroup});
|
}).then(() => {
|
proxy.$modal.msgSuccess("执行成功");
|
})
|
}
|
//任务详情
|
function handleView(row:jobF) {
|
getJob(row.jobId).then(res=>{
|
form.value = res.data;
|
pageEl.openView = true;
|
})
|
}
|
|
/**
|
* 任务日志列表查询
|
*/
|
function handleJobLog(payload: MouseEvent,row?:jobF){
|
const jobId = row?.jobId || 0;
|
router.push({path: "/monitor/job-log/index",query:{jobId:jobId}})
|
}
|
function handleSelectionChange(selection:jobF[]) {
|
ids.value = selection.map(item=>item.jobId);
|
pageEl.single = selection.length !== 1;
|
pageEl.multiple = !selection.length;
|
}
|
function cancel() {
|
pageEl.open = false;
|
reset();
|
}
|
function submitForm() {
|
jobRef.value?.validate((valid)=>{
|
if (valid){
|
if (form.value.jobId !== undefined){
|
updateJob(form.value).then(res=>{
|
proxy.$modal.msgSuccess("修改成功！");
|
pageEl.open = false;
|
getList();
|
})
|
}else{
|
addJob(form.value).then(res=>{
|
proxy.$modal.msgSuccess("新增成功");
|
pageEl.open = false;
|
getList();
|
})
|
}
|
}
|
})
|
}
|
function reset(){
|
|
proxy.resetForm(jobRef.value)
|
}
|
|
/** cron表达式按钮操作 */
|
function handleShowCron() {
|
pageEl.expression = form.value.cronExpression;
|
pageEl.openCron = true;
|
}
|
|
function handleStatusChange(row:any) {
|
let text = row.status === "0"? "启用":"停用";
|
proxy.$modal.confirm(`确认要"${text}""${row.jobName}"任务吗？`).then(()=>{
|
return changeJobStatus({jobId:row.jobId,status:row.status})
|
}).then(()=>{
|
proxy.$modal.megSuccess(`${text}成功`);
|
}).catch(()=>{
|
row.status = row.status === "0"?"1":"0"
|
})
|
}
|
getList();
|
|
</script>
|
|
<style scoped>
|
|
</style>
|
