From a563ea879ef5fb6897e76d2df661e465dce2ab9b Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期一, 01 六月 2026 15:02:27 +0800
Subject: [PATCH] Merge branch 'dev_新疆_大罗素马铃薯new' of http://114.132.189.42:9002/r/product-inventory-management into dev_新疆_大罗素马铃薯new
---
src/hooks/usePaginationApi.jsx | 145 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 145 insertions(+), 0 deletions(-)
diff --git a/src/hooks/usePaginationApi.jsx b/src/hooks/usePaginationApi.jsx
new file mode 100644
index 0000000..f1e8967
--- /dev/null
+++ b/src/hooks/usePaginationApi.jsx
@@ -0,0 +1,145 @@
+import { ref, reactive, watchEffect, unref } from "vue";
+import useFormData from "@/hooks/useFormData";
+import { deepClone, isEqual } from "@/utils/index.js"
+import { ElMessage } from 'element-plus'
+
+/**
+ * 鍒嗛〉api
+ * @param api 鎺ュ彛
+ * @param initalFilters 鍒濆鍖栫瓫閫夋潯浠�
+ * @param sorters
+ * @param filterTransformer
+ */
+export function usePaginationApi(
+ api,
+ initalFilters,
+ columns,
+ sorters,
+ filterTransformer,
+ cb
+) {
+ const dataList = ref([]);
+ const { form: filters, resetForm } = useFormData(initalFilters);
+ let lastFilters = deepClone(initalFilters);
+ const sorter = reactive(sorters || {});
+ const others = ref({});
+ const loading = ref(true);
+ const paginationAlign = ref("right");
+
+ /** 鍒嗛〉閰嶇疆 */
+ const pagination = reactive({
+ pageSize: 100,
+ currentPage: 1,
+ pageSizes: [10, 15, 20],
+ total: 0,
+ align: "right",
+ background: true
+ });
+
+ /** 鍔犺浇鍔ㄧ敾閰嶇疆 */
+ const loadingConfig = reactive({
+ text: "姝ｅ湪鍔犺浇绗竴椤�...",
+ viewBox: "-10, -10, 50, 50",
+ spinner: `
+ <path class="path" d="
+ M 30 15
+ L 28 17
+ M 25.61 25.61
+ A 15 15, 0, 0, 1, 15 30
+ A 15 15, 0, 1, 1, 27.99 7.5
+ L 15 15
+ " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+ `
+ // svg: "",
+ // background: rgba()
+ });
+
+ function getFinalParams() {
+ const finalFilters = {};
+ const beforeParams = unref(filters);
+ if (filterTransformer) {
+ Object.keys(beforeParams).forEach(key => {
+ if (filterTransformer[key]) {
+ Object.assign(
+ finalFilters,
+ filterTransformer[key](beforeParams[key], beforeParams)
+ );
+ } else {
+ finalFilters[key] = beforeParams[key];
+ }
+ });
+ }
+
+ return filterTransformer
+ ? { ...finalFilters, ...sorter }
+ : { ...beforeParams, ...sorter };
+ }
+
+ async function getTableData() {
+ // 濡傛灉杩欐鍜屼笂娆＄殑filter涓嶅悓锛岄偅涔堝氨閲嶇疆椤电爜
+ if (!isEqual(unref(filters), lastFilters)) {
+ pagination.currentPage = 1;
+ lastFilters = deepClone(unref(filters));
+ }
+ loading.value = true;
+ api({
+ ...getFinalParams(),
+ current: pagination.currentPage,
+ size: pagination.pageSize
+ }).then(({ code, data, msg, ...rest }) => {
+ if (code == 200) {
+ // pagination.currentPage = meta.current_page;
+ // pagination.pageSize = meta.per_page;
+ pagination.total = data.total;
+ others.value = rest;
+ dataList.value = data.records;
+ cb && cb(data);
+ loading.value = false;
+ } else {
+ loading.value = false;
+ ElMessage({ message: msg, type: "error" });
+ }
+ });
+ }
+
+ function onSizeChange(val) {
+ pagination.pageSize = val;
+ pagination.currentPage = 1;
+ getTableData();
+ }
+
+ function onCurrentChange(val) {
+ loadingConfig.text = `姝ｅ湪鍔犺浇绗�${val}椤�...`;
+ loading.value = true;
+ getTableData();
+ }
+ function resetFilters() {
+ resetForm();
+ pagination.currentPage = 1;
+ getTableData();
+ }
+
+ watchEffect(() => {
+ pagination.align = paginationAlign.value
+ });
+
+ // onMounted(() => {
+ // getTableData();
+ // });
+
+ return {
+ loading,
+ columns,
+ dataList,
+ pagination,
+ loadingConfig,
+ paginationAlign,
+ filters,
+ sorter,
+ others,
+ onSizeChange,
+ onCurrentChange,
+ getTableData,
+ resetFilters
+ };
+}
--
Gitblit v1.9.3