types: 修改类型

2023-05-22 17:26:43 +08:00 · 2023-05-22 17:26:43 +08:00 · 7d0476f47c
parent c5b545d2c7
commit 7d0476f47c
5 changed files with 61 additions and 54 deletions
--- a/src/components/Form/src/Form.vue
+++ b/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) {
--- a/src/components/Form/src/helper.ts
+++ b/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] = () => {
--- a/src/types/components.d.ts
+++ b/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
 }
--- a/src/types/form.d.ts
+++ b/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文档
--- a/src/views/Components/Form/DefaultForm.vue
+++ b/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>