import { reactive, ref, shallowRef, computed, UnwrapRef } from 'vue' import { FilterValue, FilterOptions, DataTableOptions } from './types' export function useDataTable(options: DataTableOptions = {}) { // 数据源 const dataSource = ref([]) // 总条数 const total = shallowRef(0) // 每页条数 const pageSize = shallowRef(options.pageSize ?? 20) // 当前页码 const pageIndex = shallowRef(options.pageIndex ?? 1) // 总页数 const pageCount = computed(() => Math.ceil(total.value / pageSize.value) || 1) // 过滤筛选值 const filters = shallowRef[]>([]) // 数据列表 const dataList = computed>({ get() { const result = dataSource.value.filter((row) => { // 过滤所有查询条件 return filters.value.every((e) => { return e.keys.some((key) => { const value = row[key] if (typeof value === 'number') { return e.filteredValue.includes(value as T[keyof T]) } return e.filteredValue.some((text) => { return String(value).toLowerCase().indexOf(String(text)) >= 0 }) }) }) }) // 本地分页 if (options.localPagination) { total.value = result.length return result.slice((pageIndex.value - 1) * pageSize.value, pageIndex.value * pageSize.value) } return result }, set(val) { dataSource.value = val } }) return { dataList, pageIndex, pageSize, pageCount, total, filters, } } export function useDataFilter() { const filterOptions: FilterOptions = reactive({ selectList: [], inputList: [], buttonList: [], }) // 清空所有过滤条件 const clearAll = () => { filterOptions.selectList.forEach((e) => { if (!e.locked) { e.selectedValue = undefined } }) filterOptions.inputList.forEach((e) => { if (!e.locked) { e.value = undefined } }) } // 获取过滤参数,支持多条件查询 const getFilterParams = (clear = false) => { clear && clearAll() const options: FilterValue[] = [] filterOptions.selectList.forEach((e) => { const { key, selectedValue } = e if (selectedValue !== undefined) { options.push({ keys: [key], filteredValue: [selectedValue], }) } }) filterOptions.inputList.forEach((e) => { const { keys, value } = e if (value) { options.push({ keys, filteredValue: [value], }) } }) return options } // 获取查询参数,支持多条件查询 const getQueryParams = (clear = false) => { clear && clearAll() const params: T = Object.create({}) filterOptions.selectList.forEach((e) => { if (e.selectedValue !== undefined) { params[e.key] = e.selectedValue } }) filterOptions.inputList.forEach((e) => { e.keys.forEach((key) => { if (e.value) { params[key] = e.value } }) }) return params } return { filterOptions, getFilterParams, getQueryParams, } }