diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 00994bf..56effac 100644 --- a/src/types/components.d.ts +++ b/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[] + 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 + 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 + voidColor?: string + disabledVoidColor?: string + icons?: string[] | JSX.Element[] | Record + 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 diff --git a/src/types/form.d.ts b/src/types/form.d.ts index ca09bde..1c1c26b 100644 --- a/src/types/form.d.ts +++ b/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文档 diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index a559040..9a6af1f 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/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( +const options = ref( Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}` })) ) -const options2 = ref( +const options2 = ref( Array.from({ length: 10 }).map((_, idx) => { const label = idx + 1 return { @@ -81,7 +81,7 @@ const options2 = ref( }) ) -const options3: ComponentOptions[] = [ +const options3 = [ { value: 'guide', label: 'Guide', @@ -756,88 +756,98 @@ const schema = reactive([ 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 ( + <> + {data.label} + {!node.isLeaf ? ({data.children.length}) : 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',