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()); }, }); 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..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,6 +130,13 @@ export interface FormItemDependencies { triggerFields: string[]; } +type ComponentEvents = + | (( + value: Partial>, + actions: FormActions, + ) => MaybeComponentEvents) + | MaybeComponentEvents; + type ComponentProps = | (( value: Partial>, @@ -217,6 +226,8 @@ export interface FormSchema< > extends FormCommonConfig { /** 组件 */ component: Component | T; + /** 组件事件 */ + componentEvents?: ComponentEvents; /** 组件参数 */ componentProps?: ComponentProps; /** 默认值 */