MTP2.0_NEWMANAGE_WEB/src/hooks/datatable/index.ts

import { reactive, ref, shallowRef, computed, UnwrapRef } from 'vue'
import { FilterValue, FilterOptions, DataTableOptions } from './types'

export function useDataTable<T>(options: DataTableOptions = {}) {
    // 数据源
    const dataSource = ref<T[]>([])
    // 总条数
    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<FilterValue<T>[]>([])

    // 数据列表
    const dataList = computed<UnwrapRef<T[]>>({
        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<T>() {
    const filterOptions: FilterOptions<T> = 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<T>[] = []

        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,
    }
}