From 0139d410a56ee435160462f59bcbde962b7e1940 Mon Sep 17 00:00:00 2001 From: sqchen Date: Sat, 8 Nov 2025 09:35:31 +0800 Subject: [PATCH 1/3] feat: add form handleCollapsedChange event --- docs/src/components/common-ui/vben-form.md | 1 + packages/@core/ui-kit/form-ui/src/form-api.ts | 1 + packages/@core/ui-kit/form-ui/src/types.ts | 4 ++++ packages/@core/ui-kit/form-ui/src/use-form-context.ts | 2 +- packages/@core/ui-kit/form-ui/src/vben-form.vue | 5 ++++- packages/@core/ui-kit/form-ui/src/vben-use-form.vue | 5 ++++- 6 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index 48772bfacc0..30cbec448f3 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -335,6 +335,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 | handleReset | 表单重置回调 | `(values: Record,) => Promise \| void` | - | | handleSubmit | 表单提交回调 | `(values: Record,) => Promise \| void` | - | | handleValuesChange | 表单值变化回调 | `(values: Record, fieldsChanged: string[]) => void` | - | +| handleCollapsedChange | 表单收起展开状态变化回调 | `(collapsed: boolean) => void` | - | | actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` | | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - | | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - | diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts index 401748c3619..f5f353dc6e2 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -36,6 +36,7 @@ function getDefaultState(): VbenFormProps { handleReset: undefined, handleSubmit: undefined, handleValuesChange: undefined, + handleCollapsedChange: undefined, layout: 'horizontal', resetButtonOptions: {}, schema: [], diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 824b7a440b3..6d704145ee5 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -379,6 +379,10 @@ export interface VbenFormProps< * 表单字段映射 */ fieldMappingTime?: FieldMappingTime; + /** + * 表单收起展开状态变化回调 + */ + handleCollapsedChange?: (collapsed: boolean) => void; /** * 表单重置回调 */ diff --git a/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/packages/@core/ui-kit/form-ui/src/use-form-context.ts index 4ef182edff0..e95c87b960b 100644 --- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts +++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts @@ -13,7 +13,7 @@ import { useForm } from 'vee-validate'; import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod'; import { getDefaultsForSchema } from 'zod-defaults'; -type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi }; +type ExtendFormProps = VbenFormProps & { formApi?: ExtendedFormApi }; export const [injectFormProps, provideFormProps] = createContext<[ComputedRef | ExtendFormProps, FormActions]>( diff --git a/packages/@core/ui-kit/form-ui/src/vben-form.vue b/packages/@core/ui-kit/form-ui/src/vben-form.vue index 260e75cdb9f..b7e73e126ed 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-form.vue @@ -40,7 +40,10 @@ const { delegatedSlots, form } = useFormInitial(props); provideFormProps([props, form]); const handleUpdateCollapsed = (value: boolean) => { - currentCollapsed.value = !!value; + const collapsedValue = !!value; + currentCollapsed.value = collapsedValue; + // 触发收起展开状态变化回调 + props.handleCollapsedChange?.(collapsedValue); }; watchEffect(() => { diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue index 3e7b00b6c0b..da62e7b8394 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue @@ -44,7 +44,10 @@ provideComponentRefMap(componentRefMap); props.formApi?.mount?.(form, componentRefMap); const handleUpdateCollapsed = (value: boolean) => { - props.formApi?.setState({ collapsed: !!value }); + const collapsedValue = !!value; + props.formApi?.setState({ collapsed: collapsedValue }); + // 触发收起展开状态变化回调 + forward.value.handleCollapsedChange?.(collapsedValue); }; function handleKeyDownEnter(event: KeyboardEvent) { From 665a71f7133300d26901fd15e58f1c304fb3f99c Mon Sep 17 00:00:00 2001 From: sqchen Date: Sat, 8 Nov 2025 10:14:28 +0800 Subject: [PATCH 2/3] fix: ts lint --- .../@core/ui-kit/form-ui/src/vben-form.vue | 5 ++--- .../ui-kit/form-ui/src/vben-use-form.vue | 21 +++++++++---------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/@core/ui-kit/form-ui/src/vben-form.vue b/packages/@core/ui-kit/form-ui/src/vben-form.vue index b7e73e126ed..f3ba37f074b 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-form.vue @@ -40,10 +40,9 @@ const { delegatedSlots, form } = useFormInitial(props); provideFormProps([props, form]); const handleUpdateCollapsed = (value: boolean) => { - const collapsedValue = !!value; - currentCollapsed.value = collapsedValue; + currentCollapsed.value = value; // 触发收起展开状态变化回调 - props.handleCollapsedChange?.(collapsedValue); + props.handleCollapsedChange?.(value); }; watchEffect(() => { diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue index da62e7b8394..20b48773c56 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue @@ -25,7 +25,7 @@ import { } from './use-form-context'; // 通过 extends 会导致热更新卡死，所以重复写了一遍 interface Props extends VbenFormProps { - formApi: ExtendedFormApi; + formApi?: ExtendedFormApi; } const props = defineProps(); @@ -44,14 +44,13 @@ provideComponentRefMap(componentRefMap); props.formApi?.mount?.(form, componentRefMap); const handleUpdateCollapsed = (value: boolean) => { - const collapsedValue = !!value; - props.formApi?.setState({ collapsed: collapsedValue }); + props.formApi?.setState({ collapsed: value }); // 触发收起展开状态变化回调 - forward.value.handleCollapsedChange?.(collapsedValue); + forward.value.handleCollapsedChange?.(value); }; function handleKeyDownEnter(event: KeyboardEvent) { - if (!state.value.submitOnEnter || !forward.value.formApi?.isMounted) { + if (!state?.value.submitOnEnter || !forward.value.formApi?.isMounted) { return; } // 如果是 textarea 不阻止默认行为，否则会导致无法换行。 @@ -61,11 +60,11 @@ function handleKeyDownEnter(event: KeyboardEvent) { } event.preventDefault(); - forward.value.formApi.validateAndSubmitForm(); + forward.value.formApi?.validateAndSubmitForm(); } const handleValuesChangeDebounced = useDebounceFn(async () => { - state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm(); + state?.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm(); }, 300); const valuesCache: Recordable = {}; @@ -77,7 +76,7 @@ onMounted(async () => { () => form.values, async (newVal) => { if (forward.value.handleValuesChange) { - const fields = state.value.schema?.map((item) => { + const fields = state?.value.schema?.map((item) => { return item.fieldName; }); @@ -95,7 +94,7 @@ onMounted(async () => { if (changedFields.length > 0) { // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表 forward.value.handleValuesChange( - cloneDeep(await forward.value.formApi.getValues()), + cloneDeep((await forward.value.formApi?.getValues()) ?? {}), changedFields, ); } @@ -112,7 +111,7 @@ onMounted(async () => {
{