From 0f9ccbb955d43b919e92f9f5ed012c5a1e62f549 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 9 Apr 2025 17:33:25 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AE=8C=E5=96=84=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=94=9F=E6=88=90=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/views/infra/codegen/data.ts | 62 ++++++-- .../web-antd/src/views/infra/codegen/edit.vue | 106 ++++++++++---- .../infra/codegen/modules/column-info.vue | 137 +++++++++--------- .../infra/codegen/modules/generation-info.vue | 36 ++--- .../@core/base/shared/src/utils/inference.ts | 10 +- 5 files changed, 203 insertions(+), 148 deletions(-) diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts index d16a324a0..8df317f3d 100644 --- a/apps/web-antd/src/views/infra/codegen/data.ts +++ b/apps/web-antd/src/views/infra/codegen/data.ts @@ -3,12 +3,19 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table'; import type { InfraCodegenApi } from '#/api/infra/codegen'; import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config'; import type { SystemMenuApi } from '#/api/system/menu'; +import type { Recordable } from '@vben/types'; + +import { IconifyIcon } from '@vben/icons'; import { z } from '#/adapter/form'; +import { getMenuList } from '#/api/system/menu'; import { getRangePickerDefaultProps } from '#/utils/date'; import { DICT_TYPE, getDictOptions } from '#/utils/dict'; +import { handleTree } from '#/utils/tree'; +import { h } from 'vue'; import { useAccess } from '@vben/access'; +import { $t } from '@vben/locales'; const { hasAccessByCodes } = useAccess(); @@ -99,21 +106,14 @@ export function useBasicInfoFormSchema(): VbenFormSchema[] { componentProps: { rows: 3, }, - // 使用Tailwind的col-span-2让元素跨越两列 + // 使用 Tailwind 的 col-span-2 让元素跨越两列 formItemClass: 'md:col-span-2', }, ]; } /** 生成信息表单基础 schema */ -export function useGenerationInfoBaseFormSchema(menus: SystemMenuApi.SystemMenu[]): VbenFormSchema[] { - /** 菜单树选项 */ - const menuTreeProps = { - value: 'id', - title: 'name', - children: 'children', - }; - +export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] { return [ { component: 'Select', @@ -146,19 +146,49 @@ export function useGenerationInfoBaseFormSchema(menus: SystemMenuApi.SystemMenu[ rules: z.number().min(1, { message: '生成场景不能为空' }), }, { - component: 'TreeSelect', fieldName: 'parentMenuId', label: '上级菜单', help: '分配到指定菜单下，例如 系统管理', + component: 'ApiTreeSelect', componentProps: { + allowClear: true, + api: async () => { + const data = await getMenuList(); + data.unshift({ + id: 0, + name: '顶级菜单', + } as SystemMenuApi.SystemMenu); + return handleTree(data); + }, class: 'w-full', + labelField: 'name', + valueField: 'id', + childrenField: 'children', + placeholder: '请选择上级菜单', + filterTreeNode(input: string, node: Recordable) { + if (!input || input.length === 0) { + return true; + } + const name: string = node.label ?? ''; + if (!name) return false; + return name.includes(input) || $t(name).includes(input); + }, showSearch: true, - treeData: menus, - fieldNames: menuTreeProps, - treeNodeFilterProp: 'title', - treeDefaultExpandAll: false, - treeCheckable: false, - placeholder: '请选择系统菜单', + treeDefaultExpandedKeys: [0], + }, + rules: 'selectRequired', + renderComponentContent() { + return { + title({ label, icon }: { icon: string; label: string }) { + const components = []; + if (!label) return ''; + if (icon) { + components.push(h(IconifyIcon, { class: 'size-4', icon })); + } + components.push(h('span', { class: '' }, $t(label || ''))); + return h('div', { class: 'flex items-center gap-1' }, components); + }, + }; }, }, { diff --git a/apps/web-antd/src/views/infra/codegen/edit.vue b/apps/web-antd/src/views/infra/codegen/edit.vue index 454a4647d..d9c2c481a 100644 --- a/apps/web-antd/src/views/infra/codegen/edit.vue +++ b/apps/web-antd/src/views/infra/codegen/edit.vue @@ -6,31 +6,31 @@ import ColumnInfo from './modules/column-info.vue'; import GenerationInfo from './modules/generation-info.vue'; import { Page } from '@vben/common-ui'; import { ChevronsLeft } from '@vben/icons'; -import { Button, message, Tabs } from 'ant-design-vue'; +import { Button, message, Steps } from 'ant-design-vue'; import { getCodegenTable, updateCodegenTable } from '#/api/infra/codegen'; import { $t } from '#/locales'; -import { ref } from 'vue'; +import { ref, unref } from 'vue'; import { useRoute, useRouter } from 'vue-router'; const route = useRoute(); const router = useRouter(); const loading = ref(false); -const activeKey = ref('colum'); +const currentStep = ref(0); const formData = ref({ - table: {}, + table: {} as InfraCodegenApi.CodegenTable, columns: [], }); // 表单引用 -const basicInfoRef = ref(); -const columnInfoRef = ref(); -const generateInfoRef = ref(); +const basicInfoRef = ref>(); +const columnInfoRef = ref>(); +const generateInfoRef = ref>(); // 获取详情数据 const getDetail = async () => { - const id = Number(route.query.id); + const id = route.query.id as any; if (!id) return; loading.value = true; @@ -43,26 +43,35 @@ const getDetail = async () => { // 提交表单 const submitForm = async () => { - if (!formData.value) return; - - // 表单验证 - await basicInfoRef.value?.validate(); - await generateInfoRef.value?.validate(); + try { + // 表单验证 + await basicInfoRef.value?.validate(); + await generateInfoRef.value?.validate(); + } catch { + message.warn('保存失败，原因：存在表单校验失败请检查！！！'); + return; + } const hideLoading = message.loading({ - content: $t('ui.actionMessage.saving'), + content: $t('ui.actionMessage.updating'), duration: 0, key: 'action_process_msg', }); try { - await updateCodegenTable(formData.value); + debugger; + // 获取相关信息 + const basicInfo = await basicInfoRef.value?.getValues(); + const columns = columnInfoRef.value?.getData() || unref(formData).columns; + const generateInfo = await generateInfoRef.value?.getValues(); + await updateCodegenTable({ table: { ...unref(formData).table, ...basicInfo, ...generateInfo }, columns }); message.success({ - content: $t('ui.actionMessage.saveSuccess'), + content: $t('ui.actionMessage.operationSuccess'), key: 'action_process_msg', }); close(); } catch (error) { + message.warn('保存失败！！！'); console.error('保存失败', error); } finally { hideLoading(); @@ -74,28 +83,61 @@ const close = () => { router.push('/infra/codegen'); }; +// 下一步 +const nextStep = async () => { + currentStep.value += 1; +}; + +// 上一步 +const prevStep = () => { + if (currentStep.value > 0) { + currentStep.value -= 1; + } +}; + +// 步骤配置 +const steps = [ + { + title: '基本信息', + }, + { + title: '字段信息', + }, + { + title: '生成信息', + }, +]; + // 初始化 getDetail();