mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-08 08:05:07 +08:00
perf: vxe demo
This commit is contained in:
@ -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
|
||||
}
|
||||
|
||||
// 删除不必要的字段
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user