diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index 453696f..6e3b337 100644 --- 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) { diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index 8cbc98c..7f9a6fa 100644 --- 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] = () => { diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 56effac..1c67748 100644 --- 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 } diff --git a/src/types/form.d.ts b/src/types/form.d.ts index 1c1c26b..b31924d 100644 --- 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 '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 /** * formItem组件属性,具体可以查看element-plus文档 diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index 9a6af1f..9abdabf 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/src/views/Components/Form/DefaultForm.vue @@ -383,9 +383,7 @@ const schema = reactive([ 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([ 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([ 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([ select: handleSelect }, slots: { - default: (_, { item }) => { + default: ({ item }) => { return ( <>
{item?.value}
@@ -549,9 +543,9 @@ const schema = reactive([ 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([ componentProps: { options: options3, slots: { - default: (_, { data, node }) => { + default: ({ data, node }) => { return ( <> {data.label}