feat: 表格缓存pageSize

frontend/src/components/pure/ms-table/useTable.ts

@@ -3,7 +3,7 @@
 
 import { ref } from 'vue';
 import dayjs from 'dayjs';
-import { useAppStore } from '@/store';
+import { useAppStore, useTableStore } from '@/store';
 import { SpecialColumnEnum } from '@/enums/tableEnum';
 
 import type { TableData } from '@arco-design/web-vue';
@@ -17,6 +17,7 @@ export interface Pagination {
 }
 
 const appStore = useAppStore();
+const tableStore = useTableStore();
 export default function useTableProps<T>(
   loadListFunc: (v: TableQueryParams) => Promise<CommonList<MsTableDataItem<T>>>,
   props?: Partial<MsTableProps<T>>,
@@ -117,6 +118,12 @@ export default function useTableProps<T>(
     propsRes.value.tableErrorStatus = status;
   };
 
+  // 如果表格设置了tableKey，设置缓存的分页大小
+  if (propsRes.value.msPagination && typeof propsRes.value.msPagination === 'object' && propsRes.value.tableKey) {
+    const pageSize = tableStore.getPageSize(propsRes.value.tableKey);
+    propsRes.value.msPagination.pageSize = pageSize;
+  }
+
   /**
    * 分页设置
    * @param current //当前页数
@@ -231,6 +238,10 @@ export default function useTableProps<T>(
     pageSizeChange: (pageSize: number) => {
       if (propsRes.value.msPagination && typeof propsRes.value.msPagination === 'object') {
         propsRes.value.msPagination.pageSize = pageSize;
+        if (propsRes.value.tableKey) {
+          // 如果表格设置了tableKey，缓存分页大小
+          tableStore.setPageSize(propsRes.value.tableKey, pageSize);
+        }
       }
       loadList();
     },

frontend/src/store/modules/ms-table/index.ts

@@ -7,35 +7,42 @@ import { orderBy, filter, cloneDeep } from 'lodash';
 const msTableStore = defineStore('msTable', {
   // 开启数据持久化
   persist: {
-    paths: ['selectorColumnMap'],
+    paths: ['selectorColumnMap', 'pageSizeMap'],
   },
   state: (): MsTableState => ({
     selectorColumnMap: {},
     baseSortIndex: 10,
     operationBaseIndex: 100,
+    pageSizeMap: {},
   }),
   actions: {
     initColumn(tableKey: string, column: MsTableColumn, mode: TableOpenDetailMode) {
       if (!this.selectorColumnMap[tableKey]) {
         column.forEach((item, idx) => {
           if (item.sortIndex === undefined) {
+            // 如果没有设置sortIndex，则默认按照顺序排序
             item.sortIndex = this.baseSortIndex + idx;
           }
           if (item.showDrag === undefined) {
+            // 默认不可以拖拽
             item.showDrag = false;
           }
           if (item.showInTable === undefined) {
+            // 默认在表格中展示
             item.showInTable = true;
           }
           if (item.dataIndex === SpecialColumnEnum.ID) {
+            // dataIndex 为 id 的列默认不排序，且展示在列的最前面
             item.showDrag = false;
             item.sortIndex = 0;
           }
           if (item.dataIndex === SpecialColumnEnum.NAME) {
+            // dataIndex 为 name 的列默认不排序，且展示在列的第二位
             item.showDrag = false;
             item.sortIndex = 1;
           }
           if (item.dataIndex === SpecialColumnEnum.OPERATION || item.dataIndex === SpecialColumnEnum.ACTION) {
+            // dataIndex 为 operation 或 action  的列默认不排序，且展示在列的最后面
             item.showDrag = false;
             item.sortIndex = this.operationBaseIndex;
           }
@@ -60,6 +67,9 @@ const msTableStore = defineStore('msTable', {
       });
       this.selectorColumnMap[key] = { mode, column: columns };
     },
+    setPageSize(key: string, pageSize: number) {
+      this.pageSizeMap[key] = pageSize;
+    },
   },
   getters: {
     getMode: (state) => {
@@ -94,6 +104,14 @@ const msTableStore = defineStore('msTable', {
         return [];
       };
     },
+    getPageSize: (state) => {
+      return (key: string) => {
+        if (state.pageSizeMap[key]) {
+          return state.pageSizeMap[key];
+        }
+        return 10;
+      };
+    },
   },
 });
 

frontend/src/store/modules/ms-table/types.ts

@@ -12,6 +12,9 @@ export interface MsTableSelectorItem {
 export interface SelectorColumnMap {
   [key: string]: MsTableSelectorItem;
 }
+export interface PageSizeMap {
+  [key: string]: number;
+}
 export interface MsTableState {
   // 列配置， 持久化
   selectorColumnMap: SelectorColumnMap;
@@ -19,4 +22,6 @@ export interface MsTableState {
   baseSortIndex: number;
   // 操作列基数
   operationBaseIndex: number;
+  // 分页大小
+  pageSizeMap: PageSizeMap;
 }

frontend/src/views/setting/organization/project/orgProject.vue

@@ -112,6 +112,7 @@
       title: 'system.organization.member',
       slotName: 'memberCount',
       showDrag: true,
+      dataIndex: 'memberCount',
     },
     {
       title: 'system.organization.status',
@@ -135,6 +136,7 @@
       slotName: 'creator',
       width: 180,
       showDrag: true,
+      dataIndex: 'createUser',
     },
     {
       title: 'system.organization.createTime',