😎1、调整定时任务页面，统一所有页面vxe-table样式 2、升级npm依赖

Web/package.json

@@ -2,7 +2,7 @@
 	"name": "admin.net.pro",
 	"type": "module",
 	"version": "2.4.33",
-	"lastBuildTime": "2024.07.27",
+	"lastBuildTime": "2024.07.28",
 	"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
 	"author": "zuohuaijun",
 	"license": "MIT",
@@ -44,7 +44,7 @@
 		"monaco-editor": "^0.50.0",
 		"mqtt": "^4.3.8",
 		"nprogress": "^0.2.0",
-		"ol": "^9.2.4",
+		"ol": "^10.0.0",
 		"pinia": "^2.2.0",
 		"print-js": "^1.6.0",
 		"push.js": "^1.0.12",
@@ -79,16 +79,16 @@
 		"@iconify/vue": "^4.1.2",
 		"@plugin-web-update-notification/vite": "^1.7.1",
 		"@types/lodash-es": "^4.17.12",
-		"@types/node": "^20.14.12",
+		"@types/node": "^20.14.13",
 		"@types/nprogress": "^0.2.3",
 		"@types/sortablejs": "^1.15.8",
 		"@typescript-eslint/eslint-plugin": "^7.17.0",
 		"@typescript-eslint/parser": "^7.17.0",
-		"@vitejs/plugin-vue": "^5.1.0",
+		"@vitejs/plugin-vue": "^5.1.1",
 		"@vitejs/plugin-vue-jsx": "^4.0.0",
 		"@vue/compiler-sfc": "^3.4.34",
 		"code-inspector-plugin": "^0.15.2",
-		"eslint": "^9.7.0",
+		"eslint": "^9.8.0",
 		"eslint-plugin-vue": "^9.27.0",
 		"less": "^4.2.0",
 		"prettier": "^3.3.3",

Web/src/api-services/apis/sys-wx-open-api.ts

@@ -18,9 +18,11 @@ import { Configuration } from '../configuration';
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
 import { AddSubscribeMessageTemplateInput } from '../models';
+import { AdminResultGenerateQRImageOutput } from '../models';
 import { AdminResultObject } from '../models';
 import { AdminResultWxOpenIdOutput } from '../models';
 import { AdminResultWxPhoneOutput } from '../models';
+import { GenerateQRImageInput } from '../models';
 import { SendSubscribeMessageInput } from '../models';
 import { WxOpenIdLoginInput } from '../models';
 /**
@@ -77,6 +79,54 @@ export const SysWxOpenApiAxiosParamCreator = function (configuration?: Configura
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * 
+         * @summary 生成二维码
+         * @param {GenerateQRImageInput} [body] 扫码进入的小程序页面路径，最大长度 128 个字符，不能为空； eg: pages / index ? id = AY000001
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        apiSysWxOpenGenerateQRImagePost: async (body?: GenerateQRImageInput, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/sysWxOpen/generateQRImage`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, 'https://example.com');
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+            const localVarRequestOptions :AxiosRequestConfig = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication Bearer required
+            // http bearer authentication required
+            if (configuration && configuration.accessToken) {
+                const accessToken = typeof configuration.accessToken === 'function'
+                    ? await configuration.accessToken()
+                    : await configuration.accessToken;
+                localVarHeaderParameter["Authorization"] = "Bearer " + accessToken;
+            }
+
+            localVarHeaderParameter['Content-Type'] = 'application/json-patch+json';
+
+            const query = new URLSearchParams(localVarUrlObj.search);
+            for (const key in localVarQueryParameter) {
+                query.set(key, localVarQueryParameter[key]);
+            }
+            for (const key in options.params) {
+                query.set(key, options.params[key]);
+            }
+            localVarUrlObj.search = (new URLSearchParams(query)).toString();
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            const needsSerialization = (typeof body !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
+            localVarRequestOptions.data =  needsSerialization ? JSON.stringify(body !== undefined ? body : {}) : (body || "");
+
+            return {
+                url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @summary 获取订阅消息模板列表 🔖
@@ -415,6 +465,20 @@ export const SysWxOpenApiFp = function(configuration?: Configuration) {
                 return axios.request(axiosRequestArgs);
             };
         },
+        /**
+         * 
+         * @summary 生成二维码
+         * @param {GenerateQRImageInput} [body] 扫码进入的小程序页面路径，最大长度 128 个字符，不能为空； eg: pages / index ? id &#x3D; AY000001
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async apiSysWxOpenGenerateQRImagePost(body?: GenerateQRImageInput, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<AdminResultGenerateQRImageOutput>>> {
+            const localVarAxiosArgs = await SysWxOpenApiAxiosParamCreator(configuration).apiSysWxOpenGenerateQRImagePost(body, options);
+            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
+                return axios.request(axiosRequestArgs);
+            };
+        },
         /**
          * 
          * @summary 获取订阅消息模板列表 🔖
@@ -521,6 +585,16 @@ export const SysWxOpenApiFactory = function (configuration?: Configuration, base
         async apiSysWxOpenAddSubscribeMessageTemplatePost(body?: AddSubscribeMessageTemplateInput, options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultObject>> {
             return SysWxOpenApiFp(configuration).apiSysWxOpenAddSubscribeMessageTemplatePost(body, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary 生成二维码
+         * @param {GenerateQRImageInput} [body] 扫码进入的小程序页面路径，最大长度 128 个字符，不能为空； eg: pages / index ? id &#x3D; AY000001
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async apiSysWxOpenGenerateQRImagePost(body?: GenerateQRImageInput, options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultGenerateQRImageOutput>> {
+            return SysWxOpenApiFp(configuration).apiSysWxOpenGenerateQRImagePost(body, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @summary 获取订阅消息模板列表 🔖
@@ -605,6 +679,17 @@ export class SysWxOpenApi extends BaseAPI {
     public async apiSysWxOpenAddSubscribeMessageTemplatePost(body?: AddSubscribeMessageTemplateInput, options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultObject>> {
         return SysWxOpenApiFp(this.configuration).apiSysWxOpenAddSubscribeMessageTemplatePost(body, options).then((request) => request(this.axios, this.basePath));
     }
+    /**
+     * 
+     * @summary 生成二维码
+     * @param {GenerateQRImageInput} [body] 扫码进入的小程序页面路径，最大长度 128 个字符，不能为空； eg: pages / index ? id &#x3D; AY000001
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SysWxOpenApi
+     */
+    public async apiSysWxOpenGenerateQRImagePost(body?: GenerateQRImageInput, options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultGenerateQRImageOutput>> {
+        return SysWxOpenApiFp(this.configuration).apiSysWxOpenGenerateQRImagePost(body, options).then((request) => request(this.axios, this.basePath));
+    }
     /**
      * 
      * @summary 获取订阅消息模板列表 🔖

Web/src/api-services/models/add-code-gen-input.ts

@@ -154,6 +154,14 @@ export interface AddCodeGenInput {
      */
     menuPid?: number | null;
 
+    /**
+     * 菜单图标
+     *
+     * @type {string}
+     * @memberof AddCodeGenInput
+     */
+    menuIcon?: string | null;
+
     /**
      * 页面目录
      *

Web/src/api-services/models/admin-result-generate-qrimage-output.ts

@@ -0,0 +1,69 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+import { GenerateQRImageOutput } from './generate-qrimage-output';
+ /**
+ * 全局返回结果
+ *
+ * @export
+ * @interface AdminResultGenerateQRImageOutput
+ */
+export interface AdminResultGenerateQRImageOutput {
+
+    /**
+     * 状态码
+     *
+     * @type {number}
+     * @memberof AdminResultGenerateQRImageOutput
+     */
+    code?: number;
+
+    /**
+     * 类型success、warning、error
+     *
+     * @type {string}
+     * @memberof AdminResultGenerateQRImageOutput
+     */
+    type?: string | null;
+
+    /**
+     * 错误信息
+     *
+     * @type {string}
+     * @memberof AdminResultGenerateQRImageOutput
+     */
+    message?: string | null;
+
+    /**
+     * @type {GenerateQRImageOutput}
+     * @memberof AdminResultGenerateQRImageOutput
+     */
+    result?: GenerateQRImageOutput;
+
+    /**
+     * 附加数据
+     *
+     * @type {any}
+     * @memberof AdminResultGenerateQRImageOutput
+     */
+    extras?: any | null;
+
+    /**
+     * 时间
+     *
+     * @type {Date}
+     * @memberof AdminResultGenerateQRImageOutput
+     */
+    time?: Date;
+}

Web/src/api-services/models/generate-qrimage-input.ts

@@ -0,0 +1,46 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+ /**
+ * 生成带参数小程序二维码
+ *
+ * @export
+ * @interface GenerateQRImageInput
+ */
+export interface GenerateQRImageInput {
+
+    /**
+     * 扫码进入的小程序页面路径，最大长度 128 个字符，不能为空； eg: pages/index?id=0001
+     *
+     * @type {string}
+     * @memberof GenerateQRImageInput
+     */
+    pagePath?: string | null;
+
+    /**
+     * 文件保存的名称
+     *
+     * @type {string}
+     * @memberof GenerateQRImageInput
+     */
+    imageName?: string | null;
+
+    /**
+     * 图片宽度 默认430
+     *
+     * @type {number}
+     * @memberof GenerateQRImageInput
+     */
+    width?: number;
+}

Web/src/api-services/models/generate-qrimage-output.ts

@@ -0,0 +1,40 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+ /**
+ * 
+ *
+ * @export
+ * @interface GenerateQRImageOutput
+ */
+export interface GenerateQRImageOutput {
+
+    /**
+     * @type {boolean}
+     * @memberof GenerateQRImageOutput
+     */
+    success?: boolean;
+
+    /**
+     * @type {string}
+     * @memberof GenerateQRImageOutput
+     */
+    imgPath?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof GenerateQRImageOutput
+     */
+    message?: string | null;
+}

Web/src/api-services/models/index.ts

@@ -24,6 +24,7 @@ export * from './admin-result-create-pay-transaction-output';
 export * from './admin-result-data-set';
 export * from './admin-result-data-table';
 export * from './admin-result-dictionary-string-string';
+export * from './admin-result-generate-qrimage-output';
 export * from './admin-result-get-refund-domestic-refund-by-out-refund-number-response';
 export * from './admin-result-iaction-result';
 export * from './admin-result-int32';
@@ -194,6 +195,8 @@ export * from './finish-status-enum';
 export * from './from';
 export * from './gen-auth-url-input';
 export * from './gender-enum';
+export * from './generate-qrimage-input';
+export * from './generate-qrimage-output';
 export * from './generate-signature-input';
 export * from './generic-parameter-attributes';
 export * from './get-refund-domestic-refund-by-out-refund-number-response';

Web/src/api-services/models/page-code-gen-input.ts

@@ -202,6 +202,14 @@ export interface PageCodeGenInput {
      */
     menuPid?: number | null;
 
+    /**
+     * 菜单图标
+     *
+     * @type {string}
+     * @memberof PageCodeGenInput
+     */
+    menuIcon?: string | null;
+
     /**
      * 页面目录
      *

Web/src/api-services/models/update-code-gen-input.ts

@@ -154,6 +154,14 @@ export interface UpdateCodeGenInput {
      */
     menuPid?: number | null;
 
+    /**
+     * 菜单图标
+     *
+     * @type {string}
+     * @memberof UpdateCodeGenInput
+     */
+    menuIcon?: string | null;
+
     /**
      * 页面目录
      *

Web/src/hooks/vxeTableOptionsHook.ts

@@ -1,92 +0,0 @@
-import { dayjs } from 'element-plus';
-import { reactive } from 'vue';
-import { VxeGridProps, VxeGridPropTypes } from 'vxe-table';
-
-/**
- * @param {String} id 表格唯一标识，为空时自动随机产生;
- * @param {String} id name:表格名称，与导出文件名有关;
- * @param {VxeGridPropTypes.Columns<any>} columns 列配置;
- * @param {boolean} enableExport 是否显示导出按钮;
- * @param {boolean} remoteExport 是否为服务器导出;
- * @param {Function} searchCallback 查询回调方法;
- * @param {Function} queryAllCallback 查询所有回调方法;
- * @param {Function} remoteExportCallback 服务器导出回调方法;
- */
-interface iVxeOption {
-	id?: string;
-	name?: string;
-	columns: VxeGridPropTypes.Columns<any>;
-	enableExport?: boolean;
-	remoteExport?: boolean;
-	searchCallback: Function;
-	queryAllCallback?: Function;
-	remoteExportCallback?: Function;
-}
-
-/**
- * Vxe表格参数化Hook
- * @param {iVxeOption} opt 参数
- * @param {VxeGridProps<RowVO>} extras 要覆盖的参数
- * @returns
- */
-export const useVxeTable = <T>(opt: iVxeOption, extras?: VxeGridProps<RowVO> = null) => {
-	// 默认参数
-	opt = Object.assign({ enableExport: true, remoteExport: false }, opt);
-	// 创建tableId,表格id固定才可以记录调整列宽，再次刷新仍有效。
-	opt.id = opt.id ? opt.id : String(new Date().getTime());
-	// console.log(opt);
-	const options = reactive<VxeGridProps>({
-		id: opt.id,
-		height: 'auto',
-		autoResize: true,
-		size: 'mini',
-		loading: false,
-		align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
-		// data: [] as Array<T>,
-		columns: opt.columns,
-		toolbarConfig: {
-			size: 'small',
-			slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },
-			refresh: {
-				queryMethod: () => opt.searchCallback(),
-			},
-			export: opt.enableExport,
-			print: true,
-			zoom: true,
-			custom: true,
-		},
-		checkboxConfig: { range: true },
-		sortConfig: { trigger: 'cell', remote: true },
-		exportConfig: {
-			remote: opt.remoteExport, // 设置使用服务端导出
-			filename: `${opt.name}导出_${dayjs().format('YYMMDDHHmmss')}`,
-			exportMethod: ({ options }) => {
-				if (opt.remoteExportCallback) opt.remoteExportCallback(options);
-			}, //服务器导出方法
-		},
-		printConfig: { sheetName: '' },
-		proxyConfig: {
-			enabled: true,
-			autoLoad: false,
-			sort: true,
-			props: {
-				list: 'data.result', // 不分页时
-				result: 'data.result.items', // 分页时
-				total: 'data.result.total',
-				message: 'data.message',
-			},
-			ajax: {
-				query: () => Promise.resolve(), // 不加会报错
-				queryAll: opt.queryAllCallback,
-			},
-		},
-		customConfig: {
-			storage: {
-				// 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
-				visible: true, // 启用显示/隐藏列状态
-				resizable: true, // 启用列宽状态
-			},
-		},
-	});
-	return extras ? Object.assign(options, extras) : options;
-};

Web/src/views/system/job/index.vue

@@ -5,12 +5,12 @@
 				<el-row :gutter="10">
 					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
 						<el-form-item label="作业编号" prop="jobId">
-							<el-input v-model="state.queryParams.jobId" placeholder="作业编号" clearable @keyup.enter.native="handleQuery(true)" />
+							<el-input v-model="state.queryParams.jobId" placeholder="作业编号" clearable @keyup.enter.native="handleQuery" />
 						</el-form-item>
 					</el-col>
 					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
 						<el-form-item label="描述信息" prop="description">
-							<el-input v-model="state.queryParams.description" placeholder="描述信息" clearable @keyup.enter.native="handleQuery(true)" />
+							<el-input v-model="state.queryParams.description" placeholder="描述信息" clearable @keyup.enter.native="handleQuery" />
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -19,15 +19,15 @@
 			<el-row>
 				<el-col>
 					<el-button-group>
-						<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysJob/pageJobDetail'" :loading="options.loading"> 查询 </el-button>
+						<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysJob/pageJobDetail'" :loading="optionsJob.loading"> 查询 </el-button>
-						<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
+						<el-button icon="ele-Refresh" @click="resetQuery" :loading="optionsJob.loading"> 重置 </el-button>
 					</el-button-group>
 				</el-col>
 			</el-row>
 		</el-card>
 
 		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
-			<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
+			<vxe-grid ref="xGridJob" class="xGrid-style" v-bind="optionsJob" v-on="gridEventsJob">
 				<template #toolbar_buttons>
 					<el-button-group>
 						<el-tooltip content="增加作业">
@@ -59,8 +59,8 @@
 				<template #empty>
 					<el-empty :image-size="200" />
 				</template>
-				<template #row_content="scope">
+				<template #row_content="{ row }">
-					<vxe-table style="margin: 5px" align="center" :data="(scope.row as JobDetailOutput).jobTriggers">
+					<vxe-table ref="xGridTrigger" class="xGrid-style" :data="(row as JobDetailOutput).jobTriggers" style="margin: 5px" align="center">
 						<!-- <vxe-column type="checkbox" width="40" fixed="left"></vxe-column>  -->
 						<vxe-column type="seq" width="40" fixed="left"></vxe-column>
 						<vxe-column field="triggerId" title="触发器编号" :minWidth="180" showOverflow="tooltip"></vxe-column>
@@ -113,7 +113,7 @@
 								<el-tag type="info" v-else> 否 </el-tag>
 							</template>
 						</vxe-column>
-						<vxe-column title="操作" :minWidth="130" fixed="right">
+						<vxe-column title="操作" :minWidth="150" fixed="right">
 							<template #default="scope">
 								<el-tooltip content="启动触发器">
 									<el-button size="small" type="primary" icon="ele-VideoPlay" text @click="startTrigger(scope.row)" />
@@ -146,8 +146,8 @@
 					<el-tag type="warning" v-if="(row as JobDetailOutput).jobDetail?.createType == JobCreateTypeEnum.NUMBER_1"> 脚本 </el-tag>
 					<el-tag type="success" v-if="(row as JobDetailOutput).jobDetail?.createType == JobCreateTypeEnum.NUMBER_2"> HTTP请求 </el-tag>
 				</template>
-				<template #row_includeAnnotations="{ row }">
+				<template #row_includeAnnotation="{ row }">
-					<el-tag v-if="(row as JobDetailOutput).jobDetail?.includeAnnotations == true"> 是 </el-tag>
+					<el-tag v-if="(row as JobDetailOutput).jobDetail?.includeAnnotation == true"> 是 </el-tag>
 					<el-tag v-else> 否 </el-tag>
 				</template>
 				<template #row_properties="{ row }">
@@ -197,15 +197,6 @@
 						<el-button size="small" type="danger" icon="ele-Delete" text @click="handleDelete(row)" v-auth="'sysJob/deleteJobDetail'"> </el-button>
 					</el-tooltip>
 				</template>
-				<template #pager>
-					<vxe-pager
-						:loading="options.loading"
-						v-model:current-page="state.tableParams.page"
-						v-model:page-size="state.tableParams.pageSize"
-						:total="state.tableParams.total"
-						@page-change="pageChange"
-					/>
-				</template>
 			</vxe-grid>
 		</el-card>
 
@@ -217,7 +208,7 @@
 				</div>
 			</template>
 			<el-card class="full-table" shadow="hover">
-				<vxe-grid ref="xRecordGrid" class="xGrid-style" v-bind="recordOptions" @sort-change="recordSortChange">
+				<vxe-grid ref="xGridRecord" class="xGrid-style" v-bind="optionsRecord" v-on="gridEventsRecord">
 					<template #toolbar_buttons></template>
 					<template #toolbar_tools> </template>
 					<template #empty>
@@ -238,15 +229,6 @@
 						<el-tag type="danger" effect="plain" v-if="(row as SysJobTrigger).status == 11"> 未知作业触发器 </el-tag>
 						<el-tag type="danger" effect="plain" v-if="(row as SysJobTrigger).status == 12"> 未知作业处理程序 </el-tag>
 					</template>
-					<template #pager>
-						<vxe-pager
-							:loading="recordOptions.loading"
-							v-model:current-page="state.recordTableParams.page"
-							v-model:page-size="state.recordTableParams.pageSize"
-							:total="state.recordTableParams.total"
-							@page-change="recordPageChange"
-						/>
-					</template>
 				</vxe-grid>
 			</el-card>
 		</el-drawer>
@@ -260,11 +242,10 @@
 <script lang="ts" setup name="sysJob">
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import { auth } from '/@/utils/authFunction';
-import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
-import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
 import { useRouter } from 'vue-router';
 import { Timer } from '@element-plus/icons-vue';
+import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
+import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
 
 import EditJobDetail from '/@/views/system/job/component/editJobDetail.vue';
 import EditJobTrigger from '/@/views/system/job/component/editJobTrigger.vue';
@@ -272,10 +253,11 @@ import JobCluster from '/@/views/system/job/component/jobCluster.vue';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysJobApi } from '/@/api-services/api';
-import { JobCreateTypeEnum, JobDetailOutput, SysJobTrigger, SysJobTriggerRecord } from '/@/api-services/models';
+import { JobCreateTypeEnum, JobDetailOutput, SysJobTrigger, SysJobTriggerRecord, PageJobDetailInput, PageJobTriggerRecordInput } from '/@/api-services/models';
 
-const xGrid = ref<VxeGridInstance>();
+const xGridJob = ref<VxeGridInstance>();
-const xRecordGrid = ref<VxeGridInstance>();
+const xGridTrigger = ref<VxeGridInstance>();
+const xGridRecord = ref<VxeGridInstance>();
 const router = useRouter();
 const editJobDetailRef = ref<InstanceType<typeof EditJobDetail>>();
 const editJobTriggerRef = ref<InstanceType<typeof EditJobTrigger>>();
@@ -285,21 +267,13 @@ const state = reactive({
 		jobId: undefined,
 		description: undefined,
 	},
-	tableParams: {
+	jobPageParam: {
-		page: 1,
+		pageSize: 50 as number,
-		pageSize: 50,
+		defaultSort: { field: 'id', order: 'asc', descStr: 'desc' } as any,
-		field: 'id', // 默认的排序字段
-		order: 'aes', // 排序方向
-		descStr: 'desc', // 降序排序的关键字符
-		total: 0 as any,
 	},
-	recordTableParams: {
+	recordPageParam: {
-		page: 1,
+		pageSize: 50 as number,
-		pageSize: 50,
+		defaultSort: { field: 'id', order: 'desc', descStr: 'desc' } as any,
-		field: 'id', // 默认的排序字段
-		order: 'desc', // 排序方向
-		descStr: 'desc', // 降序排序的关键字符
-		total: 0 as any,
 	},
 	editJobDetailTitle: '',
 	editJobTriggerTitle: '',
@@ -312,7 +286,8 @@ const state = reactive({
 });
 
 // 表格参数配置
-const options = useVxeTable<JobDetailOutput>({
+const optionsJob = useVxeTable<JobDetailOutput>(
+	{
 		id: 'sysJob',
 		name: '作业信息',
 		columns: [
@@ -326,56 +301,44 @@ const options = useVxeTable<JobDetailOutput>({
 			{ field: 'jobDetail.description', title: '描述', minWidth: 150, showOverflow: 'tooltip' },
 			{ field: 'jobDetail.concurrent', title: '执行方式', minWidth: 80, showOverflow: 'tooltip', slots: { default: 'row_concurrent' } },
 			{ field: 'jobDetail.createType', title: '作业创建类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_createType' } },
-		{ field: 'jobDetail.includeAnnotations', title: '扫描特性触发器', minWidth: 120, showOverflow: 'tooltip', slots: { default: 'row_includeAnnotations' } },
+			{ field: 'jobDetail.includeAnnotation', title: '扫描特性触发器', minWidth: 120, showOverflow: 'tooltip', slots: { default: 'row_includeAnnotation' } },
 			{ field: 'jobDetail.updatedTime', title: '更新时间', minWidth: 130, showOverflow: 'tooltip' },
 			{ field: 'jobDetail.properties', title: '额外数据', minWidth: 140, showOverflow: 'tooltip', slots: { default: 'row_properties' } },
-		{ title: '操作', minWidth: 200, showOverflow: true, slots: { default: 'row_buttons' } },
+			{ title: '操作', minWidth: 250, showOverflow: true, slots: { default: 'row_buttons' } },
 		],
-	enableExport: auth('sysJob:export'),
+	},
-	searchCallback: () => handleQuery(),
+	// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
-	queryAllCallback: () => fetchData({ pageSize: 99999 }),
+	{
-});
+		// 代理配置
+		proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
+		// 排序配置
+		sortConfig: { defaultSort: state.jobPageParam.defaultSort },
+		// 分页配置
+		pagerConfig: { pageSize: state.jobPageParam.pageSize },
+		// 工具栏配置
+		toolbarConfig: { export: false },
+	}
+);
 
 // 页面初始化
-onMounted(async () => {
+onMounted(async () => {});
-	await handleQuery();
-});
 
-// 查询操作
+// 查询api
-const handleQuery = async (reset = false) => {
+const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
-	options.loading = true;
+	const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageJobDetailInput;
-	if (reset) state.tableParams.page = 1;
+	return getAPI(SysJobApi).apiSysJobPageJobDetailPost(params);
-	var res = await fetchData(null);
-	await xGrid.value?.loadData(res.data.result?.items ?? []);
-	state.tableParams.total = res.data.result?.total;
-	options.loading = false;
 };
 
-// 获取数据
+// 查询操作
-const fetchData = async (tableParams: any) => {
+const handleQuery = async () => {
-	let params = Object.assign(state.queryParams, state.tableParams, tableParams);
+	await xGridJob.value?.commitProxy('query');
-	return getAPI(SysJobApi).apiSysJobPageJobDetailPost(params);
 };
 
 // 重置操作
 const resetQuery = async () => {
 	state.queryParams.jobId = undefined;
 	state.queryParams.description = undefined;
-	await handleQuery(true);
+	await xGridJob.value?.commitProxy('reload');
-};
-
-// 改变页码序号或页面容量
-const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
-	state.tableParams.page = currentPage;
-	state.tableParams.pageSize = pageSize;
-	await handleQuery();
-};
-
-// 列排序
-const sortChange = async (options: any) => {
-	state.tableParams.field = options.field;
-	state.tableParams.order = options.order;
-	await handleQuery();
 };
 
 // 打开新增作业页面
@@ -405,6 +368,18 @@ const handleDelete = (row: JobDetailOutput) => {
 		.catch(() => {});
 };
 
+// 作业表格事件
+const gridEventsJob: VxeGridListeners<JobDetailOutput> = {
+	// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
+	async pageChange({ pageSize }) {
+		state.jobPageParam.pageSize = pageSize;
+	},
+	// 当排序条件发生变化时会触发该事件
+	async sortChange({ field, order }) {
+		state.jobPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
+	},
+};
+
 // 打开新增触发器页面
 const openAddJobTrigger = (row: JobDetailOutput) => {
 	state.editJobTriggerTitle = '添加触发器';
@@ -534,12 +509,12 @@ const getHttpMethodDesc = (httpMethodStr: string | undefined | null): string =>
 
 //全部展开
 const handleExpand = () => {
-	xGrid.value?.setAllRowExpand(true);
+	xGridJob.value?.setAllRowExpand(true);
 };
 
 //全部折叠
 const handleFold = () => {
-	xGrid.value?.clearRowExpand();
+	xGridJob.value?.clearRowExpand();
 };
 
 // 打开作业触发器运行记录
@@ -550,7 +525,8 @@ const openJobTriggerRecord = async (row: any) => {
 };
 
 // 表格参数配置-触发器
-const recordOptions = useVxeTable<SysJobTriggerRecord>({
+const optionsRecord = useVxeTable<SysJobTriggerRecord>(
+	{
 		id: 'sysJobRecord',
 		name: '执行记录',
 		columns: [
@@ -566,38 +542,40 @@ const recordOptions = useVxeTable<SysJobTriggerRecord>({
 			{ field: 'elapsedTime', title: '耗时(ms)', minWidth: 80, showOverflow: 'tooltip' },
 			{ field: 'createdTime', title: '创建时间', minWidth: 130, showOverflow: 'tooltip' },
 		],
-	searchCallback: () => handleQueryRecord(),
+	}, // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
-	queryAllCallback: () => fetchRecordData({ pageSize: 99999 }),
+	{
-});
+		// 代理配置
+		proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryRecordApi(page, sort) } },
+		// 排序配置
+		sortConfig: { defaultSort: state.jobPageParam.defaultSort },
+		// 分页配置
+		pagerConfig: { pageSize: state.jobPageParam.pageSize },
+		// 工具栏配置
+		toolbarConfig: { export: false },
+	}
+);
 
-// 查询操作
+// 查询api
-const handleQueryRecord = async (reset = false) => {
+const handleQueryRecordApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
-	recordOptions.loading = true;
+	const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageJobTriggerRecordInput;
-	if (reset) state.recordTableParams.page = 1;
-	var res = await fetchRecordData(null);
-	await xRecordGrid.value?.loadData(res.data.result?.items ?? []);
-	state.recordTableParams.total = res.data.result?.total;
-	recordOptions.loading = false;
-};
-
-// 获取数据
-const fetchRecordData = async (tableParams: any) => {
-	let params = Object.assign({ jobId: state.currentJob.jobDetail.jobId }, state.recordTableParams, tableParams);
 	return getAPI(SysJobApi).apiSysJobPageJobTriggerRecordPost(params);
 };
 
-// 改变页码序号或页面容量
+// 查询操作
-const recordPageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
+const handleQueryRecord = async () => {
-	state.recordTableParams.page = currentPage;
+	await xGridRecord.value?.commitProxy('query');
-	state.recordTableParams.pageSize = pageSize;
-	await handleQueryRecord();
 };
 
-// 列排序
+// 作业表格事件
-const recordSortChange = async (options: any) => {
+const gridEventsRecord: VxeGridListeners<SysJobTriggerRecord> = {
-	state.recordTableParams.field = options.field;
+	// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
-	state.recordTableParams.order = options.order;
+	async pageChange({ pageSize }) {
-	await handleQueryRecord();
+		state.recordPageParam.pageSize = pageSize;
+	},
+	// 当排序条件发生变化时会触发该事件
+	async sortChange({ field, order }) {
+		state.recordPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
+	},
 };
 </script>