diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js new file mode 100644 index 0000000..785183d --- /dev/null +++ b/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, + }; +}