types: 修改类型

src/components/Form/src/Form.vue

@@ -176,7 +176,7 @@ export default defineComponent({
       // const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
       const componentSlots = (item?.componentProps as any)?.slots || {}
       const slotsMap: Recordable = {
-        ...setItemComponentSlots(unref(formModel), componentSlots)
+        ...setItemComponentSlots(componentSlots)
       }
       // 如果是select组件，并且没有自定义模板，自动渲染options
       if (item.component === ComponentNameEnum.SELECT) {

src/components/Form/src/helper.ts

@@ -118,13 +118,13 @@ export const setComponentProps = (item: FormSchema): Recordable => {
  * @param formModel 表单数据
  * @param slotsProps 插槽属性
  */
-export const setItemComponentSlots = (formModel: any, slotsProps: Recordable = {}): Recordable => {
+export const setItemComponentSlots = (slotsProps: Recordable = {}): Recordable => {
   const slotObj: Recordable = {}
   for (const key in slotsProps) {
     if (slotsProps[key]) {
       if (isFunction(slotsProps[key])) {
         slotObj[key] = (...args: any[]) => {
-          return slotsProps[key]?.(formModel, ...args)
+          return slotsProps[key]?.(...args)
         }
       } else {
         slotObj[key] = () => {

src/types/components.d.ts

@@ -55,8 +55,8 @@ export interface InputComponentProps {
   showPassword?: boolean
   disabled?: boolean
   size?: ElementPlusSize
-  prefixIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
-  suffixIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
+  prefixIcon?: string | JSX.Element
+  suffixIcon?: string | JSX.Element
   type?: InputProps['type']
   rows?: number
   autosize?: boolean | { Pows?: numer; maxRows?: number }
@@ -81,10 +81,10 @@ export interface InputComponentProps {
     input?: (value: string | number) => void
   }
   slots?: {
-    prefix?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    suffix?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    prepend?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    append?: JSX.Element | null | ((formData: any) => JSX.Element | null)
+    prefix?: (...args: any[]) => JSX.Element | null
+    suffix?: (...args: any[]) => JSX.Element | null
+    prepend?: (...args: any[]) => JSX.Element | null
+    append?: (...args: any[]) => JSX.Element | null
   }
   style?: CSSProperties
 }
@@ -113,11 +113,11 @@ export interface AutocompleteComponentProps {
     change?: (value: string | number) => void
   }
   slots?: {
-    default?: JSX.Element | null | ((formData: any, ...args: any[]) => JSX.Element | null)
-    prefix?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    suffix?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    prepend?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    append?: JSX.Element | null | ((formData: any) => JSX.Element | null)
+    default?: (...args: any[]) => JSX.Element | null
+    prefix?: (...args: any[]) => JSX.Element | null
+    suffix?: (...args: any[]) => JSX.Element | null
+    prepend?: (...args: any[]) => JSX.Element | null
+    append?: (...args: any[]) => JSX.Element | null
   }
   style?: CSSProperties
 }
@@ -188,9 +188,9 @@ export interface SelectComponentProps {
   teleported?: boolean
   persistent?: boolean
   automaticDropdown?: boolean
-  clearIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
+  clearIcon?: string | JSX.Element | null
   fitInputWidth?: boolean
-  suffixIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
+  suffixIcon?: string | JSX.Element | null
   tagType?: 'success' | 'info' | 'warning' | 'danger'
   validateEvent?: boolean
   placement?:
@@ -233,8 +233,8 @@ export interface SelectComponentProps {
     default?: (options: SelectOption[]) => JSX.Element[] | null
     optionGroupDefault?: (item: SelectOption) => JSX.Element
     optionDefault?: (option: SelectOption) => JSX.Element | null
-    prefix?: JSX.Element | null | ((formData: any) => JSX.Element | null)
-    empty?: JSX.Element | null | ((formData: any) => JSX.Element | null)
+    prefix?: (...args: any[]) => JSX.Element | null
+    empty?: (...args: any[]) => JSX.Element | null
   }
   options?: SelectOption[]
   style?: CSSProperties
@@ -247,7 +247,7 @@ export interface SelectV2ComponentProps {
   valueKey?: string
   size?: ElementPlusSize
   clearable?: boolean
-  clearIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
+  clearIcon?: string | JSX.Element | null
   collapseTags?: boolean
   multipleLimit?: number
   name?: string
@@ -314,8 +314,8 @@ export interface CascaderComponentProps {
     removeTag?: (value: CascaderNode['valueByOption']) => void
   }
   slots?: {
-    default?: (formData: any, { node: any, data: any }) => JSX.Element | null
-    empty?: JSX.Element | null | ((formData: any) => JSX.Element | null)
+    default?: (...args: any[]) => JSX.Element | null
+    empty?: (...args: any[]) => JSX.Element | null
   }
   style?: CSSProperties
 }
@@ -327,8 +327,8 @@ export interface SwitchComponentProps {
   size?: ElementPlusSize
   width?: number | string
   inlinePrompt?: boolean
-  activeIcon?: string | JSX.Element | null | ((formData: any) => string | JSX.Element | null)
-  inactiveIcon?: string | JSX.Element | null | ((formData: any) => string | JSX.Element | null)
+  activeIcon?: string | JSX.Element | null
+  inactiveIcon?: string | JSX.Element | null
   activeText?: string
   inactiveText?: string
   activeValue?: boolean | string | number
@@ -416,9 +416,9 @@ export interface TransferComponentProps {
     rightCheckChange?: (value: any[]) => void
   }
   slots?: {
-    default?: (formData: any, data: { option: any }) => JSX.Element | null
-    leftFooter?: (formData: any) => JSX.Element | null
-    rightFooter?: (formData: any) => JSX.Element | null
+    default?: (...args: any[]) => JSX.Element | null
+    leftFooter?: (...args: any[]) => JSX.Element | null
+    rightFooter?: (...args: any[]) => JSX.Element | null
   }
   style?: CSSProperties
 }

src/types/form.d.ts

@@ -35,6 +35,29 @@ export type FormItemProps = {
   style?: CSSProperties
 }
 
+// 定义联合类型和条件类型
+type ComponentPropsForComponent<T extends ComponentName> = T extends 'input'
+  ? InputComponentProps
+  : T extends 'autocomplete'
+  ? AutocompleteComponentProps
+  : T extends 'inputNumber'
+  ? InputNumberComponentProps
+  : T extends 'select'
+  ? SelectComponentProps
+  : T extends 'selectV2'
+  ? SelectV2ComponentProps
+  : T extends 'cascader'
+  ? CascaderComponentProps
+  : T extends 'switch'
+  ? SwitchComponentProps
+  : T extends 'rate'
+  ? RateComponentProps
+  : T extends 'colorPicker'
+  ? ColorPickerComponentProps
+  : T extends 'transfer'
+  ? TransferComponentProps
+  : any
+
 export interface FormSchema {
   /**
    * 唯一标识
@@ -59,17 +82,7 @@ export interface FormSchema {
   /**
    * 表单组件属性，具体可以查看element-plus文档
    */
-  componentProps?:
-    | InputComponentProps
-    | AutocompleteComponentProps
-    | InputNumberComponentProps
-    | SelectComponentProps
-    | SelectV2ComponentProps
-    | CascaderComponentProps
-    | SwitchComponentProps
-    | RateComponentProps
-    | ColorPickerComponentProps
-    | TransferComponentProps
+  componentProps?: ComponentPropsForComponent<ComponentName>
 
   /**
    * formItem组件属性，具体可以查看element-plus文档

src/views/Components/Form/DefaultForm.vue

@@ -383,9 +383,7 @@ const schema = reactive<FormSchema[]>([
     component: 'Input',
     componentProps: {
       suffixIcon: useIcon({ icon: 'ep:calendar' }),
-      prefixIcon: () => {
-        return unref(toggle) ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' })
-      }
+      prefixIcon: useIcon({ icon: 'ep:share' })
     }
   },
   {
@@ -394,12 +392,10 @@ const schema = reactive<FormSchema[]>([
     component: 'Input',
     componentProps: {
       slots: {
-        suffix: (data: any) => {
-          return unref(toggle) && data.field4
-            ? useIcon({ icon: 'ep:calendar' })
-            : useIcon({ icon: 'ep:share' })
+        suffix: () => {
+          return useIcon({ icon: 'ep:share' })
         },
-        prefix: useIcon({ icon: 'ep:calendar' })
+        prefix: () => useIcon({ icon: 'ep:calendar' })
       }
     }
   },
@@ -409,10 +405,8 @@ const schema = reactive<FormSchema[]>([
     component: 'Input',
     componentProps: {
       slots: {
-        prepend: useIcon({ icon: 'ep:calendar' }),
-        append: (data: any) => {
-          return data.field5 ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' })
-        }
+        prepend: () => useIcon({ icon: 'ep:calendar' }),
+        append: () => useIcon({ icon: 'ep:share' })
       }
     }
   },
@@ -459,7 +453,7 @@ const schema = reactive<FormSchema[]>([
         select: handleSelect
       },
       slots: {
-        default: (_, { item }) => {
+        default: ({ item }) => {
           return (
             <>
               <div class="value">{item?.value}</div>
@@ -549,9 +543,9 @@ const schema = reactive<FormSchema[]>([
             return null
           }
         },
-        prefix: useIcon({ icon: 'ep:calendar' }),
-        empty: (data: any) => {
-          return data.field5 ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' })
+        prefix: () => useIcon({ icon: 'ep:calendar' }),
+        empty: () => {
+          return useIcon({ icon: 'ep:share' })
         }
       }
     }
@@ -775,7 +769,7 @@ const schema = reactive<FormSchema[]>([
     componentProps: {
       options: options3,
       slots: {
-        default: (_, { data, node }) => {
+        default: ({ data, node }) => {
           return (
             <>
               <span>{data.label}</span>