fix(projects): add getDataByPage for useTable

soybeanjs · Jun 21, 2024 · cf2659d · cf2659d
1 parent f97e74e
commit cf2659d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
@@ -124,6 +124,24 @@ export function useTable<A extends AntDesign.TableApiFn>(config: AntDesign.AntDe
     Object.assign(pagination, update);
   }
 
+  /**
+   * get data by page number
+   *
+   * @param pageNum the page number. default is 1
+   */
+  async function getDataByPage(pageNum: number = 1) {
+    updatePagination({
+      current: pageNum
+    });
+
+    updateSearchParams({
+      current: pageNum,
+      size: pagination.pageSize!
+    });
+
+    await getData();
+  }
+
   scope.run(() => {
     watch(
       () => appStore.locale,
@@ -148,6 +166,7 @@ export function useTable<A extends AntDesign.TableApiFn>(config: AntDesign.AntDe
     mobilePagination,
     updatePagination,
     getData,
+    getDataByPage,
     searchParams,
     updateSearchParams,
     resetSearchParams

diff --git a/src/views/manage/menu/index.vue b/src/views/manage/menu/index.vue
@@ -14,7 +14,7 @@ import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal
 const { bool: visible, setTrue: openModal } = useBoolean();
 const { tableWrapperRef, scrollConfig } = useTableScroll();
 
-const { columns, columnChecks, data, loading, pagination, getData } = useTable({
+const { columns, columnChecks, data, loading, pagination, getData, getDataByPage } = useTable({
   apiFn: fetchGetMenuList,
   columns: () => [
     {
@@ -251,7 +251,7 @@ init();
         :operate-type="operateType"
         :row-data="editingData"
         :all-pages="allPages"
-        @submitted="getData"
+        @submitted="getDataByPage"
       />
     </ACard>
   </div>

diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
@@ -9,7 +9,17 @@ import RoleSearch from './modules/role-search.vue';
 
 const { tableWrapperRef, scrollConfig } = useTableScroll();
 
-const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+const {
+  columns,
+  columnChecks,
+  data,
+  loading,
+  getData,
+  getDataByPage,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
   apiFn: fetchGetRoleList,
   apiParams: {
     current: 1,
@@ -121,7 +131,7 @@ function edit(id: number) {
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
     <ACard
       :title="$t('page.manage.role.title')"
       :bordered="false"
@@ -154,7 +164,7 @@ function edit(id: number) {
         v-model:visible="drawerVisible"
         :operate-type="operateType"
         :row-data="editingData"
-        @submitted="getData"
+        @submitted="getDataByPage"
       />
     </ACard>
   </div>

diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
@@ -9,7 +9,17 @@ import UserSearch from './modules/user-search.vue';
 
 const { tableWrapperRef, scrollConfig } = useTableScroll();
 
-const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
+const {
+  columns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
   apiFn: fetchGetUserList,
   apiParams: {
     current: 1,
@@ -156,7 +166,7 @@ function edit(id: number) {
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
     <ACard
       :title="$t('page.manage.user.title')"
       :bordered="false"
@@ -190,7 +200,7 @@ function edit(id: number) {
         v-model:visible="drawerVisible"
         :operate-type="operateType"
         :row-data="editingData"
-        @submitted="getData"
+        @submitted="getDataByPage"
       />
     </ACard>
   </div>