diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index 37398df3..d604ae27 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -4,7 +4,7 @@ import { computed, nextTick, onMounted, reactive, ref, unref, useAttrs, watch } import { type FormProps as AntFormProps, Form, Row } from 'ant-design-vue' import { useDebounceFn } from '@vueuse/core' import { cloneDeep } from 'lodash-es' -import type { FormActionType, FormProps, FormSchema } from './types/form' +import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from './types/form' import type { AdvanceState } from './types/hooks' import FormItem from './components/FormItem.vue' @@ -88,7 +88,7 @@ const getSchema = computed((): FormSchema[] => { // eslint-disable-next-line dot-notation const valueFormat = componentProps ? componentProps['valueFormat'] : null // handle date type - if (isHandleDateDefaultValue && defaultValue && dateItemType.includes(component)) { + if (isHandleDateDefaultValue && defaultValue && component && dateItemType.includes(component)) { if (!Array.isArray(defaultValue)) { schema.defaultValue = valueFormat ? dateUtil(defaultValue).format(valueFormat) diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index c165585f..2c02237d 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -4,7 +4,8 @@ import { computed, defineComponent, toRefs, unref } from 'vue' import type { Rule } from 'ant-design-vue/lib/form' import { Col, Divider, Form } from 'ant-design-vue' import { cloneDeep, upperFirst } from 'lodash-es' -import type { FormActionType, FormProps, FormSchema } from '../types/form' +import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from '../types/form' +import { isComponentFormSchema } from '../types/form' import { componentMap } from '../componentMap' import { NO_AUTO_LINK_COMPONENTS, createPlaceholderMessage, setComponentRuleType } from '../helper' import { useItemLabelWidth } from '../hooks/useLabelWidth' @@ -219,6 +220,9 @@ export default defineComponent({ } function renderComponent() { + if (!isComponentFormSchema(props.schema)) + return null + const { renderComponentContent, component, field, changeEvent = 'change', valueField } = props.schema const isCheck = component && ['Switch', 'Checkbox'].includes(component) @@ -323,7 +327,7 @@ export default defineComponent({ const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix // TODO 自定义组件验证会出现问题,因此这里框架默认将自定义组件设置手动触发验证,如果其他组件还有此问题请手动设置autoLink=false - if (NO_AUTO_LINK_COMPONENTS.includes(component)) { + if (component && NO_AUTO_LINK_COMPONENTS.includes(component)) { props.schema && (props.schema.itemProps! = { autoLink: false, @@ -353,7 +357,7 @@ export default defineComponent({ return () => { const { colProps = {}, colSlot, renderColContent, component, slot } = props.schema - if (!componentMap.has(component) && !slot) + if (!component || (!componentMap.has(component) && !slot)) return null const { baseColProps = {} } = props.formProps diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts index bc5637ed..fc819446 100644 --- a/src/components/Form/src/hooks/useAdvanced.ts +++ b/src/components/Form/src/hooks/useAdvanced.ts @@ -3,7 +3,7 @@ import { computed, getCurrentInstance, shallowReactive, unref, watch } from 'vue import { useDebounceFn } from '@vueuse/core' import type { ColEx } from '../types' import type { AdvanceState } from '../types/hooks' -import type { FormProps, FormSchema } from '../types/form' +import type { FormProps, FormSchemaInner as FormSchema } from '../types/form' import { isBoolean, isFunction, isNumber, isObject } from '@/utils/is' import { useBreakpoint } from '@/hooks/event/useBreakpoint' diff --git a/src/components/Form/src/hooks/useAutoFocus.ts b/src/components/Form/src/hooks/useAutoFocus.ts index 1e26d24d..e1b2c67b 100644 --- a/src/components/Form/src/hooks/useAutoFocus.ts +++ b/src/components/Form/src/hooks/useAutoFocus.ts @@ -1,6 +1,6 @@ import type { ComputedRef, Ref } from 'vue' import { nextTick, unref, watchEffect } from 'vue' -import type { FormActionType, FormProps, FormSchema } from '../types/form' +import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from '../types/form' interface UseAutoFocusContext { getSchema: ComputedRef @@ -22,7 +22,7 @@ export function useAutoFocus({ getSchema, getProps, formElRef, isInitedDefault } const firstItem = schemas[0] // Only open when the first form item is input type - if (!firstItem.component.includes('Input')) + if (!firstItem.component || !firstItem.component.includes('Input')) return const inputEl = el.querySelector('.ant-row:first-child input') as Nullable diff --git a/src/components/Form/src/hooks/useForm.ts b/src/components/Form/src/hooks/useForm.ts index 3906c0d7..3ae3c04e 100644 --- a/src/components/Form/src/hooks/useForm.ts +++ b/src/components/Form/src/hooks/useForm.ts @@ -1,6 +1,6 @@ import type { NamePath } from 'ant-design-vue/lib/form/interface' import { nextTick, onUnmounted, ref, unref, watch } from 'vue' -import type { FormActionType, FormProps, FormSchema, UseFormReturnType } from '../types/form' +import type { FormActionType, FormProps, FormSchemaInner as FormSchema, UseFormReturnType } from '../types/form' import type { DynamicProps } from '@/types/utils' import { isProdMode } from '@/utils/env' import { error } from '@/utils/log' diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index b1e12a61..7e0c35d1 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -3,7 +3,7 @@ import type { ComputedRef, Ref } from 'vue' import type { NamePath } from 'ant-design-vue/lib/form/interface' import { nextTick, toRaw, unref } from 'vue' import { cloneDeep, get, set, uniqBy } from 'lodash-es' -import type { FormActionType, FormProps, FormSchema } from '../types/form' +import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from '../types/form' import { dateItemType, defaultValueComponents, handleInputNumberValue } from '../helper' import { isArray, @@ -92,7 +92,7 @@ export function useFormEvents({ if (fieldKeys.length) { // eslint-disable-next-line array-callback-return fieldKeys.map((field) => { - formModel[field] = defaultValueObj![field] + formModel[field] = defaultValueObj[field] }) } formModel[key] = getDefaultValue(schema, defaultValueRef, key) @@ -128,7 +128,7 @@ export function useFormEvents({ value = handleInputNumberValue(schema?.component, value) const { componentProps } = schema || {} - let _props = componentProps as any + let _props = componentProps if (typeof componentProps === 'function') _props = _props({ formModel: unref(formModel) }) @@ -263,7 +263,7 @@ export function useFormEvents({ ) return } - schemaRef.value = updateData as FormSchema[] + schemaRef.value = updateData } async function updateSchema(data: Partial | Partial[]) { @@ -341,7 +341,7 @@ export function useFormEvents({ */ function itemIsDateType(key: string) { return unref(getSchema).some((item) => { - return item.field === key ? dateItemType.includes(item.component) : false + return item.field === key && item.component ? dateItemType.includes(item.component) : false }) } diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts index 05101e0a..256595bd 100644 --- a/src/components/Form/src/hooks/useFormValues.ts +++ b/src/components/Form/src/hooks/useFormValues.ts @@ -1,7 +1,7 @@ import { unref } from 'vue' import type { ComputedRef, Ref } from 'vue' import { cloneDeep, get, set, unset } from 'lodash-es' -import type { FormProps, FormSchema } from '../types/form' +import type { FormProps, FormSchemaInner as FormSchema } from '../types/form' import { dateUtil } from '@/utils/dateUtil' import { isArray, isFunction, isNotEmpty, isNullOrUnDef, isObject, isString } from '@/utils/is' @@ -138,9 +138,9 @@ export function useFormValues({ defaultValueRef, getSchema, formModel, getProps if (fieldKeys.length) { // eslint-disable-next-line array-callback-return fieldKeys.map((field) => { - obj[field] = defaultValueObj![field] + obj[field] = defaultValueObj[field] if (formModel[field] === undefined) - formModel[field] = defaultValueObj![field] + formModel[field] = defaultValueObj[field] }) } if (!isNullOrUnDef(defaultValue)) { diff --git a/src/components/Form/src/hooks/useLabelWidth.ts b/src/components/Form/src/hooks/useLabelWidth.ts index 3419018d..522f2249 100644 --- a/src/components/Form/src/hooks/useLabelWidth.ts +++ b/src/components/Form/src/hooks/useLabelWidth.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue' import { computed, unref } from 'vue' -import type { FormProps, FormSchema } from '../types/form' +import type { FormProps, FormSchemaInner as FormSchema } from '../types/form' import { isNumber } from '@/utils/is' export function useItemLabelWidth(schemaItemRef: Ref, propsRef: Ref) { diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts index ecce760c..98fdecad 100644 --- a/src/components/Form/src/types/form.ts +++ b/src/components/Form/src/types/form.ts @@ -13,7 +13,7 @@ export type Rule = RuleObject & { } export interface RenderCallbackParams { - schema: FormSchema + schema: FormSchemaInner values: Recordable model: Recordable field: string @@ -29,8 +29,8 @@ export interface FormActionType { resetFields: () => Promise getFieldsValue: () => Recordable clearValidate: (name?: string | string[]) => Promise - updateSchema: (data: Partial | Partial[]) => Promise - resetSchema: (data: Partial | Partial[]) => Promise + updateSchema: (data: Partial | Partial[]) => Promise + resetSchema: (data: Partial | Partial[]) => Promise setProps: (formProps: Partial) => Promise removeSchemaByField: (field: string | string[]) => Promise appendSchemaByField: (schema: FormSchema | FormSchema[], prefixField: string | undefined, first?: boolean | undefined) => Promise @@ -223,6 +223,16 @@ interface SlotFormSchema extends BaseFormSchema { export type FormSchema = ComponentFormSchema | SlotFormSchema +export type FormSchemaInner = Partial & Partial & BaseFormSchema + +export function isSlotFormSchema(schema: FormSchemaInner): schema is SlotFormSchema { + return 'slot' in schema +} + +export function isComponentFormSchema(schema: FormSchemaInner): schema is ComponentFormSchema { + return !isSlotFormSchema(schema) +} + export interface HelpComponentProps { maxWidth: string // Whether to display the serial number