vue3+前端分页+模糊查询

import { formatDateTime } from '@fl/utils/fn.ts'

import { cloneDeep, sortBy } from 'lodash-es'

import { reactive } from 'vue'

import { useDicts } from './use-dicts'

const { useDict } = useDicts()

export function useTable() {

    const gridOptions = reactive<any>({

        border: true,

        columnConfig: {

            resizable: true,

        },

        columns: [

            // { slots: { checkbox: 'checkbox_cell', header: 'checkbox_header' }, type: 'checkbox', width: 60 },

            { field: 'enterpriseId', title: '企业号', width: 100 },

            { field: 'enterpriseName', title: '企业名称', width: 200 },

            { field: 'status', slots: { default: 'status' }, title: '企业状态', width: 90 },

            { field: 'enterpriseShort', title: '企业简称', width: 150 },

            { field: 'enterpriseLevel', slots: { default: 'enterpriseLevel' }, title: '企业级别', width: 100 },

            { field: 'unifiedSocialCreditCode', title: '信用代码', width: 200 },

            { field: 'legalRepresentative', title: '企业法人', width: 90 },

            { field: 'cooperationType', slots: { default: 'cooperationType' }, title: '合作类型', width: 90 },

            { field: 'enterpriseAccount', title: '企业管理员', width: 90 },

            { field: 'createTime', title: '添加时间', width: 150 },

            { field: 'createBy', title: '添加人', width: 100 },

            { slots: { default: 'operate' }, title: '操作', width: 300 },

        ],

        data: [],

        editConfig: {

            mode: 'row',

            showStatus: true,

            trigger: 'manual',

        },

        height: 530,

        keepSource: true,

        loading: false,

        pagerConfig: {

            currentPage: 1,

            enabled: true,

            pageSize: 10,

            pageSizes: [10, 20, 50, 100, 200, 500],

            total: 0,

        },

        showOverflow: true,

        stripe: true,

    })

    const btns = [

        {

            label: '查看',

            text: true,

            value: 'view',

        },

        {

            label: '编辑',

            text: true,

            value: 'edit',

        },

        {

            label: '删除',

            text: true,

            value: 'delete',

        },

        {

            label: '组织机构',

            text: true,

            value: 'organization',

        },

    ]

    // 删除空属性

    const paramsIsNull = (obj: any) => {

        const _newPar = {}

        for (const key in obj) {

            if (

                (obj[key] === 0 || obj[key])

                && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== ''

            )

                _newPar[key] = obj[key]

        }

        // 返回新对象

        return _newPar

    }

    // TODO:多条件查询方法 仅字符串对比 模糊匹配

    const useQuery = (data: any, params: any) => {

        const notNullParams = paramsIsNull(params)

        return data.filter((item) => {

            return Object.keys(notNullParams).every((key: string) => {

                if (key === 'createTime') {

                    const target = item[key] ? item[key].replace('T', ' ') : ''

                    const [start, end] = notNullParams[key]

                    console.log('start--', formatDateTime(start))

                    console.log('end--', formatDateTime(end))

                    const t = new Date(target).getTime()

                    const s = new Date(start).getTime()

                    const e = new Date(end).getTime()

                    return (

                        s <= t && e >= t

                    )

                }

                else {

                    // eslint-disable-next-line unicorn/prefer-includes

                    const flag = item[key] ? item[key].indexOf(notNullParams[key]) !== -1 : false

                    return (

                        item[key] !== undefined

                        && flag

                    )

                }

            })

        })

    }

    // 前端生成企业号 enterpriseId 默认不可改：取最大企业号加1

    const createQiyeh = (data: any) => {

        const all = data.map((v: any) => {

            if (v.enterpriseId) {

                const target = Number(v.enterpriseId)

                if (typeof target === 'number' && !Number.isNaN(target))

                    return target

                return 0

            }

            else { return 0 }

        })

        const target = sortBy(all).reverse()

        return target[0] + 1

    }

    // 前端分页

    const usePage = (data: any, gridOptions: any) => {

        const { currentPage, pageSize } = gridOptions.pagerConfig

        const val = cloneDeep(data)

        const list = val.splice((currentPage - 1) * pageSize, pageSize)

        return {

            list,

            total: data.length,

        }

    }

    // 处理业务类别

    const showCatType = (catTypeId: any) => {

        if (!catTypeId)

            return ''

        const reg = /[\u4E00-\u9FA5]/

        if (reg.test(catTypeId))

            return catTypeId

        const arr = catTypeId.split(',')

        const str = arr.reduce((accumulate, cur) => {

            accumulate += `${useDict('CatType', cur)},`

            return accumulate

        }, '')

        return str.substring(0, str.length - 1)

    }

    return { btns, createQiyeh, gridOptions, showCatType, usePage, useQuery }

}