hooks封装表格请求
当前请求主要应用与表格筛选
一.源码
import { isRef, ref, unref, reactive, computed, onMounted, watch } from 'vue'
import { useDebounceFn } from '@vueuse/core'
/** 额外参数
* isAsync 是否页面主进程渲染完才执行
* customPagination 自定义分页初始数据(分页数据只有初始化才能指定其他时间都是函数内部自己控制)
* */
const _otherParams = { isAsync: false, customPagination: { pageSize: 10 } }
/** 表格数据接口
* apiFn 后端接口请求方法
* params 搜索参数,(分页参数需要加到otherParams内)
* otherParams 额外参数
* */
export function useApiTable (apiFn, params, otherParams = _otherParams) {
const loading = ref(false)
const data = reactive({
content: [],
total: 0,
page: 1,
pageSize: otherParams.customPagination.pageSize || 10
})
const error = ref(null)
const res = ref(null)
const pagination = computed(() => ({
total: data.total,
pageSize: data.pageSize,
current: data.page
}))
// 分页切换|刷新数据
function changePagination (page, pageSize) {
const _params = {
page: page || 1,
pageSize: pageSize || otherParams.customPagination.pageSize || 10
}
// 手动修改当前页码
data.pageSize = _params.pageSize
data.page = _params.page
if (isRef(params)) {
doFetch(_params)
} else {
params = Object.assign({}, params, _params)
doFetch()
}
}
// 修改参数
function changeParams (pas) {
if (isRef(params)) {
params.value = pas
} else {
params = pas
doFetch()
}
}
async function doFetch (pageParams) {
// 重置数据
error.value = null
let paramsVal = {}
// 分页数据需要函数单独处理,不可从外部传入,此次单独处理分页参数
if (!pageParams) {
paramsVal = { ...unref(params), page: 1, pageSize: otherParams.customPagination.pageSize || 10 }
} else {
paramsVal = { ...unref(params), ...pageParams }
}
try {
loading.value = true
res.value = await apiFn(paramsVal)
const _data = await res.value?.data
data.content = _data?.content
data.total = _data?.total
data.page = _data?.pageNumber
data.pageSize = _data?.pageSize
loading.value = false
// console.log(_data)
} catch (e) {
loading.value = false
error.value = e
console.log(e)
}
}
onMounted(() => {
if (otherParams.isAsync) {
setTimeout(() => {
initData()
})
} else {
initData()
}
})
const debouncedFn = useDebounceFn(() => {
doFetch()
}, 1000)
function initData () {
if (isRef(params)) {
watch(params, () => debouncedFn(), { immediate: true, deep: true })
} else {
doFetch()
}
}
return {
data,
error,
pagination,
loading,
res,
changePagination,
doFetch,
changeParams
}
}
二.如何使用
1.手动调用接口(参数变化时要主动修改分页数据)
const searchParams = {
id:'',
}
const {
loading,
data,
pagination,
changePagination,
changeParams
} = useApiTable(getSome, searchParams)
// 参数变化时调用 changeParams函数
2.参数变化hooks自动调用后端接口
import { useApiTable } from "@/utils/hooks/useApiTable"
import { getSome} from "@/api/common";
const searchParams = ref({
id:''
})
const {
loading,
data,
pagination,
changePagination
} = useApiTable(getSome, searchParams)
// 需要手动刷新表格数据时使用,changePagination函数即可