useQuery

封装了两种页面常见的表格数据查询组合式函数：useBasicQuery、useApiQuery

useBasicQuery在基础查询比较复杂的情况下使用，例如条件需要各种构造；
useApiQuery在基础查询比较简单的情况下使用，例如条件和页面的操作是双向绑定的从而不需要其他额外的处理；

useBasicQuery

通过组合式函数封装的通用表格数据查询函数，传入一个基础的查询方法和分页参数，返回表格数据、查询状态、分页索引、分页大小、总条数、序列等数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
export function useBasicQuery<T>(basicQuery: Function, pageIndexInit: number = 1, pageSizeInit: number = 15) {

    if (pageIndexInit < 1) {
        pageIndexInit = 1
    }
    if (pageSizeInit < 1) {
        pageSizeInit = 15
    }

    //数据
    const tableData = ref<T[]>([])
    //查询状态
    const queryLoading = ref(false)
    //分页索引
    const pageIndex = ref(pageIndexInit)
    //分页大小
    const pageSize = ref(pageSizeInit)
    //总条数
    const total = ref(0)
    //序列
    const sequence = computed(() => (pageIndex.value - 1) * pageSize.value + 1)

    /**
     * 通用查询
     * 支持延迟查询，最早也在delayTime的时间后才得出结果
     * @param respTask 
     * @param delayTime 
     */
    function delayQuery<Result>(respTask: Promise<Result>, respHandle: Function, delayTime: number = 300) {
        queryLoading.value = true
        setTimeout(() => {
            respTask
                .then((result) => respHandle(result))
                .catch(error => {
                    console.error(`query failure, cause by: ${error}`)
                })
                .finally(() => {
                    queryLoading.value = false
                })
        }, delayTime)
    }

    function queryByBtn() {
        pageIndex.value = 1
        basicQuery()
    }

    function queryByPageIndex(pageIndexVal: number) {
        pageIndex.value = pageIndexVal
        basicQuery()
    }

    function queryByPageSize(pageSizeVal: number) {
        pageIndex.value = 1
        pageSize.value = pageSizeVal
        basicQuery()
    }

    return {
        tableData,
        queryLoading,
        pageIndex,
        pageSize,
        total,
        sequence,
        queryByBtn,
        queryByPageIndex,
        queryByPageSize,
        delayQuery
    }
}

useApiQuery

通过组合式函数封装的通用表格数据查询函数，传入一个包含返回Promise的查询方法、分页参数、延时、结果处理四个参数的配置对象来使用，返回表格数据、查询状态、分页索引、分页大小、总条数、序列等数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
type ApiQueryOptions<T> = {
    api: Promise<T>,
    pageIndex?: number,
    pageSize?: number,
    delayTime?: number,
    resultHandler: Function,
}

export function useApiQuery<T>(options: ApiQueryOptions<T>) {

    options = Object.assign({
        pageIndex: 1,
        pageSize: 15,
        delayTime: 300,
    }, options)
    if (!options.pageIndex || options.pageIndex < 1) {
        options.pageIndex = 1
    }
    if (!options.pageSize || options.pageSize < 1) {
        options.pageSize = 15
    }

    //数据
    const tableData = ref<T[]>([])
    //查询状态
    const queryLoading = ref(false)
    //分页索引
    const pageIndex = ref(options.pageIndex)
    //分页大小
    const pageSize = ref(options.pageSize)
    //总条数
    const total = ref(0)
    //序列
    const sequence = computed(() => (pageIndex.value - 1) * pageSize.value + 1)

    /**
     * 通用查询
     * 支持延迟查询，最早也在delayTime的时间后才得出结果
     * @param respTask 
     * @param delayTime 
     */
    function basicQuery<Result>(respTask: Promise<Result>, respHandle: Function) {
        queryLoading.value = true
        setTimeout(() => {
            respTask
                .then((result) => respHandle(result))
                .catch(error => {
                    console.error(`query failure, cause by: ${error}`)
                })
                .finally(() => {
                    queryLoading.value = false
                })
        }, options.delayTime)
    }

    function queryByBtn() {
        pageIndex.value = 1
        basicQuery(options.api, options.resultHandler)
    }

    function queryByPageIndex(pageIndexVal: number) {
        pageIndex.value = pageIndexVal
        basicQuery(options.api, options.resultHandler)
    }

    function queryByPageSize(pageSizeVal: number) {
        pageIndex.value = 1
        pageSize.value = pageSizeVal
        basicQuery(options.api, options.resultHandler)
    }

    return {
        tableData,
        queryLoading,
        pageIndex,
        pageSize,
        total,
        sequence,
        queryByBtn,
        queryByPageIndex,
        queryByPageSize
    }
}