vue3 管理后台，列表查询基础封装

vue3 管理后台，列表查询基础封装

// 列表初始化查询
export const useList = ({
  params, // 查询参数
  query, // 查询方法
  immediate = true, // 是否立即执行
}) => {
  const { proxy } = getCurrentInstance()
  
  const dataList = ref([]) // 列表数据
  const loading = ref(false) // 是否加载
  const total = ref(0) // 总数
  
  // 查询参数
  const queryParams = reactive({
    ...params,
    pageNum: 1,
    pageSize: 10,
  })
  
  // 获取列表
  const getList = async () => {
    try {
      loading.value = true
      const {
        data: { records = [], total: totalNumber = 0 },
      } = await query({
        ...queryParams,
      })
      dataList.value = records
      total.value = totalNumber
    } catch (e) {
      dataList.value = []
      total.value = 0
      throw e
    } finally {
      loading.value = false
    }
  }
  
  // 查询筛选条件
  const handleQuery = async () => {
    queryParams.pageNum = 1
    await getList()
  }
  
  // 重置筛选条件
  const resetQuery = async () => {
    proxy.resetForm('queryRef')
    await handleQuery()
  }
  
  onMounted(() => immediate && getList())
  
  return {
    dataList,
    loading,
    total,
    queryParams,
    getList,
    handleQuery,
    resetQuery,
  }
}

使用方法：

// 列表
const table = useList({
  params: { // 表示筛选条件
      name: ''
  },
  // getVillageListApi 表示封装的接口请求方法
  query: (params) => getVillageListApi(params),
})
const { dataList, loading, total, queryParams, getList, handleQuery, resetQuery } = table