feat: Form改造

src/components/Form/index.ts

@@ -27,7 +27,6 @@ export type {
   TimeSelectComponentProps,
   ColProps,
   FormSetProps,
-  FormValueType,
   FormItemProps,
   FormSchema,
   FormProps,

src/components/Form/src/Form.vue

@@ -182,11 +182,8 @@ export default defineComponent({
 
     // 渲染formItem
     const renderFormItem = (item: FormSchema) => {
-      const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
-      return (
-        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
-          {{
-            default: () => {
+      const formItemSlots = {
+        default: () => {
               if (slots[item.field]) {
                 return getSlot(slots, item.field, formModel.value)
               } else {
@@ -257,7 +254,21 @@ export default defineComponent({
                   </Com>
                 )
               }
-            },
+            }
+      }
+      if (item?.formItemProps?.slots?.label) {
+        formItemSlots.label = (...args: any[]) => {
+          return item.formItemProps.slots.label(...args)
+        }
+      }
+      if (item?.formItemProps?.slots?.error) {
+        formItemSlots.error = (...args: any[]) => {
+          return item.formItemProps.slots.error(...args)
+        }
+      }
+      return (
+        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
+          {{
             ...formItemSlots
           }}
         </ElFormItem>

src/components/Form/src/helper/index.ts

@@ -1,6 +1,4 @@
 import { useI18n } from '@/hooks/web/useI18n'
-import { type Slots } from 'vue'
-import { getSlot } from '@/utils/tsxHelper'
 import { PlaceholderModel, FormSchema, ComponentNameEnum, ColProps } from '../types'
 import { isFunction } from '@/utils/is'
 import { firstUpperCase, humpToDash } from '@/utils'
@@ -156,23 +154,3 @@ export const initModel = (schema: FormSchema[], formModel: Recordable) => {
   })
   return model
 }
-
-/**
- * @param slots 插槽
- * @param field 字段名
- * @returns 返回FormIiem插槽
- */
-export const setFormItemSlots = (slots: Slots, field: string): Recordable => {
-  const slotObj: Recordable = {}
-  if (slots[`${field}-error`]) {
-    slotObj['error'] = (...args: any[]) => {
-      return getSlot(slots, `${field}-error`, args)
-    }
-  }
-  if (slots[`${field}-label`]) {
-    slotObj['label'] = (...args: any[]) => {
-      return getSlot(slots, `${field}-label`, args)
-    }
-  }
-  return slotObj
-}

src/components/Form/src/types/index.ts

@@ -53,7 +53,6 @@ type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K
 export type ComponentName = CamelCaseComponentName
 
 export interface InputComponentProps {
-  value?: string | number
   maxlength?: number | string
   minlength?: number | string
   showWordLimit?: boolean
@@ -99,7 +98,6 @@ export interface InputComponentProps {
 }
 
 export interface AutocompleteComponentProps {
-  value?: string
   placeholder?: string
   clearable?: boolean
   disabled?: boolean
@@ -132,7 +130,6 @@ export interface AutocompleteComponentProps {
 }
 
 export interface InputNumberComponentProps {
-  value?: number
   min?: number
   max?: number
   step?: number
@@ -167,7 +164,6 @@ export interface SelectOption {
 }
 
 export interface SelectComponentProps {
-  value?: string | number | boolean | Object
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
@@ -245,7 +241,6 @@ export interface SelectComponentProps {
 }
 
 export interface SelectV2ComponentProps {
-  value?: string | number | boolean | Object
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
@@ -290,7 +285,6 @@ export interface SelectV2ComponentProps {
 }
 
 export interface CascaderComponentProps {
-  value?: string | number | string[] | number[] | any
   options?: Record<string, unknown>[]
   props?: CascaderProps
   size?: ElementPlusSize
@@ -325,7 +319,6 @@ export interface CascaderComponentProps {
 }
 
 export interface SwitchComponentProps {
-  value?: boolean | string | number
   disabled?: boolean
   loading?: boolean
   size?: ElementPlusSize
@@ -347,7 +340,6 @@ export interface SwitchComponentProps {
 }
 
 export interface RateComponentProps {
-  value?: number
   max?: number
   size?: ElementPlusSize
   disabled?: boolean
@@ -375,7 +367,6 @@ export interface RateComponentProps {
 }
 
 export interface ColorPickerComponentProps {
-  value?: string
   disabled?: boolean
   size?: ElementPlusSize
   showAlpha?: boolean
@@ -393,7 +384,6 @@ export interface ColorPickerComponentProps {
 }
 
 export interface TransferComponentProps {
-  value?: any[]
   data?: any[]
   filterable?: boolean
   filterPlaceholder?: string
@@ -444,7 +434,6 @@ export interface RadioOption {
   [key: string]: any
 }
 export interface RadioGroupComponentProps {
-  value?: string | number | boolean
   size?: ElementPlusSize
   disabled?: boolean
   textColor?: string
@@ -472,7 +461,6 @@ export interface RadioGroupComponentProps {
 }
 
 export interface RadioButtonComponentProps {
-  value?: string | number | boolean
   size?: ElementPlusSize
   disabled?: boolean
   textColor?: string
@@ -518,7 +506,6 @@ export interface CheckboxOption {
 }
 
 export interface CheckboxGroupComponentProps {
-  value?: string[] | number[]
   size?: ElementPlusSize
   disabled?: boolean
   min?: number
@@ -547,7 +534,6 @@ export interface CheckboxGroupComponentProps {
 }
 
 export interface DividerComponentProps {
-  value?: number | Array<number>
   min?: number
   max?: number
   disabled?: boolean
@@ -579,7 +565,6 @@ export interface DividerComponentProps {
 }
 
 export interface DatePickerComponentProps {
-  value?: string | Date | number | string[]
   readonly?: boolean
   disabled?: boolean
   size?: ElementPlusSize
@@ -631,7 +616,6 @@ export interface DatePickerComponentProps {
 }
 
 export interface DateTimePickerComponentProps {
-  value?: string | Date | number | string[]
   readonly?: boolean
   disabled?: boolean
   editable?: boolean
@@ -672,7 +656,6 @@ export interface DateTimePickerComponentProps {
 }
 
 export interface TimePickerComponentProps {
-  value?: string | Date | number | [Date, Date] | [number, number] | [string, string]
   readonly?: boolean
   disabled?: boolean
   editable?: boolean
@@ -709,7 +692,6 @@ export interface TimePickerComponentProps {
 }
 
 export interface TimeSelectComponentProps {
-  value?: string
   disabled?: boolean
   editable?: boolean
   clearable?: boolean
@@ -754,8 +736,6 @@ export interface FormSetProps {
   value: any
 }
 
-export type FormValueType = string | number | string[] | number[] | boolean | undefined | null
-
 export interface FormItemProps {
   labelWidth?: string | number
   required?: boolean
@@ -767,6 +747,11 @@ export interface FormItemProps {
   for?: string
   validateStatus?: '' | 'error' | 'validating' | 'success'
   style?: CSSProperties
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+    label?: (...args: any[]) => JSX.Element | null
+    error?: (...args: any[]) => JSX.Element | null
+  }
 }
 
 export interface FormSchema {
@@ -825,7 +810,7 @@ export interface FormSchema {
   /**
    * 初始值
    */
-  value?: FormValueType
+  value?: any
 
   /**
    * 是否隐藏