wip: Form改造

src/types/components.d.ts

@@ -1,5 +1,13 @@
 import { CSSProperties } from 'vue'
-import { InputProps, AutocompleteProps, InputNumberProps } from 'element-plus'
+import {
+  InputProps,
+  AutocompleteProps,
+  InputNumberProps,
+  CascaderProps,
+  CascaderNode,
+  CascaderValue
+} from 'element-plus'
+import { ElementPlusSize, ElementPlusInfoType } from './elementPlus.d'
 
 export enum ComponentNameEnum {
   RADIO = 'Radio',
@@ -46,7 +54,7 @@ export interface InputComponentProps {
   parser?: (value: string) => string
   showPassword?: boolean
   disabled?: boolean
-  size?: InputProps['size']
+  size?: ElementPlusSize
   prefixIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
   suffixIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
   type?: InputProps['type']
@@ -121,7 +129,7 @@ export interface InputNumberComponentProps {
   step?: number
   stepStrictly?: boolean
   precision?: number
-  size?: InputNumberProps['size']
+  size?: ElementPlusSize
   readonly?: boolean
   disabled?: boolean
   controls?: boolean
@@ -154,7 +162,7 @@ export interface SelectComponentProps {
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
-  size?: InputNumberProps['size']
+  size?: ElementPlusSize
   clearable?: boolean
   collapseTags?: boolean
   collapseTagsTooltip?: number
@@ -230,7 +238,6 @@ export interface SelectComponentProps {
   }
   options?: SelectOption[]
   style?: CSSProperties
-  style?: CSSProperties
 }
 
 export interface SelectV2ComponentProps {
@@ -238,7 +245,7 @@ export interface SelectV2ComponentProps {
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
-  size?: InputNumberProps['size']
+  size?: ElementPlusSize
   clearable?: boolean
   clearIcon?: string | JSX.Element | ((formData: any) => string | JSX.Element)
   collapseTags?: boolean
@@ -278,6 +285,144 @@ export interface SelectV2ComponentProps {
   style?: CSSProperties
 }
 
+export interface CascaderComponentProps {
+  value?: string | number | string[] | number[] | any
+  options?: Record<string, unknown>[]
+  props?: CascaderProps
+  size?: ElementPlusSize
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  showAllLevels?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
+  separator?: string
+  filterable?: boolean
+  filterMethod?: (node: CascaderNode, keyword: string) => boolean
+  debounce?: number
+  beforeFilter?: (value: string) => boolean
+  popperClass?: string
+  teleported?: boolean
+  tagType?: ElementPlusInfoType
+  validateEvent?: boolean
+  on?: {
+    change?: (value: CascaderValue) => void
+    expandChange?: (value: CascaderValue) => void
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    visibleChange?: (value: boolean) => void
+    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)
+  }
+  style?: CSSProperties
+}
+
+export interface SwitchComponentProps {
+  value?: boolean | string | number
+  disabled?: boolean
+  loading?: boolean
+  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)
+  activeText?: string
+  inactiveText?: string
+  activeValue?: boolean | string | number
+  inactiveValue?: boolean | string | number
+  name?: string
+  validateEvent?: boolean
+  beforeChange?: (value: boolean) => boolean | Promise<boolean>
+  on?: {
+    change?: (value: boolean | string | number) => void
+  }
+  style?: CSSProperties
+}
+
+export interface RateComponentProps {
+  value?: number
+  max?: number
+  size?: ElementPlusSize
+  disabled?: boolean
+  allowHalf?: boolean
+  lowThreshold?: number
+  highThreshold?: number
+  colors?: string[] | Record<number, string>
+  voidColor?: string
+  disabledVoidColor?: string
+  icons?: string[] | JSX.Element[] | Record<number, string | JSX.Element>
+  voidIcon?: string | JSX.Element
+  disabledVoidIcon?: string | JSX.Element
+  showText?: boolean
+  showScore?: boolean
+  textColor?: string
+  texts?: string[]
+  scoreTemplate?: string
+  clearable?: boolean
+  id?: string
+  label?: string
+  on?: {
+    change?: (value: number) => void
+  }
+  style?: CSSProperties
+}
+
+export interface ColorPickerComponentProps {
+  value?: string
+  disabled?: boolean
+  size?: ElementPlusSize
+  showAlpha?: boolean
+  colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb' | 'hex' | 'rgb'
+  predefine?: string[]
+  validateEvent?: boolean
+  tabindex?: number | string
+  label?: string
+  id?: string
+  on?: {
+    change?: (value: string) => void
+    activeChange?: (value: string) => void
+  }
+  style?: CSSProperties
+}
+
+export interface TransferComponentProps {
+  value?: any[]
+  data?: Array<{ key; label; disabled }>
+  filterable?: boolean
+  filterPlaceholder?: string
+  filterMethod?: (query: string, item: any) => boolean
+  targetOrder?: string
+  titles?: string[]
+  buttonTexts?: string[]
+  renderContent?: (h: any, option: any) => JSX.Element
+  format?: {
+    noChecked?: string
+    hasChecked?: string
+  }
+  props?: {
+    label?: string
+    key?: string
+    disabled?: string
+  }
+  leftDefaultChecked?: any[]
+  rightDefaultChecked?: any[]
+  validateEvent?: boolean
+  on?: {
+    change?: (value: any[]) => void
+    leftCheckChange?: (value: any[]) => void
+    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
+  }
+  style?: CSSProperties
+}
+
 export interface ColProps {
   span?: number
   xs?: number

src/types/form.d.ts

@@ -7,7 +7,12 @@ import {
   AutocompleteComponentProps,
   InputNumberComponentProps,
   SelectComponentProps,
-  SelectV2ComponentProps
+  SelectV2ComponentProps,
+  CascaderComponentProps,
+  SwitchComponentProps,
+  RateComponentProps,
+  ColorPickerComponentProps,
+  TransferComponentProps
 } from '@/types/components'
 import { FormValueType, FormValueType } from '@/types/form'
 import type { AxiosPromise } from 'axios'
@@ -60,6 +65,11 @@ export interface FormSchema {
     | InputNumberComponentProps
     | SelectComponentProps
     | SelectV2ComponentProps
+    | CascaderComponentProps
+    | SwitchComponentProps
+    | RateComponentProps
+    | ColorPickerComponentProps
+    | TransferComponentProps
 
   /**
    * formItem组件属性，具体可以查看element-plus文档

src/views/Components/Form/DefaultForm.vue

@@ -61,13 +61,13 @@ onMounted(() => {
 })
 
 const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
-const options = ref<ComponentOptions[]>(
+const options = ref(
   Array.from({ length: 1000 }).map((_, idx) => ({
     value: `Option ${idx + 1}`,
     label: `${initials[idx % 10]}${idx}`
   }))
 )
-const options2 = ref<ComponentOptions[]>(
+const options2 = ref(
   Array.from({ length: 10 }).map((_, idx) => {
     const label = idx + 1
     return {
@@ -81,7 +81,7 @@ const options2 = ref<ComponentOptions[]>(
   })
 )
 
-const options3: ComponentOptions[] = [
+const options3 = [
   {
     value: 'guide',
     label: 'Guide',
@@ -756,88 +756,98 @@ const schema = reactive<FormSchema[]>([
     field: 'field23',
     label: t('formDemo.cascader'),
     component: 'Divider'
+  },
+  {
+    field: 'field24',
+    label: t('formDemo.default'),
+    component: 'Cascader',
+    componentProps: {
+      options: options3,
+      props: {
+        multiple: true
+      }
+    }
+  },
+  {
+    field: 'field25',
+    label: t('formDemo.slot'),
+    component: 'Cascader',
+    componentProps: {
+      options: options3,
+      slots: {
+        default: (_, { data, node }) => {
+          return (
+            <>
+              <span>{data.label}</span>
+              {!node.isLeaf ? <span> ({data.children.length}) </span> : null}
+            </>
+          )
+        }
+      }
+    }
+  },
+  {
+    field: 'field26',
+    label: t('formDemo.switch'),
+    component: 'Divider'
+  },
+  {
+    field: 'field27',
+    label: t('formDemo.default'),
+    component: 'Switch',
+    value: false
+  },
+  {
+    field: 'field28',
+    label: t('formDemo.icon'),
+    component: 'Switch',
+    value: false,
+    componentProps: {
+      activeIcon: useIcon({ icon: 'ep:check' }),
+      inactiveIcon: useIcon({ icon: 'ep:close' })
+    }
+  },
+  {
+    field: 'field29',
+    label: t('formDemo.rate'),
+    component: 'Divider'
+  },
+  {
+    field: 'field30',
+    label: t('formDemo.default'),
+    component: 'Rate',
+    value: 0
+  },
+  {
+    field: 'field31',
+    label: t('formDemo.icon'),
+    component: 'Rate',
+    value: null,
+    componentProps: {
+      voidIcon: useIcon({ icon: 'ep:chat-round' }),
+      icons: [
+        useIcon({ icon: 'ep:chat-round' }),
+        useIcon({ icon: 'ep:chat-line-round' }),
+        useIcon({ icon: 'ep:chat-dot-round' })
+      ]
+    }
+  },
+  {
+    field: 'field32',
+    label: t('formDemo.colorPicker'),
+    component: 'Divider'
+  },
+  {
+    field: 'field33',
+    label: t('formDemo.default'),
+    component: 'ColorPicker'
+  },
+  {
+    field: 'field34',
+    label: t('formDemo.transfer'),
+    component: 'Divider'
   }
   // {
-  //   field: 'field24',
-  //   label: t('formDemo.default'),
-  //   component: 'Cascader',
-  //   componentProps: {
-  //     options: options3
-  //   }
-  // },
-  // {
-  //   field: 'field25',
-  //   label: t('formDemo.slot'),
-  //   component: 'Cascader',
-  //   componentProps: {
-  //     options: options3,
-  //     slots: {
-  //       default: true
-  //     }
-  //   }
-  // },
-  // {
-  //   field: 'field26',
-  //   label: t('formDemo.switch'),
-  //   component: 'Divider'
-  // },
-  // {
-  //   field: 'field27',
-  //   label: t('formDemo.default'),
-  //   component: 'Switch',
-  //   value: false
-  // },
-  // {
-  //   field: 'field28',
-  //   label: t('formDemo.icon'),
-  //   component: 'Switch',
-  //   value: false,
-  //   componentProps: {
-  //     activeIcon: useIcon({ icon: 'ep:check' }),
-  //     inactiveIcon: useIcon({ icon: 'ep:close' })
-  //   }
-  // },
-  // {
-  //   field: 'field29',
-  //   label: t('formDemo.rate'),
-  //   component: 'Divider'
-  // },
-  // {
-  //   field: 'field30',
-  //   label: t('formDemo.default'),
-  //   component: 'Rate',
-  //   value: null
-  // },
-  // {
-  //   field: 'field31',
-  //   label: t('formDemo.icon'),
-  //   component: 'Rate',
-  //   value: null,
-  //   componentProps: {
-  //     voidIcon: useIcon({ icon: 'ep:chat-round' }),
-  //     icons: [
-  //       useIcon({ icon: 'ep:chat-round' }),
-  //       useIcon({ icon: 'ep:chat-line-round' }),
-  //       useIcon({ icon: 'ep:chat-dot-round' })
-  //     ]
-  //   }
-  // },
-  // {
-  //   field: 'field32',
-  //   label: t('formDemo.colorPicker'),
-  //   component: 'Divider'
-  // },
-  // {
-  //   field: 'field33',
-  //   label: t('formDemo.default'),
-  //   component: 'ColorPicker'
-  // },
-  // {
-  //   field: 'field34',
-  //   label: t('formDemo.transfer'),
-  //   component: 'Divider'
-  // },
-  // {
   //   field: 'field35',
   //   label: t('formDemo.default'),
   //   component: 'Transfer',