feat: refactor user page, fix alova response issue

src/hooks/common/table.ts

@@ -22,40 +22,26 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
 
   const EXPAND_KEY = '__expand__';
 
-  const {
-    loading,
-    empty,
-    data,
-    columns,
-    columnChecks,
-    reloadColumns,
-    getData,
-    searchParams,
-    updateSearchParams,
-    resetSearchParams
-  } = useHookTable<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>({
+  const { reloadColumns, page, pageSize, total, ...rest } = useHookTable<
+    A,
+    GetTableData<A>,
+    TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>
+  >({
     apiFn,
     apiParams,
     columns: config.columns,
     transformer: res => {
-      const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
+      const { records = [], current = 1, size = 10 } = res.data || {};
 
       // Ensure that the size is greater than 0, If it is less than 0, it will cause paging calculation errors.
-      const pageSize = size <= 0 ? 10 : size;
+      const pageSizeValue = size <= 0 ? 10 : size;
 
-      const recordsWithIndex = records.map((item, index) => {
+      return records.map((item, index) => {
         return {
           ...item,
-          index: (current - 1) * pageSize + index + 1
+          index: (current - 1) * pageSizeValue + index + 1
         };
       });
-
-      return {
-        data: recordsWithIndex,
-        pageNum: current,
-        pageSize,
-        total
-      };
     },
     getColumnChecks: cols => {
       const checks: NaiveUI.TableColumnCheck[] = [];
@@ -103,64 +89,56 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
 
       return filteredColumns;
     },
-    onFetched: async transformed => {
-      const { pageNum, pageSize, total } = transformed;
-
-      updatePagination({
-        page: pageNum,
-        pageSize,
-        itemCount: total
-      });
-    },
     immediate
   });
 
-  const pagination: PaginationProps = reactive({
-    page: 1,
-    pageSize: 10,
+  const paginationBase: PaginationProps = reactive({
     showSizePicker: true,
     pageSizes: [10, 15, 20, 25, 30],
-    onUpdatePage: async (page: number) => {
-      pagination.page = page;
-
-      updateSearchParams({
-        current: page,
-        size: pagination.pageSize!
-      });
-
-      getData();
+    onUpdatePage: async pageValue => {
+      page.value = pageValue;
     },
-    onUpdatePageSize: async (pageSize: number) => {
-      pagination.pageSize = pageSize;
-      pagination.page = 1;
-
-      updateSearchParams({
-        current: pagination.page,
-        size: pageSize
-      });
-
-      getData();
+    onUpdatePageSize: async pageSizeValue => {
+      pageSize.value = pageSizeValue;
     },
     ...(showTotal
       ? {
-          prefix: page => $t('datatable.itemCount', { total: page.itemCount })
+          prefix: pageProps => $t('datatable.itemCount', { total: pageProps.itemCount })
         }
       : {})
   });
 
+  const pagination = computed(
+    () =>
+      <PaginationProps>{
+        ...paginationBase,
+        page: page.value,
+        pageSize: pageSize.value,
+        itemCount: total.value
+      }
+  );
+
   // this is for mobile, if the system does not support mobile, you can use `pagination` directly
   const mobilePagination = computed(() => {
     const p: PaginationProps = {
-      ...pagination,
+      ...pagination.value,
       pageSlot: isMobile.value ? 3 : 9,
-      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
+      prefix: !isMobile.value && showTotal ? pagination.value.prefix : undefined
     };
 
     return p;
   });
 
   function updatePagination(update: Partial<PaginationProps>) {
-    Object.assign(pagination, update);
+    (['page', 'pageSize', 'itemCount'] as const).forEach(key => {
+      update[key] &&
+        ({
+          page,
+          pageSize,
+          itemCount: total
+        }[key].value = update[key]);
+    });
+    Object.assign(paginationBase, update);
   }
 
   /**
@@ -169,16 +147,7 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
    * @param pageNum the page number. default is 1
    */
   async function getDataByPage(pageNum: number = 1) {
-    updatePagination({
-      page: pageNum
-    });
-
-    updateSearchParams({
-      current: pageNum,
-      size: pagination.pageSize!
-    });
-
-    await getData();
+    page.value = pageNum;
   }
 
   scope.run(() => {
@@ -195,20 +164,12 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
   });
 
   return {
-    loading,
-    empty,
-    data,
-    columns,
-    columnChecks,
+    ...rest,
     reloadColumns,
     pagination,
     mobilePagination,
     updatePagination,
-    getData,
-    getDataByPage,
-    searchParams,
-    updateSearchParams,
-    resetSearchParams
+    getDataByPage
   };
 }
 

src/service/api/system-manage.ts

@@ -1,4 +1,4 @@
-import { request } from '../request';
+import { alova, request } from '../request';
 
 /** get role list */
 export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
@@ -23,12 +23,12 @@ export function fetchGetAllRoles() {
 
 /** get user list */
 export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
-  return request<Api.SystemManage.UserList>({
-    url: '/systemManage/getUserList',
-    method: 'get',
-    params
-  });
-  // return alova.Get<Api.SystemManage.UserList>('/systemManage/getUserList', { params });
+  // return request<Api.SystemManage.UserList>({
+  //   url: '/systemManage/getUserList',
+  //   method: 'get',
+  //   params
+  // });
+  return alova.Get<Api.SystemManage.UserList>('/systemManage/getUserList', { params });
 }
 
 /** get menu list */

src/service/request/index.ts

@@ -239,7 +239,7 @@ export const alova = createAlovaRequest(
       return null;
     },
     transformBackendResponse(response) {
-      return response.data.data;
+      return response.json();
     },
     onError(error) {
       // when the request is fail, you can show error message

src/views/manage/user/index.vue

@@ -10,132 +10,121 @@ import UserSearch from './modules/user-search.vue';
 
 const appStore = useAppStore();
 
-const {
-  columns,
-  columnChecks,
-  data,
-  getData,
-  getDataByPage,
-  loading,
-  mobilePagination,
-  searchParams,
-  resetSearchParams
-} = useTable({
-  apiFn: fetchGetUserList,
-  showTotal: true,
-  apiParams: {
-    current: 1,
-    size: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-    status: null,
-    userName: null,
-    userGender: null,
-    nickName: null,
-    userPhone: null,
-    userEmail: null
-  },
-  columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
+const { columns, columnChecks, data, getData, reload, loading, mobilePagination, searchParams, resetSearchParams } =
+  useTable({
+    apiFn: fetchGetUserList,
+    showTotal: true,
+    apiParams: {
+      // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+      // the value can not be undefined, otherwise the property in Form will not be reactive
+      status: null,
+      userName: null,
+      userGender: null,
+      nickName: null,
+      userPhone: null,
+      userEmail: null
     },
-    {
-      key: 'index',
-      title: $t('common.index'),
-      align: 'center',
-      width: 64
-    },
-    {
-      key: 'userName',
-      title: $t('page.manage.user.userName'),
-      align: 'center',
-      minWidth: 100
-    },
-    {
-      key: 'userGender',
-      title: $t('page.manage.user.userGender'),
-      align: 'center',
-      width: 100,
-      render: row => {
-        if (row.userGender === null) {
-          return null;
+    columns: () => [
+      {
+        type: 'selection',
+        align: 'center',
+        width: 48
+      },
+      {
+        key: 'index',
+        title: $t('common.index'),
+        align: 'center',
+        width: 64
+      },
+      {
+        key: 'userName',
+        title: $t('page.manage.user.userName'),
+        align: 'center',
+        minWidth: 100
+      },
+      {
+        key: 'userGender',
+        title: $t('page.manage.user.userGender'),
+        align: 'center',
+        width: 100,
+        render: row => {
+          if (row.userGender === null) {
+            return null;
+          }
+
+          const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
+            1: 'primary',
+            2: 'error'
+          };
+
+          const label = $t(userGenderRecord[row.userGender]);
+
+          return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
         }
+      },
+      {
+        key: 'nickName',
+        title: $t('page.manage.user.nickName'),
+        align: 'center',
+        minWidth: 100
+      },
+      {
+        key: 'userPhone',
+        title: $t('page.manage.user.userPhone'),
+        align: 'center',
+        width: 120
+      },
+      {
+        key: 'userEmail',
+        title: $t('page.manage.user.userEmail'),
+        align: 'center',
+        minWidth: 200
+      },
+      {
+        key: 'status',
+        title: $t('page.manage.user.userStatus'),
+        align: 'center',
+        width: 100,
+        render: row => {
+          if (row.status === null) {
+            return null;
+          }
 
-        const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
-          1: 'primary',
-          2: 'error'
-        };
+          const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+            1: 'success',
+            2: 'warning'
+          };
 
-        const label = $t(userGenderRecord[row.userGender]);
+          const label = $t(enableStatusRecord[row.status]);
 
-        return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'nickName',
-      title: $t('page.manage.user.nickName'),
-      align: 'center',
-      minWidth: 100
-    },
-    {
-      key: 'userPhone',
-      title: $t('page.manage.user.userPhone'),
-      align: 'center',
-      width: 120
-    },
-    {
-      key: 'userEmail',
-      title: $t('page.manage.user.userEmail'),
-      align: 'center',
-      minWidth: 200
-    },
-    {
-      key: 'status',
-      title: $t('page.manage.user.userStatus'),
-      align: 'center',
-      width: 100,
-      render: row => {
-        if (row.status === null) {
-          return null;
+          return <NTag type={tagMap[row.status]}>{label}</NTag>;
         }
-
-        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-          1: 'success',
-          2: 'warning'
-        };
-
-        const label = $t(enableStatusRecord[row.status]);
-
-        return <NTag type={tagMap[row.status]}>{label}</NTag>;
+      },
+      {
+        key: 'operate',
+        title: $t('common.operate'),
+        align: 'center',
+        width: 130,
+        render: row => (
+          <div class="flex-center gap-8px">
+            <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
+              {$t('common.edit')}
+            </NButton>
+            <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
+              {{
+                default: () => $t('common.confirmDelete'),
+                trigger: () => (
+                  <NButton type="error" ghost size="small">
+                    {$t('common.delete')}
+                  </NButton>
+                )
+              }}
+            </NPopconfirm>
+          </div>
+        )
       }
-    },
-    {
-      key: 'operate',
-      title: $t('common.operate'),
-      align: 'center',
-      width: 130,
-      render: row => (
-        <div class="flex-center gap-8px">
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
-            {$t('common.edit')}
-          </NButton>
-          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-            {{
-              default: () => $t('common.confirmDelete'),
-              trigger: () => (
-                <NButton type="error" ghost size="small">
-                  {$t('common.delete')}
-                </NButton>
-              )
-            }}
-          </NPopconfirm>
-        </div>
-      )
-    }
-  ]
-});
+    ]
+  });
 
 const {
   drawerVisible,
@@ -170,7 +159,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="getDataByPage" />
+    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="reload" />
     <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
@@ -199,7 +188,7 @@ function edit(id: number) {
         v-model:visible="drawerVisible"
         :operate-type="operateType"
         :row-data="editingData"
-        @submitted="getDataByPage"
+        @submitted="reload"
       />
     </NCard>
   </div>