278 lines
8.5 KiB
Vue
278 lines
8.5 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<a-form :model="queryForm" ref="queryFormRef" layout="inline">
|
|
<a-form-item field="jobName" label="任务名称">
|
|
<a-input v-model="queryForm.jobName" placeholder="请输入任务名称" @press-enter="handleQuery" />
|
|
</a-form-item>
|
|
<a-form-item field="jobGroup" label="任务分组">
|
|
<a-select v-model="queryForm.jobGroup" placeholder="请选择任务分组">
|
|
<a-option value="DEFAULT">默认</a-option>
|
|
<a-option value="SYSTEM">系统</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item field="status" label="状态">
|
|
<a-select v-model="queryForm.status" placeholder="请选择任务状态">
|
|
<a-option :value="2">正常</a-option>
|
|
<a-option :value="1">关闭</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" @click="handleQuery">查询</a-button>
|
|
<a-button @click="handleResetQuery">重置</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<a-divider />
|
|
|
|
<div class="table-action">
|
|
<a-button type="primary" @click="handleAdd">新增定时任务</a-button>
|
|
</div>
|
|
|
|
<a-table :data="tableData" :columns="columns" :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.count, current: currentPage }">
|
|
<template #status="{ record }">
|
|
<a-tag v-if="record.status == 2" color="green">正常</a-tag>
|
|
<a-tag v-if="record.status == 1" color="red">停用</a-tag>
|
|
</template>
|
|
<template #action="{ record }">
|
|
<a-button type="text" @click="handleUpdate(record)">修改</a-button>
|
|
<a-button type="text" status="success" v-if="record.entry_id == 0" @click="handleStart(record.jobId)">启动</a-button>
|
|
<a-button type="text" status="danger" v-if="record.entry_id !== 0" @click="handleStop(record.jobId)">停止</a-button>
|
|
<a-button type="text" status="danger" @click="() => { deleteVisible = true; deleteData = [record.jobId]; }">删除</a-button>
|
|
</template>
|
|
</a-table>
|
|
|
|
<a-modal
|
|
v-model:visible="modalVisible"
|
|
title-align="start"
|
|
:title="modalTitle"
|
|
:on-before-ok="onBeforeOk"
|
|
@ok="handleOk"
|
|
@cancel="$refs.modalFormRef.resetFields()"
|
|
>
|
|
<a-form
|
|
:model="modalForm"
|
|
:rules="rules"
|
|
ref="modalFormRef"
|
|
auto-label-width
|
|
>
|
|
<a-form-item field="jobName" label="任务名称">
|
|
<a-input
|
|
v-model="modalForm.jobName"
|
|
placeholder="请输入任务名称"
|
|
></a-input>
|
|
</a-form-item>
|
|
<a-form-item field="jobGroup" label="任务分组">
|
|
<a-select v-model="modalForm.jobGroup" placeholder="请选择任务分组">
|
|
<a-option value="DEFAULT">默认</a-option>
|
|
<a-option value="SYSTEM">系统</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item field="invokeTarget" label="调用目标">
|
|
<a-input
|
|
v-model="modalForm.invokeTarget"
|
|
placeholder="调用目标"
|
|
></a-input>
|
|
</a-form-item>
|
|
<a-form-item field="args" label="目标参数">
|
|
<a-input v-model="modalForm.args" placeholder="目标参iuu数"></a-input>
|
|
</a-form-item>
|
|
<a-form-item field="cronExpression" label="Cron表达式">
|
|
<a-input
|
|
v-model="modalForm.cronExpression"
|
|
placeholder="Cron表达式"
|
|
></a-input>
|
|
</a-form-item>
|
|
<a-form-item field="concurrent" label="是否并发">
|
|
<a-radio-group v-model="modalForm.concurrent" type="button">
|
|
<a-radio :value="0">允许</a-radio>
|
|
<a-radio :value="1">禁止</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item field="jobType" label="调用类型">
|
|
<a-radio-group v-model="modalForm.jobType" type="button">
|
|
<a-radio :value="1">接口</a-radio>
|
|
<a-radio :value="2">函数</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item field="misfirePolicy" label="执行策略">
|
|
<a-radio-group v-model="modalForm.misfirePolicy" type="button">
|
|
<a-radio :value="1">立即执行</a-radio>
|
|
<a-radio :value="2">执行一次</a-radio>
|
|
<a-radio :value="3">放弃执行</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item field="status" label="状态">
|
|
<a-select v-model="modalForm.status">
|
|
<a-option :value="2">正常</a-option>
|
|
<a-option :value="1">停用</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- Akiraka 20230223 删除与批量删除 开始 -->
|
|
<DeleteModal
|
|
:data="deleteData"
|
|
:visible="deleteVisible"
|
|
:apiDelete="delSysJob"
|
|
@deleteVisibleChange="() => deleteVisible = false"
|
|
/>
|
|
<!-- Akiraka 20230223 删除与批量删除 结束 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted, getCurrentInstance, watch } from 'vue';
|
|
import { listSysJob, addSysJob, updateSysJob, delSysJob, startJob, removeJob } from '@/api/sys-job';
|
|
|
|
// Akiraka 20230210 删除数据
|
|
const deleteData = ref([])
|
|
// Akiraka 20230210 删除对话框
|
|
const deleteVisible = ref(false)
|
|
// Akiraka 20230210 监听删除事件
|
|
watch(() => deleteVisible.value ,(value) => {
|
|
if ( value == false ) {
|
|
getSysJobListInfo(queryForm);
|
|
}
|
|
})
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const currentPage = ref(1);
|
|
// Pager
|
|
const pager = {
|
|
count: 0,
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
};
|
|
|
|
const queryForm = reactive({});
|
|
const modalForm = reactive({
|
|
concurrent: 1,
|
|
jobType: 1,
|
|
misfirePolicy: 1,
|
|
status: 2,
|
|
});
|
|
|
|
// 表单检验规则
|
|
const rules = {
|
|
jobName: [{ required: true, message: '请输入任务名称' }],
|
|
jobGroup: [{ required: true, message: '请选择任务分组' }],
|
|
invokeTarget: [{ required: true, message: '请输入调用目标' }],
|
|
cronExpression: [{ required: true, message: '请输入Cron表达式' }],
|
|
status: [{ required: true, message: '请选择状态' }],
|
|
};
|
|
|
|
const modalVisible = ref(false);
|
|
const modalTitle = ref('默认标题');
|
|
|
|
const tableData = ref([]);
|
|
const columns = [
|
|
{ title: '编号', dataIndex: 'jobId' },
|
|
{ title: '任务名称', dataIndex: 'jobName' },
|
|
{ title: '任务分组', dataIndex: 'jobGroup' },
|
|
{ title: '任务表达式', dataIndex: 'cronExpression' },
|
|
{ title: '调用目标', dataIndex: 'invokeTarget' },
|
|
{ title: '状态', dataIndex: 'status', slotName: 'status' },
|
|
{ title: '操作', slotName: 'action' },
|
|
];
|
|
|
|
// 查询任务
|
|
const handleQuery = () => {
|
|
getSysJobListInfo(queryForm);
|
|
}
|
|
|
|
// 重置查询
|
|
const handleResetQuery = () => {
|
|
proxy.$refs.queryFormRef.resetFields();
|
|
|
|
getSysJobListInfo();
|
|
}
|
|
|
|
// 新增任务
|
|
const handleAdd = () => {
|
|
modalVisible.value = true;
|
|
modalTitle.value = '新增任务';
|
|
};
|
|
|
|
// 修改任务
|
|
const handleUpdate = (record) => {
|
|
modalVisible.value = true;
|
|
modalTitle.value = '修改任务';
|
|
|
|
Object.assign(modalForm, record);
|
|
};
|
|
|
|
// 启动定时任务
|
|
const handleStart = async (jobId) => {
|
|
await startJob(jobId);
|
|
proxy.$notification.success('启动任务成功！')
|
|
|
|
getSysJobListInfo();
|
|
}
|
|
|
|
// 关闭定时任务
|
|
const handleStop = async (jobId) => {
|
|
await removeJob(jobId);
|
|
proxy.$notification.success('已停止任务！')
|
|
|
|
getSysJobListInfo();
|
|
}
|
|
|
|
// Modal 触发oK事件前
|
|
const onBeforeOk = (done) => {
|
|
proxy.$refs.modalFormRef.validate((err) => {
|
|
if (!err) {
|
|
return done();
|
|
} else {
|
|
proxy.$message.error('表单校验失败');
|
|
return done(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
// Modal 触发ok事件
|
|
const handleOk = async () => {
|
|
if (modalForm.jobId) {
|
|
const { code, msg } = await updateSysJob(modalForm);
|
|
if (code == 200 ) {
|
|
proxy.$notification.success('修改成功');
|
|
} else {
|
|
proxy.$notification.error(msg);
|
|
}
|
|
} else {
|
|
const { code, msg } = await addSysJob(modalForm);
|
|
if (code == 200 ) {
|
|
proxy.$notification.success('新增成功');
|
|
} else {
|
|
proxy.$notification.error(msg);
|
|
}
|
|
}
|
|
getSysJobListInfo();
|
|
};
|
|
|
|
// 获取系统任务信息
|
|
const getSysJobListInfo = async (params = {}) => {
|
|
const { data, code, msg } = await listSysJob(params);
|
|
if ( code == 200 ) {
|
|
tableData.value = data.list;
|
|
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
|
|
} else {
|
|
proxy.$notification.error(msg);
|
|
}
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
getSysJobListInfo();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.table-action {
|
|
margin-bottom: 12px;
|
|
}
|
|
</style>
|