useQueryListParams_vxe

import { Ref, getCurrentInstance, onActivated, onMounted, reactive, ref } from 'vue'
import { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-pc-ui'
import { Columns } from '../vxeTabelType'

type QueryParams = {
  page: number
  order: string
  key: string
  pageSize: number
}
// 返回参数类型
type UseQueryListParamsReturn<T, M> = {
  /**
   * grid表格选项配置
   */
  gridOptions: VxeGridProps<M>
  /**
   * grid表格事件
   */
  gridEvents: VxeGridListeners<M>
  /**
   * total 表格数据条数 , selectList 表格选中数据
   */
  tableData: {
    total: number
    selectList: M[]
  }
  /**
   * grid表格Loading
   */
  tableLoading: Ref<boolean>
  /**
   * grid表格刷新 flag 是否重置页数
   */
  refreshDataList: (flag?: boolean) => Promise<void>
  /**
   * grid表格 重置传入的queryParams ,params重置合并值
   */
  resetQueryParams(params?: Partial<T>): void
  /**
   * grid表格 传入tableRef后 可以清除选中
   */
  clearSelectEvent(): void
}

export type QueryParamsType<T> = Required<QueryParams> &
  Omit<T, 'limit' | 'offset' | 'keyWord' | 'keyword'>

type QueryListParamsConfig<T, M, D> = {
  /**
   * grid表格 获取列表
   */
  getDataList: (param: Required<QueryRequest> & Omit<T, 'key' | 'page' | 'pageSize'>) => Promise<D>
  /**
   * grid表格 列配置
   */
  gridColumns: Columns<M>
  /**
   * 每次调用refreshDataList 后是否重置选中 默认true
   */
  requestRefreshSelect?: boolean
  /**
   * 初始化时是否请求列表 默认true
   */
  initRequest?: boolean
  /**
   * getDataList 返回数据的字段 默认list
   */
  data?: string
  /**
   * getDataList 返回数据的字段 默认total
   */
  total?: string
}
export const useQueryListParams = <T extends QueryParams, M, D extends { [key: string]: any }>(
  queryParams: T,
  {
    getDataList,
    gridColumns,
    requestRefreshSelect = true,
    data: dataStr = 'list',
    total: totalStr = 'total',
    initRequest = true
  }: QueryListParamsConfig<T, M, D>,
  tableRef?: Ref<VxeGridInstance<M>>
): UseQueryListParamsReturn<T, M> => {
  // 表格加载
  const tableLoading = ref(false)
  // 表格选中
  const copyInitParamsObj = { ...queryParams }
  const refreshDataList = (flag: boolean = false) => {
    tableLoading.value = true
    const { key: keyword, page, pageSize, ...param } = { ...queryParams }
    if (flag) queryParams.page = 1
    return getDataList({
      ...param,
      keyword,
      limit: queryParams.pageSize,
      offset: queryParams.pageSize * (queryParams.page - 1),
      keyWord: keyword
    })
      .then((data) => {
        if (requestRefreshSelect) clearSelectEvent()
        gridOptions.data = data[dataStr] || []
        tableData.total = data[totalStr] || 0
      })
      .finally(() => {
        tableLoading.value = false
      })
  }
  const clearSelectEvent = () => {
    const $grid = tableRef?.value
    if ($grid) {
      $grid.clearCheckboxRow()
      tableData.selectList = []
    }
  }
  const tableData: {
    total: number
    selectList: M[]
  } = reactive({
    total: 0,
    selectList: []
  })
  const gridEvents: VxeGridListeners<M> = {
    filterChange({ field, values }) {
      console.log(field, values)
      //@ts-ignore
      queryParams[field] = values.length > 0 ? values[0] : ''
      refreshDataList()
    },
    sortChange({ property, order }: any) {
      if (order) {
        queryParams.order = `${property} ${order}`
      } else {
        queryParams.order = ''
      }
      refreshDataList()
    },
    checkboxChange({ $grid }) {
      checkboxChange && checkboxChange($grid.getCheckboxRecords())
    },
    checkboxAll({ checked, $grid }) {
      checkboxChange && checkboxChange($grid.getCheckboxRecords())
    }
  }
  const checkboxChange = (selectList: any[]) => {
    tableData.selectList = selectList
  }
  const gridOptions: VxeGridProps<M> = reactive({
    showOverflow: true,
    autoResize: true,
    rowConfig: {
      useKey: true,
      drag: true
    },
    radioConfig: {
      labelField: 'id',
      trigger: 'row'
    },
    showFooterOverflow: true,
    columnConfig: {
      useKey: true
    },
    columns: gridColumns
  })
  onActivated(() => {
    initRequest && refreshDataList()
  })
  return {
    gridOptions,
    gridEvents,
    tableData,
    tableLoading,
    refreshDataList,
    resetQueryParams(params?: Partial<T>) {
      let initObj = copyInitParamsObj
      if (params) {
        initObj = { ...params, ...copyInitParamsObj }
      }
      Object.keys(queryParams).forEach((key) => {
        const typedKey = key as keyof typeof queryParams
        queryParams[typedKey] = initObj[typedKey]
      })
      refreshDataList(true)
    },
    clearSelectEvent
  }
}