page: 📄 添加任务调度

src/api/v1/schedulers.ts

@@ -6,6 +6,11 @@ export const fetchGetSchedulersList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `schedulers/getSchedulersList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
+/** Schedulers视图---获取所有可用调度任务 */
+export const fetchGetAllScheduleJobList = () => {
+	return http.request<BaseResult<ResultTable>>('get', 'schedulers/getAllScheduleJobList');
+};
+
 /** Schedulers视图---添加Schedulers视图 */
 export const fetchAddSchedulers = (data: any) => {
 	return http.request<BaseResult<object>>('post', 'schedulers/addSchedulers', { data });

src/api/v1/schedulersGroup.ts

@@ -0,0 +1,27 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/** 任务调度分组---获取任务调度分组列表 */
+export const fetchGetSchedulersGroupList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `schedulersGroup/getSchedulersGroupList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/** 任务调度分组---获取所有任务调度分组 */
+export const fetchGetAllSchedulersGroup = () => {
+	return http.request<BaseResult<ResultTable>>('get', 'schedulersGroup/getAllSchedulersGroup');
+};
+
+/** 任务调度分组---添加任务调度分组 */
+export const fetchAddSchedulersGroup = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'schedulersGroup/addSchedulersGroup', { data });
+};
+
+/** 任务调度分组---更新任务调度分组 */
+export const fetchUpdateSchedulersGroup = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'schedulersGroup/updateSchedulersGroup', { data });
+};
+
+/** 任务调度分组---删除任务调度分组 */
+export const fetchDeleteSchedulersGroup = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'schedulersGroup/deleteSchedulersGroup', { data });
+};

src/store/monitor/schedulers.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { fetchAddSchedulers, fetchDeleteSchedulers, fetchGetSchedulersList, fetchUpdateSchedulers } from '@/api/v1/schedulers';
+import { fetchAddSchedulers, fetchDeleteSchedulers, fetchGetAllScheduleJobList, fetchGetSchedulersList, fetchUpdateSchedulers } from '@/api/v1/schedulers';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -12,6 +12,8 @@ export const useSchedulersStore = defineStore('schedulersStore', {
 		return {
 			// Schedulers视图列表
 			datalist: [],
+			// Schedulers视图列表
+			allScheduleJobList: [],
 			// 查询表单
 			form: {
 				// 任务名称
@@ -58,6 +60,13 @@ export const useSchedulersStore = defineStore('schedulersStore', {
 			return pagination(result);
 		},
 
+		/** 获取所有可用调度任务 */
+		async getAllScheduleJobList() {
+			const result = await fetchGetAllScheduleJobList();
+			if (result.code !== 200) return;
+			this.allScheduleJobList = result.data;
+		},
+
 		/** 添加Schedulers视图 */
 		async addSchedulers(data: any) {
 			const result = await fetchAddSchedulers(data);

src/store/monitor/schedulersGroup.ts

@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia';
+import { fetchAddSchedulersGroup, fetchDeleteSchedulersGroup, fetchGetAllSchedulersGroup, fetchGetSchedulersGroupList, fetchUpdateSchedulersGroup } from '@/api/v1/schedulersGroup';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 任务调度分组 Store
+ */
+export const useSchedulersGroupStore = defineStore('schedulersGroupStore', {
+	state() {
+		return {
+			// 任务调度分组列表
+			datalist: [],
+			// 所有任务分组
+			allSchedulersGroup: [],
+			// 查询表单
+			form: {
+				// 分组名称
+				groupName: undefined,
+				// 分组详情
+				description: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/** 获取任务调度分组 */
+		async getSchedulersGroupList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取任务调度分组列表
+			const result = await fetchGetSchedulersGroupList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/** 获取所有任务调度分组 */
+		async getAllSchedulersGroup() {
+			const result = await fetchGetAllSchedulersGroup();
+			if (result.code !== 200) return;
+			this.allSchedulersGroup = result.data;
+		},
+
+		/** 添加任务调度分组 */
+		async addSchedulersGroup(data: any) {
+			const result = await fetchAddSchedulersGroup(data);
+			return storeMessage(result);
+		},
+
+		/** 修改任务调度分组 */
+		async updateSchedulersGroup(data: any) {
+			const result = await fetchUpdateSchedulersGroup(data);
+			return storeMessage(result);
+		},
+
+		/** 删除任务调度分组 */
+		async deleteSchedulersGroup(data: any) {
+			const result = await fetchDeleteSchedulersGroup(data);
+			return storeMessage(result);
+		},
+	},
+});

src/views/monitor/files/files-dialog.vue

@@ -59,14 +59,14 @@ defineExpose({ formRef });
 		<el-form-item :label="$t('files_filepath')" prop="filepath">
 			<el-input v-if="form.isUpload" v-model="form.filepath" autocomplete="off" disabled type="text" />
 
-			<el-select v-else v-model="form.filepath" :placeholder="$t('files_filepath')" clearable filterable>
+			<el-select v-else v-model="form.filepath" :placeholder="$t('select') + $t('files_filepath')" clearable filterable>
 				<el-option v-for="(item, index) in filesStore.allFilesStoragePath" :key="index" :label="item" :navigationBar="false" :value="item" />
 			</el-select>
 		</el-form-item>
 
 		<!-- 文件类型---上传显示 -->
 		<el-form-item v-show="form.isUpload" :label="$t('files_fileType')" prop="fileType">
-			<el-select v-model="form.fileType" :placeholder="$t('files_fileType')" clearable filterable>
+			<el-select v-model="form.fileType" :placeholder="$t('select') + $t('files_fileType')" clearable filterable>
 				<el-option v-for="(item, index) in filesStore.allMediaTypes" :key="index" :label="item" :navigationBar="false" :value="item" />
 			</el-select>
 		</el-form-item>

src/views/monitor/schedulers/index.vue

@@ -79,9 +79,6 @@ 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>
@@ -129,9 +126,7 @@ onMounted(() => {
 
 					<template #operation="{ row }">
 						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
-						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<el-popconfirm :title="`${$t('delete')}${row.jobName}?`" @confirm="onDelete(row)">
-						<!-- TODO 待完成 -->
-						<el-popconfirm :title="`${$t('delete')}${row.email}?`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
 									{{ $t('delete') }}

src/views/monitor/schedulers/schedulers-dialog.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { rules } from '@/views/monitor/schedulers/utils/columns';
 import { FormProps } from '@/views/monitor/schedulers/utils/types';
 import { $t } from '@/plugins/i18n';
+import { useSchedulersGroupStore } from '@/store/monitor/schedulersGroup';
+import { useSchedulersStore } from '@/store/monitor/schedulers';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -24,29 +26,49 @@ const props = withDefaults(defineProps<FormProps>(), {
 
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);
+const schedulersStore = useSchedulersStore();
+const schedulersGroupStore = useSchedulersGroupStore();
+
+onMounted(() => {
+	// 获取所有可用调度任务
+	schedulersStore.getAllScheduleJobList();
+
+	// 获取所有任务调度分组
+	schedulersGroupStore.getAllSchedulersGroup();
+});
 
 defineExpose({ formRef });
 </script>
 
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 任务名称 -->
 		<el-form-item :label="$t('schedulers_jobName')" prop="jobName">
-			<el-input v-model="form.jobName" autocomplete="off" type="text" />
+			<el-input v-model="form.jobName" :placeholder="$t('input') + $t('schedulers_jobName')" autocomplete="off" type="text" />
 		</el-form-item>
+
+		<!-- 任务分组 -->
 		<el-form-item :label="$t('schedulers_jobGroup')" prop="jobGroup">
-			<el-input v-model="form.jobGroup" autocomplete="off" type="text" />
+			<el-select v-model="form.jobGroup" :placeholder="$t('select') + $t('schedulers_jobGroup')" clearable filterable>
+				<el-option v-for="(item, index) in schedulersGroupStore.allSchedulersGroup" :key="index" :label="item.groupName" :navigationBar="false" :value="item.groupName" />
+			</el-select>
 		</el-form-item>
+
+		<!-- 任务详情 -->
 		<el-form-item :label="$t('schedulers_description')" prop="description">
-			<el-input v-model="form.description" autocomplete="off" type="text" />
+			<el-input v-model="form.description" :placeholder="$t('input') + $t('schedulers_description')" autocomplete="off" type="text" />
 		</el-form-item>
+
+		<!-- 需要执行的任务类名 -->
 		<el-form-item :label="$t('schedulers_jobClassName')" prop="jobClassName">
-			<el-input v-model="form.jobClassName" autocomplete="off" type="text" />
+			<el-select v-model="form.jobClassName" :placeholder="$t('select') + $t('schedulers_jobClassName')" clearable filterable>
+				<el-option v-for="(item, index) in schedulersStore.allScheduleJobList" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
+			</el-select>
 		</el-form-item>
+
+		<!-- 执行的corn表达式 -->
 		<el-form-item :label="$t('schedulers_cronExpression')" prop="cronExpression">
-			<el-input v-model="form.cronExpression" autocomplete="off" type="text" />
+			<el-input v-model="form.cronExpression" :placeholder="$t('input') + $t('schedulers_cronExpression')" autocomplete="off" type="text" />
-		</el-form-item>
-		<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>

src/views/monitor/schedulers/utils/columns.ts

@@ -5,7 +5,6 @@ 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' },
 	// 任务分组
@@ -16,8 +15,6 @@ export const columns: TableColumnList = [
 	{ label: $t('schedulers_jobClassName'), prop: 'jobClassName' },
 	// corn表达式
 	{ label: $t('schedulers_cronExpression'), prop: 'cronExpression' },
-	// 执行方法
-	{ 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 },
@@ -37,6 +34,4 @@ export const rules = reactive({
 	jobClassName: [{ required: true, message: `${$t('input')}${$t('schedulers_jobClassName')}`, trigger: 'blur' }],
 	// corn表达式
 	cronExpression: [{ required: true, message: `${$t('input')}${$t('schedulers_cronExpression')}`, trigger: 'blur' }],
-	// 执行方法
-	jobMethodName: [{ required: true, message: `${$t('input')}${$t('schedulers_jobMethodName')}`, trigger: 'blur' }],
 });

src/views/monitor/schedulers/utils/hooks.ts

@@ -34,7 +34,6 @@ export function onAdd() {
 				description: undefined,
 				jobClassName: undefined,
 				cronExpression: undefined,
-				jobMethodName: undefined,
 			},
 		},
 		draggable: true,
@@ -70,7 +69,6 @@ export function onUpdate(row: any) {
 				description: row.description,
 				jobClassName: row.jobClassName,
 				cronExpression: row.cronExpression,
-				jobMethodName: row.jobMethodName,
 			},
 		},
 		draggable: true,

src/views/monitor/schedulers/utils/types.ts

@@ -10,8 +10,6 @@ export interface FormItemProps {
 	jobClassName: string;
 	// corn表达式
 	cronExpression: string;
-	// 执行方法
-	jobMethodName: string;
 }
 
 // 添加或修改表单Props

src/views/monitor/schedulersGroup/index.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/monitor/schedulersGroup/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/monitor/schedulersGroup/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import { $t } from '@/plugins/i18n';
+import { useSchedulersGroupStore } from '@/store/monitor/schedulersGroup';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { FormInstance } from 'element-plus';
+
+const tableRef = ref();
+const formRef = ref();
+const schedulersGroupStore = useSchedulersGroupStore();
+
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	schedulersGroupStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	schedulersGroupStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * * 选择多行
+ * @param rows
+ */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
+/**
+ * 重置表单
+ * @param formEl
+ */
+const resetForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="schedulersGroupStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<el-form-item :label="$t('schedulersGroup_groupName')" prop="groupName">
+				<el-input v-model="schedulersGroupStore.form.groupName" :placeholder="`${$t('input')}${$t('schedulersGroup_groupName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('schedulersGroup_description')" prop="description">
+				<el-input v-model="schedulersGroupStore.form.description" :placeholder="`${$t('input')}${$t('schedulersGroup_description')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="schedulersGroupStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" title="任务调度分组" @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 }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="schedulersGroupStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="schedulersGroupStore.loading"
+					:pagination="schedulersGroupStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@selection-change="onSelectionChange"
+					@page-current-change="onCurrentPageChange"
+				>
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<!-- TODO 待完成 -->
+						<el-popconfirm :title="`${$t('delete')}${row.email}?`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

src/views/monitor/schedulersGroup/schedulers-group-dialog.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/monitor/schedulersGroup/utils/columns';
+import { FormProps } from '@/views/monitor/schedulersGroup/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 分组名称
+		groupName: undefined,
+		// 分组详情
+		description: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<el-form-item :label="$t('schedulersGroup_groupName')" prop="groupName">
+			<el-input v-model="form.groupName" :placeholder="$t('input') + $t('schedulersGroup_groupName')" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('schedulersGroup_description')" prop="description">
+			<el-input v-model="form.description" :placeholder="$t('input') + $t('schedulersGroup_description')" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/monitor/schedulersGroup/utils/columns.ts

@@ -0,0 +1,26 @@
+import { reactive } from 'vue';
+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('schedulersGroup_groupName'), prop: 'groupName' },
+	// 分组详情
+	{ label: $t('schedulersGroup_description'), prop: 'description' },
+	{ 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' },
+];
+
+// 添加规则
+export const rules = reactive({
+	// 分组名称
+	groupName: [{ required: true, message: `${$t('input')}${$t('schedulersGroup_groupName')}`, trigger: 'blur' }],
+	// 分组详情
+	description: [{ required: true, message: `${$t('input')}${$t('schedulersGroup_description')}`, trigger: 'blur' }],
+});

src/views/monitor/schedulersGroup/utils/hooks.ts

@@ -0,0 +1,124 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import SchedulersGroupDialog from '@/views/monitor/schedulersGroup/schedulers-group-dialog.vue';
+import { useSchedulersGroupStore } from '@/store/monitor/schedulersGroup';
+import { h, ref } from 'vue';
+import { messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/monitor/schedulersGroup/utils/types';
+import { $t } from '@/plugins/i18n';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const schedulersGroupStore = useSchedulersGroupStore();
+
+/**
+ * * 搜索初始化任务调度分组
+ */
+export async function onSearch() {
+	schedulersGroupStore.loading = true;
+	await schedulersGroupStore.getSchedulersGroupList();
+	schedulersGroupStore.loading = false;
+}
+
+/**
+ * * 添加任务调度分组
+ */
+export function onAdd() {
+	addDialog({
+		title: `${$t('add_new')}${$t('schedulersGroup')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				groupName: undefined,
+				description: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(SchedulersGroupDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await schedulersGroupStore.addSchedulersGroup(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新任务调度分组
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('schedulersGroup')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				groupName: row.groupName,
+				description: row.description,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(SchedulersGroupDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await schedulersGroupStore.updateSchedulersGroup({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 删除任务调度分组
+ */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await schedulersGroupStore.deleteSchedulersGroup([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 schedulersGroupStore.deleteSchedulersGroup(ids);
+	await onSearch();
+};

src/views/monitor/schedulersGroup/utils/types.ts

@@ -0,0 +1,12 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 分组名称
+	groupName: string;
+	// 分组详情
+	description: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}