fix(BasicForm): useForm中scheme选项slot与component冲突

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)

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

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'
 

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<FormSchema[]>
@@ -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<HTMLInputElement>

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'

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<FormSchema> | Partial<FormSchema>[]) {
@@ -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
     })
   }
 

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)) {

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<FormSchema>, propsRef: Ref<FormProps>) {

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<void>
   getFieldsValue: () => Recordable
   clearValidate: (name?: string | string[]) => Promise<void>
-  updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>
+  updateSchema: (data: Partial<FormSchemaInner> | Partial<FormSchemaInner>[]) => Promise<void>
-  resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>
+  resetSchema: (data: Partial<FormSchemaInner> | Partial<FormSchemaInner>[]) => Promise<void>
   setProps: (formProps: Partial<FormProps>) => Promise<void>
   removeSchemaByField: (field: string | string[]) => Promise<void>
   appendSchemaByField: (schema: FormSchema | FormSchema[], prefixField: string | undefined, first?: boolean | undefined) => Promise<void>
@@ -223,6 +223,16 @@ interface SlotFormSchema extends BaseFormSchema {
 
 export type FormSchema = ComponentFormSchema | SlotFormSchema
 
+export type FormSchemaInner = Partial<ComponentFormSchema> & Partial<SlotFormSchema> & 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