feat(projects): mock manage list data with pagination

src/hooks/common/table.ts

@@ -104,7 +104,9 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
   async function getData() {
     startLoading();
 
-    const response = await apiFn(searchParams);
+    const formattedParams = formatSearchParams(searchParams);
+
+    const response = await apiFn(formattedParams);
 
     const { data: tableData, pageNum, pageSize, total } = transformer(response as Awaited<ReturnType<Fn>>);
 
@@ -115,6 +117,18 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
     endLoading();
   }
 
+  function formatSearchParams(params: Record<string, unknown>) {
+    const formattedParams: Record<string, unknown> = {};
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        formattedParams[key] = value;
+      }
+    });
+
+    return formattedParams;
+  }
+
   /**
    * update search params
    *

src/router/elegant/routes.ts

@@ -64,7 +64,7 @@ export const generatedRoutes: GeneratedRoute[] = [
         meta: {
           title: 'function_hide-child',
           i18nKey: 'route.function_hide-child',
-          icon: 'material-symbols:filter-list-off',
+          icon: 'material-symbols:filter-list-off'
         },
         redirect: '/function/hide-child/one',
         children: [

src/views/manage/role/index.vue

@@ -13,11 +13,17 @@ import RoleSearch from './modules/role-search.vue';
 const appStore = useAppStore();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
 
-const { columns, filteredColumns, data, loading, pagination, getData, searchParams, resetSearchParams } = useTable<
-  Api.SystemManage.Role,
-  typeof fetchGetRoleList,
-  'index' | 'operate'
->({
+const {
+  columns,
+  filteredColumns,
+  data,
+  loading,
+  pagination,
+  getData,
+  searchParams,
+  updateSearchParams,
+  resetSearchParams
+} = useTable<Api.SystemManage.Role, typeof fetchGetRoleList, 'index' | 'operate'>({
   apiFn: fetchGetRoleList,
   apiParams: {
     current: 1,
@@ -38,6 +44,16 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
       total
     };
   },
+  onPaginationChanged(pg) {
+    const { page, pageSize } = pg;
+
+    updateSearchParams({
+      current: page,
+      size: pageSize
+    });
+
+    getData();
+  },
   columns: () => [
     {
       type: 'selection',
@@ -179,6 +195,7 @@ function getIndex(index: number) {
         :flex-height="!appStore.isMobile"
         :scroll-x="702"
         :loading="loading"
+        remote
         :pagination="pagination"
         :row-key="item => item.id"
         class="sm:h-full"

src/views/manage/user/index.vue

@@ -13,11 +13,17 @@ import UserSearch from './modules/user-search.vue';
 const appStore = useAppStore();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
 
-const { columns, filteredColumns, data, loading, pagination, getData, searchParams, resetSearchParams } = useTable<
-  Api.SystemManage.User,
-  typeof fetchGetUserList,
-  'index' | 'operate'
->({
+const {
+  columns,
+  filteredColumns,
+  data,
+  loading,
+  pagination,
+  getData,
+  searchParams,
+  updateSearchParams,
+  resetSearchParams
+} = useTable<Api.SystemManage.User, typeof fetchGetUserList, 'index' | 'operate'>({
   apiFn: fetchGetUserList,
   apiParams: {
     current: 1,
@@ -41,6 +47,16 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
       total
     };
   },
+  onPaginationChanged(pg) {
+    const { page, pageSize } = pg;
+
+    updateSearchParams({
+      current: page,
+      size: pageSize
+    });
+
+    getData();
+  },
   columns: () => [
     {
       type: 'selection',
@@ -209,6 +225,7 @@ function getIndex(index: number) {
         :flex-height="!appStore.isMobile"
         :scroll-x="962"
         :loading="loading"
+        remote
         :pagination="pagination"
         :row-key="item => item.id"
         class="sm:h-full"