auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page: 📄 创建任务调度页面

This commit is contained in:
bunny 2024-10-15 16:52:03 +08:00
parent f1e88d4e6b
commit 9d06991609
6 changed files with 66 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/store/monitor/schedulers.ts
View File

@ -26,6 +26,8 @@ export const useSchedulersStore = defineStore('schedulersStore', {
triggerName: undefined,
// triggerState触发器状态
triggerState: undefined,
// 执行方法
jobMethodName: undefined,
},
// 分页查询结果
pagination: {

23
src/views/monitor/schedulers/index.vue
View File

@ -4,7 +4,7 @@ import { columns } from '@/views/monitor/schedulers/utils/columns';
import PureTableBar from '@/components/TableBar/src/bar';
import AddFill from '@iconify-icons/ri/add-circle-line';
import PureTable from '@pureadmin/table';
import { onAdd, onDelete, onSearch, onUpdate } from '@/views/monitor/schedulers/utils/hooks';
import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/monitor/schedulers/utils/hooks';
import Delete from '@iconify-icons/ep/delete';
import EditPen from '@iconify-icons/ep/edit-pen';
import Refresh from '@iconify-icons/ep/refresh';
@ -35,6 +35,14 @@ const onPageSizeChange = async (value: number) => {
await onSearch();
};
/**
* * 选择多行
* @param rows
*/
const onSelectionChange = (rows: Array<any>) => {
deleteIds.value = rows.map((row: any) => row.id);
};
/**
* 重置表单
* @param formEl
@ -59,8 +67,8 @@ onMounted(() => {
<el-form-item :label="$t('schedulers_jobGroup')" prop="jobGroup">
<el-input v-model="schedulersStore.form.jobGroup" :placeholder="`${$t('input')}${$t('schedulers_jobGroup')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item :label="$t('description')" prop="description">
<el-input v-model="schedulersStore.form.description" :placeholder="`${$t('input')}${$t('description')}`" class="!w-[180px]" clearable />
<el-form-item :label="$t('schedulers_description')" prop="description">
<el-input v-model="schedulersStore.form.description" :placeholder="`${$t('input')}${$t('schedulers_description')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item :label="$t('schedulers_jobClassName')" prop="jobClassName">
<el-input v-model="schedulersStore.form.jobClassName" :placeholder="`${$t('input')}${$t('schedulers_jobClassName')}`" class="!w-[180px]" clearable />
@ -71,6 +79,9 @@ onMounted(() => {
<el-form-item :label="$t('schedulers_triggerState')" prop="triggerState">
<el-input v-model="schedulersStore.form.triggerState" :placeholder="`${$t('input')}${$t('schedulers_triggerState')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item :label="$t('schedulers_jobMethodName')" prop="jobMethodName">
<el-input v-model="schedulersStore.form.jobMethodName" :placeholder="`${$t('input')}${$t('schedulers_jobMethodName')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="schedulersStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
@ -80,6 +91,11 @@ onMounted(() => {
<PureTableBar :columns="columns" title="Schedulers视图" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
<!-- 批量删除按钮 -->
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
{{ $t('delete_batches') }}
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
@ -100,6 +116,7 @@ onMounted(() => {
showOverflowTooltip
table-layout="auto"
@page-size-change="onPageSizeChange"
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #createUser="{ row }">

15
src/views/monitor/schedulers/schedulers-dialog.vue
View File

@ -17,10 +17,8 @@ const props = withDefaults(defineProps<FormProps>(), {
jobClassName: undefined,
// corn表达式
cronExpression: undefined,
// 触发器名称
triggerName: undefined,
// triggerState触发器状态
triggerState: undefined,
// 执行方法
jobMethodName: undefined,
}),
});
@ -38,7 +36,7 @@ defineExpose({ formRef });
<el-form-item :label="$t('schedulers_jobGroup')" prop="jobGroup">
<el-input v-model="form.jobGroup" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('description')" prop="description">
<el-form-item :label="$t('schedulers_description')" prop="description">
<el-input v-model="form.description" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('schedulers_jobClassName')" prop="jobClassName">
@ -47,11 +45,8 @@ defineExpose({ formRef });
<el-form-item :label="$t('schedulers_cronExpression')" prop="cronExpression">
<el-input v-model="form.cronExpression" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('schedulers_triggerName')" prop="triggerName">
<el-input v-model="form.triggerName" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('schedulers_triggerState')" prop="triggerState">
<el-input v-model="form.triggerState" autocomplete="off" type="text" />
<el-form-item :label="$t('schedulers_jobMethodName')" prop="jobMethodName">
<el-input v-model="form.jobMethodName" autocomplete="off" type="text" />
</el-form-item>
</el-form>
</template>

23
src/views/monitor/schedulers/utils/columns.ts
View File

@ -3,22 +3,25 @@ import { $t } from '@/plugins/i18n';
// 表格列
export const columns: TableColumnList = [
{ type: 'selection', align: 'left' },
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
{ label: $t('id'), prop: 'id' },
// 任务名称
{ label: $t('schedulers_jobName'), prop: 'jobName' },
// 任务分组
{ label: $t('schedulers_jobGroup'), prop: 'jobGroup' },
// 任务详情
{ label: $t('description'), prop: 'description' },
{ label: $t('schedulers_description'), prop: 'description' },
// 任务类名称
{ label: $t('schedulers_jobClassName'), prop: 'jobClassName' },
// corn表达式
{ label: $t('schedulers_cronExpression'), prop: 'cronExpression' },
// 触发器名称
{ label: $t('schedulers_triggerName'), prop: 'triggerName' },
// triggerState触发器状态
{ label: $t('schedulers_triggerState'), prop: 'triggerState' },
// 操作
// 执行方法
{ label: $t('schedulers_jobMethodName'), prop: 'jobMethodName' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];
@ -29,13 +32,11 @@ export const rules = reactive({
// 任务分组
jobGroup: [{ required: true, message: `${$t('input')}${$t('schedulers_jobGroup')}`, trigger: 'blur' }],
// 任务详情
description: [{ required: true, message: `${$t('input')}${$t('description')}`, trigger: 'blur' }],
description: [{ required: true, message: `${$t('input')}${$t('schedulers_description')}`, trigger: 'blur' }],
// 任务类名称
jobClassName: [{ required: true, message: `${$t('input')}${$t('schedulers_jobClassName')}`, trigger: 'blur' }],
// corn表达式
cronExpression: [{ required: true, message: `${$t('input')}${$t('schedulers_cronExpression')}`, trigger: 'blur' }],
// 触发器名称
triggerName: [{ required: true, message: `${$t('input')}${$t('schedulers_triggerName')}`, trigger: 'blur' }],
// triggerState触发器状态
triggerState: [{ required: true, message: `${$t('input')}${$t('schedulers_triggerState')}`, trigger: 'blur' }],
// 执行方法
jobMethodName: [{ required: true, message: `${$t('input')}${$t('schedulers_jobMethodName')}`, trigger: 'blur' }],
});

30
src/views/monitor/schedulers/utils/hooks.ts
View File

@ -1,12 +1,14 @@
import { addDialog } from '@/components/BaseDialog/index';
import SchedulersDialog from '@/views/monitor/schedulers/schedulers-dialog.vue';
import { useSchedulersStore } from '@/store/monitor/schedulers.ts';
import { useSchedulersStore } from '@/store/monitor/schedulers';
import { h, ref } from 'vue';
import { messageBox } from '@/utils/message';
import type { FormItemProps } from '@/views/monitor/schedulers/utils/types';
import { $t } from '@/plugins/i18n';
export const formRef = ref();
// 删除ids
export const deleteIds = ref([]);
const schedulersStore = useSchedulersStore();
/**
@ -32,8 +34,7 @@ export function onAdd() {
description: undefined,
jobClassName: undefined,
cronExpression: undefined,
triggerName: undefined,
triggerState: undefined,
jobMethodName: undefined,
},
},
draggable: true,
@ -69,8 +70,7 @@ export function onUpdate(row: any) {
description: row.description,
jobClassName: row.jobClassName,
cronExpression: row.cronExpression,
triggerName: row.triggerName,
triggerState: row.triggerState,
jobMethodName: row.jobMethodName,
},
},
draggable: true,
@ -110,3 +110,23 @@ export const onDelete = async (row: any) => {
await schedulersStore.deleteSchedulers([id]);
await onSearch();
};
/**
* 批量删除
*/
export const onDeleteBatch = async () => {
const ids = deleteIds.value;
// 是否确认删除
const result = await messageBox({
title: $t('confirm_delete'),
showMessage: false,
confirmMessage: undefined,
cancelMessage: $t('cancel_delete'),
});
if (!result) return;
// 删除数据
await schedulersStore.deleteSchedulers(ids);
await onSearch();
};

6
src/views/monitor/schedulers/utils/types.ts
View File

@ -10,10 +10,8 @@ export interface FormItemProps {
jobClassName: string;
// corn表达式
cronExpression: string;
// 触发器名称
triggerName: string;
// triggerState触发器状态
triggerState: string;
// 执行方法
jobMethodName: string;
}
// 添加或修改表单Props