diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index a802d46..4129e7c 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -72,13 +72,11 @@ export const setGridProp = (col: ColProps = {}): ColProps => { * @returns 默认添加 clearable 属性 */ export const setComponentProps = (item: FormSchema): Recordable => { - const notNeedClearable = ['ColorPicker'] - const componentProps: Recordable = notNeedClearable.includes(item.component as string) - ? { ...item.componentProps } - : { - clearable: true, - ...item.componentProps - } + // const notNeedClearable = ['ColorPicker'] + const componentProps = { + clearable: true, + ...item.componentProps + } // 需要删除额外的属性 delete componentProps?.slots return componentProps diff --git a/src/permission.ts b/src/permission.ts index 98f99a2..0113905 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -26,7 +26,7 @@ const whiteList = ['/login'] // 不重定向白名单 router.beforeEach(async (to, from, next) => { start() loadStart() - if (wsCache.get(appStore.getUserInfo)) { + if (!wsCache.get(appStore.getUserInfo)) { if (to.path === '/login') { next({ path: '/' }) } else { diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 45523f9..c9d0f02 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -1,27 +1,85 @@ -export type ComponentName = - | 'Radio' - | 'RadioButton' - | 'Checkbox' - | 'CheckboxButton' - | 'Input' - | 'Autocomplete' - | 'InputNumber' - | 'Select' - | 'Cascader' - | 'Switch' - | 'Slider' - | 'TimePicker' - | 'DatePicker' - | 'Rate' - | 'ColorPicker' - | 'Transfer' - | 'Divider' - | 'TimeSelect' - | 'SelectV2' - | 'InputPassword' - | 'Editor' +import { CSSProperties } from 'vue' +import { InputProps } from 'element-plus' -export type ColProps = { +export enum ComponentNameEnum { + RADIO = 'Radio', + RADIO_BUTTON = 'RadioButton', + CHECKBOX = 'Checkbox', + CHECKBOX_BUTTON = 'CheckboxButton', + INPUT = 'Input', + AUTOCOMPLETE = 'Autocomplete', + INPUT_NUMBER = 'InputNumber', + SELECT = 'Select', + CASCADER = 'Cascader', + SWITCH = 'Switch', + SLIDER = 'Slider', + TIME_PICKER = 'TimePicker', + DATE_PICKER = 'DatePicker', + RATE = 'Rate', + COLOR_PICKER = 'ColorPicker', + TRANSFER = 'Transfer', + DIVIDER = 'Divider', + TIME_SELECT = 'TimeSelect', + SELECT_V2 = 'SelectV2', + INPUT_PASSWORD = 'InputPassword', + EDITOR = 'Editor' +} + +export interface InputComponentProps { + value?: string | number + maxlength?: number | string + minlength?: number | string + showWordLimit?: boolean + placeholder?: string + clearable?: boolean + formatter?: (value: string | number) => string + parser?: (value: string) => string + showPassword?: boolean + disabled?: boolean + size?: InputProps['size'] + prefixIcon?: string | JSX.Element | ((data: T | any) => string | JSX.Element) + suffixIcon?: string | JSX.Element | ((data: T | any) => string | JSX.Element) + rows?: number + autosize?: boolean | { Pows?: numer; maxRows?: number } + autocomplete?: string + name?: string + readonly?: boolean + max?: number | string + min?: number | string + step?: number | string + resize?: InputProps['resize'] + autofocus?: boolean + form?: string + label?: string + tabindex?: string | number + validateEvent?: boolean + inputStyle?: string | CSSProperties | CSSProperties[] | string[] + on?: { + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + change?: (value: string | number) => void + clear?: () => void + input?: (value: string | number) => void + } + slots?: { + prefix?: JSX.Element | ((data: T | any) => JSX.Element) + suffix?: JSX.Element | ((data: T | any) => JSX.Element) + prepend?: JSX.Element | ((data: T | any) => JSX.Element) + append?: JSX.Element | ((data: T | any) => JSX.Element) + } +} + +type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K + ? K extends string + ? K extends `${infer A}_${infer B}` + ? `${Capitalize>}${Capitalize>}` + : Capitalize> + : never + : never + +export type ComponentName = CamelCaseComponentName + +export interface ColProps { span?: number xs?: number sm?: number @@ -31,22 +89,22 @@ export type ColProps = { tag?: string } -export type ComponentOptions = { +export interface ComponentOptions extends Recordable { label?: string value?: FormValueType disabled?: boolean key?: string | number children?: ComponentOptions[] options?: ComponentOptions[] -} & Recordable +} -export type ComponentOptionsAlias = { +export interface ComponentOptionsAlias { labelField?: string valueField?: string } -export type ComponentProps = { +export interface ComponentProps extends Recordable { optionsAlias?: ComponentOptionsAlias options?: ComponentOptions[] optionsSlot?: boolean -} & Recordable +} diff --git a/src/types/form.d.ts b/src/types/form.d.ts index 8673ec7..ee38385 100644 --- a/src/types/form.d.ts +++ b/src/types/form.d.ts @@ -1,5 +1,11 @@ import type { CSSProperties } from 'vue' -import { ColProps, ComponentProps, ComponentName } from '@/types/components' +import { + ColProps, + ComponentProps, + ComponentName, + ComponentNameEnum, + InputComponentProps +} from '@/types/components' import { FormValueType, FormValueType } from '@/types/form' import type { AxiosPromise } from 'axios' @@ -21,7 +27,7 @@ export type FormItemProps = { style?: CSSProperties } -export type FormSchema = { +export interface FormSchema { // 唯一值 field: string // 标题 @@ -31,7 +37,12 @@ export type FormSchema = { // col组件属性 colProps?: ColProps // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档 - componentProps?: { slots?: Recordable } & ComponentProps + // componentProps?: { slots?: Recordable } & ComponentProps + + /** + * 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档 + */ + componentProps?: InputComponentProps // formItem组件属性 formItemProps?: FormItemProps // 渲染的组件 diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index 862dcf4..d01d5c5 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/src/views/Components/Form/DefaultForm.vue @@ -1,6 +1,6 @@