feat(vben5): add table sorting support

apps/vben5/packages/@abp/auditing/src/components/audit-logs/AuditLogTable.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SortOrder } from '@abp/core';
 import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -219,8 +218,10 @@ const gridOptions: VxeGridProps<AuditLogDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -234,12 +235,15 @@ const gridOptions: VxeGridProps<AuditLogDto> = {
   },
   sortConfig: {
     remote: true,
+    allowBtn: true,
   },
   toolbarConfig: {
     custom: true,
     export: true,
     // import: true,
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -251,7 +255,9 @@ const gridEvents: VxeGridListeners<AuditLogDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((x) => x.id);
   },
-  sortChange: onSort,
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -301,11 +307,6 @@ function onBulkDelete() {
   });
 }
 
-function onSort(params: { field: string; order: SortOrder }) {
-  const sorting = params.order ? `${params.field} ${params.order}` : undefined;
-  gridApi.query({ sorting });
-}
-
 function onFilter(field: string, value: any) {
   gridApi.formApi.setFieldValue(field, value);
   gridApi.formApi.validateAndSubmitForm();

apps/vben5/packages/@abp/auditing/src/components/loggings/LoggingTable.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SortOrder } from '@abp/core';
 import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -258,8 +257,10 @@ const gridOptions: VxeGridProps<LogDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -277,8 +278,9 @@ const gridOptions: VxeGridProps<LogDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -290,7 +292,9 @@ const gridEvents: VxeGridListeners<LogDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((x) => x.fields.id);
   },
-  sortChange: onSort,
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -307,11 +311,6 @@ function onUpdate(row: LogDto) {
   logDrawerApi.open();
 }
 
-function onSort(params: { field: string; order: SortOrder }) {
-  const sorting = params.order ? `${params.field} ${params.order}` : undefined;
-  gridApi.query({ sorting });
-}
-
 function onFilter(field: string, value: any) {
   gridApi.formApi.setFieldValue(field, value);
   gridApi.formApi.validateAndSubmitForm();

apps/vben5/packages/@abp/core/package.json

@@ -38,13 +38,20 @@
     "@vueuse/core": "catalog:",
     "dayjs": "catalog:",
     "lodash.groupby": "catalog:",
+    "lodash.isdate": "catalog:",
+    "lodash.isnumber": "catalog:",
     "lodash.merge": "catalog:",
+    "lodash.sortby": "catalog:",
     "pinia": "catalog:",
     "pinia-plugin-persistedstate": "catalog:",
+    "universal-cookie": "catalog:",
     "vue": "catalog:"
   },
   "devDependencies": {
     "@types/lodash.groupby": "catalog:",
-    "@types/lodash.merge": "catalog:"
+    "@types/lodash.isdate": "catalog:",
+    "@types/lodash.isnumber": "catalog:",
+    "@types/lodash.merge": "catalog:",
+    "@types/lodash.sortby": "catalog:"
   }
 }

apps/vben5/packages/@abp/core/src/utils/index.ts

@@ -4,5 +4,6 @@ export * from './is';
 export * from './mitt';
 export * from './regex';
 export * from './string';
+export * from './table';
 export * from './tree';
 export * from './uuid';

apps/vben5/packages/@abp/core/src/utils/is.ts

@@ -1,3 +1,6 @@
+import isDateEx from 'lodash.isdate';
+import isNumberEx from 'lodash.isnumber';
+
 export function isNullAndUnDef(val: unknown): val is null | undefined {
   return isUnDef(val) && isNull(val);
 }
@@ -17,3 +20,11 @@ export function isUnDef<T = unknown>(val?: T): val is T {
 export function isNull(value: any): value is null {
   return value === null;
 }
+
+export function isNumber(value?: any): value is number {
+  return isNumberEx(value);
+}
+
+export function isDate(value?: any): value is Date {
+  return isDateEx(value);
+}

apps/vben5/packages/@abp/core/src/utils/table.ts

@@ -0,0 +1,31 @@
+import { isDate, isNumber } from './is';
+
+export function sorter(
+  a: Record<string, any>,
+  b: Record<string, any>,
+  field: string,
+): number {
+  if (!a[field] && !b[field]) {
+    return 0;
+  }
+  if (a[field] && !b[field]) {
+    return 1;
+  }
+  if (b[field] && !a[field]) {
+    return -1;
+  }
+  const va = a[field];
+  const vb = b[field];
+  if (isDate(va) && isDate(vb)) {
+    return va.getTime() - vb.getTime();
+  }
+  if (isNumber(va) && isNumber(vb)) {
+    return va - vb;
+  }
+  if (Array.isArray(va) && Array.isArray(vb)) {
+    return va.length - vb.length;
+  }
+  return String(va).localeCompare(String(vb));
+}
+
+export { default as sortby } from 'lodash.sortby';

apps/vben5/packages/@abp/data-protection/src/components/entity-type-infos/EntityTypeInfoTable.vue

@@ -29,24 +29,28 @@ const gridOptions: VxeGridProps<EntityTypeInfoDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('DataProtection.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('DataProtection.DisplayName:DisplayName'),
     },
     {
       align: 'left',
       field: 'typeFullName',
       minWidth: 200,
+      sortable: true,
       title: $t('DataProtection.DisplayName:TypeFullName'),
     },
     {
       align: 'left',
       field: 'isAuditEnabled',
       minWidth: 150,
+      sortable: true,
       title: $t('DataProtection.DisplayName:IsAuditEnabled'),
     },
     {
@@ -61,8 +65,10 @@ const gridOptions: VxeGridProps<EntityTypeInfoDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const { totalCount, items } = await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -85,14 +91,19 @@ const gridOptions: VxeGridProps<EntityTypeInfoDto> = {
     },
   },
   toolbarConfig: {
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
   },
 };
 
 const gridEvents: VxeGridListeners<EntityTypeInfoDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
-const [Grid] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   gridEvents,
   gridOptions,
 });

apps/vben5/packages/@abp/demo/src/components/books/BookTable.vue

@@ -60,24 +60,28 @@ const baseColumns = reactive<VxeGridPropTypes.Columns<BookDto>>([
     align: 'left',
     field: 'name',
     minWidth: 150,
+    sortable: true,
     title: $t('Demo.DisplayName:Name'),
   },
   {
     align: 'left',
     field: 'authorName',
     minWidth: 150,
+    sortable: true,
     title: $t('Demo.DisplayName:AuthorId'),
   },
   {
     align: 'left',
     field: 'publishDate',
     minWidth: 200,
+    sortable: true,
     title: $t('Demo.DisplayName:PublishDate'),
   },
   {
     align: 'left',
     field: 'price',
     minWidth: 150,
+    sortable: true,
     title: $t('Demo.DisplayName:Price'),
   },
 ]);
@@ -88,8 +92,10 @@ const gridOptions: VxeGridProps<BookDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -102,12 +108,17 @@ const gridOptions: VxeGridProps<BookDto> = {
     },
   },
   toolbarConfig: {
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
   },
 };
 
 const gridEvents: VxeGridListeners<BookDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,

apps/vben5/packages/@abp/features/src/components/definitions/features/FeatureDefinitionTable.vue

@@ -6,13 +6,14 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { FeatureDefinitionDto } from '../../../types/definitions';
 import type { FeatureGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
   listToTree,
+  sortby,
   useLocalization,
   useLocalizationSerializer,
 } from '@abp/core';
@@ -35,8 +36,8 @@ defineOptions({
   name: 'FeatureDefinitionTable',
 });
 
-interface PermissionVo {
+interface FeatureVo {
-  children: PermissionVo[];
+  children: FeatureVo[];
   displayName: string;
   groupName: string;
   isEnabled: boolean;
@@ -46,30 +47,24 @@ interface PermissionVo {
   providers: string[];
   stateCheckers: string[];
 }
-interface PermissionGroupVo {
+interface FeatureGroupVo {
   displayName: string;
+  features: FeatureVo[];
   name: string;
-  permissions: PermissionVo[];
 }
 
-const permissionGroups = ref<PermissionGroupVo[]>([]);
+const featureGroups = ref<FeatureGroupVo[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
 const { getListApi: getGroupsApi } = useFeatureGroupDefinitionsApi();
-const { deleteApi, getListApi: getPermissionsApi } = useFeatureDefinitionsApi();
+const { deleteApi, getListApi: getFeaturesApi } = useFeatureDefinitionsApi();
 
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -104,12 +99,14 @@ const gridOptions: VxeGridProps<FeatureGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpFeatureManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpFeatureManagement.DisplayName:DisplayName'),
     },
   ],
@@ -119,6 +116,30 @@ const gridOptions: VxeGridProps<FeatureGroupDefinitionDto> = {
   },
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(featureGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: featureGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -136,6 +157,7 @@ const subGridColumns: VxeGridProps<FeatureDefinitionDto>['columns'] = [
     align: 'left',
     field: 'name',
     minWidth: 150,
+    sortable: true,
     title: $t('AbpFeatureManagement.DisplayName:Name'),
     treeNode: true,
   },
@@ -143,12 +165,14 @@ const subGridColumns: VxeGridProps<FeatureDefinitionDto>['columns'] = [
     align: 'left',
     field: 'displayName',
     minWidth: 120,
+    sortable: true,
     title: $t('AbpFeatureManagement.DisplayName:DisplayName'),
   },
   {
     align: 'left',
     field: 'description',
     minWidth: 120,
+    sortable: true,
     title: $t('AbpFeatureManagement.DisplayName:Description'),
   },
   {
@@ -156,6 +180,7 @@ const subGridColumns: VxeGridProps<FeatureDefinitionDto>['columns'] = [
     field: 'isVisibleToClients',
     minWidth: 120,
     slots: { default: 'isVisibleToClients' },
+    sortable: true,
     title: $t('AbpFeatureManagement.DisplayName:IsVisibleToClients'),
   },
   {
@@ -163,6 +188,7 @@ const subGridColumns: VxeGridProps<FeatureDefinitionDto>['columns'] = [
     field: 'isAvailableToHost',
     minWidth: 120,
     slots: { default: 'isAvailableToHost' },
+    sortable: true,
     title: $t('AbpFeatureManagement.DisplayName:IsAvailableToHost'),
   },
   {
@@ -175,10 +201,8 @@ const subGridColumns: VxeGridProps<FeatureDefinitionDto>['columns'] = [
 ];
 
 const gridEvents: VxeGridListeners<FeatureGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -198,17 +222,16 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const groupRes = await getGroupsApi(input);
-    const permissionRes = await getPermissionsApi(input);
+    const featureRes = await getFeaturesApi(input);
-    pageState.total = groupRes.items.length;
+    featureGroups.value = groupRes.items.map((group) => {
-    permissionGroups.value = groupRes.items.map((group) => {
       const localizableGroup = deserialize(group.displayName);
-      const permissions = permissionRes.items
+      const features = featureRes.items
-        .filter((permission) => permission.groupName === group.name)
+        .filter((feature) => feature.groupName === group.name)
-        .map((permission) => {
+        .map((feature) => {
-          const displayName = deserialize(permission.displayName);
+          const displayName = deserialize(feature.displayName);
-          const description = deserialize(permission.displayName);
+          const description = deserialize(feature.displayName);
           return {
-            ...permission,
+            ...feature,
             description: Lr(description.resourceName, description.name),
             displayName: Lr(displayName.resourceName, displayName.name),
           };
@@ -216,13 +239,13 @@ async function onGet(input?: Record<string, string>) {
       return {
         ...group,
         displayName: Lr(localizableGroup.resourceName, localizableGroup.name),
-        permissions: listToTree(permissions, {
+        features: listToTree(features, {
           id: 'name',
           pid: 'parentName',
         }),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -234,21 +257,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = permissionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();
@@ -290,7 +298,7 @@ onMounted(onGet);
     <template #group="{ row: group }">
       <VxeGrid
         :columns="subGridColumns"
-        :data="group.permissions"
+        :data="group.features"
         :tree-config="{
           trigger: 'row',
           rowField: 'name',

apps/vben5/packages/@abp/features/src/components/definitions/groups/FeatureGroupDefinitionTable.vue

@@ -6,14 +6,14 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { FeatureGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -37,12 +37,7 @@ const MenuItem = Menu.Item;
 
 const FeaturesOutlined = createIconifyIcon('pajamas:feature-flag');
 
-const permissionGroups = ref<FeatureGroupDefinitionDto[]>([]);
+const featureGroups = ref<FeatureGroupDefinitionDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { hasAccessByCodes } = useAccess();
@@ -54,7 +49,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -77,12 +71,14 @@ const gridOptions: VxeGridProps<FeatureGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpFeatureManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpFeatureManagement.DisplayName:DisplayName'),
     },
     {
@@ -95,6 +91,30 @@ const gridOptions: VxeGridProps<FeatureGroupDefinitionDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(featureGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: featureGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -104,10 +124,8 @@ const gridOptions: VxeGridProps<FeatureGroupDefinitionDto> = {
 };
 
 const gridEvents: VxeGridListeners<FeatureGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -132,15 +150,14 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
+    featureGroups.value = items.map((item) => {
-    permissionGroups.value = items.map((item) => {
       const localizableString = deserialize(item.displayName);
       return {
         ...item,
         displayName: Lr(localizableString.resourceName, localizableString.name),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -152,21 +169,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = permissionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   groupModalApi.setData({});
   groupModalApi.open();

apps/vben5/packages/@abp/gdpr/src/components/GdprTable.vue

@@ -35,11 +35,13 @@ const gridOptions: VxeGridProps<GdprRequestDto> = {
       align: 'left',
       field: 'readyTime',
       slots: { default: 'readly' },
+      sortable: true,
       title: $t('AbpGdpr.DisplayName:ReadyTime'),
     },
     {
       align: 'left',
       field: 'creationTime',
+      sortable: true,
       title: $t('AbpGdpr.DisplayName:CreationTime'),
     },
     {
@@ -54,8 +56,10 @@ const gridOptions: VxeGridProps<GdprRequestDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const dto = await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -80,12 +84,17 @@ const gridOptions: VxeGridProps<GdprRequestDto> = {
     },
   },
   toolbarConfig: {
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
   },
 };
 
 const gridEvents: VxeGridListeners<GdprRequestDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [Grid, gridApi] = useVbenVxeGrid({
   gridEvents,

apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue

@@ -66,6 +66,7 @@ const gridOptions: VxeGridProps<IdentityClaimTypeDto> = {
       align: 'left',
       field: 'name',
       minWidth: 120,
+      sortable: true,
       title: $t('AbpIdentity.IdentityClaim:Name'),
     },
     {
@@ -90,28 +91,33 @@ const gridOptions: VxeGridProps<IdentityClaimTypeDto> = {
           }
         }
       },
+      sortable: true,
       title: $t('AbpIdentity.IdentityClaim:ValueType'),
     },
     {
       align: 'left',
       field: 'regex',
+      sortable: true,
       title: $t('AbpIdentity.IdentityClaim:Regex'),
     },
     {
       align: 'center',
       field: 'required',
       slots: { default: 'required' },
+      sortable: true,
       title: $t('AbpIdentity.IdentityClaim:Required'),
     },
     {
       align: 'center',
       field: 'isStatic',
       slots: { default: 'static' },
+      sortable: true,
       title: $t('AbpIdentity.IdentityClaim:IsStatic'),
     },
     {
       align: 'left',
       field: 'description',
+      sortable: true,
       title: $t('AbpIdentity.IdentityClaim:Description'),
     },
     {
@@ -130,8 +136,10 @@ const gridOptions: VxeGridProps<IdentityClaimTypeDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -146,19 +154,22 @@ const gridOptions: VxeGridProps<IdentityClaimTypeDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<IdentityClaimTypeDto> = {
-  cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [ClaimTypeEditModal, roleModalApi] = useVbenModal({
   connectedComponent: ClaimTypeModal,
 });
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
@@ -187,7 +198,7 @@ const onDelete = (row: IdentityClaimTypeDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -270,7 +281,7 @@ const onMenuClick = (row: IdentityClaimTypeDto, info: MenuInfo) => {
       </div>
     </template>
   </Grid>
-  <ClaimTypeEditModal @change="() => query()" />
+  <ClaimTypeEditModal @change="() => gridApi.query()" />
   <ClaimTypeChangeDrawer />
 </template>
 

apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitRoleTable.vue

@@ -45,6 +45,7 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
     {
       field: 'name',
       minWidth: '100px',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:RoleName'),
     },
     {
@@ -59,14 +60,16 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
         if (!props.selectedKey) {
           return {
             totalCount: 0,
             items: [],
           };
         }
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getRoleListApi(props.selectedKey!, {
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -81,16 +84,20 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<IdentityRoleDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
-const [Grid, { query, setLoading }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   gridEvents,
   gridOptions,
 });
@@ -100,7 +107,7 @@ const [RoleModal, roleModalApi] = useVbenModal({
 });
 
 const onRefresh = () => {
-  return nextTick(query);
+  return nextTick(gridApi.query);
 };
 
 const onDelete = (row: IdentityRoleDto) => {
@@ -114,11 +121,11 @@ const onDelete = (row: IdentityRoleDto) => {
     },
     onOk: async () => {
       try {
-        setLoading(true);
+        gridApi.setLoading(true);
         await removeOrganizationUnitApi(row.id, props.selectedKey!);
         await onRefresh();
       } finally {
-        setLoading(false);
+        gridApi.setLoading(false);
       }
     },
     title: $t('AbpUi.AreYouSure'),
@@ -141,7 +148,7 @@ const onCreateRole = async (roles: IdentityRoleDto[]) => {
       roleIds: roles.map((item) => item.id),
     });
     roleModalApi.close();
-    await query();
+    await gridApi.query();
   } finally {
     roleModalApi.setState({
       submitting: false,

apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitUserTable.vue

@@ -45,11 +45,13 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
     {
       field: 'userName',
       minWidth: '100px',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:UserName'),
     },
     {
       field: 'email',
       minWidth: '120px',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:Email'),
     },
     {
@@ -64,14 +66,16 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
         if (!props.selectedKey) {
           return {
             totalCount: 0,
             items: [],
           };
         }
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getUserListApi(props.selectedKey!, {
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -86,16 +90,20 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<IdentityUserDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
-const [Grid, { query, setLoading }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   gridEvents,
   gridOptions,
 });
@@ -104,7 +112,7 @@ const [MemberModal, userModalApi] = useVbenModal({
 });
 
 const onRefresh = () => {
-  nextTick(query);
+  nextTick(gridApi.query);
 };
 
 const onDelete = (row: IdentityUserDto) => {
@@ -116,11 +124,14 @@ const onDelete = (row: IdentityUserDto) => {
     onCancel: () => {
       cancel('User closed cancel delete modal.');
     },
-    onOk: () => {
+    onOk: async () => {
-      setLoading(true);
+      gridApi.setLoading(true);
-      return removeOrganizationUnitApi(row.id, props.selectedKey!)
+      try {
-        .then(onRefresh)
+        await removeOrganizationUnitApi(row.id, props.selectedKey!);
-        .finally(() => setLoading(false));
+        await gridApi.query();
+      } finally {
+        gridApi.setLoading(false);
+      }
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -133,22 +144,21 @@ const onShowMember = () => {
   userModalApi.open();
 };
 
-const onCreateMember = (users: IdentityUserDto[]) => {
+const onCreateMember = async (users: IdentityUserDto[]) => {
   userModalApi.setState({
     submitting: true,
   });
-  addMembers(props.selectedKey!, {
+  try {
-    userIds: users.map((item) => item.id),
+    await addMembers(props.selectedKey!, {
-  })
+      userIds: users.map((item) => item.id),
-    .then(() => {
+    });
-      userModalApi.close();
+    userModalApi.close();
-      query();
+    await gridApi.query();
-    })
+  } finally {
-    .finally(() => {
+    userModalApi.setState({
-      userModalApi.setState({
+      submitting: false,
-        submitting: false,
-      });
     });
+  }
 };
 
 watch(() => props.selectedKey, onRefresh);

apps/vben5/packages/@abp/identity/src/components/organization-units/SelectMemberModal.vue

@@ -68,22 +68,24 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 const gridOptions: VxeGridProps<IdentityUserDto> = {
-  checkboxConfig: {
-    highlight: true,
-    labelField: 'userName',
-  },
   columns: [
+    {
+      align: 'center',
+      type: 'checkbox',
+      width: 80,
+    },
     {
       align: 'left',
       field: 'userName',
       minWidth: '100px',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:UserName'),
-      type: 'checkbox',
     },
     {
       align: 'left',
       field: 'email',
       minWidth: '120px',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:Email'),
     },
   ],
@@ -91,12 +93,14 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const state = modalApi.getData<Record<string, any>>();
         return await getUnaddedUserListApi({
           id: state.id,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
+          sorting,
           ...formValues,
         });
       },
@@ -107,7 +111,11 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
       list: 'items',
     },
   },
-  toolbarConfig: {},
+  toolbarConfig: {
+    refresh: {
+      code: 'query',
+    },
+  },
 };
 
 const gridEvents: VxeGridListeners<IdentityUserDto> = {
@@ -117,15 +125,18 @@ const gridEvents: VxeGridListeners<IdentityUserDto> = {
   checkboxChange: (e) => {
     selectedUsers.value = e.records;
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
 });
 
 function onRefresh() {
-  nextTick(query);
+  nextTick(gridApi.query);
 }
 </script>
 

apps/vben5/packages/@abp/identity/src/components/organization-units/SelectRoleModal.vue

@@ -68,27 +68,30 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 const gridOptions: VxeGridProps<IdentityRoleDto> = {
-  checkboxConfig: {
-    highlight: true,
-    labelField: 'name',
-  },
   columns: [
+    {
+      align: 'center',
+      type: 'checkbox',
+      width: 80,
+    },
     {
       align: 'left',
       field: 'name',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:RoleName'),
-      type: 'checkbox',
     },
   ],
   exportConfig: {},
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const state = modalApi.getData<Record<string, any>>();
         return await getUnaddedRoleListApi({
           id: state.id,
           maxResultCount: page.pageSize,
+          sorting,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
         });
@@ -100,7 +103,11 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
       list: 'items',
     },
   },
-  toolbarConfig: {},
+  toolbarConfig: {
+    refresh: {
+      code: 'query',
+    },
+  },
 };
 
 const gridEvents: VxeGridListeners<IdentityRoleDto> = {
@@ -110,15 +117,18 @@ const gridEvents: VxeGridListeners<IdentityRoleDto> = {
   checkboxChange: (e) => {
     selectedRoles.value = e.records;
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
 });
 
 function onRefresh() {
-  nextTick(query);
+  nextTick(gridApi.query);
 }
 </script>
 

apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue

@@ -37,7 +37,6 @@ const MenuOutlined = createIconifyIcon('heroicons-outline:menu-alt-3');
 const ClaimOutlined = createIconifyIcon('la:id-card-solid');
 const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
 const AuditLogIcon = createIconifyIcon('fluent-mdl2:compliance-audit');
-const ProtectedIcon = createIconifyIcon('mdi:protected-outline');
 
 const RoleModal = defineAsyncComponent(() => import('./RoleModal.vue'));
 const ClaimModal = defineAsyncComponent(() => import('./RoleClaimModal.vue'));
@@ -88,6 +87,7 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
       align: 'left',
       field: 'name',
       slots: { default: 'name' },
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:RoleName'),
     },
     {
@@ -102,8 +102,10 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -118,19 +120,23 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<IdentityRoleDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [RoleEditModal, roleModalApi] = useVbenModal({
   connectedComponent: RoleModal,
 });
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
@@ -156,7 +162,7 @@ const handleDelete = (row: IdentityRoleDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -291,7 +297,7 @@ function onPermissionChange(_name: string, key: string) {
               >
                 {{ $t('AbpAuditLogging.EntitiesChanged') }}
               </MenuItem>
-              <MenuItem key="entity-rules" :icon="h(ProtectedIcon)">
+              <MenuItem key="entity-rules">
                 {{ '数据权限' }}
               </MenuItem>
             </Menu>
@@ -301,8 +307,8 @@ function onPermissionChange(_name: string, key: string) {
       </div>
     </template>
   </Grid>
-  <RoleEditModal @change="() => query()" />
+  <RoleEditModal @change="() => gridApi.query()" />
-  <RoleClaimModal @change="query" />
+  <RoleClaimModal @change="() => gridApi.query()" />
   <RolePermissionModal @change="onPermissionChange" />
   <RoleChangeDrawer />
   <RoleRuleDrawer />

apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SortOrder } from '@abp/core';
 import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -168,8 +167,10 @@ const gridOptions: VxeGridProps<SecurityLogDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -184,8 +185,9 @@ const gridOptions: VxeGridProps<SecurityLogDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -197,7 +199,9 @@ const gridEvents: VxeGridListeners<SecurityLogDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((x) => x.id);
   },
-  sortChange: onSort,
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -247,11 +251,6 @@ function onBulkDelete() {
     title: $t('AbpUi.AreYouSure'),
   });
 }
-
-function onSort(params: { field: string; order: SortOrder }) {
-  const sorting = params.order ? `${params.field} ${params.order}` : undefined;
-  gridApi.query({ sorting });
-}
 </script>
 
 <template>

apps/vben5/packages/@abp/identity/src/components/sessions/SessionTable.vue

@@ -82,6 +82,7 @@ const gridOptions: VxeGridProps<IdentitySessionDto> = {
       align: 'left',
       field: 'sessionId',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:SessionId'),
     },
     {
@@ -89,11 +90,13 @@ const gridOptions: VxeGridProps<IdentitySessionDto> = {
       field: 'device',
       minWidth: 120,
       slots: { default: 'device' },
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:Device'),
     },
     {
       align: 'left',
       field: 'deviceInfo',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:DeviceInfo'),
       width: 'auto',
     },
@@ -101,24 +104,28 @@ const gridOptions: VxeGridProps<IdentitySessionDto> = {
       align: 'left',
       field: 'clientId',
       minWidth: 120,
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:ClientId'),
     },
     {
       align: 'left',
       field: 'ipAddresses',
       minWidth: 120,
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:IpAddresses'),
     },
     {
       align: 'left',
       field: 'signedIn',
       minWidth: 120,
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:SignedIn'),
     },
     {
       align: 'left',
       field: 'lastAccessed',
       minWidth: 120,
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:LastAccessed'),
     },
     {
@@ -137,8 +144,10 @@ const gridOptions: VxeGridProps<IdentitySessionDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getSessionsApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -153,14 +162,18 @@ const gridOptions: VxeGridProps<IdentitySessionDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<IdentitySessionDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue

@@ -96,11 +96,13 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
     {
       field: 'isActive',
       slots: { default: 'active' },
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:IsActive'),
     },
     {
       field: 'userName',
       minWidth: '100px',
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:UserName'),
     },
     {
@@ -108,14 +110,24 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
       field: 'email',
       minWidth: '120px',
       slots: { default: 'email' },
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:Email'),
     },
-    { field: 'surname', title: $t('AbpIdentity.DisplayName:Surname') },
+    {
-    { field: 'name', title: $t('AbpIdentity.DisplayName:Name') },
+      field: 'surname',
+      sortable: true,
+      title: $t('AbpIdentity.DisplayName:Surname'),
+    },
+    {
+      field: 'name',
+      sortable: true,
+      title: $t('AbpIdentity.DisplayName:Name'),
+    },
     {
       align: 'left',
       field: 'phoneNumber',
       slots: { default: 'phoneNumber' },
+      sortable: true,
       title: $t('AbpIdentity.DisplayName:PhoneNumber'),
     },
     {
@@ -123,6 +135,7 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
       formatter: ({ cellValue }) => {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
+      sortable: true,
       title: $t('AbpIdentity.LockoutEnd'),
     },
     {
@@ -137,8 +150,10 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -153,14 +168,18 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<IdentityUserDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [UserEditModal, userModalApi] = useVbenModal({
   connectedComponent: UserModal,
@@ -188,7 +207,7 @@ const [UserSessionDrawer, userSessionDrawerApi] = useVbenDrawer({
     () => import('./UserSessionDrawer.vue'),
   ),
 });
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
@@ -214,7 +233,7 @@ const handleDelete = (row: IdentityUserDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      await gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -222,7 +241,7 @@ const handleDelete = (row: IdentityUserDto) => {
 
 const handleUnlock = async (row: IdentityUserDto) => {
   await unLockApi(row.id);
-  await query();
+  await gridApi.query();
 };
 
 const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
@@ -436,10 +455,10 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
       </div>
     </template>
   </Grid>
-  <UserLockModal @change="query" />
+  <UserLockModal @change="() => gridApi.query()" />
-  <UserClaimModal @change="query" />
+  <UserClaimModal @change="() => gridApi.query()" />
-  <UserEditModal @change="() => query()" />
+  <UserEditModal @change="() => gridApi.query()" />
-  <UserPasswordModal @change="query" />
+  <UserPasswordModal @change="() => gridApi.query()" />
   <UserPermissionModal />
   <UserSessionDrawer />
   <UserChangeDrawer />

apps/vben5/packages/@abp/localization/src/components/languages/LocalizationLanguageTable.vue

@@ -5,12 +5,12 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { LanguageDto } from '../../types/languages';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { useAbpStore } from '@abp/core';
+import { sortby, useAbpStore } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -28,11 +28,6 @@ defineOptions({
 });
 
 const dataSource = ref<LanguageDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const abpStore = useAbpStore();
 const { deleteApi, getListApi } = useLanguagesApi();
@@ -43,7 +38,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -66,18 +60,21 @@ const gridOptions: VxeGridProps<LanguageDto> = {
       align: 'left',
       field: 'cultureName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:CultureName'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:DisplayName'),
     },
     {
       align: 'left',
       field: 'uiCultureName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:UiCultureName'),
     },
     {
@@ -90,6 +87,30 @@ const gridOptions: VxeGridProps<LanguageDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(dataSource.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: dataSource.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -99,10 +120,8 @@ const gridOptions: VxeGridProps<LanguageDto> = {
 };
 
 const gridEvents: VxeGridListeners<LanguageDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -122,9 +141,8 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
     dataSource.value = items;
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -136,21 +154,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = dataSource.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/localization/src/components/resources/LocalizationResourceTable.vue

@@ -5,12 +5,12 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { ResourceDto } from '../../types/resources';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { useAbpStore } from '@abp/core';
+import { sortby, useAbpStore } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -28,12 +28,6 @@ defineOptions({
 });
 
 const dataSource = ref<ResourceDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
-
 const abpStore = useAbpStore();
 const { deleteApi, getListApi } = useResourcesApi();
 const { getLocalizationApi } = useLocalizationsApi();
@@ -43,7 +37,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -66,12 +59,14 @@ const gridOptions: VxeGridProps<ResourceDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpFeatureManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpFeatureManagement.DisplayName:DisplayName'),
     },
     {
@@ -84,6 +79,30 @@ const gridOptions: VxeGridProps<ResourceDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(dataSource.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: dataSource.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -93,10 +112,8 @@ const gridOptions: VxeGridProps<ResourceDto> = {
 };
 
 const gridEvents: VxeGridListeners<ResourceDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -116,9 +133,8 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
     dataSource.value = items;
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -130,21 +146,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = dataSource.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextTable.vue

@@ -11,7 +11,7 @@ import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { useAbpStore } from '@abp/core';
+import { sortby, useAbpStore } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import { EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { Button, Select } from 'ant-design-vue';
@@ -39,11 +39,6 @@ const targetValueOptions = reactive([
     value: 'true',
   },
 ]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const abpStore = useAbpStore();
 const { getListApi } = useTextsApi();
@@ -61,10 +56,8 @@ const formOptions: VbenFormProps = {
       class: 'w-full',
     },
   },
-  compact: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -111,24 +104,28 @@ const gridOptions: VxeGridProps<TextDifferenceDto> = {
       align: 'left',
       field: 'key',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:Key'),
     },
     {
       align: 'left',
       field: 'value',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:Value'),
     },
     {
       align: 'left',
       field: 'targetValue',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:TargetValue'),
     },
     {
       align: 'left',
       field: 'resourceName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpLocalization.DisplayName:ResourceName'),
     },
     {
@@ -141,6 +138,30 @@ const gridOptions: VxeGridProps<TextDifferenceDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(dataSource.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: dataSource.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -150,10 +171,8 @@ const gridOptions: VxeGridProps<TextDifferenceDto> = {
 };
 
 const gridEvents: VxeGridListeners<TextDifferenceDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -186,9 +205,8 @@ async function onGet(input: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input as any);
-    pageState.total = items.length;
     dataSource.value = items;
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -200,21 +218,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = dataSource.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 async function onCreate() {
   const input = await gridApi.formApi.getValues();
   modalApi.setData({

apps/vben5/packages/@abp/notifications/src/components/definitions/groups/NotificationGroupDefinitionTable.vue

@@ -6,14 +6,14 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { NotificationGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -37,11 +37,6 @@ const MenuItem = Menu.Item;
 const DefinitionIcon = createIconifyIcon('nimbus:notification');
 
 const dataSource = ref<NotificationGroupDefinitionDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { hasAccessByCodes } = useAccess();
@@ -53,7 +48,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -76,12 +70,14 @@ const gridOptions: VxeGridProps<NotificationGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('Notifications.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('Notifications.DisplayName:DisplayName'),
     },
     {
@@ -94,6 +90,30 @@ const gridOptions: VxeGridProps<NotificationGroupDefinitionDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(dataSource.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: dataSource.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -103,10 +123,8 @@ const gridOptions: VxeGridProps<NotificationGroupDefinitionDto> = {
 };
 
 const gridEvents: VxeGridListeners<NotificationGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -131,7 +149,6 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
     dataSource.value = items.map((item) => {
       const localizableString = deserialize(item.displayName);
       return {
@@ -139,7 +156,7 @@ async function onGet(input?: Record<string, string>) {
         displayName: Lr(localizableString.resourceName, localizableString.name),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -151,21 +168,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = dataSource.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   groupModalApi.setData({});
   groupModalApi.open();

apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionTable.vue

@@ -7,7 +7,7 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { NotificationDefinitionDto } from '../../../types/definitions';
 import type { NotificationGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
@@ -16,6 +16,7 @@ import { $t } from '@vben/locales';
 
 import {
   listToTree,
+  sortby,
   useLocalization,
   useLocalizationSerializer,
 } from '@abp/core';
@@ -79,18 +80,12 @@ const { deleteApi, getListApi: getDefinitionsApi } =
   useNotificationDefinitionsApi();
 
 const definitionGroups = ref<DefinitionGroup[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -125,12 +120,14 @@ const gridOptions: VxeGridProps<NotificationGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('Notifications.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('Notifications.DisplayName:DisplayName'),
     },
   ],
@@ -140,6 +137,30 @@ const gridOptions: VxeGridProps<NotificationGroupDefinitionDto> = {
   },
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(definitionGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: definitionGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -157,6 +178,8 @@ const subGridColumns: VxeGridProps<NotificationDefinitionDto>['columns'] = [
     align: 'left',
     field: 'name',
     minWidth: 150,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:Name'),
     treeNode: true,
   },
@@ -164,12 +187,16 @@ const subGridColumns: VxeGridProps<NotificationDefinitionDto>['columns'] = [
     align: 'left',
     field: 'displayName',
     minWidth: 120,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:DisplayName'),
   },
   {
     align: 'left',
     field: 'description',
     minWidth: 120,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:Description'),
   },
   {
@@ -177,37 +204,49 @@ const subGridColumns: VxeGridProps<NotificationDefinitionDto>['columns'] = [
     field: 'allowSubscriptionToClients',
     minWidth: 120,
     slots: { default: 'allowSubscriptionToClients' },
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:AllowSubscriptionToClients'),
   },
   {
     align: 'left',
     field: 'template',
     minWidth: 150,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:Template'),
   },
   {
     align: 'left',
     field: 'notificationLifetime',
     minWidth: 150,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:NotificationLifetime'),
   },
   {
     align: 'left',
     field: 'notificationType',
     minWidth: 150,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:NotificationType'),
   },
   {
     align: 'left',
     field: 'contentType',
     minWidth: 150,
+    resizable: true,
+    sortable: true,
     title: $t('Notifications.DisplayName:ContentType'),
   },
   {
     align: 'left',
     field: 'providers',
     minWidth: 150,
+    resizable: true,
     slots: { default: 'providers' },
+    sortable: true,
     title: $t('Notifications.DisplayName:Providers'),
   },
   {
@@ -220,10 +259,8 @@ const subGridColumns: VxeGridProps<NotificationDefinitionDto>['columns'] = [
 ];
 
 const gridEvents: VxeGridListeners<NotificationGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -249,7 +286,6 @@ async function onGet(input?: Record<string, string>) {
     gridApi.setLoading(true);
     const groupRes = await getGroupsApi(input);
     const definitionRes = await getDefinitionsApi(input);
-    pageState.total = groupRes.items.length;
     definitionGroups.value = groupRes.items.map((group) => {
       const localizableGroup = deserialize(group.displayName);
       const definitions = definitionRes.items
@@ -276,7 +312,7 @@ async function onGet(input?: Record<string, string>) {
         }),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -288,21 +324,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = definitionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationTable.vue

@@ -107,6 +107,7 @@ const gridOptions: VxeGridProps<Notification> = {
         }
       },
       minWidth: 50,
+      sortable: true,
       title: $t('Notifications.Notifications:Type'),
     },
     {
@@ -116,6 +117,7 @@ const gridOptions: VxeGridProps<Notification> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('Notifications.Notifications:SendTime'),
     },
     {
@@ -144,8 +146,10 @@ const gridOptions: VxeGridProps<Notification> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const { totalCount, items } = await getMyNotifilersApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -171,8 +175,9 @@ const gridOptions: VxeGridProps<Notification> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -184,6 +189,9 @@ const gridEvents: VxeGridListeners<Notification> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((record) => record.id);
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/vben5/packages/@abp/openiddict/src/components/applications/ApplicationTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -67,41 +67,48 @@ const gridOptions: VxeGridProps<OpenIddictApplicationDto> = {
       align: 'left',
       field: 'clientId',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ClientId'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:DisplayName'),
     },
     {
       align: 'center',
       field: 'consentType',
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ConsentType'),
       width: 200,
     },
     {
       align: 'center',
       field: 'clientType',
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ClientType'),
       width: 120,
     },
     {
       align: 'center',
       field: 'applicationType',
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ApplicationType'),
       width: 150,
     },
     {
       align: 'left',
       field: 'clientUri',
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ClientUri'),
       width: 150,
     },
     {
       align: 'left',
       field: 'logoUri',
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:LogoUri'),
       width: 120,
     },
@@ -121,8 +128,10 @@ const gridOptions: VxeGridProps<OpenIddictApplicationDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -137,11 +146,17 @@ const gridOptions: VxeGridProps<OpenIddictApplicationDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<OpenIddictApplicationDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 const [ApplicationModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(
     () => import('./ApplicationModal.vue'),
@@ -159,9 +174,10 @@ const [ApplicationChangeDrawer, applicationChangeDrawerApi] = useVbenDrawer({
   connectedComponent: EntityChangeDrawer,
 });
 
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 const onCreate = () => {
@@ -181,7 +197,7 @@ const onDelete = (row: OpenIddictApplicationDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      await gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -309,8 +325,8 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
       </div>
     </template>
   </Grid>
-  <ApplicationModal @change="() => query()" />
+  <ApplicationModal @change="() => gridApi.query()" />
-  <ApplicationSecretModal @change="() => query()" />
+  <ApplicationSecretModal @change="() => gridApi.query()" />
   <ApplicationPermissionModal />
   <ApplicationChangeDrawer />
 </template>

apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { SelectValue } from 'ant-design-vue/es/select';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -103,24 +103,28 @@ const gridOptions: VxeGridProps<OpenIddictAuthorizationDto> = {
       align: 'left',
       field: 'applicationId',
       minWidth: 300,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ApplicationId'),
     },
     {
       align: 'left',
       field: 'subject',
       minWidth: 300,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Subject'),
     },
     {
       align: 'left',
       field: 'type',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Type'),
     },
     {
       align: 'left',
       field: 'status',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Status'),
     },
     {
@@ -130,6 +134,7 @@ const gridOptions: VxeGridProps<OpenIddictAuthorizationDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 200,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:CreationDate'),
     },
     {
@@ -145,8 +150,10 @@ const gridOptions: VxeGridProps<OpenIddictAuthorizationDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -161,11 +168,17 @@ const gridOptions: VxeGridProps<OpenIddictAuthorizationDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<OpenIddictAuthorizationDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 const [AuthorizationModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(
     () => import('./AuthorizationModal.vue'),
@@ -175,6 +188,7 @@ const [AuthorizationModal, modalApi] = useVbenModal({
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 const onSearchClient = debounce(async (filter?: string) => {

apps/vben5/packages/@abp/openiddict/src/components/scopes/ScopeTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -64,18 +64,21 @@ const gridOptions: VxeGridProps<OpenIddictScopeDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:DisplayName'),
     },
     {
       align: 'center',
       field: 'description',
       minWidth: 200,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Description'),
     },
     {
@@ -85,6 +88,7 @@ const gridOptions: VxeGridProps<OpenIddictScopeDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 120,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:CreationDate'),
     },
     {
@@ -99,8 +103,10 @@ const gridOptions: VxeGridProps<OpenIddictScopeDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -115,11 +121,17 @@ const gridOptions: VxeGridProps<OpenIddictScopeDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<OpenIddictScopeDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 
 const [ScopeModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(() => import('./ScopeModal.vue')),
@@ -127,9 +139,10 @@ const [ScopeModal, modalApi] = useVbenModal({
 const [ScopeChangeDrawer, scopeChangeDrawerApi] = useVbenDrawer({
   connectedComponent: EntityChangeDrawer,
 });
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 const onCreate = () => {
@@ -149,7 +162,7 @@ const onDelete = (row: OpenIddictScopeDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      await gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -231,7 +244,7 @@ const onMenuClick = (row: OpenIddictScopeDto, info: MenuInfo) => {
       </div>
     </template>
   </Grid>
-  <ScopeModal @change="() => query()" />
+  <ScopeModal @change="() => gridApi.query()" />
   <ScopeChangeDrawer />
 </template>
 

apps/vben5/packages/@abp/openiddict/src/components/tokens/TokenTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { SelectValue } from 'ant-design-vue/es/select';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -120,24 +120,28 @@ const gridOptions: VxeGridProps<OpenIddictTokenDto> = {
       align: 'left',
       field: 'applicationId',
       minWidth: 300,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ApplicationId'),
     },
     {
       align: 'left',
       field: 'subject',
       minWidth: 300,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Subject'),
     },
     {
       align: 'left',
       field: 'type',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Type'),
     },
     {
       align: 'left',
       field: 'status',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:Status'),
     },
     {
@@ -147,6 +151,7 @@ const gridOptions: VxeGridProps<OpenIddictTokenDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 200,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:CreationDate'),
     },
     {
@@ -156,6 +161,7 @@ const gridOptions: VxeGridProps<OpenIddictTokenDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 200,
+      sortable: true,
       title: $t('AbpOpenIddict.DisplayName:ExpirationDate'),
     },
     {
@@ -171,8 +177,10 @@ const gridOptions: VxeGridProps<OpenIddictTokenDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -187,11 +195,17 @@ const gridOptions: VxeGridProps<OpenIddictTokenDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<OpenIddictTokenDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 const [TokenModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(() => import('./TokenModal.vue')),
 });
@@ -199,6 +213,7 @@ const [TokenModal, modalApi] = useVbenModal({
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 const onSearchClient = debounce(async (filter?: string) => {

apps/vben5/packages/@abp/oss/src/components/containers/ContainerTable.vue

@@ -56,6 +56,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:Name'),
     },
     {
@@ -65,6 +66,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:CreationDate'),
     },
     {
@@ -74,12 +76,14 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:LastModifiedDate'),
     },
     {
       align: 'left',
       field: 'size',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:Size'),
     },
     {
@@ -94,8 +98,10 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const res = await getListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -114,8 +120,9 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -127,6 +134,9 @@ const gridEvents: VxeGridListeners<OssContainerDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((record) => record.name);
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/vben5/packages/@abp/oss/src/components/objects/FileList.vue

@@ -48,6 +48,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:Name'),
     },
     {
@@ -59,6 +60,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
           : $t('AbpOssManagement.DisplayName:Standard');
       },
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:FileType'),
     },
     {
@@ -87,6 +89,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
         return `${kb} KB`;
       },
       minWidth: 150,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:Size'),
     },
     {
@@ -96,6 +99,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:CreationDate'),
     },
     {
@@ -105,6 +109,7 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('AbpOssManagement.DisplayName:LastModifiedDate'),
     },
     {
@@ -119,11 +124,13 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }) => {
+      query: async ({ page, sort }) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         const res = await getObjectsApi({
           bucket: props.bucket,
           maxResultCount: page.pageSize,
           prefix: props.path,
+          sorting,
           skipCount: (page.currentPage - 1) * page.pageSize,
         });
         return {
@@ -138,10 +145,15 @@ const gridOptions: VxeGridProps<OssContainerDto> = {
       list: 'items',
     },
   },
+  sortConfig: {
+    remote: true,
+  },
   toolbarConfig: {
     custom: true,
     export: false,
-    refresh: false,
+    refresh: {
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -153,6 +165,9 @@ const gridEvents: VxeGridListeners<OssContainerDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((record) => record.name);
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/vben5/packages/@abp/oss/src/components/objects/FolderTree.vue

@@ -185,7 +185,7 @@ onMounted(onInit);
 <style scoped lang="scss">
 :deep(.ant-tree) {
   .ant-tree-title {
-    word-break: break-word;
+    // word-break: break-word;
     white-space: normal;
   }
 }

apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue

@@ -6,14 +6,14 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { PermissionGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -38,11 +38,6 @@ const MenuItem = Menu.Item;
 const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
 
 const permissionGroups = ref<PermissionGroupDefinitionDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { hasAccessByCodes } = useAccess();
@@ -54,7 +49,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -77,12 +71,14 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpPermissionManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpPermissionManagement.DisplayName:DisplayName'),
     },
     {
@@ -95,6 +91,30 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(permissionGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: permissionGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -104,10 +124,8 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
 };
 
 const gridEvents: VxeGridListeners<PermissionGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -132,7 +150,6 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
     permissionGroups.value = items.map((item) => {
       const localizableString = deserialize(item.displayName);
       return {
@@ -140,7 +157,7 @@ async function onGet(input?: Record<string, string>) {
         displayName: Lr(localizableString.resourceName, localizableString.name),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -152,21 +169,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = permissionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   groupModalApi.setData({});
   groupModalApi.open();

apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue

@@ -6,13 +6,14 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { PermissionDefinitionDto } from '../../../types/definitions';
 import type { PermissionGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
   listToTree,
+  sortby,
   useLocalization,
   useLocalizationSerializer,
 } from '@abp/core';
@@ -52,11 +53,6 @@ interface PermissionGroupVo {
 }
 
 const permissionGroups = ref<PermissionGroupVo[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
@@ -70,7 +66,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -105,12 +100,14 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpPermissionManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpPermissionManagement.DisplayName:DisplayName'),
     },
   ],
@@ -120,6 +117,30 @@ const gridOptions: VxeGridProps<PermissionGroupDefinitionDto> = {
   },
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(permissionGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: permissionGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -137,6 +158,8 @@ const subGridColumns: VxeGridProps<PermissionDefinitionDto>['columns'] = [
     align: 'left',
     field: 'name',
     minWidth: 150,
+    resizable: true,
+    sortable: true,
     title: $t('AbpPermissionManagement.DisplayName:Name'),
     treeNode: true,
   },
@@ -144,20 +167,26 @@ const subGridColumns: VxeGridProps<PermissionDefinitionDto>['columns'] = [
     align: 'left',
     field: 'displayName',
     minWidth: 120,
+    resizable: true,
+    sortable: true,
     title: $t('AbpPermissionManagement.DisplayName:DisplayName'),
   },
   {
     align: 'center',
     field: 'multiTenancySide',
     minWidth: 100,
+    resizable: true,
     slots: { default: 'tenant' },
+    sortable: true,
     title: $t('AbpPermissionManagement.DisplayName:MultiTenancySide'),
   },
   {
     align: 'center',
     field: 'providers',
     minWidth: 100,
+    resizable: true,
     slots: { default: 'providers' },
+    sortable: true,
     title: $t('AbpPermissionManagement.DisplayName:Providers'),
   },
   {
@@ -170,10 +199,8 @@ const subGridColumns: VxeGridProps<PermissionDefinitionDto>['columns'] = [
 ];
 
 const gridEvents: VxeGridListeners<PermissionGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -194,7 +221,6 @@ async function onGet(input?: Record<string, string>) {
     gridApi.setLoading(true);
     const groupRes = await getGroupsApi(input);
     const permissionRes = await getPermissionsApi(input);
-    pageState.total = groupRes.items.length;
     permissionGroups.value = groupRes.items.map((group) => {
       const localizableGroup = deserialize(group.displayName);
       const permissions = permissionRes.items
@@ -218,7 +244,7 @@ async function onGet(input?: Record<string, string>) {
         }),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -230,21 +256,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = permissionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemDrawer.vue

@@ -3,12 +3,12 @@ import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { DataDto, DataItemDto } from '../../types/dataDictionaries';
 
-import { defineAsyncComponent, h, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, ref } from 'vue';
 
 import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { isNullOrWhiteSpace } from '@abp/core';
+import { isNullOrWhiteSpace, sortby } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   CheckOutlined,
@@ -25,11 +25,6 @@ import { ValueType } from '../../types/dataDictionaries';
 const { deleteItemApi, getApi } = useDataDictionariesApi();
 
 const dataItems = ref<DataItemDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 const valueTypeMaps: { [key: number]: string } = {
   [ValueType.Array]: 'Array',
   [ValueType.Boolean]: 'Boolean',
@@ -66,6 +61,7 @@ const gridOptions: VxeGridProps<DataItemDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Name'),
       treeNode: true,
     },
@@ -73,6 +69,7 @@ const gridOptions: VxeGridProps<DataItemDto> = {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:DisplayName'),
     },
     {
@@ -88,6 +85,7 @@ const gridOptions: VxeGridProps<DataItemDto> = {
         return valueTypeMaps[row.valueType] ?? row.valueType;
       },
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:ValueType'),
     },
     {
@@ -101,6 +99,7 @@ const gridOptions: VxeGridProps<DataItemDto> = {
       field: 'allowBeNull',
       minWidth: 150,
       slots: { default: 'allowBeNull' },
+      sortable: true,
       title: $t('AppPlatform.DisplayName:AllowBeNull'),
     },
     {
@@ -113,25 +112,46 @@ const gridOptions: VxeGridProps<DataItemDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  pagerConfig: {
+    pageSize: 15,
+    pageSizes: [10, 15, 30, 50, 100],
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(dataItems.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: dataItems.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
     refresh: false,
     zoom: true,
   },
-  treeConfig: {
+  height: 'auto',
-    accordion: true,
-    parentField: 'parentId',
-    rowField: 'id',
-    transform: true,
-  },
 };
 
 const gridEvents: VxeGridListeners<DataItemDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -155,8 +175,7 @@ async function onGet() {
     drawerApi.setState({ loading: true });
     const dto = await getApi(id);
     dataItems.value = dto.items;
-    pageState.total = dto.items.length;
+    setTimeout(() => gridApi.reload(), 100);
-    onPageChange();
   } finally {
     drawerApi.setState({
       loading: false,
@@ -164,21 +183,6 @@ async function onGet() {
   }
 }
 
-function onPageChange() {
-  const items = dataItems.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   const data = drawerApi.getData<DataDto>();
   itemModalApi.setData({ data });

apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue

@@ -4,13 +4,13 @@ import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { DataDto } from '../../types/dataDictionaries';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { listToTree, useAuthorization } from '@abp/core';
+import { listToTree, sortby, useAuthorization } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -35,11 +35,6 @@ const { deleteApi, getAllApi } = useDataDictionariesApi();
 
 const expandRowKeys = ref<string[]>([]);
 const dataDictionaries = ref<DataDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const gridOptions: VxeGridProps<DataDto> = {
   columns: [
@@ -53,6 +48,7 @@ const gridOptions: VxeGridProps<DataDto> = {
       field: 'name',
       minWidth: 150,
       slots: { default: 'name' },
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Name'),
       treeNode: true,
     },
@@ -60,12 +56,14 @@ const gridOptions: VxeGridProps<DataDto> = {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:DisplayName'),
     },
     {
       align: 'left',
       field: 'description',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Description'),
     },
     {
@@ -89,6 +87,30 @@ const gridOptions: VxeGridProps<DataDto> = {
   rowConfig: {
     keyField: 'id',
   },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(dataDictionaries.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: dataDictionaries.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -105,10 +127,8 @@ const gridOptions: VxeGridProps<DataDto> = {
   },
 };
 const gridEvents: VxeGridListeners<DataDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
   toggleTreeExpand(params) {
     if (params.expanded) {
@@ -146,9 +166,8 @@ async function onGet() {
       id: 'id',
       pid: 'parentId',
     });
-    pageState.total = treeItems.length;
     dataDictionaries.value = treeItems;
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -162,21 +181,6 @@ function onExpandChange() {
   });
 }
 
-function onPageChange() {
-  const items = dataDictionaries.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/platform/src/components/layouts/LayoutTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { VbenFormProps } from '@vben/common-ui';
 
@@ -68,36 +68,42 @@ const gridOptions: VxeGridProps<LayoutDto> = {
       field: 'name',
       fixed: 'left',
       minWidth: 180,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:DisplayName'),
     },
     {
       align: 'center',
       field: 'path',
       minWidth: 200,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Path'),
     },
     {
       align: 'left',
       field: 'framework',
       minWidth: 180,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:UIFramework'),
     },
     {
       align: 'left',
       field: 'description',
       minWidth: 220,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Description'),
     },
     {
       align: 'left',
       field: 'redirect',
       minWidth: 160,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Redirect'),
     },
     {
@@ -120,8 +126,10 @@ const gridOptions: VxeGridProps<LayoutDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -136,14 +144,22 @@ const gridOptions: VxeGridProps<LayoutDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<LayoutDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 const [LayoutModal, modalApi] = useVbenModal({

apps/vben5/packages/@abp/platform/src/components/menus/MenuTable.vue

@@ -6,13 +6,13 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { MenuDto } from '../../types/menus';
 import type { MenuDrawerState } from './types';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { listToTree, useAuthorization } from '@abp/core';
+import { listToTree, sortby, useAuthorization } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -35,11 +35,6 @@ const { getPagedListApi: getLayoutsApi } = useLayoutsApi();
 
 const expandRowKeys = ref<string[]>([]);
 const menus = ref<MenuDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const formOptions: VbenFormProps = {
   // 默认展开
@@ -95,6 +90,7 @@ const gridOptions: VxeGridProps<MenuDto> = {
       field: 'name',
       minWidth: 250,
       slots: { default: 'name' },
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Name'),
       treeNode: true,
     },
@@ -102,12 +98,14 @@ const gridOptions: VxeGridProps<MenuDto> = {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:DisplayName'),
     },
     {
       align: 'left',
       field: 'description',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Description'),
     },
     {
@@ -132,6 +130,30 @@ const gridOptions: VxeGridProps<MenuDto> = {
   rowConfig: {
     keyField: 'id',
   },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(menus.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: menus.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -149,10 +171,8 @@ const gridOptions: VxeGridProps<MenuDto> = {
 };
 
 const gridEvents: VxeGridListeners<MenuDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
   toggleTreeExpand(params) {
     if (params.expanded) {
@@ -185,9 +205,8 @@ async function onGet() {
       id: 'id',
       pid: 'parentId',
     });
-    pageState.total = treeItems.length;
     menus.value = treeItems;
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -201,21 +220,6 @@ function onExpandChange() {
   });
 }
 
-function onPageChange() {
-  const items = menus.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate(row?: MenuDto) {
   drawerApi.setData<MenuDrawerState>({
     editMenu: {

apps/vben5/packages/@abp/platform/src/components/messages/email/EmailMessageTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -103,6 +103,7 @@ const gridOptions: VxeGridProps<EmailMessageDto> = {
       align: 'left',
       field: 'provider',
       minWidth: 180,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Provider'),
     },
     {
@@ -110,6 +111,7 @@ const gridOptions: VxeGridProps<EmailMessageDto> = {
       field: 'status',
       minWidth: 150,
       slots: { default: 'status' },
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Status'),
     },
     {
@@ -119,36 +121,42 @@ const gridOptions: VxeGridProps<EmailMessageDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:SendTime'),
     },
     {
       align: 'center',
       field: 'sendCount',
       minWidth: 100,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:SendCount'),
     },
     {
       align: 'left',
       field: 'subject',
       minWidth: 180,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Subject'),
     },
     {
       align: 'left',
       field: 'content',
       minWidth: 220,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Content'),
     },
     {
       align: 'left',
       field: 'from',
       minWidth: 220,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:From'),
     },
     {
       align: 'left',
       field: 'receiver',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Receiver'),
     },
     {
@@ -158,12 +166,14 @@ const gridOptions: VxeGridProps<EmailMessageDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 200,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:CreationTime'),
     },
     {
       align: 'left',
       field: 'reason',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Reason'),
     },
     {
@@ -179,8 +189,10 @@ const gridOptions: VxeGridProps<EmailMessageDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -195,14 +207,22 @@ const gridOptions: VxeGridProps<EmailMessageDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<EmailMessageDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 const [EmailMessageModal, modalApi] = useVbenModal({

apps/vben5/packages/@abp/platform/src/components/messages/sms/SmsMessageTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VxeGridProps } from '@abp/ui';
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
@@ -98,6 +98,7 @@ const gridOptions: VxeGridProps<SmsMessageDto> = {
       align: 'left',
       field: 'provider',
       minWidth: 180,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Provider'),
     },
     {
@@ -105,6 +106,7 @@ const gridOptions: VxeGridProps<SmsMessageDto> = {
       field: 'status',
       minWidth: 150,
       slots: { default: 'status' },
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Status'),
     },
     {
@@ -114,24 +116,28 @@ const gridOptions: VxeGridProps<SmsMessageDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:SendTime'),
     },
     {
       align: 'left',
       field: 'content',
       minWidth: 220,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Content'),
     },
     {
       align: 'left',
       field: 'receiver',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Receiver'),
     },
     {
       align: 'center',
       field: 'sendCount',
       minWidth: 100,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:SendCount'),
     },
     {
@@ -141,12 +147,14 @@ const gridOptions: VxeGridProps<SmsMessageDto> = {
         return cellValue ? formatToDateTime(cellValue) : cellValue;
       },
       minWidth: 200,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:CreationTime'),
     },
     {
       align: 'left',
       field: 'reason',
       minWidth: 150,
+      sortable: true,
       title: $t('AppPlatform.DisplayName:Reason'),
     },
     {
@@ -162,8 +170,10 @@ const gridOptions: VxeGridProps<SmsMessageDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -178,15 +188,22 @@ const gridOptions: VxeGridProps<SmsMessageDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
+const gridEvents: VxeGridListeners<SmsMessageDto> = {
+  sortChange: () => {
+    gridApi.query();
+  },
+};
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
+  gridEvents,
 });
 
 function onDelete(row: SmsMessageDto) {

apps/vben5/packages/@abp/platform/src/hooks/useMenuTransform.ts

@@ -2,9 +2,12 @@ import type { RouteRecordStringComponent } from '@vben/types';
 
 import type { MenuDto } from '../types';
 
+import { useUserStore } from '@vben/stores';
+
 import { listToTree } from '@abp/core';
 
 export function useMenuTransform() {
+  const userStore = useUserStore();
   function mapMetaString(meta: Record<string, any>, key: string) {
     if (!meta[key]) {
       return undefined;
@@ -30,6 +33,16 @@ export function useMenuTransform() {
     return Array.isArray(meta[key]) ? meta[key] : String(meta[key]).split(',');
   }
   function transformRoutes(menus: MenuDto[]): RouteRecordStringComponent[] {
+    const startupMenus = menus.filter((x) => x.startup);
+    if (startupMenus.length > 0) {
+      userStore.$patch((state) => {
+        state.userInfo && (state.userInfo.homePath = startupMenus[0]?.path);
+      });
+    } else {
+      userStore.$patch((state) => {
+        state.userInfo && (state.userInfo.homePath = undefined);
+      });
+    }
     const combMenus = menus.map((item) => {
       return {
         component: item.component.includes('BasicLayout')

apps/vben5/packages/@abp/saas/src/components/editions/EditionTable.vue

@@ -21,6 +21,7 @@ import {
   DeleteOutlined,
   EditOutlined,
   EllipsisOutlined,
+  PlusOutlined,
 } from '@ant-design/icons-vue';
 import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
@@ -65,6 +66,7 @@ const gridOptions: VxeGridProps<EditionDto> = {
     {
       align: 'left',
       field: 'displayName',
+      sortable: true,
       title: $t('AbpSaas.DisplayName:EditionName'),
     },
     {
@@ -83,8 +85,10 @@ const gridOptions: VxeGridProps<EditionDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -99,19 +103,23 @@ const gridOptions: VxeGridProps<EditionDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<EditionDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [EditionModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(() => import('./EditionModal.vue')),
 });
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
@@ -145,7 +153,7 @@ const onDelete = (row: EditionDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      await gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -181,6 +189,7 @@ const onMenuClick = (row: EditionDto, info: MenuInfo) => {
         type="primary"
         v-access:code="[EditionsPermissions.Create]"
         @click="onCreate"
+        :icon="h(PlusOutlined)"
       >
         {{ $t('AbpSaas.NewEdition') }}
       </Button>
@@ -233,7 +242,7 @@ const onMenuClick = (row: EditionDto, info: MenuInfo) => {
       </div>
     </template>
   </Grid>
-  <EditionModal @change="() => query()" />
+  <EditionModal @change="() => gridApi.query()" />
   <EditionChangeDrawer />
   <EditionFeatureModal />
 </template>

apps/vben5/packages/@abp/saas/src/components/tenants/TenantTable.vue

@@ -21,6 +21,7 @@ import {
   DeleteOutlined,
   EditOutlined,
   EllipsisOutlined,
+  PlusOutlined,
 } from '@ant-design/icons-vue';
 import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
@@ -77,12 +78,14 @@ const gridOptions: VxeGridProps<TenantDto> = {
       align: 'center',
       field: 'isActive',
       slots: { default: 'isActive' },
+      sortable: true,
       title: $t('AbpSaas.DisplayName:IsActive'),
       width: 120,
     },
     {
       align: 'left',
       field: 'name',
+      sortable: true,
       title: $t('AbpSaas.DisplayName:Name'),
     },
     {
@@ -107,8 +110,10 @@ const gridOptions: VxeGridProps<TenantDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -123,14 +128,18 @@ const gridOptions: VxeGridProps<TenantDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
 
 const gridEvents: VxeGridListeners<TenantDto> = {
   cellClick: () => {},
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [TenantModal, modalApi] = useVbenModal({
   connectedComponent: defineAsyncComponent(() => import('./TenantModal.vue')),
@@ -146,7 +155,7 @@ const [TenantChangeDrawer, entityChangeDrawerApi] = useVbenDrawer({
 const [TenantFeatureModal, tenantFeatureModalApi] = useVbenModal({
   connectedComponent: FeatureModal,
 });
-const [Grid, { query }] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridEvents,
   gridOptions,
@@ -172,7 +181,7 @@ const onDelete = (row: TenantDto) => {
     onOk: async () => {
       await deleteApi(row.id);
       message.success($t('AbpUi.DeletedSuccessfully'));
-      query();
+      await gridApi.query();
     },
     title: $t('AbpUi.AreYouSure'),
   });
@@ -213,6 +222,7 @@ const onMenuClick = (row: TenantDto, info: MenuInfo) => {
         type="primary"
         v-access:code="[TenantsPermissions.Create]"
         @click="onCreate"
+        :icon="h(PlusOutlined)"
       >
         {{ $t('AbpSaas.NewTenant') }}
       </Button>
@@ -280,7 +290,10 @@ const onMenuClick = (row: TenantDto, info: MenuInfo) => {
       </div>
     </template>
   </Grid>
-  <TenantModal :data-base-options="dataBaseOptions" @change="() => query()" />
+  <TenantModal
+    :data-base-options="dataBaseOptions"
+    @change="() => gridApi.query()"
+  />
   <TenantConnectionStringsModal :data-base-options="dataBaseOptions" />
   <TenantFeatureModal />
   <TenantChangeDrawer />

apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue

@@ -5,12 +5,12 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { SettingDefinitionDto } from '../../types/definitions';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -26,12 +26,7 @@ defineOptions({
   name: 'SettingDefinitionTable',
 });
 
-const permissionGroups = ref<SettingDefinitionDto[]>([]);
+const settingGroups = ref<SettingDefinitionDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
@@ -42,7 +37,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -65,12 +59,14 @@ const gridOptions: VxeGridProps<SettingDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpSettingManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpSettingManagement.DisplayName:DisplayName'),
     },
     {
@@ -83,6 +79,30 @@ const gridOptions: VxeGridProps<SettingDefinitionDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(settingGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: settingGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -92,10 +112,8 @@ const gridOptions: VxeGridProps<SettingDefinitionDto> = {
 };
 
 const gridEvents: VxeGridListeners<SettingDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -115,15 +133,14 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
+    settingGroups.value = items.map((item) => {
-    permissionGroups.value = items.map((item) => {
       const localizableString = deserialize(item.displayName);
       return {
         ...item,
         displayName: Lr(localizableString.resourceName, localizableString.name),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -135,21 +152,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = permissionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/settings/src/hooks/useDefineSettings.ts

@@ -67,7 +67,7 @@ export function useDefineSettings(): UserDefineSettingProvider {
     initlize,
     isTrue(name: string) {
       const value = getOrDefault(name, 'false');
-      return value.toLowerCase() === 'true';
+      return value?.toLowerCase() === 'true';
     },
   };
 }

apps/vben5/packages/@abp/tasks/src/components/job-infos/JobInfoTable.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SortOrder } from '@abp/core';
 import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
@@ -372,8 +371,10 @@ const gridOptions: VxeGridProps<BackgroundJobInfoDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -386,7 +387,9 @@ const gridOptions: VxeGridProps<BackgroundJobInfoDto> = {
     },
   },
   toolbarConfig: {
-    refresh: true,
+    refresh: {
+      code: 'query',
+    },
   },
 };
 const gridEvents: VxeGridListeners<BackgroundJobInfoDto> = {
@@ -396,7 +399,9 @@ const gridEvents: VxeGridListeners<BackgroundJobInfoDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((x) => x.id);
   },
-  sortChange: onSort,
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 const [JobInfoDrawer, jobDrawerApi] = useVbenDrawer({
   connectedComponent: defineAsyncComponent(() => import('./JobInfoDrawer.vue')),
@@ -412,11 +417,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-function onSort(params: { field: string; order: SortOrder }) {
-  const sorting = params.order ? `${params.field} ${params.order}` : undefined;
-  gridApi.query({ sorting });
-}
-
 function onShow(row: BackgroundJobInfoDto) {
   jobDetailDrawerApi.setData(row);
   jobDetailDrawerApi.open();

apps/vben5/packages/@abp/text-templating/src/components/definitions/TemplateDefinitionTable.vue

@@ -6,13 +6,13 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { TextTemplateDefinitionDto } from '../../types/definitions';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   CheckOutlined,
@@ -34,11 +34,6 @@ defineOptions({
 const MenuItem = Menu.Item;
 
 const textTemplates = ref<TextTemplateDefinitionDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { hasAccessByCodes } = useAccess();
@@ -49,7 +44,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -75,12 +69,14 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:DisplayName'),
     },
     {
@@ -88,6 +84,7 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
       field: 'isStatic',
       minWidth: 150,
       slots: { default: 'isStatic' },
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:IsStatic'),
     },
     {
@@ -95,6 +92,7 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
       field: 'isInlineLocalized',
       minWidth: 150,
       slots: { default: 'isInlineLocalized' },
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:IsInlineLocalized'),
     },
     {
@@ -102,24 +100,28 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
       field: 'isLayout',
       minWidth: 150,
       slots: { default: 'isLayout' },
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:IsLayout'),
     },
     {
       align: 'left',
       field: 'layout',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:Layout'),
     },
     {
       align: 'left',
       field: 'defaultCultureName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpTextTemplating.DisplayName:DefaultCultureName'),
     },
     {
       align: 'left',
       field: 'localizationResourceName',
       minWidth: 150,
+      sortable: true,
       title: $t('AbpTextTemplating.LocalizationResource'),
     },
     {
@@ -132,6 +134,30 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(textTemplates.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: textTemplates.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -141,10 +167,8 @@ const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = {
 };
 
 const gridEvents: VxeGridListeners<TextTemplateDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -169,7 +193,6 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
     textTemplates.value = items.map((item) => {
       const localizableString = deserialize(item.displayName);
       return {
@@ -177,7 +200,7 @@ async function onGet(input?: Record<string, string>) {
         displayName: Lr(localizableString.resourceName, localizableString.name),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -189,21 +212,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = textTemplates.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   modalApi.setData({});
   modalApi.open();

apps/vben5/packages/@abp/webhooks/src/components/definitions/groups/WebhookGroupDefinitionTable.vue

@@ -6,13 +6,13 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { WebhookGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { sortby, useLocalization, useLocalizationSerializer } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
   DeleteOutlined,
@@ -33,12 +33,7 @@ const MenuItem = Menu.Item;
 
 const WebhookIcon = createIconifyIcon('material-symbols:webhook');
 
-const permissionGroups = ref<WebhookGroupDefinitionDto[]>([]);
+const webhookGroups = ref<WebhookGroupDefinitionDto[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const { Lr } = useLocalization();
 const { deserialize } = useLocalizationSerializer();
@@ -48,7 +43,6 @@ const formOptions: VbenFormProps = {
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -69,12 +63,14 @@ const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:DisplayName'),
     },
     {
@@ -87,6 +83,30 @@ const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
   ],
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(webhookGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: webhookGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -96,10 +116,8 @@ const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
 };
 
 const gridEvents: VxeGridListeners<WebhookGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -124,15 +142,14 @@ async function onGet(input?: Record<string, string>) {
   try {
     gridApi.setLoading(true);
     const { items } = await getListApi(input);
-    pageState.total = items.length;
+    webhookGroups.value = items.map((item) => {
-    permissionGroups.value = items.map((item) => {
       const localizableString = deserialize(item.displayName);
       return {
         ...item,
         displayName: Lr(localizableString.resourceName, localizableString.name),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -144,21 +161,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = permissionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   groupModalApi.setData({});
   groupModalApi.open();

apps/vben5/packages/@abp/webhooks/src/components/definitions/webhooks/WebhookDefinitionTable.vue

@@ -6,13 +6,14 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { WebhookDefinitionDto } from '../../../types/definitions';
 import type { WebhookGroupDefinitionDto } from '../../../types/groups';
 
-import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
   listToTree,
+  sortby,
   useLocalization,
   useLocalizationSerializer,
 } from '@abp/core';
@@ -56,19 +57,13 @@ const { deserialize } = useLocalizationSerializer();
 const { getListApi: getGroupsApi } = useWebhookGroupDefinitionsApi();
 const { deleteApi, getListApi: getDefinitionsApi } = useWebhookDefinitionsApi();
 
-const definitionGroups = ref<DefinitionGroup[]>([]);
+const webhookGroups = ref<DefinitionGroup[]>([]);
-const pageState = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
 
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
   handleReset: onReset,
   async handleSubmit(params) {
-    pageState.current = 1;
     await onGet(params);
   },
   schema: [
@@ -103,12 +98,14 @@ const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
       align: 'left',
       field: 'name',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:Name'),
     },
     {
       align: 'left',
       field: 'displayName',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:DisplayName'),
     },
   ],
@@ -118,6 +115,30 @@ const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
   },
   exportConfig: {},
   keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sort }) => {
+        let items = sortby(webhookGroups.value, sort.field);
+        if (sort.order === 'desc') {
+          items = items.reverse();
+        }
+        const result = {
+          totalCount: webhookGroups.value.length,
+          items: items.slice(
+            (page.currentPage - 1) * page.pageSize,
+            page.currentPage * page.pageSize,
+          ),
+        };
+        return new Promise((resolve) => {
+          resolve(result);
+        });
+      },
+    },
+    response: {
+      total: 'totalCount',
+      list: 'items',
+    },
+  },
   toolbarConfig: {
     custom: true,
     export: true,
@@ -136,12 +157,14 @@ const subGridColumns: VxeGridProps<WebhookDefinitionDto>['columns'] = [
     field: 'isEnabled',
     minWidth: 120,
     slots: { default: 'isEnabled' },
+    sortable: true,
     title: $t('WebhooksManagement.DisplayName:IsEnabled'),
   },
   {
     align: 'left',
     field: 'name',
     minWidth: 150,
+    sortable: true,
     title: $t('WebhooksManagement.DisplayName:Name'),
     treeNode: true,
   },
@@ -149,12 +172,14 @@ const subGridColumns: VxeGridProps<WebhookDefinitionDto>['columns'] = [
     align: 'left',
     field: 'displayName',
     minWidth: 120,
+    sortable: true,
     title: $t('WebhooksManagement.DisplayName:DisplayName'),
   },
   {
     align: 'left',
     field: 'description',
     minWidth: 120,
+    sortable: true,
     title: $t('WebhooksManagement.DisplayName:Description'),
   },
   {
@@ -162,6 +187,7 @@ const subGridColumns: VxeGridProps<WebhookDefinitionDto>['columns'] = [
     field: 'requiredFeatures',
     minWidth: 150,
     slots: { default: 'requiredFeatures' },
+    sortable: true,
     title: $t('WebhooksManagement.DisplayName:RequiredFeatures'),
   },
   {
@@ -174,10 +200,8 @@ const subGridColumns: VxeGridProps<WebhookDefinitionDto>['columns'] = [
 ];
 
 const gridEvents: VxeGridListeners<WebhookGroupDefinitionDto> = {
-  pageChange(params) {
+  sortChange: () => {
-    pageState.current = params.currentPage;
+    gridApi.query();
-    pageState.size = params.pageSize;
-    onPageChange();
   },
 };
 
@@ -198,8 +222,7 @@ async function onGet(input?: Record<string, string>) {
     gridApi.setLoading(true);
     const groupRes = await getGroupsApi(input);
     const definitionRes = await getDefinitionsApi(input);
-    pageState.total = groupRes.items.length;
+    webhookGroups.value = groupRes.items.map((group) => {
-    definitionGroups.value = groupRes.items.map((group) => {
       const localizableGroup = deserialize(group.displayName);
       const definitions = definitionRes.items
         .filter((definition) => definition.groupName === group.name)
@@ -221,7 +244,7 @@ async function onGet(input?: Record<string, string>) {
         }),
       };
     });
-    onPageChange();
+    setTimeout(() => gridApi.reload(), 100);
   } finally {
     gridApi.setLoading(false);
   }
@@ -233,21 +256,6 @@ async function onReset() {
   await onGet(input);
 }
 
-function onPageChange() {
-  const items = definitionGroups.value.slice(
-    (pageState.current - 1) * pageState.size,
-    pageState.current * pageState.size,
-  );
-  gridApi.setGridOptions({
-    data: items,
-    pagerConfig: {
-      currentPage: pageState.current,
-      pageSize: pageState.size,
-      total: pageState.total,
-    },
-  });
-}
-
 function onCreate() {
   groupModalApi.setData({});
   groupModalApi.open();

apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue

@@ -153,6 +153,7 @@ const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
       align: 'left',
       field: 'tenantId',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:TenantId'),
     },
     {
@@ -160,6 +161,7 @@ const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
       field: 'responseStatusCode',
       minWidth: 150,
       slots: { default: 'responseStatusCode' },
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:ResponseStatusCode'),
     },
     {
@@ -169,12 +171,14 @@ const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:CreationTime'),
     },
     {
       align: 'center',
       field: 'response',
       minWidth: 300,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:Response'),
     },
     {
@@ -189,8 +193,10 @@ const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -205,8 +211,9 @@ const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -218,6 +225,9 @@ const gridEvents: VxeGridListeners<WebhookSendRecordDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((record) => record.id);
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -273,7 +283,7 @@ async function onSend(row: WebhookSendRecordDto) {
         gridApi.setLoading(true);
         await reSendApi(row.id);
         message.success($t('WebhooksManagement.SuccessfullySent'));
-        gridApi.query();
+        await gridApi.query();
       } finally {
         gridApi.setLoading(false);
       }
@@ -291,7 +301,7 @@ async function onSendMany(keys: string[]) {
         await bulkReSendApi({ recordIds: keys });
         message.success($t('WebhooksManagement.SuccessfullySent'));
         // 重新查询
-        gridApi.query();
+        await gridApi.query();
       } finally {
         gridApi.setLoading(false);
       }
@@ -313,7 +323,7 @@ async function onDeleteMany(keys: string[]) {
           (key) => !keys.includes(key),
         );
         // 重新查询
-        gridApi.query();
+        await gridApi.query();
       } finally {
         gridApi.setLoading(false);
       }

apps/vben5/packages/@abp/webhooks/src/components/subscriptions/WebhookSubscriptionTable.vue

@@ -136,6 +136,7 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
       fixed: 'left',
       minWidth: 150,
       slots: { default: 'isActive' },
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:IsActive'),
     },
     {
@@ -143,6 +144,7 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
       field: 'tenantId',
       fixed: 'left',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:TenantId'),
     },
     {
@@ -150,12 +152,14 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
       field: 'webhookUri',
       fixed: 'left',
       minWidth: 300,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:WebhookUri'),
     },
     {
       align: 'left',
       field: 'description',
       minWidth: 150,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:Description'),
     },
     {
@@ -165,6 +169,7 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
         return cellValue ? formatToDateTime(cellValue) : '';
       },
       minWidth: 120,
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:CreationTime'),
     },
     {
@@ -172,6 +177,7 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
       field: 'webhooks',
       minWidth: 300,
       slots: { default: 'webhooks' },
+      sortable: true,
       title: $t('WebhooksManagement.DisplayName:Webhooks'),
     },
     {
@@ -186,8 +192,10 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues) => {
+      query: async ({ page, sort }, formValues) => {
+        const sorting = sort.order ? `${sort.field} ${sort.order}` : undefined;
         return await getPagedListApi({
+          sorting,
           maxResultCount: page.pageSize,
           skipCount: (page.currentPage - 1) * page.pageSize,
           ...formValues,
@@ -202,8 +210,9 @@ const gridOptions: VxeGridProps<WebhookSubscriptionDto> = {
   toolbarConfig: {
     custom: true,
     export: true,
-    // import: true,
+    refresh: {
-    refresh: true,
+      code: 'query',
+    },
     zoom: true,
   },
 };
@@ -215,6 +224,9 @@ const gridEvents: VxeGridListeners<WebhookSubscriptionDto> = {
   checkboxChange: (params) => {
     selectedKeys.value = params.records.map((record) => record.id);
   },
+  sortChange: () => {
+    gridApi.query();
+  },
 };
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/vben5/pnpm-workspace.yaml

@@ -51,10 +51,12 @@ catalog:
   '@types/lodash.debounce': ^4.0.9
   '@types/lodash.get': ^4.4.9
   '@types/lodash.groupby': ^4.6.9
+  '@types/lodash.isdate': ^4.0.9
   '@types/lodash.isequal': ^4.5.8
   '@types/lodash.isnumber': ^3.0.9
   '@types/lodash.merge': ^4.6.9
   '@types/lodash.set': ^4.3.9
+  '@types/lodash.sortby': ^4.7.9
   '@types/node': ^22.15.3
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
@@ -131,10 +133,12 @@ catalog:
   lodash.debounce: ^4.0.8
   lodash.get: ^4.4.2
   lodash.groupby: ^4.6.0
+  lodash.isdate: ^4.0.1
   lodash.isequal: ^4.5.0
   lodash.isnumber: ^3.0.3
   lodash.merge: ^4.6.2
   lodash.set: ^4.3.2
+  lodash.sortby: ^4.7.0
   lucide-vue-next: ^0.507.0
   medium-zoom: ^1.1.0
   naive-ui: ^2.41.0