update

src/hooks/useTableQuery.js

@@ -0,0 +1,75 @@
+import {ref, reactive, watch} from 'vue';
+
+/**
+ *
+ * @param parameter
+ * @param api
+ * @param callback
+ * @param immediate
+ * @param watchParameter
+ */
+function useTableQuery({
+                           parameter,
+                           api,
+                           callback,
+                           immediate = true,
+                           watchParameter = false,
+                       }) {
+    const loading = ref(false);
+
+    const pagination = reactive({
+        current: 1,
+        pageSize: 20,
+        total: 0
+    });
+
+    const fetchData = async () => {
+        try {
+            loading.value = true;
+
+            const params = {
+                ...parameter,
+                current: pagination.current,
+                pageSize: pagination.pageSize
+            }
+
+            const {data} = await api(params);
+
+            pagination.pageSize = data.page;
+            pagination.total = data.total;
+
+            callback && callback({
+                ...data,
+                rows: data.rows.map(v => ({...v, key: v.id})),
+            });
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    const initFetchData = async () => {
+        pagination.current = 1;
+        pagination.total = 0;
+    }
+
+    watch(
+        () => [pagination.current, pagination.pageSize],
+        () => fetchData(),
+        {deep: true, immediate: immediate}
+    )
+
+    if (watchParameter) watch(
+        () => parameter,
+        () => fetchData(),
+        {deep: true}
+    );
+
+    return {
+        loading,
+        pagination,
+        fetchData,
+        initFetchData,
+    }
+}
+
+export default useTableQuery;