From 73e1ae0a4efcad74980eb6295cc3b2bde4c1b07b Mon Sep 17 00:00:00 2001 From: chenminjie <943130926@qq.com> Date: Tue, 26 Nov 2024 20:14:31 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E4=B8=BAVbenFormProps=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0componentEvents,=E4=BD=BFVbenForm=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=E7=9A=84=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E4=BA=8B=E4=BB=B6=EF=BC=8C=E7=AE=80=E5=8D=95?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=90=8E=E7=BB=AD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@core/ui-kit/form-ui/src/form-render/form-field.vue | 8 ++++++++ packages/@core/ui-kit/form-ui/src/types.ts | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index e9ee8f876..fdc16fe5a 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -28,6 +28,7 @@ interface Props extends FormSchema {} const { commonComponentProps, component, + componentEvents, componentProps, dependencies, description, @@ -159,6 +160,12 @@ const computedProps = computed(() => { }; }); +const computedEvents = computed(() => { + return isFunction(componentEvents) + ? componentEvents(values.value, formApi!) + : componentEvents; +}); + watch( () => computedProps.value?.autofocus, (value) => { @@ -315,6 +322,7 @@ function autofocus() { 'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]': isInValid, }" + v-on="computedEvents" v-bind="createComponentProps(slotProps)" :disabled="shouldDisabled" > diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 5855ccc60..cadf794ca 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -128,6 +128,10 @@ export interface FormItemDependencies { triggerFields: string[]; } +type ComponentEvents = { + [K: string]: (...args: any[]) => void; +} & Record; + type ComponentProps = | (( value: Partial>, @@ -217,6 +221,8 @@ export interface FormSchema< > extends FormCommonConfig { /** 组件 */ component: Component | T; + /** 组件事件 */ + componentEvents?: ComponentEvents; /** 组件参数 */ componentProps?: ComponentProps; /** 默认值 */ From 4309be7188032c5329df3fc32634019c634ccf08 Mon Sep 17 00:00:00 2001 From: chenminjie <943130926@qq.com> Date: Tue, 26 Nov 2024 20:39:03 +0800 Subject: [PATCH 2/3] =?UTF-8?q?types:=20=E6=9B=B4=E6=96=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BA=8B=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/@core/ui-kit/form-ui/src/types.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index cadf794ca..f9bc9d29f 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -60,6 +60,8 @@ export type MaybeComponentPropKey = | keyof HtmlHTMLAttributes | (Record & string); +export type MaybeComponentEvents = { [K in MaybeComponentPropKey]?: any }; + export type MaybeComponentProps = { [K in MaybeComponentPropKey]?: any }; export type FormActions = FormContext; @@ -128,9 +130,12 @@ export interface FormItemDependencies { triggerFields: string[]; } -type ComponentEvents = { - [K: string]: (...args: any[]) => void; -} & Record; +type ComponentEvents = + | (( + value: Partial>, + actions: FormActions, + ) => MaybeComponentEvents) + | MaybeComponentEvents; type ComponentProps = | (( From cade5b0f8fad15091cb909c0b990ab00beb239ee Mon Sep 17 00:00:00 2001 From: chenminjie <943130926@qq.com> Date: Tue, 26 Nov 2024 20:39:19 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E6=94=B9=E8=BF=9B=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=BA=90=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/infra/codegen/codegen.data.ts | 16 ++++++++- .../codegen/components/import-table-modal.vue | 34 ++----------------- 2 files changed, 17 insertions(+), 33 deletions(-) diff --git a/apps/web-antd/src/views/infra/codegen/codegen.data.ts b/apps/web-antd/src/views/infra/codegen/codegen.data.ts index 2aaffca31..cde6b5ae8 100644 --- a/apps/web-antd/src/views/infra/codegen/codegen.data.ts +++ b/apps/web-antd/src/views/infra/codegen/codegen.data.ts @@ -3,6 +3,8 @@ import type { VbenFormProps } from '@vben/common-ui'; import type { VxeGridProps } from '#/adapter/vxe-table'; import type { CodegenApi } from '#/api/infra/codegen'; +import { getDataSourceConfigList } from '#/api/infra/data-source-config'; + export namespace CodegenDefaultData { /** * 代码生成字段定义 表格配置 @@ -78,10 +80,22 @@ export namespace CodegenImportTableModalData { { label: '数据源', fieldName: 'dataSourceConfigId', - component: 'Select', + component: 'ApiSelect', componentProps: { + defaultSelectedFirst: true, allowClear: true, placeholder: '请选择数据源', + api: getDataSourceConfigList, + labelField: 'name', + valueField: 'id', + }, + componentEvents: (events, formApi) => { + return { + optionsChange: (value: any) => { + // 设置默认选中第一个 + formApi.setFieldValue('dataSourceConfigId', value[0].id); + }, + }; }, }, { diff --git a/apps/web-antd/src/views/infra/codegen/components/import-table-modal.vue b/apps/web-antd/src/views/infra/codegen/components/import-table-modal.vue index d5beb9a79..242550f9b 100644 --- a/apps/web-antd/src/views/infra/codegen/components/import-table-modal.vue +++ b/apps/web-antd/src/views/infra/codegen/components/import-table-modal.vue @@ -9,19 +9,12 @@ import { } from '@vben/plugins/vxe-table'; import { getSchemaTableList } from '#/api/infra/codegen'; -import { - type DataSourceConfigApi, - getDataSourceConfigList, -} from '#/api/infra/data-source-config'; import { CodegenImportTableModalData } from '../codegen.data'; // checked const checkedStatus = ref(false); -const dataSourceConfigList = - ref(); - /** * 表格查询表单配置 */ @@ -82,31 +75,8 @@ const [Grid, gridApi] = useVbenVxeGrid( const [Modal] = useVbenModal({ class: 'w-[800px] h-[800px]', - onOpenChange: async (isOpen) => { - if (isOpen) { - // 获取数据源配置列表 - dataSourceConfigList.value = await getDataSourceConfigList(); - // 设置下拉框 - gridApi.formApi.updateSchema([ - { - fieldName: 'dataSourceConfigId', - componentProps: { - options: dataSourceConfigList.value?.map((item) => ({ - label: item.name, - value: item.id, - })), - }, - }, - ]); - // 设置默认值 - gridApi.formApi.setFieldValue( - 'dataSourceConfigId', - dataSourceConfigList.value?.[0]?.id, - ); - - // 加载表格数据 - gridApi.reload(await gridApi.formApi.getValues()); - } + onOpened: async () => { + gridApi.reload(await gridApi.formApi.getValues()); }, });