feat: 封装table hooks

src/hooks/useTable.js

@@ -0,0 +1,117 @@
+import { ref, onMounted } from 'vue';
+import { ElMessageBox } from 'element-plus';
+
+/**
+ * @FileDescription: el-table 函数式组件hooks--实现一个表格的数据加载、分页、搜索、删除等操作,
+ * @function:useTable(config)
+ * @param {object} config                               useTable(配置项)
+ * @param {function} config.requestDataFN               分页列表接口函数
+ * @param {object} config.seracgForm                    搜索表单配置
+ * @param {function} config.deleteItemFN                删除某一项接口函数
+ *
+ * @param {object} config.pagination                    分页配置对象
+ * @param {string} config.pagination.currentPage        当前页数
+ * @param {string} config.pagination.pageSize           每页显示条数
+ * @param {string} config.pagination.total              总条数
+ * @param {string} config.pagination.pageSizes          每页显示条数选项[10, 20, 30, 40, 50]
+ * @param {string} config.pagination.layout             布局方式'total, sizes, prev, pager, next, jumper'
+ * @param {string} config.pagination.background         页码背景色true/false
+ * ...其他参考element-plus分页组件参数
+ *
+ * @param {object} config.options                       其他配置项
+ * @param {boolean} config.options.immediate            是否默认执行
+ *
+ * @returns {boolean} lodding                           表格加载状态（包含请求数据，删除数据等）
+ * @returns {array} tableData                           表格数据
+ * @returns {object} pagination                         表格分页数据
+ * @returns {function} handleRequestDataFN              请求数据函数
+ * @returns {function} handleSearchFN                   搜索函数
+ * @returns {function} handlePaginationChangeFN         页码或者每页显示条数变化函数
+ * @returns {function} handleDeleteItemFN               删除函数
+ * */
+export default function useTable(config) {
+    const {
+        seracgForm,
+        requestDataFN,
+        deleteItemFN,
+        options = {
+            immediate: true,
+        },
+    } = config;
+
+    const tableData = ref([]);
+    const lodding = ref(false);
+    const defaultPagination = {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 30, 40, 50],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true,
+    };
+    const pagination = ref(...defaultPagination, ...(config.pagination || {}));
+
+    // 请求表格数据
+    const handleRequestDataFN = () => {
+        if (lodding.value || !requestDataFN) return;
+        lodding.value = true;
+        requestDataFN({
+            ...seracgForm,
+            pageNumber: pagination.value.currentPage,
+            psgeSize: pagination.value.pageSize,
+        })
+            .then((result) => {
+                tableData.value = result.list;
+                pagination.value.total = result.totalCount;
+            })
+            .finally(() => {
+                lodding.value = false;
+            });
+    };
+
+    // 点击搜索按钮请求表格数据
+    const handleSearchFN = () => {
+        pagination.value.currentPage = 1;
+        handleRequestDataFN();
+    };
+
+    // 页码或者每页显示条数变化请求表格数据
+    const handlePaginationChangeFN = (currentPage, pageSize) => {
+        pagination.value.currentPage = currentPage;
+        pagination.value.pageSize = pageSize;
+        handleRequestDataFN();
+    };
+
+    // 删除某一项
+    const handleDeleteItemFN = (item) => {
+        ElMessageBox.confirm('确认删除该项吗？')
+            .then(() => {
+                lodding.value = true;
+                deleteItemFN(item.id)
+                    .then(() => {
+                        tableData.value = tableData.value.filter((i) => i.id !== item.id);
+                        pagination.value.total--;
+                    })
+                    .finally(() => {
+                        lodding.value = false;
+                    });
+            })
+            .catch(() => {});
+    };
+
+    onMounted(() => {
+        if (options?.immediate === undefined || options.immediate === true) {
+            handleRequestDataFN();
+        }
+    });
+
+    return {
+        lodding,
+        tableData,
+        pagination,
+        handleRequestDataFN,
+        handleSearchFN,
+        handlePaginationChangeFN,
+        handleDeleteItemFN,
+    };
+}