From 46b35e48b3e7876c74159625b5149ef663396f5c Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Wed, 31 May 2023 16:24:28 +0800 Subject: [PATCH] =?UTF-8?q?types:=20=E8=BF=81=E7=A7=BBtypes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfigGlobal/src/ConfigGlobal.vue | 1 - .../ConfigGlobal/src/types.ts} | 1 - .../ContextMenu/src/ContextMenu.vue | 2 +- .../ContextMenu/src/types.ts} | 0 .../Descriptions/src/Descriptions.vue | 2 +- .../Descriptions/src/types.ts} | 0 src/components/Form/index.ts | 2 +- src/components/Form/src/Form copy.vue | 302 ----- src/components/Form/src/Form.vue | 56 +- src/components/Form/src/componentMap.ts | 8 +- .../Form/src/components/useRenderCheckbox.tsx | 22 +- .../Form/src/components/useRenderRadio.tsx | 3 +- .../Form/src/components/useRenderSelect.tsx | 3 +- src/components/Form/src/helper.ts | 7 +- src/components/Form/src/types.ts | 822 ++++++++++++ src/hooks/web/useConfigGlobal.ts | 2 +- src/types/components.d.ts | 590 --------- src/types/elementPlus.d.ts | 3 - src/types/form.d.ts | 106 -- src/types/{icon.d.ts => icon.ts} | 0 src/types/{infoTip.d.ts => infoTip.ts} | 0 src/types/layout.d.ts | 1 - ...{localeDropdown.d.ts => localeDropdown.ts} | 0 src/types/{qrcode.d.ts => qrcode.ts} | 0 src/types/{table.d.ts => table.ts} | 0 src/types/theme.d.ts | 16 - src/types/theme.ts | 16 + .../Components/Form/DefaultForm copy.vue | 1136 ----------------- src/views/Components/Form/DefaultForm.vue | 641 ++++------ types/global.d.ts | 6 + 30 files changed, 1168 insertions(+), 2580 deletions(-) rename src/{types/configGlobal.d.ts => components/ConfigGlobal/src/types.ts} (57%) rename src/{types/contextMenu.d.ts => components/ContextMenu/src/types.ts} (100%) rename src/{types/descriptions.d.ts => components/Descriptions/src/types.ts} (100%) delete mode 100644 src/components/Form/src/Form copy.vue delete mode 100644 src/types/components.d.ts delete mode 100644 src/types/elementPlus.d.ts delete mode 100644 src/types/form.d.ts rename src/types/{icon.d.ts => icon.ts} (100%) rename src/types/{infoTip.d.ts => infoTip.ts} (100%) delete mode 100644 src/types/layout.d.ts rename src/types/{localeDropdown.d.ts => localeDropdown.ts} (100%) rename src/types/{qrcode.d.ts => qrcode.ts} (100%) rename src/types/{table.d.ts => table.ts} (100%) delete mode 100644 src/types/theme.d.ts create mode 100644 src/types/theme.ts delete mode 100644 src/views/Components/Form/DefaultForm copy.vue diff --git a/src/components/ConfigGlobal/src/ConfigGlobal.vue b/src/components/ConfigGlobal/src/ConfigGlobal.vue index 0a55f1523..4594ebd6f 100644 --- a/src/components/ConfigGlobal/src/ConfigGlobal.vue +++ b/src/components/ConfigGlobal/src/ConfigGlobal.vue @@ -7,7 +7,6 @@ import { useWindowSize } from '@vueuse/core' import { useAppStore } from '@/store/modules/app' import { setCssVar } from '@/utils' import { useDesign } from '@/hooks/web/useDesign' -import { ElementPlusSize } from '@/types/elementPlus' const { variables } = useDesign() diff --git a/src/types/configGlobal.d.ts b/src/components/ConfigGlobal/src/types.ts similarity index 57% rename from src/types/configGlobal.d.ts rename to src/components/ConfigGlobal/src/types.ts index f6d7b3c39..a77893a8c 100644 --- a/src/types/configGlobal.d.ts +++ b/src/components/ConfigGlobal/src/types.ts @@ -1,4 +1,3 @@ -import { ElementPlusSize } from './elementPlus' export interface ConfigGlobalTypes { size?: ElementPlusSize } diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue index 5e77307e1..ddba8bea7 100644 --- a/src/components/ContextMenu/src/ContextMenu.vue +++ b/src/components/ContextMenu/src/ContextMenu.vue @@ -4,7 +4,7 @@ import { PropType, ref } from 'vue' import { useI18n } from '@/hooks/web/useI18n' import { useDesign } from '@/hooks/web/useDesign' import type { RouteLocationNormalizedLoaded } from 'vue-router' -import { contextMenuSchema } from '../../../types/contextMenu' +import { contextMenuSchema } from './types' const { getPrefixCls } = useDesign() const prefixCls = getPrefixCls('context-menu') diff --git a/src/types/contextMenu.d.ts b/src/components/ContextMenu/src/types.ts similarity index 100% rename from src/types/contextMenu.d.ts rename to src/components/ContextMenu/src/types.ts diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue index d0fbf5d4c..a9948d1a3 100644 --- a/src/components/Descriptions/src/Descriptions.vue +++ b/src/components/Descriptions/src/Descriptions.vue @@ -4,7 +4,7 @@ import { useDesign } from '@/hooks/web/useDesign' import { propTypes } from '@/utils/propTypes' import { ref, unref, PropType, computed, useAttrs, useSlots } from 'vue' import { useAppStore } from '@/store/modules/app' -import { DescriptionsSchema } from '@/types/descriptions' +import { DescriptionsSchema } from './types' const appStore = useAppStore() diff --git a/src/types/descriptions.d.ts b/src/components/Descriptions/src/types.ts similarity index 100% rename from src/types/descriptions.d.ts rename to src/components/Descriptions/src/types.ts diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts index 484c7a22d..82c59ef97 100644 --- a/src/components/Form/index.ts +++ b/src/components/Form/index.ts @@ -1,6 +1,6 @@ import Form from './src/Form.vue' import { ElForm } from 'element-plus' -import { FormSchema, FormSetPropsType } from '@/types/form' +import { FormSchema, FormSetPropsType } from './src/types' export interface FormExpose { setValues: (data: Recordable) => void diff --git a/src/components/Form/src/Form copy.vue b/src/components/Form/src/Form copy.vue deleted file mode 100644 index 94fe84868..000000000 --- a/src/components/Form/src/Form copy.vue +++ /dev/null @@ -1,302 +0,0 @@ - - - diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index 0aeb8e20b..15d9c8f70 100644 --- a/src/components/Form/src/Form.vue +++ b/src/components/Form/src/Form.vue @@ -20,14 +20,14 @@ import { findIndex } from '@/utils' import { set } from 'lodash-es' import { FormProps } from './types' import { Icon } from '@/components/Icon' -import { FormSchema, FormSetPropsType } from '@/types/form' import { + FormSchema, + FormSetPropsType, ComponentNameEnum, SelectComponentProps, - SelectOption, - RadioComponentProps, - CheckboxComponentProps -} from '@/types/components.d' + RadioGroupComponentProps, + CheckboxGroupComponentProps +} from './types' const { renderSelectOptions } = useRenderSelect() const { renderRadioOptions } = useRenderRadio() @@ -230,36 +230,6 @@ export default defineComponent({ const { autoSetPlaceholder } = unref(getProps) - // 需要特殊处理的组件 - const specialComponents = [ComponentNameEnum.RADIO, ComponentNameEnum.CHECKBOX] - - if (specialComponents.findIndex((v) => v === item.component) !== -1) { - const componentProps = - item.component === ComponentNameEnum.RADIO - ? (item.componentProps as RadioComponentProps) - : (item.componentProps as CheckboxComponentProps) - - const valueAlias = componentProps?.props?.value || 'value' - const labelAlias = componentProps?.props?.label || 'label' - const disabledAlias = componentProps?.props?.disabled || 'disabled' - return componentProps?.options?.map((v) => { - return ( - - {() => - componentProps?.slots?.default - ? componentProps?.slots?.default({ option: v }) - : v[labelAlias] - } - - ) - }) - } - const componentSlots = (item?.componentProps as any)?.slots || {} const slotsMap: Recordable = { ...setItemComponentSlots(componentSlots) @@ -291,7 +261,21 @@ export default defineComponent({ ? () => renderRadioOptions(item) : () => { return componentSlots.default( - unref((item?.componentProps as RadioComponentProps)?.options) + unref((item?.componentProps as CheckboxGroupComponentProps)?.options) + ) + } + } + + // 多选框组和按钮样式 + if ( + item.component === ComponentNameEnum.CHECKBOX_GROUP || + item.component === ComponentNameEnum.CHECKBOX_BUTTON + ) { + slotsMap.default = !componentSlots.default + ? () => renderCheckboxOptions(item) + : () => { + return componentSlots.default( + unref((item?.componentProps as RadioGroupComponentProps)?.options) ) } } diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 2c48f60f1..772019ec3 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -16,19 +16,15 @@ import { ElTimeSelect, ElTransfer, ElAutocomplete, - ElDivider, - ElRadio, - ElCheckbox + ElDivider } from 'element-plus' import { InputPassword } from '@/components/InputPassword' import { Editor } from '@/components/Editor' -import { ComponentName } from '@/types/components' +import { ComponentName } from './types' const componentMap: Recordable = { - Radio: ElRadio, RadioGroup: ElRadioGroup, RadioButton: ElRadioGroup, - Checkbox: ElCheckbox, CheckboxGroup: ElCheckboxGroup, CheckboxButton: ElCheckboxGroup, Input: ElInput, diff --git a/src/components/Form/src/components/useRenderCheckbox.tsx b/src/components/Form/src/components/useRenderCheckbox.tsx index 16adecfbb..adbc0a793 100644 --- a/src/components/Form/src/components/useRenderCheckbox.tsx +++ b/src/components/Form/src/components/useRenderCheckbox.tsx @@ -1,19 +1,25 @@ -import { FormSchema } from '@/types/form' +import { FormSchema, ComponentNameEnum, CheckboxGroupComponentProps } from '../types' import { ElCheckbox, ElCheckboxButton } from 'element-plus' import { defineComponent } from 'vue' export const useRenderCheckbox = () => { const renderCheckboxOptions = (item: FormSchema) => { // 如果有别名，就取别名 - const labelAlias = item?.componentProps?.optionsAlias?.labelField - const valueAlias = item?.componentProps?.optionsAlias?.valueField - const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType< - typeof defineComponent - > - return item?.componentProps?.options?.map((option) => { + const componentProps = item.componentProps as CheckboxGroupComponentProps + const valueAlias = componentProps?.props?.value || 'value' + const labelAlias = componentProps?.props?.label || 'label' + const disabledAlias = componentProps?.props?.disabled || 'disabled' + const Com = ( + item.component === ComponentNameEnum.CHECKBOX_GROUP ? ElCheckbox : ElCheckboxButton + ) as ReturnType + return componentProps?.options?.map((option) => { const { value, ...other } = option return ( - + {option[labelAlias || 'label']} ) diff --git a/src/components/Form/src/components/useRenderRadio.tsx b/src/components/Form/src/components/useRenderRadio.tsx index 0d2a09811..67879f5db 100644 --- a/src/components/Form/src/components/useRenderRadio.tsx +++ b/src/components/Form/src/components/useRenderRadio.tsx @@ -1,7 +1,6 @@ -import { FormSchema } from '@/types/form' +import { FormSchema, ComponentNameEnum, RadioGroupComponentProps } from '../types' import { ElRadio, ElRadioButton } from 'element-plus' import { defineComponent } from 'vue' -import { ComponentNameEnum, RadioGroupComponentProps } from '@/types/components.d' export const useRenderRadio = () => { const renderRadioOptions = (item: FormSchema) => { diff --git a/src/components/Form/src/components/useRenderSelect.tsx b/src/components/Form/src/components/useRenderSelect.tsx index 84e327a03..63a0dc7ff 100644 --- a/src/components/Form/src/components/useRenderSelect.tsx +++ b/src/components/Form/src/components/useRenderSelect.tsx @@ -1,6 +1,5 @@ import { ElOption, ElOptionGroup } from 'element-plus' -import { FormSchema } from '@/types/form' -import { SelectComponentProps, SelectOption } from '@/types/components' +import { FormSchema, SelectComponentProps, SelectOption } from '../types' export const useRenderSelect = () => { // 渲染 select options diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index 85efd8e72..4200da295 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -1,9 +1,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { unref, type Slots } from 'vue' import { getSlot } from '@/utils/tsxHelper' -import { PlaceholderMoel } from './types' -import { FormSchema } from '@/types/form.d' -import { ColProps, ComponentNameEnum } from '@/types/components.d' +import { PlaceholderMoel, FormSchema, ComponentNameEnum, ColProps } from './types' import { isFunction } from '@/utils/is' import { firstUpperCase, humpToDash } from '@/utils' @@ -39,7 +37,8 @@ export const setTextPlaceholder = (schema: FormSchema): PlaceholderMoel => { const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange'] if ( twoTextMap.includes( - (schema?.componentProps?.type || schema?.componentProps?.isRange) as string + ((schema?.componentProps as any)?.type || + (schema?.componentProps as any)?.isRange) as string ) ) { return { diff --git a/src/components/Form/src/types.ts b/src/components/Form/src/types.ts index 92a49d850..4ed0c3dfe 100644 --- a/src/components/Form/src/types.ts +++ b/src/components/Form/src/types.ts @@ -1,4 +1,13 @@ import { FormSchema } from '@/types/form' +import { CSSProperties, VNodeProps, VNode } from 'vue' +import { + InputProps, + AutocompleteProps, + InputNumberProps, + CascaderProps, + CascaderNode, + CascaderValue +} from 'element-plus' export interface PlaceholderMoel { placeholder?: string @@ -15,3 +24,816 @@ export type FormProps = { isCustom?: boolean labelWidth?: string | number } & Recordable + +export enum ComponentNameEnum { + RADIO_GROUP = 'RadioGroup', + RADIO_BUTTON = 'RadioButton', + CHECKBOX_GROUP = 'CheckboxGroup', + 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' +} + +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 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?: ElementPlusSize + prefixIcon?: string | JSX.Element + suffixIcon?: string | JSX.Element + type?: InputProps['type'] + 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?: (...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 +} + +export interface AutocompleteComponentProps { + value?: string + placeholder?: string + clearable?: boolean + disabled?: boolean + valueKey?: string + debounce?: number + placement?: AutocompleteProps['placement'] + fetchSuggestions?: (queryString: string, callback: (data: string[]) => void) => void + triggerOnFocus?: boolean + selectWhenUnmatched?: boolean + name?: string + label?: string + hideLoading?: boolean + popperClass?: string + popperAppendToBody?: boolean + teleported?: boolean + highlightFirstItem?: boolean + fitInputWidth?: boolean + on?: { + select?: (item: any) => void + change?: (value: string | number) => void + } + slots?: { + 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 +} + +export interface InputNumberComponentProps { + value?: number + min?: number + max?: number + step?: number + stepStrictly?: boolean + precision?: number + size?: ElementPlusSize + readonly?: boolean + disabled?: boolean + controls?: boolean + controlsPosition?: InputNumberProps['controlsPosition'] + name?: string + label?: string + placeholder?: string + id?: string + valueOnClear?: number | null | 'min' | 'max' + validateEvent?: boolean + on?: { + change?: (currentValue: number | undefined, oldValue: number | undefined) => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + } + style?: CSSProperties +} + +export interface SelectOption { + label?: string + disabled?: boolean + value?: any + key?: string | number + options?: SelectOption[] + [key: string]: any +} + +export interface SelectComponentProps { + value?: string | number | boolean | Object + multiple?: boolean + disabled?: boolean + valueKey?: string + size?: ElementPlusSize + clearable?: boolean + collapseTags?: boolean + collapseTagsTooltip?: number + multipleLimit?: number + name?: string + effect?: string + autocomplete?: string + placeholder?: string + filterable?: boolean + allowCreate?: boolean + filterMethod?: (query: string, item: any) => boolean + remote?: boolean + remoteMethod?: (query: string) => void + remoteShowSuffix?: boolean + loading?: boolean + loadingText?: string + noMatchText?: string + noDataText?: string + popperClass?: string + reserveKeyword?: boolean + defaultFirstOption?: boolean + popperAppendToBody?: boolean + teleported?: boolean + persistent?: boolean + automaticDropdown?: boolean + clearIcon?: string | JSX.Element | null + fitInputWidth?: boolean + suffixIcon?: string | JSX.Element | null + tagType?: 'success' | 'info' | 'warning' | 'danger' + validateEvent?: boolean + placement?: + | 'top' + | 'top-start' + | 'top-end' + | 'bottom' + | 'bottom-start' + | 'bottom-end' + | 'left' + | 'left-start' + | 'left-end' + | 'right' + | 'right-start' + | 'right-end' + maxCollapseTags?: number + /** + * 数据源的字段别名 + */ + props?: { + key?: string + value?: string + label?: string + children?: string + } + on?: { + change?: (value: string | number | boolean | Object) => void + visibleChange?: (visible: boolean) => void + removeTag?: (tag: any) => void + clear?: () => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + } + slots?: { + default?: (options: SelectOption[]) => JSX.Element[] | null + optionGroupDefault?: (item: SelectOption) => JSX.Element + optionDefault?: (option: SelectOption) => JSX.Element | null + prefix?: (...args: any[]) => JSX.Element | null + empty?: (...args: any[]) => JSX.Element | null + } + options?: SelectOption[] + style?: CSSProperties +} + +export interface SelectV2ComponentProps { + value?: string | number | boolean | Object + multiple?: boolean + disabled?: boolean + valueKey?: string + size?: ElementPlusSize + clearable?: boolean + clearIcon?: string | JSX.Element | null + collapseTags?: boolean + multipleLimit?: number + name?: string + effect?: string + autocomplete?: string + placeholder?: string + filterable?: boolean + allowCreate?: boolean + reserveKeyword?: boolean + noDataText?: string + popperClass?: string + teleported?: boolean + persistent?: boolean + popperOptions?: any + automaticDropdown?: boolean + height?: number + scrollbarAlwaysOn?: boolean + remote?: boolean + remoteMethod?: (query: string) => void + validateEvent?: boolean + placement?: AutocompleteProps['placement'] + collapseTagsTooltip?: boolean + on?: { + change?: (value: string | number | boolean | Object) => void + visibleChange?: (visible: boolean) => void + removeTag?: (tag: any) => void + clear?: () => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + } + options?: SelectOption[] + slots?: { + default?: (option: SelectOption) => JSX.Element | null + } + 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?: (...args: any[]) => JSX.Element | null + empty?: (...args: 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 + inactiveIcon?: 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?: any[] + filterable?: boolean + filterPlaceholder?: string + filterMethod?: (query: string, item: any) => boolean + targetOrder?: string + titles?: string[] + buttonTexts?: string[] + renderContent?: ( + h: (type: string, props: VNodeProps | null, children?: string) => VNode, + 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: number | string, + direction: 'left' | 'right', + movedKeys: string[] | number[] + ) => void + leftCheckChange?: (value: any[]) => void + rightCheckChange?: (value: any[]) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element | null + leftFooter?: (...args: any[]) => JSX.Element | null + rightFooter?: (...args: any[]) => JSX.Element | null + } + style?: CSSProperties +} + +export interface RadioOption { + label?: string + value?: string | number | boolean + disabled?: boolean + border?: boolean + size?: ElementPlusSize + name?: string + [key: string]: any +} +export interface RadioGroupComponentProps { + value?: string | number | boolean + size?: ElementPlusSize + disabled?: boolean + textColor?: string + fill?: string + validateEvent?: boolean + label?: string + name?: string + id?: string + options?: RadioOption[] + /** + * 数据源的字段别名 + */ + props: { + label?: string + value?: string + disabled?: string + } + on?: { + change?: (value: string | number | boolean) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element | null + } + style?: CSSProperties +} + +export interface RadioButtonComponentProps { + value?: string | number | boolean + size?: ElementPlusSize + disabled?: boolean + textColor?: string + fill?: string + validateEvent?: boolean + label?: string + name?: string + id?: string + options?: RadioOption[] + /** + * 数据源的字段别名 + */ + props: { + label?: string + value?: string + disabled?: string + } + on?: { + change?: (value: string | number | boolean) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element | null + } + style?: CSSProperties +} + +export interface CheckboxOption { + label?: string + value?: string | number | boolean + disabled?: boolean + trueLabel?: string | number + falseLabel?: string | number + border?: boolean + size?: ElementPlusSize + name?: string + checked?: boolean + indeterminate?: boolean + validateEvent?: boolean + tabindex?: number | string + id?: string + controls?: boolean + [key: string]: any +} + +export interface CheckboxGroupComponentProps { + value?: string[] | number[] + size?: ElementPlusSize + disabled?: boolean + min?: number + max?: number + label?: string + textColor?: string + fill?: string + tag?: string + validateEvent?: boolean + options?: CheckboxOption[] + /** + * 数据源的字段别名 + */ + props: { + label?: string + value?: string + disabled?: string + } + on?: { + change?: (value: string | number | boolean) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element | null + } + style?: CSSProperties +} + +export interface DividerComponentProps { + value?: number | Array + min?: number + max?: number + disabled?: boolean + step?: number + showInput?: boolean + showInputControls?: boolean + size?: ElementPlusSize + inputSize?: ElementPlusSize + showStops?: boolean + showTooltip?: boolean + formatTooltip?: (value: number) => string + range?: boolean + vertical?: boolean + height?: string + label?: string + rangeStartLabel?: string + rangeEndLabel?: string + formatValueText?: (value: number) => string + debounce?: number + tooltipClass?: string + placement?: string + marks?: Record + validateEvent?: boolean + on?: { + change?: (value: number) => void + input?: (value: number) => void + } + style?: CSSProperties +} + +export interface DatePickerComponentProps { + value?: string | Date | number | string[] + readonly?: boolean + disabled?: boolean + size?: ElementPlusSize + editable?: boolean + clearable?: boolean + placeholder?: string + startPlaceholder?: string + endPlaceholder?: string + type?: + | 'year' + | 'month' + | 'date' + | 'dates' + | 'week' + | 'datetime' + | 'datetimerange' + | 'daterange' + | 'monthrange' + format?: string + popperClass?: string + popperOptions?: Record + rangeSeparator?: string + defaultValue?: Date | [Date, Date] + defaultTime?: Date | [Date, Date] + valueFormat?: string + id?: string + name?: string + unlinkPanels?: boolean + prefixIcon?: string | JSX.Element + clearIcon?: string | JSX.Element + validateEvent?: boolean + disabledDate?: (date: Date) => boolean + shortcuts?: Array<{ text: string; value: Date | Function }> + cellClassName?: string | ((date: Date) => string | undefined) + teleported?: boolean + on?: { + change?: (value: string | Date | number | string[]) => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + calendarChange?: (val: [Date, Date]) => void + panelChange?: (date, mode, view) => void + visibleChange?: (visibility: boolean) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element | null + rangeSeparator?: (...args: any[]) => JSX.Element | null + } + style?: CSSProperties +} + +export interface DateTimePickerComponentProps { + value?: string | Date | number | string[] + readonly?: boolean + disabled?: boolean + editable?: boolean + clearable?: boolean + size?: ElementPlusSize + placeholder?: string + startPlaceholder?: string + endPlaceholder?: string + timeArrowControl?: boolean + type?: 'year' | 'month' | 'date' | 'datetime' | 'datetimerange' | 'daterange' | 'week' + format?: string + popperClass?: string + rangeSeparator?: string + defaultValue?: Date | [Date, Date] + defaultTime?: Date | [Date, Date] + valueFormat?: string + id?: string + name?: string + unlinkPanels?: boolean + prefixIcon?: string | JSX.Element + clearIcon?: string | JSX.Element + shortcuts?: Array<{ text: string; value: Date | Function }> + disabledDate?: (date: Date) => boolean + cellClassName?: string | ((date: Date) => string | undefined) + teleported?: boolean + on?: { + change?: (value: string | Date | number | string[]) => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + calendarChange?: (val: [Date, Date]) => void + visibleChange?: (visibility: boolean) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element | null + rangeSeparator?: (...args: any[]) => JSX.Element | null + } + style?: CSSProperties +} + +export interface TimePickerComponentProps { + value?: string | Date | number | [Date, Date] | [number, number] | [string, string] + readonly?: boolean + disabled?: boolean + editable?: boolean + clearable?: boolean + size?: ElementPlusSize + placeholder?: string + startPlaceholder?: string + endPlaceholder?: string + isRange?: boolean + arrowControl?: boolean + popperClass?: string + rangeSeparator?: string + format?: string + defaultValue?: Date | [Date, Date] + id?: string + name?: string + label?: string + prefixIcon?: string | JSX.Element + clearIcon?: string | JSX.Element + disabledHours?: (role: string, comparingDate?: any) => number[] + disabledMinutes?: (hour: number, role: string, comparingDate?: any) => number[] + disabledSeconds?: (hour: number, minute: number, role: string, comparingDate?: any) => number[] + teleported?: boolean + tabindex?: number | string + on?: { + change: ( + val: number | string | Date | [number, number] | [string, string] | [Date, Date] + ) => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + visibleChange?: (visibility: boolean) => void + } + style?: CSSProperties +} + +export interface TimeSelectComponentProps { + value?: string + disabled?: boolean + editable?: boolean + clearable?: boolean + size?: ElementPlusSize + placeholder?: string + name?: string + effect?: string + prefixIcon?: string | JSX.Element + clearIcon?: string | JSX.Element + start?: string + end?: string + step?: string + minTime?: string + maxTime?: string + format?: string + on?: { + change?: (val: string) => void + blur?: (event: FocusEvent) => void + focus?: (event: FocusEvent) => void + } + style?: CSSProperties +} + +export interface ColProps { + span?: number + xs?: number + sm?: number + md?: number + lg?: number + xl?: number + tag?: string +} + +import type { AxiosPromise } from 'axios' + +export type FormSetPropsType = { + field: string + path: string + value: any +} + +export type FormValueType = string | number | string[] | number[] | boolean | undefined | null + +export type FormItemProps = { + labelWidth?: string | number + required?: boolean + rules?: Recordable + error?: string + showMessage?: boolean + inlineMessage?: boolean + style?: CSSProperties +} + +export interface FormSchema { + /** + * 唯一标识 + */ + field: string + + /** + * 标题 + */ + label?: string + + /** + * 提示信息 + */ + labelMessage?: string + + /** + * col组件属性 + */ + colProps?: ColProps + + /** + * 表单组件属性，具体可以查看element-plus文档 + */ + componentProps?: + | InputComponentProps + | AutocompleteComponentProps + | InputNumberComponentProps + | SelectComponentProps + | SelectV2ComponentProps + | CascaderComponentProps + | SwitchComponentProps + | RateComponentProps + | ColorPickerComponentProps + | TransferComponentProps + | RadioGroupComponentProps + | RadioButtonComponentProps + | DividerComponentProps + | DatePickerComponentProps + | DateTimePickerComponentProps + | TimePickerComponentProps + + /** + * formItem组件属性，具体可以查看element-plus文档 + */ + formItemProps?: FormItemProps + + /** + * 渲染的组件名称 + */ + component?: ComponentName + + /** + * 初始值 + */ + value?: FormValueType + + /** + * 是否隐藏 + */ + hidden?: boolean + + /** + * @returns 远程加载下拉项 + */ + api?: () => AxiosPromise +} diff --git a/src/hooks/web/useConfigGlobal.ts b/src/hooks/web/useConfigGlobal.ts index bde9d7881..9357b1040 100644 --- a/src/hooks/web/useConfigGlobal.ts +++ b/src/hooks/web/useConfigGlobal.ts @@ -1,4 +1,4 @@ -import { ConfigGlobalTypes } from '@/types/configGlobal' +import { ConfigGlobalTypes } from '@/components/ConfigGlobal/src/types' import { inject } from 'vue' export const useConfigGlobal = () => { diff --git a/src/types/components.d.ts b/src/types/components.d.ts deleted file mode 100644 index 1354f650e..000000000 --- a/src/types/components.d.ts +++ /dev/null @@ -1,590 +0,0 @@ -import { CSSProperties, VNodeProps, VNode } from 'vue' -import { - InputProps, - AutocompleteProps, - InputNumberProps, - CascaderProps, - CascaderNode, - CascaderValue -} from 'element-plus' -import { ElementPlusSize, ElementPlusInfoType } from './elementPlus.d' - -export enum ComponentNameEnum { - RADIO = 'Radio', - RADIO_GROUP = 'RadioGroup', - RADIO_BUTTON = 'RadioButton', - CHECKBOX = 'Checkbox', - CHECKBOX_GROUP = 'CheckboxGroup', - 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' -} - -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 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?: ElementPlusSize - prefixIcon?: string | JSX.Element - suffixIcon?: string | JSX.Element - type?: InputProps['type'] - 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?: (...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 -} - -export interface AutocompleteComponentProps { - value?: string - placeholder?: string - clearable?: boolean - disabled?: boolean - valueKey?: string - debounce?: number - placement?: AutocompleteProps['placement'] - fetchSuggestions?: (queryString: string, callback: (data: string[]) => void) => void - triggerOnFocus?: boolean - selectWhenUnmatched?: boolean - name?: string - label?: string - hideLoading?: boolean - popperClass?: string - popperAppendToBody?: boolean - teleported?: boolean - highlightFirstItem?: boolean - fitInputWidth?: boolean - on?: { - select?: (item: any) => void - change?: (value: string | number) => void - } - slots?: { - 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 -} - -export interface InputNumberComponentProps { - value?: number - min?: number - max?: number - step?: number - stepStrictly?: boolean - precision?: number - size?: ElementPlusSize - readonly?: boolean - disabled?: boolean - controls?: boolean - controlsPosition?: InputNumberProps['controlsPosition'] - name?: string - label?: string - placeholder?: string - id?: string - valueOnClear?: number | null | 'min' | 'max' - validateEvent?: boolean - on?: { - change?: (currentValue: number | undefined, oldValue: number | undefined) => void - blur?: (event: FocusEvent) => void - focus?: (event: FocusEvent) => void - } - style?: CSSProperties -} - -export interface SelectOption { - label?: string - disabled?: boolean - value?: any - key?: string | number - options?: SelectOption[] - [key: string]: any -} - -export interface SelectComponentProps { - value?: string | number | boolean | Object - multiple?: boolean - disabled?: boolean - valueKey?: string - size?: ElementPlusSize - clearable?: boolean - collapseTags?: boolean - collapseTagsTooltip?: number - multipleLimit?: number - name?: string - effect?: string - autocomplete?: string - placeholder?: string - filterable?: boolean - allowCreate?: boolean - filterMethod?: (query: string, item: any) => boolean - remote?: boolean - remoteMethod?: (query: string) => void - remoteShowSuffix?: boolean - loading?: boolean - loadingText?: string - noMatchText?: string - noDataText?: string - popperClass?: string - reserveKeyword?: boolean - defaultFirstOption?: boolean - popperAppendToBody?: boolean - teleported?: boolean - persistent?: boolean - automaticDropdown?: boolean - clearIcon?: string | JSX.Element | null - fitInputWidth?: boolean - suffixIcon?: string | JSX.Element | null - tagType?: 'success' | 'info' | 'warning' | 'danger' - validateEvent?: boolean - placement?: - | 'top' - | 'top-start' - | 'top-end' - | 'bottom' - | 'bottom-start' - | 'bottom-end' - | 'left' - | 'left-start' - | 'left-end' - | 'right' - | 'right-start' - | 'right-end' - maxCollapseTags?: number - /** - * 数据源的字段别名 - */ - props?: { - key?: string - value?: string - label?: string - children?: string - } - on?: { - change?: (value: string | number | boolean | Object) => void - visibleChange?: (visible: boolean) => void - removeTag?: (tag: any) => void - clear?: () => void - blur?: (event: FocusEvent) => void - focus?: (event: FocusEvent) => void - } - slots?: { - default?: (options: SelectOption[]) => JSX.Element[] | null - optionGroupDefault?: (item: SelectOption) => JSX.Element - optionDefault?: (option: SelectOption) => JSX.Element | null - prefix?: (...args: any[]) => JSX.Element | null - empty?: (...args: any[]) => JSX.Element | null - } - options?: SelectOption[] - style?: CSSProperties -} - -export interface SelectV2ComponentProps { - value?: string | number | boolean | Object - multiple?: boolean - disabled?: boolean - valueKey?: string - size?: ElementPlusSize - clearable?: boolean - clearIcon?: string | JSX.Element | null - collapseTags?: boolean - multipleLimit?: number - name?: string - effect?: string - autocomplete?: string - placeholder?: string - filterable?: boolean - allowCreate?: boolean - reserveKeyword?: boolean - noDataText?: string - popperClass?: string - teleported?: boolean - persistent?: boolean - popperOptions?: any - automaticDropdown?: boolean - height?: number - scrollbarAlwaysOn?: boolean - remote?: boolean - remoteMethod?: (query: string) => void - validateEvent?: boolean - placement?: AutocompleteProps['placement'] - collapseTagsTooltip?: boolean - on?: { - change?: (value: string | number | boolean | Object) => void - visibleChange?: (visible: boolean) => void - removeTag?: (tag: any) => void - clear?: () => void - blur?: (event: FocusEvent) => void - focus?: (event: FocusEvent) => void - } - options?: SelectOption[] - slots?: { - default?: (option: SelectOption) => JSX.Element | null - } - 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?: (...args: any[]) => JSX.Element | null - empty?: (...args: 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 - inactiveIcon?: 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?: any[] - filterable?: boolean - filterPlaceholder?: string - filterMethod?: (query: string, item: any) => boolean - targetOrder?: string - titles?: string[] - buttonTexts?: string[] - renderContent?: ( - h: (type: string, props: VNodeProps | null, children?: string) => VNode, - 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: number | string, - direction: 'left' | 'right', - movedKeys: string[] | number[] - ) => void - leftCheckChange?: (value: any[]) => void - rightCheckChange?: (value: any[]) => void - } - slots?: { - default?: (...args: any[]) => JSX.Element | null - leftFooter?: (...args: any[]) => JSX.Element | null - rightFooter?: (...args: any[]) => JSX.Element | null - } - style?: CSSProperties -} - -export interface RadioOption { - label?: string - value?: string | number | boolean - disabled?: boolean - [key: string]: any -} - -export interface RadioComponentProps { - value?: string | number | boolean - label?: string | number | boolean - disabled?: boolean - border?: boolean - size?: ElementPlusSize - options?: RadioOption[] - /** - * 数据源的字段别名 - */ - props: { - label?: string - value?: string - disabled?: string - } - name?: string - on?: { - change?: (value: string | number | boolean) => void - } - slots?: { - default?: (...args: any[]) => JSX.Element | null - } - style?: CSSProperties -} - -export interface RadioGroupComponentProps { - value?: string | number | boolean - size?: ElementPlusSize - disabled?: boolean - textColor?: string - fill?: string - validateEvent?: boolean - label?: string - name?: string - id?: string - options?: RadioOption[] - /** - * 数据源的字段别名 - */ - props: { - label?: string - value?: string - disabled?: string - } - on?: { - change?: (value: string | number | boolean) => void - } - slots?: { - default?: (...args: any[]) => JSX.Element | null - } - style?: CSSProperties -} - -export interface RadioButtonComponentProps { - value?: string | number | boolean - size?: ElementPlusSize - disabled?: boolean - textColor?: string - fill?: string - validateEvent?: boolean - label?: string - name?: string - id?: string - options?: RadioOption[] - /** - * 数据源的字段别名 - */ - props: { - label?: string - value?: string - disabled?: string - } - on?: { - change?: (value: string | number | boolean) => void - } - slots?: { - default?: (...args: any[]) => JSX.Element | null - } - style?: CSSProperties -} - -export interface CheckboxOption { - label?: string - value?: string | number | boolean - disabled?: boolean - [key: string]: any -} - -export interface CheckboxComponentProps { - value?: string | number | boolean - label?: string | number | boolean | any - trueLabel?: string | number - falseLabel?: string | number - disabled?: boolean - border?: boolean - size?: ElementPlusSize - name?: string - checked?: boolean - indeterminate?: boolean - validateEvent?: boolean - tabindex?: number | string - id?: string - controls?: boolean - on?: { - change?: (value: string | number | boolean) => void - } - slots?: { - default?: (...args: any[]) => JSX.Element | null - } - options: CheckboxOption[] - /** - * 数据源的字段别名 - */ - props: { - label?: string - value?: string - disabled?: string - } - style?: CSSProperties -} - -export interface CheckboxGroupComponentProps { - value?: string[] | number[] -} - -export interface ColProps { - span?: number - xs?: number - sm?: number - md?: number - lg?: number - xl?: number - tag?: string -} - -export interface ComponentOptions extends Recordable { - label?: string - value?: any - disabled?: boolean - key?: string | number - children?: ComponentOptions[] - options?: ComponentOptions[] -} - -export interface ComponentOptionsAlias { - labelField?: string - valueField?: string -} - -export interface ComponentProps extends Recordable { - optionsAlias?: ComponentOptionsAlias - options?: ComponentOptions[] - optionsSlot?: boolean -} diff --git a/src/types/elementPlus.d.ts b/src/types/elementPlus.d.ts deleted file mode 100644 index 2c6b76e77..000000000 --- a/src/types/elementPlus.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type ElementPlusSize = 'default' | 'small' | 'large' - -export type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger' diff --git a/src/types/form.d.ts b/src/types/form.d.ts deleted file mode 100644 index 37ea21a44..000000000 --- a/src/types/form.d.ts +++ /dev/null @@ -1,106 +0,0 @@ -import type { CSSProperties } from 'vue' -import { - ColProps, - ComponentProps, - ComponentName, - InputComponentProps, - AutocompleteComponentProps, - InputNumberComponentProps, - SelectComponentProps, - SelectV2ComponentProps, - CascaderComponentProps, - SwitchComponentProps, - RateComponentProps, - ColorPickerComponentProps, - TransferComponentProps, - RadioComponentProps, - RadioGroupComponentProps, - RadioButtonComponentProps, - CheckboxComponentProps -} from '@/types/components' -import { FormValueType, FormValueType } from '@/types/form' -import type { AxiosPromise } from 'axios' - -export type FormSetPropsType = { - field: string - path: string - value: any -} - -export type FormValueType = string | number | string[] | number[] | boolean | undefined | null - -export type FormItemProps = { - labelWidth?: string | number - required?: boolean - rules?: Recordable - error?: string - showMessage?: boolean - inlineMessage?: boolean - style?: CSSProperties -} - -export interface FormSchema { - /** - * 唯一标识 - */ - field: string - - /** - * 标题 - */ - label?: string - - /** - * 提示信息 - */ - labelMessage?: string - - /** - * col组件属性 - */ - colProps?: ColProps - - /** - * 表单组件属性，具体可以查看element-plus文档 - */ - componentProps?: - | InputComponentProps - | AutocompleteComponentProps - | InputNumberComponentProps - | SelectComponentProps - | SelectV2ComponentProps - | CascaderComponentProps - | SwitchComponentProps - | RateComponentProps - | ColorPickerComponentProps - | TransferComponentProps - | RadioComponentProps - | RadioGroupComponentProps - | RadioButtonComponentProps - | CheckboxComponentProps - - /** - * formItem组件属性，具体可以查看element-plus文档 - */ - formItemProps?: FormItemProps - - /** - * 渲染的组件名称 - */ - component?: ComponentName - - /** - * 初始值 - */ - value?: FormValueType - - /** - * 是否隐藏 - */ - hidden?: boolean - - /** - * @returns 远程加载下拉项 - */ - api?: () => AxiosPromise -} diff --git a/src/types/icon.d.ts b/src/types/icon.ts similarity index 100% rename from src/types/icon.d.ts rename to src/types/icon.ts diff --git a/src/types/infoTip.d.ts b/src/types/infoTip.ts similarity index 100% rename from src/types/infoTip.d.ts rename to src/types/infoTip.ts diff --git a/src/types/layout.d.ts b/src/types/layout.d.ts deleted file mode 100644 index c7ac4c231..000000000 --- a/src/types/layout.d.ts +++ /dev/null @@ -1 +0,0 @@ -export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu' \ No newline at end of file diff --git a/src/types/localeDropdown.d.ts b/src/types/localeDropdown.ts similarity index 100% rename from src/types/localeDropdown.d.ts rename to src/types/localeDropdown.ts diff --git a/src/types/qrcode.d.ts b/src/types/qrcode.ts similarity index 100% rename from src/types/qrcode.d.ts rename to src/types/qrcode.ts diff --git a/src/types/table.d.ts b/src/types/table.ts similarity index 100% rename from src/types/table.d.ts rename to src/types/table.ts diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts deleted file mode 100644 index 879b89517..000000000 --- a/src/types/theme.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export type ThemeTypes = { - elColorPrimary?: string - leftMenuBorderColor?: string - leftMenuBgColor?: string - leftMenuBgLightColor?: string - leftMenuBgActiveColor?: string - leftMenuCollapseBgActiveColor?: string - leftMenuTextColor?: string - leftMenuTextActiveColor?: string - logoTitleTextColor?: string - logoBorderColor?: string - topHeaderBgColor?: string - topHeaderTextColor?: string - topHeaderHoverColor?: string - topToolBorderColor?: string - } \ No newline at end of file diff --git a/src/types/theme.ts b/src/types/theme.ts new file mode 100644 index 000000000..ad649b027 --- /dev/null +++ b/src/types/theme.ts @@ -0,0 +1,16 @@ +export type ThemeTypes = { + elColorPrimary?: string + leftMenuBorderColor?: string + leftMenuBgColor?: string + leftMenuBgLightColor?: string + leftMenuBgActiveColor?: string + leftMenuCollapseBgActiveColor?: string + leftMenuTextColor?: string + leftMenuTextActiveColor?: string + logoTitleTextColor?: string + logoBorderColor?: string + topHeaderBgColor?: string + topHeaderTextColor?: string + topHeaderHoverColor?: string + topToolBorderColor?: string +} diff --git a/src/views/Components/Form/DefaultForm copy.vue b/src/views/Components/Form/DefaultForm copy.vue deleted file mode 100644 index ea93e5221..000000000 --- a/src/views/Components/Form/DefaultForm copy.vue +++ /dev/null @@ -1,1136 +0,0 @@ - - - - - diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index fdaabe82c..fc576efe4 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/src/views/Components/Form/DefaultForm.vue @@ -5,15 +5,17 @@ import { useI18n } from '@/hooks/web/useI18n' import { useIcon } from '@/hooks/web/useIcon' import { ContentWrap } from '@/components/ContentWrap' import { useAppStore } from '@/store/modules/app' -import { FormSchema } from '@/types/form' -import { - ComponentOptions, - SelectOption, - SelectComponentProps, - RadioOption -} from '@/types/components' +import { SelectOption, RadioOption, CheckboxOption, FormSchema } from '@/components/Form/src/types' import { useForm } from '@/hooks/web/useForm' -import { ElOption, ElOptionGroup, ElButton, ElRadio, ElRadioButton } from 'element-plus' +import { + ElOption, + ElOptionGroup, + ElButton, + ElRadio, + ElRadioButton, + ElCheckbox, + ElCheckboxButton +} from 'element-plus' const appStore = useAppStore() @@ -938,9 +940,9 @@ const schema = reactive([ component: 'Divider' }, { - field: 'field39', - label: t('formDemo.default'), - component: 'Radio', + field: 'field39-2', + label: t('formDemo.radioGroup'), + component: 'RadioGroup', componentProps: { options: [ { @@ -956,9 +958,9 @@ const schema = reactive([ } }, { - field: 'field39-1', - label: t('formDemo.slot'), - component: 'Radio', + field: 'field39-3', + label: `${t('formDemo.radioGroup')} ${t('formDemo.slot')}`, + component: 'RadioGroup', componentProps: { options: [ { @@ -972,25 +974,25 @@ const schema = reactive([ } ], slots: { - default: ({ option }) => { - return ( - <> - {option.label} - ({option.value}) - - ) + default: (options: RadioOption[]) => { + return options?.map((v) => { + return ( + + {v.label}({v.value}) + + ) + }) } } } }, { - field: 'field39-2', - label: t('formDemo.radioGroup'), - component: 'RadioGroup', + field: 'field40', + label: t('formDemo.button'), + component: 'RadioButton', componentProps: { options: [ { - // disabled: true, label: 'option-1', value: '1' }, @@ -1002,13 +1004,12 @@ const schema = reactive([ } }, { - field: 'field39-3', - label: `${t('formDemo.radioGroup')} ${t('formDemo.slot')}`, - component: 'RadioGroup', + field: 'field40-1', + label: `${t('formDemo.button')} ${t('formDemo.slot')}`, + component: 'RadioButton', componentProps: { options: [ { - // disabled: true, label: 'option-1', value: '1' }, @@ -1021,9 +1022,9 @@ const schema = reactive([ default: (options: RadioOption[]) => { return options?.map((v) => { return ( - + {v.label}({v.value}) - + ) }) } @@ -1031,9 +1032,15 @@ const schema = reactive([ } }, { - field: 'field40', - label: t('formDemo.button'), - component: 'RadioButton', + field: 'field41', + label: t('formDemo.checkbox'), + component: 'Divider' + }, + { + field: 'field42-2', + label: t('formDemo.checkboxGroup'), + component: 'CheckboxGroup', + value: [], componentProps: { options: [ { @@ -1043,14 +1050,19 @@ const schema = reactive([ { label: 'option-2', value: '2' + }, + { + label: 'option-3', + value: '3' } ] } }, { - field: 'field40-1', - label: `${t('formDemo.button')} ${t('formDemo.slot')}`, - component: 'RadioButton', + field: 'field42-3', + label: `${t('formDemo.checkboxGroup')} ${t('formDemo.slot')}`, + component: 'CheckboxGroup', + value: [], componentProps: { options: [ { @@ -1060,15 +1072,19 @@ const schema = reactive([ { label: 'option-2', value: '2' + }, + { + label: 'option-3', + value: '3' } ], slots: { - default: (options: RadioOption[]) => { + default: (options: CheckboxOption[]) => { return options?.map((v) => { return ( - + {v.label}({v.value}) - + ) }) } @@ -1076,14 +1092,10 @@ const schema = reactive([ } }, { - field: 'field41', - label: t('formDemo.checkbox'), - component: 'Divider' - }, - { - field: 'field42', - label: t('formDemo.default'), - component: 'Checkbox', + field: 'field43', + label: t('formDemo.button'), + component: 'CheckboxButton', + value: [], componentProps: { options: [ { @@ -1097,18 +1109,20 @@ const schema = reactive([ }, { label: 'option-3', - value: '3' + value: '23' } ] } }, { - field: 'field42-1', - label: t('formDemo.slot'), - component: 'Checkbox', + field: 'field43-1', + label: `${t('formDemo.button')} ${t('formDemo.slot')}`, + component: 'CheckboxButton', + value: [], componentProps: { options: [ { + disabled: true, label: 'option-1', value: '1' }, @@ -1118,256 +1132,218 @@ const schema = reactive([ }, { label: 'option-3', - value: '3' + value: '23' } ], slots: { - default: ({ option }) => { + default: (options: CheckboxOption[]) => { + return options?.map((v) => { + return ( + + {v.label}({v.value}) + + ) + }) + } + } + } + }, + { + field: 'field44', + component: 'Divider', + label: t('formDemo.slider') + }, + { + field: 'field45', + component: 'Slider', + label: t('formDemo.default'), + value: 0 + }, + { + field: 'field46', + component: 'Divider', + label: t('formDemo.datePicker') + }, + { + field: 'field47', + component: 'DatePicker', + label: t('formDemo.default'), + componentProps: { + type: 'date' + } + }, + { + field: 'field48', + component: 'DatePicker', + label: t('formDemo.shortcuts'), + componentProps: { + type: 'date', + disabledDate: (time: Date) => { + return time.getTime() > Date.now() + }, + shortcuts: [ + { + text: t('formDemo.today'), + value: new Date() + }, + { + text: t('formDemo.yesterday'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24) + return date + } + }, + { + text: t('formDemo.aWeekAgo'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) + return date + } + } + ] + } + }, + { + field: 'field47-1', + component: 'DatePicker', + label: t('formDemo.slot'), + value: '2021-10-29', + componentProps: { + type: 'date', + slots: { + default: (cell: any) => { return ( - <> - {option.label} - ({option.value}) - +
+ {cell.text} + {isHoliday(cell) ? : null} +
) } } } + }, + { + field: 'field49', + component: 'DatePicker', + label: t('formDemo.week'), + componentProps: { + type: 'week', + format: `[${t('formDemo.week')}]` + } + }, + { + field: 'field50', + component: 'DatePicker', + label: t('formDemo.year'), + componentProps: { + type: 'year' + } + }, + { + field: 'field51', + component: 'DatePicker', + label: t('formDemo.month'), + componentProps: { + type: 'month' + } + }, + { + field: 'field52', + component: 'DatePicker', + label: t('formDemo.dates'), + componentProps: { + type: 'dates' + } + }, + { + field: 'field53', + component: 'DatePicker', + label: t('formDemo.daterange'), + componentProps: { + type: 'daterange' + } + }, + { + field: 'field54', + component: 'DatePicker', + label: t('formDemo.monthrange'), + componentProps: { + type: 'monthrange' + } + }, + { + field: 'field56', + component: 'Divider', + label: t('formDemo.dateTimePicker') + }, + { + field: 'field57', + component: 'DatePicker', + label: t('formDemo.default'), + componentProps: { + type: 'datetime' + } + }, + { + field: 'field58', + component: 'DatePicker', + label: t('formDemo.shortcuts'), + componentProps: { + type: 'datetime', + shortcuts: [ + { + text: t('formDemo.today'), + value: new Date() + }, + { + text: t('formDemo.yesterday'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24) + return date + } + }, + { + text: t('formDemo.aWeekAgo'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) + return date + } + } + ] + } + }, + { + field: 'field59', + component: 'DatePicker', + label: t('formDemo.dateTimerange'), + componentProps: { + type: 'datetimerange' + } + }, + { + field: 'field60', + component: 'Divider', + label: t('formDemo.timePicker') + }, + { + field: 'field61', + component: 'TimePicker', + label: t('formDemo.default') + }, + { + field: 'field62', + component: 'Divider', + label: t('formDemo.timeSelect') + }, + { + field: 'field63', + component: 'TimeSelect', + label: t('formDemo.default') } - // { - // field: 'field42-2', - // label: t('formDemo.checkboxGroup'), - // component: 'CheckboxGroup', - // value: [], - // componentProps: { - // options: [ - // { - // label: 'option-1', - // value: '1' - // }, - // { - // label: 'option-2', - // value: '2' - // }, - // { - // label: 'option-3', - // value: '3' - // } - // ] - // } - // } - // { - // field: 'field43', - // label: t('formDemo.button'), - // component: 'CheckboxButton', - // value: [], - // componentProps: { - // options: [ - // { - // disabled: true, - // label: 'option-1', - // value: '1' - // }, - // { - // label: 'option-2', - // value: '2' - // }, - // { - // label: 'option-3', - // value: '23' - // } - // ] - // } - // }, - // { - // field: 'field44', - // component: 'Divider', - // label: t('formDemo.slider') - // }, - // { - // field: 'field45', - // component: 'Slider', - // label: t('formDemo.default'), - // value: 0 - // }, - // { - // field: 'field46', - // component: 'Divider', - // label: t('formDemo.datePicker') - // }, - // { - // field: 'field47', - // component: 'DatePicker', - // label: t('formDemo.default'), - // componentProps: { - // type: 'date' - // } - // }, - // { - // field: 'field48', - // component: 'DatePicker', - // label: t('formDemo.shortcuts'), - // componentProps: { - // type: 'date', - // disabledDate: (time: Date) => { - // return time.getTime() > Date.now() - // }, - // shortcuts: [ - // { - // text: t('formDemo.today'), - // value: new Date() - // }, - // { - // text: t('formDemo.yesterday'), - // value: () => { - // const date = new Date() - // date.setTime(date.getTime() - 3600 * 1000 * 24) - // return date - // } - // }, - // { - // text: t('formDemo.aWeekAgo'), - // value: () => { - // const date = new Date() - // date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) - // return date - // } - // } - // ] - // } - // }, - // { - // field: 'field49', - // component: 'DatePicker', - // label: t('formDemo.week'), - // componentProps: { - // type: 'week', - // format: `[${t('formDemo.week')}] ww` - // } - // }, - // { - // field: 'field50', - // component: 'DatePicker', - // label: t('formDemo.year'), - // componentProps: { - // type: 'year' - // } - // }, - // { - // field: 'field51', - // component: 'DatePicker', - // label: t('formDemo.month'), - // componentProps: { - // type: 'month' - // } - // }, - // { - // field: 'field52', - // component: 'DatePicker', - // label: t('formDemo.dates'), - // componentProps: { - // type: 'dates' - // } - // }, - // { - // field: 'field53', - // component: 'DatePicker', - // label: t('formDemo.daterange'), - // componentProps: { - // type: 'daterange' - // } - // }, - // { - // field: 'field54', - // component: 'DatePicker', - // label: t('formDemo.monthrange'), - // componentProps: { - // type: 'monthrange' - // } - // }, - // { - // field: 'field55', - // component: 'DatePicker', - // label: t('formDemo.slot'), - // componentProps: { - // type: 'date', - // format: 'YYYY/MM/DD', - // valueFormat: 'YYYY-MM-DD', - // slots: { - // default: true - // } - // } - // }, - // { - // field: 'field56', - // component: 'Divider', - // label: t('formDemo.dateTimePicker') - // }, - // { - // field: 'field57', - // component: 'DatePicker', - // label: t('formDemo.default'), - // componentProps: { - // type: 'datetime' - // } - // }, - // { - // field: 'field58', - // component: 'DatePicker', - // label: t('formDemo.shortcuts'), - // componentProps: { - // type: 'datetime', - // shortcuts: [ - // { - // text: t('formDemo.today'), - // value: new Date() - // }, - // { - // text: t('formDemo.yesterday'), - // value: () => { - // const date = new Date() - // date.setTime(date.getTime() - 3600 * 1000 * 24) - // return date - // } - // }, - // { - // text: t('formDemo.aWeekAgo'), - // value: () => { - // const date = new Date() - // date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) - // return date - // } - // } - // ] - // } - // }, - // { - // field: 'field59', - // component: 'DatePicker', - // label: t('formDemo.dateTimerange'), - // componentProps: { - // type: 'datetimerange' - // } - // }, - // { - // field: 'field60', - // component: 'Divider', - // label: t('formDemo.timePicker') - // }, - // { - // field: 'field61', - // component: 'TimePicker', - // label: t('formDemo.default') - // }, - // { - // field: 'field62', - // component: 'Divider', - // label: t('formDemo.timeSelect') - // }, - // { - // field: 'field63', - // component: 'TimeSelect', - // label: t('formDemo.default') - // } ]) const { register, formRef, methods } = useForm({ @@ -1445,102 +1421,43 @@ const changeToggle = () => { --> -
- -
+
-