diff --git a/packages/@core/base/shared/src/utils/index.ts b/packages/@core/base/shared/src/utils/index.ts index fb9a48078..991b7419e 100644 --- a/packages/@core/base/shared/src/utils/index.ts +++ b/packages/@core/base/shared/src/utils/index.ts @@ -16,6 +16,6 @@ export * from './unique'; export * from './update-css-variables'; export * from './util'; export * from './window'; -export { get, isEqual, set } from 'es-toolkit/compat'; +export { debounce, get, isEqual, set } from 'es-toolkit/compat'; // export { cloneDeep } from 'es-toolkit/object'; export { default as cloneDeep } from 'lodash.clonedeep'; diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 3e3729c2d..185532296 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -342,7 +342,7 @@ export type HandleResetFn = ( values: Record, ) => Promise | void; -export type FieldMappingTime = [ +export type FieldMappingTimeItem = [ string, [string, string], ( @@ -351,7 +351,9 @@ export type FieldMappingTime = [ | null | string )?, -][]; +]; + +export type FieldMappingTime = FieldMappingTimeItem[]; export type ArrayToStringFields = Array< | [string[], string?] // 嵌套数组格式,可选分隔符 @@ -525,6 +527,11 @@ export interface VbenFormProps< */ submitOnChange?: boolean; + /** + * submitOnChange改变时防抖时间 | 默认300ms + */ + changeDebouncedTime?: number; + /** * 是否在回车时提交表单 * @default false 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 e93867257..a00438296 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 @@ -3,7 +3,6 @@ import type { Recordable } from '@vben-core/typings'; import type { ExtendedFormApi, VbenFormProps } from './types'; -// import { toRaw, watch } from 'vue'; import { nextTick, onMounted, watch } from 'vue'; import { useForwardPriorityValues } from '@vben-core/composables'; @@ -12,17 +11,10 @@ import { cloneDeep, get, isEqual, set } from '@vben-core/shared/utils'; import { useDebounceFn } from '@vueuse/core'; import FormActions from './components/form-actions.vue'; -import { - COMPONENT_BIND_EVENT_MAP, - COMPONENT_MAP, - DEFAULT_FORM_COMMON_CONFIG, -} from './config'; +import { COMPONENT_BIND_EVENT_MAP, COMPONENT_MAP, DEFAULT_FORM_COMMON_CONFIG } from './config'; import { Form } from './form-render'; -import { - provideComponentRefMap, - provideFormProps, - useFormInitial, -} from './use-form-context'; +import { provideComponentRefMap, provideFormProps, useFormInitial } from './use-form-context'; + // 通过 extends 会导致热更新卡死,所以重复写了一遍 interface Props extends VbenFormProps { formApi?: ExtendedFormApi; @@ -65,7 +57,7 @@ function handleKeyDownEnter(event: KeyboardEvent) { const handleValuesChangeDebounced = useDebounceFn(async () => { state?.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm(); -}, 300); +}, state?.value?.changeDebouncedTime ?? 300); const valuesCache: Recordable = {}; @@ -87,7 +79,7 @@ onMounted(async () => { const oldFieldValue = get(valuesCache, field); if (!isEqual(newFieldValue, oldFieldValue)) { changedFields.push(field); - set(valuesCache, field, newFieldValue); + set(valuesCache, field, cloneDeep(newFieldValue)); } });