ipms-sjy/yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts

258 lines
7.0 KiB
TypeScript
Raw Normal View History

2022-11-03 14:33:30 +08:00
import { DescriptionsSchema } from '@/types/descriptions'
import { getIntDictOptions } from '@/utils/dict'
import { reactive } from 'vue'
import {
FormItemRenderOptions,
2022-11-07 18:13:04 +08:00
VxeColumnPropTypes,
2022-11-03 14:33:30 +08:00
VxeFormItemProps,
VxeGridPropTypes,
VxeTableDefines
} from 'vxe-table'
import { eachTree } from 'xe-utils'
import { useI18n } from '@/hooks/web/useI18n'
import { VxeTableColumn } from '@/types/table'
2022-11-07 18:13:04 +08:00
import { FormSchema } from '@/types/form'
import { ComponentOptions } from '@/types/components'
2022-11-03 14:33:30 +08:00
export type VxeCrudSchema = Omit<VxeTableColumn, 'children'> & {
field: string
title?: string
2022-11-07 18:13:04 +08:00
formatter?: VxeColumnPropTypes.Formatter
2022-11-03 14:33:30 +08:00
search?: CrudSearchParams
table?: CrudTableParams
form?: CrudFormParams
detail?: CrudDescriptionsParams
2022-11-07 14:58:53 +08:00
print?: CrudPrintParams
2022-11-03 14:33:30 +08:00
children?: VxeCrudSchema[]
dictType?: string
}
type CrudSearchParams = {
// 是否显示在查询项
show?: boolean
} & Omit<VxeFormItemProps, 'field'>
type CrudTableParams = {
// 是否显示表头
show?: boolean
} & Omit<VxeTableDefines.ColumnOptions, 'field'>
type CrudFormParams = {
// 是否显示表单项
show?: boolean
2022-11-07 18:13:04 +08:00
} & Omit<FormSchema, 'field'>
2022-11-03 14:33:30 +08:00
type CrudDescriptionsParams = {
// 是否显示表单项
show?: boolean
} & Omit<DescriptionsSchema, 'field'>
2022-11-07 14:58:53 +08:00
type CrudPrintParams = {
// 是否显示表单项
show?: boolean
} & Omit<VxeTableDefines.ColumnInfo[], 'field'>
2022-11-07 18:13:04 +08:00
export type VxeAllSchemas = {
2022-11-03 14:33:30 +08:00
searchSchema: VxeFormItemProps[]
tableSchema: VxeGridPropTypes.Columns
2022-11-07 18:13:04 +08:00
formSchema: FormSchema[]
2022-11-03 14:33:30 +08:00
detailSchema: DescriptionsSchema[]
printSchema: VxeTableDefines.ColumnInfo[]
}
// 过滤所有结构
export const useVxeCrudSchemas = (
crudSchema: VxeCrudSchema[]
): {
allSchemas: VxeAllSchemas
} => {
// 所有结构数据
const allSchemas = reactive<VxeAllSchemas>({
searchSchema: [],
tableSchema: [],
formSchema: [],
detailSchema: [],
printSchema: []
})
const searchSchema = filterSearchSchema(crudSchema)
allSchemas.searchSchema = searchSchema || []
const tableSchema = filterTableSchema(crudSchema)
allSchemas.tableSchema = tableSchema || []
const formSchema = filterFormSchema(crudSchema)
allSchemas.formSchema = formSchema
const detailSchema = filterDescriptionsSchema(crudSchema)
allSchemas.detailSchema = detailSchema
const printSchema = filterPrintSchema(crudSchema)
allSchemas.printSchema = printSchema
return {
allSchemas
}
}
// 过滤 Search 结构
const filterSearchSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] => {
const searchSchema: VxeFormItemProps[] = []
const { t } = useI18n()
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
// 判断是否显示
if (schemaItem?.search?.show) {
let itemRenderName = schemaItem?.search?.itemRender?.name || '$input'
const options: any[] = []
let itemRender: FormItemRenderOptions = {
name: itemRenderName,
props: { placeholder: t('common.inputText') }
}
if (schemaItem.dictType) {
const allOptions = { label: '全部', value: '' }
options.push(allOptions)
getIntDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
itemRender.options = options
if (!schemaItem.search.itemRender?.name) itemRenderName = '$select'
itemRender = {
name: itemRenderName,
options: options,
props: { placeholder: t('common.selectText') }
}
}
const searchSchemaItem = {
// 默认为 input
2022-11-10 14:38:16 +08:00
span: 8,
folding: searchSchema.length > 2,
2022-11-03 14:33:30 +08:00
itemRender: itemRender,
...schemaItem.search,
field: schemaItem.field,
title: schemaItem.search?.title || schemaItem.title
}
// 删除不必要的字段
delete searchSchemaItem.show
searchSchema.push(searchSchemaItem)
}
})
// 添加搜索按钮
const buttons: VxeFormItemProps = {
span: 24,
align: 'center',
2022-11-10 14:38:16 +08:00
collapseNode: searchSchema.length > 3,
2022-11-03 14:33:30 +08:00
itemRender: {
name: '$buttons',
children: [
{ props: { type: 'submit', content: t('common.query'), status: 'primary' } },
{ props: { type: 'reset', content: t('common.reset') } }
]
}
}
searchSchema.push(buttons)
return searchSchema
}
// 过滤 table 结构
const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Columns => {
const tableSchema: VxeGridPropTypes.Columns = []
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
// 判断是否显示
if (schemaItem?.table?.show !== false) {
const tableSchemaItem = {
...schemaItem.table,
field: schemaItem.field,
title: schemaItem.table?.title || schemaItem.title
}
2022-11-07 18:13:04 +08:00
if (schemaItem?.formatter) {
tableSchemaItem.formatter = schemaItem.formatter
}
2022-11-03 14:33:30 +08:00
// 删除不必要的字段
delete tableSchemaItem.show
tableSchema.push(tableSchemaItem)
}
})
return tableSchema
}
// 过滤 form 结构
2022-11-07 18:13:04 +08:00
const filterFormSchema = (crudSchema: VxeCrudSchema[]): FormSchema[] => {
const formSchema: FormSchema[] = []
2022-11-03 14:33:30 +08:00
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
// 判断是否显示
if (schemaItem?.form?.show !== false) {
2022-11-07 18:13:04 +08:00
let component = schemaItem?.form?.component || 'Input'
const options: ComponentOptions[] = []
let comonentProps = {}
2022-11-03 14:33:30 +08:00
if (schemaItem.dictType) {
2022-11-07 18:13:04 +08:00
getIntDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
comonentProps = {
options: options
2022-11-03 14:33:30 +08:00
}
2022-11-07 18:13:04 +08:00
if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
2022-11-03 14:33:30 +08:00
}
const formSchemaItem = {
// 默认为 input
2022-11-07 18:13:04 +08:00
component: component,
componentProps: comonentProps,
2022-11-03 14:33:30 +08:00
...schemaItem.form,
field: schemaItem.field,
2022-11-07 18:13:04 +08:00
label: schemaItem.form?.label || schemaItem.title
2022-11-03 14:33:30 +08:00
}
// 删除不必要的字段
delete formSchemaItem.show
formSchema.push(formSchemaItem)
}
})
return formSchema
}
// 过滤 descriptions 结构
const filterDescriptionsSchema = (crudSchema: VxeCrudSchema[]): DescriptionsSchema[] => {
const descriptionsSchema: DescriptionsSchema[] = []
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
// 判断是否显示
if (schemaItem?.detail?.show !== false) {
const descriptionsSchemaItem = {
...schemaItem.detail,
field: schemaItem.field,
label: schemaItem.detail?.label || schemaItem.title
}
// 删除不必要的字段
delete descriptionsSchemaItem.show
descriptionsSchema.push(descriptionsSchemaItem)
}
})
return descriptionsSchema
}
// 过滤 打印 结构
const filterPrintSchema = (crudSchema: VxeCrudSchema[]): any[] => {
const printSchema: any[] = []
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
// 判断是否显示
2022-11-07 14:58:53 +08:00
if (schemaItem?.print?.show !== false) {
2022-11-03 14:33:30 +08:00
const printSchemaItem = {
field: schemaItem.field
}
printSchema.push(printSchemaItem)
}
})
return printSchema
}