分页请求hook

src/hooks/useDialog.js

@@ -1,13 +0,0 @@
-import { computed } from 'vue';
-
-export default function useDialog(props, emit) {
-  const show = computed({
-    get() {
-      return props.visible;
-    },
-    set(v) {
-      emit('update:visible', v);
-    },
-  });
-  return { show };
-}

src/hooks/useFetchTable.js

@@ -1,45 +1,57 @@
 import { ref, reactive, watch } from 'vue';
 
-export default function useFetchTable(apiFn, data = {}) {
-  let requestData = { ...data };
+//options参数示例：{ pageSize:20 , params: ref({ a:1, b:2 }) }
+export default function useFetchTable(apiFn, options, immediately = true) {
   let pagination = reactive({
     page: 1,
-    pageSize: data.pageSize || 10,
-    pageCount: 0,
-    showSizePicker: true,
-    pageSizes: [10, 20, 50],
-    onChange: (page) => {
-      pagination.page = page;
-    },
-    onUpdatePageSize: (pageSize) => {
-      pagination.pageSize = pageSize;
-      pagination.page = 1;
-    },
+    pageSize: options?.pageSize || 10,
+    total: 0,
   });
+  //tdesign的分页器组件的onChange方法，涵盖了页码的change和pageSize的change 两者的监听
+  const onChange = (pageInfo) => {
+    pagination.Size = pageInfo.pageSize;
+    pagination.page = pageInfo.current;
+  };
+  const onPageSizeChange = (size) => {
+    pagination.pageSize = size;
+    pagination.page = 1;
+  };
+
   const loading = ref(false);
   const tableData = ref([]);
-  const fetchData = async (requestParams) => {
+  const fetchData = async () => {
     loading.value = true;
-    if (requestParams) {
-      requestData = Object.assign({}, requestData, requestParams);
-    }
     try {
       let params = {
-        pageNow: pagination.page,
+        page: pagination.page,
         pageSize: pagination.pageSize,
-        ...requestData,
+        ...(options.params?.value || {}),
       };
       let res = await apiFn(params);
+      //下方代码 后续根据实际接口返回字段进行修改
       let list = Array.isArray(res.list) ? res.list : [];
       tableData.value = list;
-      pagination.pageCount = res.totalPage;
+      pagination.total = res.total;
       loading.value = false;
     } catch (err) {}
   };
-  fetchData(requestData);
-  watch([() => pagination.page, () => pagination.pageSize], () => {
-    fetchData(requestData);
-  });
+  if (immediately) {
+    //默认立即执行一次分页请求，如果不想如此，可以将第三个参数immediately传false
+    fetchData();
+  }
+  watch(
+    () => pagination.page,
+    () => {
+      fetchData();
+    }
+  );
 
-  return { loading, pagination, tableData, fetchData };
+  return {
+    loading,
+    pagination,
+    tableData,
+    fetchData,
+    onChange,
+    onPageSizeChange,
+  };
 }