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, initParam: object = {}, isPageable: boolean = true, dataCallBack?: (data: any) => any, requestError?: (error: any) => void, clearSelection?: () => void ) => { const state = reactive({ // 表格数据 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"] = {}; // 防止手动清空输入框携带参数(这里可以自定义查询参数前缀) console.log(state.searchParam, "=state.searchParam="); for (let key in state.searchParam) { //剔除日期参数 if (key !== "Time" && key !== "Time1" && key !== "treeIds") { // * 某些情况下参数为 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 }; };