perf: vxe demo

This commit is contained in:
xingyu4j
2022-11-07 18:13:04 +08:00
parent 1a45526a9d
commit dc84ebde9d
5 changed files with 113 additions and 68 deletions

View File

@ -3,6 +3,7 @@ import { getIntDictOptions } from '@/utils/dict'
import { reactive } from 'vue'
import {
FormItemRenderOptions,
VxeColumnPropTypes,
VxeFormItemProps,
VxeGridPropTypes,
VxeTableDefines
@ -10,10 +11,13 @@ import {
import { eachTree } from 'xe-utils'
import { useI18n } from '@/hooks/web/useI18n'
import { VxeTableColumn } from '@/types/table'
import { FormSchema } from '@/types/form'
import { ComponentOptions } from '@/types/components'
export type VxeCrudSchema = Omit<VxeTableColumn, 'children'> & {
field: string
title?: string
formatter?: VxeColumnPropTypes.Formatter
search?: CrudSearchParams
table?: CrudTableParams
form?: CrudFormParams
@ -35,7 +39,7 @@ type CrudTableParams = {
type CrudFormParams = {
// 是否显示表单项
show?: boolean
} & Omit<VxeFormItemProps, 'field'>
} & Omit<FormSchema, 'field'>
type CrudDescriptionsParams = {
// 是否显示表单项
@ -47,10 +51,10 @@ type CrudPrintParams = {
show?: boolean
} & Omit<VxeTableDefines.ColumnInfo[], 'field'>
interface VxeAllSchemas {
export type VxeAllSchemas = {
searchSchema: VxeFormItemProps[]
tableSchema: VxeGridPropTypes.Columns
formSchema: VxeFormItemProps[]
formSchema: FormSchema[]
detailSchema: DescriptionsSchema[]
printSchema: VxeTableDefines.ColumnInfo[]
}
@ -160,6 +164,9 @@ const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Column
field: schemaItem.field,
title: schemaItem.table?.title || schemaItem.title
}
if (schemaItem?.formatter) {
tableSchemaItem.formatter = schemaItem.formatter
}
// 删除不必要的字段
delete tableSchemaItem.show
@ -171,32 +178,31 @@ const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Column
}
// 过滤 form 结构
const filterFormSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] => {
const formSchema: VxeFormItemProps[] = []
const { t } = useI18n()
const filterFormSchema = (crudSchema: VxeCrudSchema[]): FormSchema[] => {
const formSchema: FormSchema[] = []
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
// 判断是否显示
if (schemaItem?.form?.show !== false) {
let itemRenderName = schemaItem?.form?.itemRender?.name || '$input'
let itemRender: FormItemRenderOptions = {
name: itemRenderName,
props: { placeholder: t('common.inputText') }
}
let component = schemaItem?.form?.component || 'Input'
const options: ComponentOptions[] = []
let comonentProps = {}
if (schemaItem.dictType) {
if (!(schemaItem.form && schemaItem.form.itemRender?.name)) itemRenderName = '$select'
itemRender = {
name: itemRenderName,
options: getIntDictOptions(schemaItem.dictType),
props: { placeholder: t('common.selectText') }
getIntDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
comonentProps = {
options: options
}
if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
}
const formSchemaItem = {
// 默认为 input
itemRender: itemRender,
component: component,
componentProps: comonentProps,
...schemaItem.form,
span: schemaItem.form?.span || 12,
field: schemaItem.field,
title: schemaItem.form?.title || schemaItem.title
label: schemaItem.form?.label || schemaItem.title
}
// 删除不必要的字段

View File

@ -1,6 +1,19 @@
import { computed, reactive } from 'vue'
import { VxeGridProps } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'
import { VxeAllSchemas } from './useVxeCrudSchemas'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
const { t } = useI18n()
const message = useMessage() // 消息弹窗
interface UseVxeGridConfig<T = any> {
allSchemas: VxeAllSchemas
getListApi: (option: any) => Promise<T>
delListApi?: (option: any) => Promise<T>
exportListApi?: (option: any) => Promise<T>
}
const appStore = useAppStore()
@ -14,36 +27,40 @@ const currentSize = computed(() => {
}
})
export const useVxeGrid = (allSchemas, getPageApi) => {
export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
const gridOptions = reactive<VxeGridProps>({
loading: false,
loading: true,
size: currentSize.value,
height: 800,
rowConfig: {
keyField: 'id',
isCurrent: true,
isHover: true
isCurrent: true, // 当鼠标点击行时,是否要高亮当前行
isHover: true // 当鼠标移到行时,是否要高亮当前行
},
showOverflow: 'tooltip', // 当内容溢出时显示为省略号
tooltipConfig: {
showAll: true // 开启全表工具提示
},
toolbarConfig: {
custom: true,
slots: { buttons: 'toolbar_buttons' }
},
printConfig: {
columns: allSchemas.printSchema
columns: config?.allSchemas.printSchema
},
formConfig: {
titleWidth: 100,
titleAlign: 'right',
items: allSchemas.searchSchema
items: config?.allSchemas.searchSchema
},
columns: allSchemas.tableSchema,
columns: config?.allSchemas.tableSchema,
pagerConfig: {
border: false,
background: false,
perfect: true,
pageSize: 10,
pagerCount: 7,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
border: false, // 带边框
background: true, // 带背景颜色
perfect: true, // 配套的样式
pageSize: 10, // 每页大小
pagerCount: 7, // 显示页码按钮的数量
autoHidden: true, // 当只有一页时自动隐藏
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500], // 每页大小选项列表
layouts: [
'PrevJump',
'PrevPage',
@ -61,17 +78,25 @@ export const useVxeGrid = (allSchemas, getPageApi) => {
props: { result: 'list', total: 'total' },
ajax: {
query: ({ page, form }) => {
gridOptions.loading = true
const queryParams = Object.assign({}, form)
queryParams.pageSize = page.pageSize
queryParams.pageNo = page.currentPage
gridOptions.loading = false
return new Promise(async (resolve) => {
resolve(await getPageApi(queryParams))
resolve(await config?.getListApi(queryParams))
})
}
}
}
})
return gridOptions
const delList = (ids: string | number | string[] | number[]) => {
message.delConfirm().then(() => {
config?.delListApi && config?.delListApi(ids)
message.success(t('common.delSuccess'))
})
}
return {
gridOptions,
delList
}
}