定时任务+静态路由

This commit is contained in:
陈红丽 2024-07-24 17:20:40 +08:00
parent 9ba016dc67
commit 1668d7a10b
9 changed files with 722 additions and 2 deletions

View File

@ -0,0 +1,60 @@
import { http } from '@/utils/http/axios';
/**
* @description:
*/
export function getDataSourceList(params?) {
return http.request({
url: '/data/source/page',
method: 'GET',
params,
});
}
/**
* @description: ID获取详情
*/
export function getDataSourceDetail(id) {
return http.request({
url: '/data/source/detail/'+id,
method: 'get',
});
}
/**
* @description:
*/
export function dataSourceAdd(data:any) {
return http.request({
url: '/data/source/add',
method: 'POST',
data,
});
}
/**
* @description:
*/
export function dataSourceUpdate(data:any) {
return http.request({
url: '/data/source/update',
method: 'PUT',
data
});
}
/**
* @description:
*/
export function dataSourceDelete(id) {
return http.request({
url: '/data/source/delete/'+id,
method: 'DELETE',
});
}
/**
* @description:
*/
export function dataSourceBatchDelete(data:any) {
return http.request({
url: '/data/source/batchDelete',
method: 'DELETE',
data
});
}

132
src/api/monitor/job.ts Normal file
View File

@ -0,0 +1,132 @@
import { http } from '@/utils/http/axios';
/**
* @description:
*/
export function getJobList(params?) {
return http.request({
url: '/job/page',
method: 'GET',
params,
});
}
export function getJobAllList(params?) {
return http.request({
url: '/job/list',
method: 'GET',
params,
});
}
/**
* @description: ID获取详情
*/
export function getJobDetail(id) {
return http.request({
url: '/job/detail/'+id,
method: 'get',
});
}
/**
* @description:
*/
export function jobAdd(data:any) {
return http.request({
url: '/job/add',
method: 'POST',
data,
});
}
/**
* @description:
*/
export function jobUpdate(data:any) {
return http.request({
url: '/job/update',
method: 'PUT',
data
});
}
/**
* @description:
*/
export function jobDelete(id) {
return http.request({
url: '/job/delete/'+id,
method: 'DELETE',
});
}
/**
* @description:
*/
export function jobBatchDelete(data:any) {
return http.request({
url: '/job/batchDelete',
method: 'DELETE',
data
});
}
/**
* @description:
*/
export function getJobRunOnce(id) {
return http.request({
url: '/job/runOnce/'+id,
method: 'get',
});
}
/**
* @description:
*/
export function getJobPause(id) {
return http.request({
url: '/job/pause/'+id,
method: 'get',
});
}
/**
* @description:
*/
export function getJobResume(id) {
return http.request({
url: '/job/resume/'+id,
method: 'get',
});
}
/**
* @description:
*/
export function getJobLogList(params?) {
return http.request({
url: '/job/log/page',
method: 'GET',
params,
});
}
/**
* @description: ID获取详情
*/
export function getJobLogDetail(id) {
return http.request({
url: '/job/log/detail/'+id,
method: 'get',
});
}
/**
* @description:
*/
export function jobLogDelete(id) {
return http.request({
url: '/job/log/delete/'+id,
method: 'DELETE',
});
}
/**
* @description:
*/
export function jobLogBatchDelete(data:any) {
return http.request({
url: '/job/log/batchDelete',
method: 'DELETE',
data
});
}

View File

@ -1,5 +1,7 @@
import type { AppRouteRecordRaw } from '@/router/types';
import { ErrorPage, RedirectName, Layout } from '@/router/constant';
import { ProjectOutlined } from '@vicons/antd';
import { renderIcon } from '@/utils/index';
// 404 on a page
export const ErrorPageRoute: AppRouteRecordRaw = {
@ -23,6 +25,31 @@ export const ErrorPageRoute: AppRouteRecordRaw = {
],
};
export const AboutPageRoute: AppRouteRecordRaw ={
path: '/about',
name: 'about',
component: Layout,
meta: {
sort: 12,
isRoot: true,
activeMenu: 'about_index',
alwaysShow: true,
icon: renderIcon(ProjectOutlined),
},
children: [
{
path: 'index',
name: `about_index`,
meta: {
title: '关于项目',
activeMenu: 'about_index',
},
component: () => import('@/views/about/index.vue'),
},
],
};
export const RedirectRoute: AppRouteRecordRaw = {
path: '/redirect',
name: `${RedirectName}Parent`,

View File

@ -5,7 +5,7 @@ import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { storage } from '@/utils/Storage';
import { PageEnum } from '@/enums/pageEnum';
import { ErrorPageRoute } from '@/router/base';
import { ErrorPageRoute,AboutPageRoute } from '@/router/base';
import NProgress from 'nprogress';
const LOGIN_PATH = PageEnum.BASE_LOGIN;
@ -70,6 +70,7 @@ export function createRouterGuards(router: Router) {
if (isErrorPage === -1) {
router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
}
router.addRoute(AboutPageRoute as unknown as RouteRecordRaw);
const redirectPath = (from.query.redirect || to.path) as string;
const redirect = decodeURIComponent(redirectPath);

View File

@ -37,7 +37,7 @@
v-if="editVisible"
:adSortId="adSortId"
v-model:visible="editVisible"
@success="reloadTable"
@success="reloadTable('noRefresh')"
>
</editDialog>
</PageWrapper>

View File

@ -0,0 +1,48 @@
import { h } from 'vue';
import { ElTag } from 'element-plus';
export const columns = [
{
type: 'selection',
},
{
label: '任务名称',
prop: 'jobName',
},
{
label: '任务分组',
prop: 'jobGroup',
},
{
label: '任务触发器',
prop: 'jobTrigger',
},
{
label: 'cron执行表达式',
prop: 'cronExpression',
},
{
label: '状态',
prop: 'status',
render(record) {
let typeText = ''
switch (record.row.status) {
case 0:
typeText='未发布'
break;
case 1:
typeText='运行中'
break;
case 2:
typeText='暂停'
break;
case 3:
typeText='删除'
break;
default:
break;
}
return h('span', typeText || '-');
},
},
];

View File

@ -0,0 +1,194 @@
<template>
<el-dialog
v-model="props.visible"
:title="props.jobId?'编辑':'新增'"
width="600"
:close-on-click-modal="false"
:before-close="dialogClose"
>
<el-form
class="ls-form"
ref="formRef"
:model="formData"
label-width="110px"
>
<el-form-item
label="任务名称"
prop="jobName"
:rules="{ required: true, message: '请输入任务名称', trigger: 'blur' }"
>
<el-input
class="ls-input"
v-model="formData.jobName"
placeholder="请输入任务名称"
clearable
/>
</el-form-item>
<el-form-item
label="任务别名"
prop="jobAlias"
:rules="{ required: true, message: '请输入任务别名', trigger: 'blur' }"
>
<el-input
class="ls-input"
v-model="formData.jobAlias"
placeholder="请输入任务别名"
clearable
/>
</el-form-item>
<el-form-item
label="任务分组"
prop="jobGroup"
:rules="{ required: true, message: '请输入任务分组', trigger: 'blur' }"
>
<el-select v-model="formData.jobGroup" placeholder="请选择任务分组">
<el-option label="DEFAULT" value="DEFAULT"></el-option>
</el-select>
</el-form-item>
<el-form-item
label="任务触发器"
prop="jobTrigger"
:rules="{ required: true, message: '请输入任务触发器', trigger: 'blur' }"
>
<el-input
class="ls-input"
v-model="formData.jobTrigger"
placeholder="请输入任务触发器"
clearable
/>
</el-form-item>
<el-form-item
label="任务状态"
prop="status"
:rules="{ required: true, message: '请选择任务状态', trigger: 'blur' }"
>
<el-select v-model="formData.status" placeholder="请选择任务状态">
<el-option label="未发布" :value="0"></el-option>
<el-option label="运行中" :value="1"></el-option>
<el-option label="暂停" :value="2"></el-option>
<el-option label="删除" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item
label="正则表达式"
prop="cronExpression"
:rules="{ required: true, message: '请输入正则表达式', trigger: 'blur' }"
>
<el-input
class="ls-input"
v-model="formData.cronExpression"
placeholder="请输入正则表达式"
clearable
/>
</el-form-item>
<el-form-item
label="执行策略"
prop="executePolicy"
:rules="{ required: true, message: '请选择执行策略', trigger: 'blur' }"
>
<el-select v-model="formData.executePolicy" placeholder="请选择执行策略">
<el-option label="立即执行" :value="1"></el-option>
<el-option label="执行一次" :value="2"></el-option>
<el-option label="放弃执行" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否同步任务" prop="isSync" class="flex-1">
<el-radio-group v-model="formData.isSync" name="isSync">
<el-radio :value="1"></el-radio>
<el-radio :value="0"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="任务URL"
prop="url"
:rules="{ required: true, message: '请输入任务URL', trigger: 'blur' }"
>
<el-input
class="ls-input"
v-model="formData.url"
placeholder="请输入任务URL"
clearable
/>
</el-form-item>
<el-form-item label="任务备注" prop="note" :rules="{ required: true, message: '请输入任务备注', trigger: 'blur' }">
<el-input v-model="formData.note" type="textarea"/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogClose">取消</el-button>
<el-button :loading="subLoading" type="primary" @click="submit">
确定
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
import {getJobDetail,jobAdd,jobUpdate} from "@/api/monitor/job";
import {onMounted, reactive, shallowRef} from "vue";
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";
const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
const formData = reactive({
id: "",
jobName: "",
jobAlias: "",
jobGroup: "",
jobTrigger: "",
status: "",
cronExpression: "",
executePolicy: "",
isSync: 0,
url:"",
note: ""
});
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false
},
jobId: {
type: Number,
required: true,
default: 0
}
});
const handleSubmit = async () => {
await formRef.value?.validate();
props.jobId ? await jobUpdate(formData) : await jobAdd(formData);
message("操作成功");
emit("update:visible", false);
emit("success");
};
const dialogClose = () => {
emit("update:visible", false);
};
const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
const setFormData = async () => {
const data = await getJobDetail(props.jobId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
onMounted(() => {
if (props.jobId) {
setFormData();
}
});
</script>

View File

@ -0,0 +1,220 @@
<template>
<PageWrapper>
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
</el-card>
<el-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@selection-change="onSelectionChange"
>
<template #tableTitle>
<el-button type="primary" @click="handleAdd">
<template #icon>
<el-icon class="el-input__icon">
<PlusOutlined />
</el-icon>
</template>
添加任务
</el-button>
<el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
<template #icon>
<el-icon class="el-input__icon">
<Delete />
</el-icon>
</template>
删除
</el-button>
</template>
<!-- <template #status="{ scope }">
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handelChangeStatus(scope.row)" />
</template> -->
</BasicTable>
</el-card>
<editDialog
v-if="editVisible"
:jobId="jobId"
v-model:visible="editVisible"
@success="reloadTable('noRefresh')"
>
</editDialog>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, ref, h,nextTick,defineAsyncComponent } from 'vue';
import { ColProps } from 'element-plus';
import { schemas } from './querySchemas';
import { useForm } from '@/components/Form/index';
import { TableAction } from '@/components/Table';
import { getJobList,jobDelete,jobBatchDelete,getJobRunOnce,getJobPause,getJobResume } from '@/api/monitor/job';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import {message,confirm} from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
import('./edit.vue')
)
const jobId =ref(0)
const editVisible=ref(false)
const selectionData = ref([])
const tableRef = ref();
const formParams = reactive({
jobName:'',
status:''
});
const actionColumn = reactive({
width: 300,
label: '操作',
prop: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
// {
// label: '',
// type: 'warning',
// onClick: handelChangeStatus.bind(null, record),
// ifShow: () => {
// return record.row.status==0 ||record.row.status==2;
// },
// },
// {
// label: '',
// type: 'warning',
// onClick: handelChangeStatus.bind(null, record),
// ifShow: () => {
// return record.row.status==1;
// },
// },
// {
// label: '',
// type: 'warning',
// onClick: handelRunOnce.bind(null, record),
// },
{
label: '编辑',
type: 'warning',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
// auth: ['basic_list'],
},
{
label: '删除',
type: 'danger',
onClick: handleDelete.bind(null, record),
// isShow auth
ifShow: () => {
return true;
},
// :
// auth: ['basic_list'],
},
],
dropDownActions: [
{
label: '启动',
key: 'resume',
ifShow: () => {
return record.row.status==0 ||record.row.status==2;
},
},
{
label: '暂停',
key: 'pause',
ifShow: () => {
return record.row.status==1;
},
},
{
label: '执行一次',
key: 'runOnce'
},
{
label: '调度日志',
key: 'jogLog'
},
],
select: (key) => {
if(key=='resume' || key=='pause') {
handelChangeStatus(record)
} else if(key=='runOnce') {
handelRunOnce(record)
}
},
});
},
});
const loadDataTable = async (res: any) => {
const result = await getJobList({ ...formParams, ...res });
return result;
};
function reloadTable(noRefresh='') {
tableRef.value.reload(noRefresh?{}:{pageNo:1});
}
const [register, {}] = useForm({
labelWidth: 100,
layout: 'horizontal',
colProps: { span: 6 } as ColProps,
submitOnReset:true,
schemas
});
function handleSubmit(values: Recordable) {
handleReset()
for (const key in values) {
formParams[key] = values[key]
}
reloadTable();
}
function handleReset() {
for (const key in formParams) {
formParams[key] ='';
}
}
const handleAdd = async () => {
jobId.value=0
await nextTick();
editVisible.value=true
};
const handleEdit = async (record: Recordable) => {
jobId.value=record.row.id
await nextTick();
editVisible.value=true
};
const handelChangeStatus = async (record)=>{
await confirm(`确定要${record.row.status==1?'暂停':'启动'}`);
record.row.status==1 ? await getJobPause(record.row.id):await getJobResume(record.row.id)
reloadTable('noRefresh');
}
const handelRunOnce = async (record)=>{
await confirm('确定要执行一次?');
await getJobRunOnce(record.row.id)
message("执行成功");
}
async function handleDelete(record: Recordable) {
let ids = []
if(!record){
ids = selectionData.value.map(({id}) => id);
}
await confirm('确定要删除?');
record? await jobDelete(record.row.id):await jobBatchDelete(ids);
message("删除成功");
reloadTable()
}
function onSelectionChange(value){
selectionData.value = value
}
</script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,38 @@
import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'jobName',
component: 'Input',
label: '任务名称',
componentProps: {
placeholder: '请输入任务名称',
},
},
{
field: 'status',
component: 'Select',
label: '任务状态',
componentProps: {
placeholder: '请选择任务状态',
clearable: true,
options: [
{
label: '未发布',
value: 0,
},
{
label: '运行中',
value: 1,
},
{
label: '暂停',
value: 2,
},
{
label: '删除',
value: 3,
},
],
},
},
];