diff --git a/yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts b/yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts new file mode 100644 index 000000000..94b8750ed --- /dev/null +++ b/yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts @@ -0,0 +1,245 @@ +import { DescriptionsSchema } from '@/types/descriptions' +import { getIntDictOptions } from '@/utils/dict' +import { reactive } from 'vue' +import { + FormItemRenderOptions, + VxeFormItemProps, + VxeGridPropTypes, + VxeTableDefines +} from 'vxe-table' +import { eachTree } from 'xe-utils' +import { useI18n } from '@/hooks/web/useI18n' +import { VxeTableColumn } from '@/types/table' + +export type VxeCrudSchema = Omit & { + field: string + title?: string + search?: CrudSearchParams + table?: CrudTableParams + form?: CrudFormParams + detail?: CrudDescriptionsParams + print?: boolean + children?: VxeCrudSchema[] + dictType?: string +} +type CrudSearchParams = { + // 是否显示在查询项 + show?: boolean +} & Omit + +type CrudTableParams = { + // 是否显示表头 + show?: boolean +} & Omit + +type CrudFormParams = { + // 是否显示表单项 + show?: boolean +} & Omit + +type CrudDescriptionsParams = { + // 是否显示表单项 + show?: boolean +} & Omit + +interface VxeAllSchemas { + searchSchema: VxeFormItemProps[] + tableSchema: VxeGridPropTypes.Columns + formSchema: VxeFormItemProps[] + detailSchema: DescriptionsSchema[] + printSchema: VxeTableDefines.ColumnInfo[] +} + +// 过滤所有结构 +export const useVxeCrudSchemas = ( + crudSchema: VxeCrudSchema[] +): { + allSchemas: VxeAllSchemas +} => { + // 所有结构数据 + const allSchemas = reactive({ + 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 + span: 6, + 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', + collapseNode: true, + 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 + } + + // 删除不必要的字段 + delete tableSchemaItem.show + + tableSchema.push(tableSchemaItem) + } + }) + return tableSchema +} + +// 过滤 form 结构 +const filterFormSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] => { + const formSchema: VxeFormItemProps[] = [] + const { t } = useI18n() + 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') } + } + if (schemaItem.dictType) { + if (!(schemaItem.form && schemaItem.form.itemRender?.name)) itemRenderName = '$select' + itemRender = { + name: itemRenderName, + options: getIntDictOptions(schemaItem.dictType), + props: { placeholder: t('common.selectText') } + } + } + const formSchemaItem = { + // 默认为 input + itemRender: itemRender, + ...schemaItem.form, + field: schemaItem.field, + title: schemaItem.form?.title || schemaItem.title + } + + // 删除不必要的字段 + 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) => { + // 判断是否显示 + if (schemaItem?.detail?.show !== false) { + const printSchemaItem = { + field: schemaItem.field + } + + printSchema.push(printSchemaItem) + } + }) + + return printSchema +} diff --git a/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts b/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts new file mode 100644 index 000000000..16f665f2e --- /dev/null +++ b/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts @@ -0,0 +1,59 @@ +import { reactive } from 'vue' +import { VxeGridProps } from 'vxe-table' + +export const useVxeGrid = (allSchemas, getPageApi) => { + const gridOptions = reactive({ + loading: false, + rowConfig: { + keyField: 'id', + isHover: true + }, + toolbarConfig: { + custom: true, + slots: { buttons: 'toolbar_buttons' } + }, + printConfig: { + columns: allSchemas.printSchema + }, + formConfig: { + titleWidth: 100, + titleAlign: 'right', + items: allSchemas.searchSchema + }, + columns: allSchemas.tableSchema, + pagerConfig: { + border: false, + background: false, + perfect: true, + pageSize: 10, + pagerCount: 7, + pageSizes: [5, 10, 15, 20, 50, 100, 200, 500], + layouts: [ + 'PrevJump', + 'PrevPage', + 'Jump', + 'PageCount', + 'NextPage', + 'NextJump', + 'Sizes', + 'Total' + ] + }, + proxyConfig: { + seq: true, // 启用动态序号代理(分页之后索引自动计算为当前页的起始序号) + form: true, // 启用表单代理,当点击表单提交按钮时会自动触发 reload 行为 + props: { result: 'list', total: 'total' }, + ajax: { + query: ({ page, form }) => { + const queryParams = Object.assign({}, form) + queryParams.pageSize = page.pageSize + queryParams.pageNo = page.currentPage + return new Promise(async (resolve) => { + resolve(await getPageApi(queryParams)) + }) + } + } + } + }) + return gridOptions +} diff --git a/yudao-ui-admin-vue3/src/types/table.d.ts b/yudao-ui-admin-vue3/src/types/table.d.ts index 5adf91f47..3294234b8 100644 --- a/yudao-ui-admin-vue3/src/types/table.d.ts +++ b/yudao-ui-admin-vue3/src/types/table.d.ts @@ -4,6 +4,12 @@ export type TableColumn = { children?: TableColumn[] } & Recordable +export type VxeTableColumn = { + field: string + title?: string + children?: TableColumn[] +} & Recordable + export type TableSlotDefault = { row: Recordable column: TableColumn diff --git a/yudao-ui-admin-vue3/src/views/system/post/index.vue b/yudao-ui-admin-vue3/src/views/system/post/index.vue index c7b35b9c8..eaee48262 100644 --- a/yudao-ui-admin-vue3/src/views/system/post/index.vue +++ b/yudao-ui-admin-vue3/src/views/system/post/index.vue @@ -1,24 +1,18 @@ - - diff --git a/yudao-ui-admin-vue3/src/views/system/post/post.data.ts b/yudao-ui-admin-vue3/src/views/system/post/post.data.ts index a3383241f..6b19a98f1 100644 --- a/yudao-ui-admin-vue3/src/views/system/post/post.data.ts +++ b/yudao-ui-admin-vue3/src/views/system/post/post.data.ts @@ -1,7 +1,7 @@ import { reactive } from 'vue' import { useI18n } from '@/hooks/web/useI18n' import { required } from '@/utils/formRules' -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' import { DICT_TYPE } from '@/utils/dict' const { t } = useI18n() // 国际化 @@ -13,9 +13,9 @@ export const rules = reactive({ }) // CrudSchema -const crudSchemas = reactive([ +const crudSchemas = reactive([ { - label: t('common.index'), + title: t('common.index'), field: 'id', type: 'index', form: { @@ -26,42 +26,54 @@ const crudSchemas = reactive([ } }, { - label: '岗位名称', + title: '岗位名称', field: 'name', search: { show: true } }, { - label: '岗位编码', + title: '岗位编码', field: 'code', search: { show: true } }, { - label: '岗位顺序', + title: '岗位顺序', field: 'sort' }, { - label: t('common.status'), + title: t('common.status'), field: 'status', dictType: DICT_TYPE.COMMON_STATUS, + table: { + slots: { + default: 'status_default' + } + }, search: { show: true } }, { - label: t('common.createTime'), + title: t('common.createTime'), field: 'createTime', form: { show: false } }, { - label: t('table.action'), + title: t('table.action'), field: 'action', width: '240px', + table: { + width: '240px', + showOverflow: true, + slots: { + default: 'action_default' + } + }, form: { show: false }, @@ -70,4 +82,4 @@ const crudSchemas = reactive([ } } ]) -export const { allSchemas } = useCrudSchemas(crudSchemas) +export const { allSchemas } = useVxeCrudSchemas(crudSchemas)