import { reactive, ref, shallowRef, computed, UnwrapRef } from 'vue' import { FilterData, FilterOption, DataTableOptions } from './types' import _ from 'lodash' 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 filterData = shallowRef[]>([]) // 数据列表 const dataList = computed>({ get() { const result = dataSource.value.filter((row) => { // 过滤所有查询条件 return filterData.value.every((e) => { return e.fields.some((field) => { const value = row[field] if (typeof value === 'number') { return e.values.includes(value as T[keyof T]) } return e.values.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, filterData, } } export function useDataFilter(defaultOption: FilterOption) { const queryParams = shallowRef>({}) const defaultOptionCopy = _.cloneDeep(defaultOption) const filterOption: FilterOption = reactive(Object.create(defaultOptionCopy)) // 重置所有过滤条件 const resetFilters = () => { const { filters } = _.cloneDeep(defaultOption) const items = filters.map((defaultItem, index) => { const currentItem = filterOption.filters[index] return currentItem.locked ? currentItem : defaultItem }) filterOption.filters = items } // 获取过滤参数,支持多条件查询 const getFilterParams = (clear = false) => { if (clear) resetFilters() const options: FilterData[] = [] // filterOption.items.forEach((e) => { // const { keys, value } = e // if (value) { // options.push({ // keys, // filteredValue: [value], // }) // } // }) return options } // 获取查询参数,支持多条件查询 const getQueryParams = (clear = false) => { if (clear) resetFilters() const params: Partial = Object.create({}) filterOption.filters.forEach((e) => { if (e.value !== undefined) { params[e.field] = e.value } }) return params } return { queryParams, filterOption, getFilterParams, getQueryParams, resetFilters } }