From aa95783fc94175def4012513d6435b57edb16506 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 20 Dec 2024 13:58:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A8=E6=A0=BC=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E7=BF=BB=E9=A1=B5=E4=BC=9A=E4=B8=A2=E5=A4=B1=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 apps/web-antd/src/adapter/vxe-table.ts        | 22 +++++++++++++++++++
 .../src/views/monitor/operlog/index.vue       |  9 +++++---
 apps/web-antd/src/views/system/oss/index.vue  |  9 +++++---
 .../effects/plugins/src/vxe-table/index.ts    |  7 +++++-
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 563100bf..167872d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 **BUG FIXES**
 
 - 字典项为空时getDict方法无限调用接口((无奈兼容 不给字典item本来就是错误用法))
+- 表格排序翻页会丢失排序参数
 
 # 1.1.3
 
diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 857751b3..4453f8c9 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -4,6 +4,7 @@ import {
   setupVbenVxeTable,
   useVbenVxeGrid,
   type VxeGridDefines,
+  type VxeGridPropTypes,
 } from '@vben/plugins/vxe-table';
 
 import { Button, Image } from 'ant-design-vue';
@@ -133,6 +134,7 @@ export function vxeCheckboxChecked(
 
 /**
  * 通用的vxe-table排序事件 支持单/多字段排序
+ * @deprecated 翻页后排序会丢失，使用addSortParams代替
  * @param tableApi api
  * @param sortParams 排序参数
  */
@@ -151,3 +153,23 @@ export function vxeSortEvent(
   const isAsc = sortList.map((item) => item.order).join(',');
   tableApi.query({ orderByColumn, isAsc });
 }
+
+/**
+ * 通用的 排序参数添加到请求参数中
+ * @param params 请求参数
+ * @param sortList vxe-table的排序参数
+ */
+export function addSortParams(
+  params: Record<string, any>,
+  sortList: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams[],
+) {
+  // 这里是排序取消 length为0 就不添加参数了
+  if (sortList.length === 0) {
+    return;
+  }
+  // 支持单/多字段排序
+  const orderByColumn = sortList.map((item) => item.field).join(',');
+  const isAsc = sortList.map((item) => item.order).join(',');
+  params.orderByColumn = orderByColumn;
+  params.isAsc = isAsc;
+}
diff --git a/apps/web-antd/src/views/monitor/operlog/index.vue b/apps/web-antd/src/views/monitor/operlog/index.vue
index 74c34dd5..f1d3a127 100644
--- a/apps/web-antd/src/views/monitor/operlog/index.vue
+++ b/apps/web-antd/src/views/monitor/operlog/index.vue
@@ -9,10 +9,10 @@ import { $t } from '@vben/locales';
 import { Modal, Space } from 'ant-design-vue';
 
 import {
+  addSortParams,
   useVbenVxeGrid,
   vxeCheckboxChecked,
   type VxeGridProps,
-  vxeSortEvent,
 } from '#/adapter/vxe-table';
 import {
   operLogClean,
@@ -60,12 +60,14 @@ const gridOptions: VxeGridProps<OperationLog> = {
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues = {}) => {
+      query: async ({ page, sorts }, formValues = {}) => {
         const params: any = {
           pageNum: page.currentPage,
           pageSize: page.pageSize,
           ...formValues,
         };
+        // 添加排序参数
+        addSortParams(params, sorts);
         return await operLogList(params);
       },
     },
@@ -87,7 +89,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
   gridEvents: {
-    sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams),
+    // 排序 重新请求接口
+    sortChange: () => tableApi.query(),
   },
 });
 
diff --git a/apps/web-antd/src/views/system/oss/index.vue b/apps/web-antd/src/views/system/oss/index.vue
index eebccedf..0f835432 100644
--- a/apps/web-antd/src/views/system/oss/index.vue
+++ b/apps/web-antd/src/views/system/oss/index.vue
@@ -19,10 +19,10 @@ import {
 } from 'ant-design-vue';
 
 import {
+  addSortParams,
   useVbenVxeGrid,
   vxeCheckboxChecked,
   type VxeGridProps,
-  vxeSortEvent,
 } from '#/adapter/vxe-table';
 import { configInfoByKey } from '#/api/system/config';
 import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
@@ -66,12 +66,14 @@ const gridOptions: VxeGridProps = {
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues = {}) => {
+      query: async ({ page, sorts }, formValues = {}) => {
         const params: any = {
           pageNum: page.currentPage,
           pageSize: page.pageSize,
           ...formValues,
         };
+        // 添加排序参数
+        addSortParams(params, sorts);
         return await ossList(params);
       },
     },
@@ -94,7 +96,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
   gridEvents: {
-    sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams),
+    // 排序 重新请求接口
+    sortChange: () => tableApi.query(),
   },
 });
 
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 0fa0cdbd..650760db 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -2,4 +2,9 @@ export { setupVbenVxeTable } from './init';
 export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
-export type { VxeGridDefines, VxeGridListeners, VxeGridProps } from 'vxe-table';
+export type {
+  VxeGridDefines,
+  VxeGridListeners,
+  VxeGridProps,
+  VxeGridPropTypes,
+} from 'vxe-table';