2025-03-26

src/hooks/useTable.ts

@@ -0,0 +1,178 @@
+import { Table } from "./interface";
+import { reactive, computed, toRefs } from "vue";
+import $Bus from "@/utils/mittBus";
+
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+export const useTable = (
+    routeName: any,
+    api?: (params: any) => Promise<any>,
+    initParam: object = {},
+    isPageable: boolean = true,
+    dataCallBack?: (data: any) => any,
+    requestError?: (error: any) => void,
+    clearSelection?: () => void
+) => {
+    const state = reactive<Table.StateProps>({
+        // 表格数据
+        tableData: [],
+        // 分页数据
+        pageable: {
+            // 当前页数
+            page: 1,
+            // 每页显示条数
+            size: 50,
+            // 总条数
+            total: 0
+        },
+        // 查询参数(只包括查询)
+        searchParam: {},
+        // 初始化默认的查询参数
+        searchInitParam: {},
+        // 总参数(包含分页和查询参数)
+        totalParam: {}
+    });
+
+    /**
+     * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+     * */
+    const pageParam = computed({
+        get: () => {
+            return {
+                page: state.pageable.page,
+                size: state.pageable.size
+            };
+        },
+        set: (newVal: any) => {
+            console.log("我是分页更新之后的值", newVal);
+        }
+    });
+
+    /**
+     * @description 获取表格数据
+     * @return void
+     * */
+    const getTableList = async () => {
+        if (!api) return;
+        try {
+            // 先把初始化参数和分页参数放到总参数里面 initParam
+            Object.assign(state.totalParam, isPageable ? pageParam.value : {});
+            let { data } = await api({ ...state.searchInitParam, ...initParam, ...state.totalParam });
+            const { total } = data;
+            state.tableData = data.data;
+
+            clearSelection && clearSelection();
+            // 解构后台返回的分页数据 (如果有分页更新分页信息)
+            if (isPageable) {
+                updatePageable({ page: state.pageable.page, size: state.pageable.size, total });
+            }
+
+            // dataCallBack && (data = dataCallBack(data));
+        } catch (error) {
+            requestError && requestError(error);
+        }
+    };
+
+    /**
+     * @description 更新查询参数
+     * @return void
+     * */
+    const updatedTotalParam = () => {
+        state.totalParam = {};
+        // 处理查询参数，可以给查询参数加自定义前缀操作
+        let nowSearchParam: Table.StateProps["searchParam"] = {};
+        // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+        for (let key in state.searchParam) {
+            //剔除日期参数
+            if (key !== "Time" && key !== "Time1") {
+                // * 某些情况下参数为 false/0 也应该携带参数
+                if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
+                    nowSearchParam[key] = state.searchParam[key];
+                }
+            }
+        }
+
+        Object.assign(state.totalParam, nowSearchParam, isPageable ? pageParam.value : {});
+    };
+
+    /**
+     * @description 更新分页信息
+     * @param {Object} pageable 后台返回的分页数据
+     * @return void
+     * */
+    const updatePageable = (pageable: Table.Pageable) => {
+        Object.assign(state.pageable, pageable);
+    };
+
+    /**
+     * @description 表格数据查询
+     * @return void
+     * */
+    const search = () => {
+        state.pageable.page = 1;
+        state.pageable.size = 50;
+        updatedTotalParam();
+        getTableList();
+    };
+
+    /**
+     * @description 表格数据重置
+     * @return void
+     * */
+    const reset = () => {
+        state.pageable.page = 1;
+        state.searchParam = {};
+        // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+        Object.keys(state.searchInitParam).forEach(key => {
+            state.searchParam[key] = state.searchInitParam[key];
+        });
+
+        if (routeName === "barCode") {
+            $Bus.emit("clearBarCodeCreateUser");
+        }
+        if (routeName === "boxCode") {
+            $Bus.emit("clearBoxCodeCreateUser");
+        }
+        if (routeName === "boxMarkIndex") {
+            $Bus.emit("clearBoxMarkIndexCreator");
+        }
+        updatedTotalParam();
+        getTableList();
+    };
+
+    /**
+     * @description 每页条数改变
+     * @param {Number} val 当前条数
+     * @return void
+     * */
+    const handleSizeChange = (val: number) => {
+        state.pageable.page = 1;
+        state.pageable.size = val;
+        getTableList();
+    };
+
+    /**
+     * @description 当前页改变
+     * @param {Number} val 当前页
+     * @return void
+     * */
+    const handleCurrentChange = (val: number) => {
+        state.pageable.page = val;
+        getTableList();
+    };
+
+    return {
+        ...toRefs(state),
+        getTableList,
+        search,
+        reset,
+        handleSizeChange,
+        handleCurrentChange,
+        updatedTotalParam
+    };
+};