kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

types: 迁移types

This commit is contained in:
kailong321200875 2023-05-31 16:24:28 +08:00
parent e34b5cb613
commit 46b35e48b3
30 changed files with 1176 additions and 2588 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ConfigGlobal/src/ConfigGlobal.vue
View File

@ -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()

1
src/types/configGlobal.d.ts → src/components/ConfigGlobal/src/types.ts
View File

@ -1,4 +1,3 @@
import { ElementPlusSize } from './elementPlus'
export interface ConfigGlobalTypes {
size?: ElementPlusSize
}

2
src/components/ContextMenu/src/ContextMenu.vue
View File

@ -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')

0
src/types/contextMenu.d.ts → src/components/ContextMenu/src/types.ts
View File

2
src/components/Descriptions/src/Descriptions.vue
View File

@ -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()

0
src/types/descriptions.d.ts → src/components/Descriptions/src/types.ts
View File

2
src/components/Form/index.ts
View File

@ -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

302
src/components/Form/src/Form copy.vue
View File

@ -1,302 +0,0 @@
<script lang="tsx">
import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus'
import { componentMap } from './componentMap'
import { propTypes } from '@/utils/propTypes'
import { getSlot } from '@/utils/tsxHelper'
import {
setTextPlaceholder,
setGridProp,
setComponentProps,
setItemComponentSlots,
initModel,
setFormItemSlots
} from './helper'
import { useRenderSelect } from './components/useRenderSelect'
import { useRenderRadio } from './components/useRenderRadio'
import { useRenderCheckbox } from './components/useRenderCheckbox'
import { useDesign } from '@/hooks/web/useDesign'
import { findIndex } from '@/utils'
import { set } from 'lodash-es'
import { FormProps } from './types'
import { Icon } from '@/components/Icon'
import { FormSchema, FormSetPropsType } from '@/types/form'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('form')
export default defineComponent({
name: 'Form',
props: {
// 生成Form的布局结构数组
schema: {
type: Array as PropType<FormSchema[]>,
default: () => []
},
// 是否需要栅格布局
isCol: propTypes.bool.def(true),
// 表单数据对象
model: {
type: Object as PropType<Recordable>,
default: () => ({})
},
// 是否自动设置placeholder
autoSetPlaceholder: propTypes.bool.def(true),
// 是否自定义内容
isCustom: propTypes.bool.def(false),
// 表单label宽度
labelWidth: propTypes.oneOfType([String, Number]).def('auto')
},
emits: ['register'],
setup(props, { slots, expose, emit }) {
// element form 实例
const elFormRef = ref<ComponentRef<typeof ElForm>>()
// useForm传入的props
const outsideProps = ref<FormProps>({})
const mergeProps = ref<FormProps>({})
const getProps = computed(() => {
const propsObj = { ...props }
Object.assign(propsObj, unref(mergeProps))
return propsObj
})
// 表单数据
const formModel = ref<Recordable>({})
onMounted(() => {
emit('register', unref(elFormRef)?.$parent, unref(elFormRef))
})
// 对表单赋值
const setValues = (data: Recordable = {}) => {
formModel.value = Object.assign(unref(formModel), data)
}
const setProps = (props: FormProps = {}) => {
mergeProps.value = Object.assign(unref(mergeProps), props)
outsideProps.value = props
}
const delSchema = (field: string) => {
const { schema } = unref(getProps)
const index = findIndex(schema, (v: FormSchema) => v.field === field)
if (index > -1) {
schema.splice(index, 1)
}
}
const addSchema = (formSchema: FormSchema, index?: number) => {
const { schema } = unref(getProps)
if (index !== void 0) {
schema.splice(index, 0, formSchema)
return
}
schema.push(formSchema)
}
const setSchema = (schemaProps: FormSetPropsType[]) => {
const { schema } = unref(getProps)
for (const v of schema) {
for (const item of schemaProps) {
if (v.field === item.field) {
set(v, item.path, item.value)
}
}
}
}
const getElFormRef = (): ComponentRef<typeof ElForm> => {
return unref(elFormRef) as ComponentRef<typeof ElForm>
}
expose({
setValues,
formModel,
setProps,
delSchema,
addSchema,
setSchema,
getElFormRef
})
// 监听表单结构化数组，重新生成formModel
watch(
() => unref(getProps).schema,
(schema = []) => {
formModel.value = initModel(schema, unref(formModel))
},
{
immediate: true,
deep: true
}
)
// 渲染包裹标签，是否使用栅格布局
const renderWrap = () => {
const { isCol } = unref(getProps)
const content = isCol ? (
<ElRow gutter={20}>{renderFormItemWrap()}</ElRow>
) : (
renderFormItemWrap()
)
return content
}
// 是否要渲染el-col
const renderFormItemWrap = () => {
// hidden属性表示隐藏，不做渲染
const { schema = [], isCol } = unref(getProps)
return schema
.filter((v) => !v.hidden)
.map((item) => {
// 如果是 Divider 组件，需要自己占用一行
const isDivider = item.component === 'Divider'
const Com = componentMap['Divider'] as ReturnType<typeof defineComponent>
return isDivider ? (
<Com {...{ contentPosition: 'left', ...item.componentProps }}>{item?.label}</Com>
) : isCol ? (
// 如果需要栅格，需要包裹 ElCol
<ElCol {...setGridProp(item.colProps)}>{renderFormItem(item)}</ElCol>
) : (
renderFormItem(item)
)
})
}
// 渲染formItem
const renderFormItem = (item: FormSchema) => {
// 单独给只有options属性的组件做判断
const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
const componentSlots = (item?.componentProps as any)?.slots || {}
const slotsMap: Recordable = {
...setItemComponentSlots(unref(formModel), componentSlots)
}
if (
item?.component !== 'SelectV2' &&
item?.component !== 'Cascader' &&
item?.componentProps?.options
) {
slotsMap.default = () => renderOptions(item)
}
const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
// 如果有 labelMessage，自动使用插槽渲染
if (item?.labelMessage) {
formItemSlots.label = () => {
return (
<>
<span>{item.label}</span>
<ElTooltip placement="right" raw-content>
{{
content: () => <span v-html={item.labelMessage}></span>,
default: () => (
<Icon
icon="ep:warning"
size={16}
color="var(--el-color-primary)"
class="ml-2px relative top-1px"
></Icon>
)
}}
</ElTooltip>
</>
)
}
}
return (
<ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
{{
...formItemSlots,
default: () => {
const Com = componentMap[item.component as string] as ReturnType<
typeof defineComponent
>
const { autoSetPlaceholder } = unref(getProps)
return slots[item.field] ? (
getSlot(slots, item.field, formModel.value)
) : (
<Com
vModel={formModel.value[item.field]}
{...(autoSetPlaceholder && setTextPlaceholder(item))}
{...setComponentProps(item)}
style={item.componentProps?.style}
{...(notRenderOptions.includes(item?.component as string) &&
item?.componentProps?.options
? { options: item?.componentProps?.options || [] }
: {})}
>
{{ ...slotsMap }}
</Com>
)
}
}}
</ElFormItem>
)
}
// 渲染options
const renderOptions = (item: FormSchema) => {
switch (item.component) {
case 'Select':
const { renderSelectOptions } = useRenderSelect(slots)
return renderSelectOptions(item)
case 'Radio':
case 'RadioButton':
const { renderRadioOptions } = useRenderRadio()
return renderRadioOptions(item)
case 'Checkbox':
case 'CheckboxButton':
const { renderCheckboxOptions } = useRenderCheckbox()
return renderCheckboxOptions(item)
default:
break
}
}
// 过滤传入Form组件的属性
const getFormBindValue = () => {
// 避免在标签上出现多余的属性
const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model']
const props = { ...unref(getProps) }
for (const key in props) {
if (delKeys.indexOf(key) !== -1) {
delete props[key]
}
}
return props
}
return () => (
<ElForm
ref={elFormRef}
{...getFormBindValue()}
model={props.isCustom ? props.model : formModel}
class={prefixCls}
>
{{
// 如果需要自定义，就什么都不渲染，而是提供默认插槽
default: () => {
const { isCustom } = unref(getProps)
return isCustom ? getSlot(slots, 'default') : renderWrap()
}
}}
</ElForm>
)
}
})
</script>
<style lang="less" scoped>
.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
margin-right: 0 !important;
margin-left: 0 !important;
}
</style>

56
src/components/Form/src/Form.vue
View File

@ -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 (
<Com
vModel={formModel.value[item.field]}
{...setComponentProps(item)}
label={v[valueAlias]}
disabled={v[disabledAlias]}
>
{() =>
componentProps?.slots?.default
? componentProps?.slots?.default({ option: v })
: v[labelAlias]
}
</Com>
)
})
}
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)
)
}
}

8
src/components/Form/src/componentMap.ts
View File

@ -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<Component, ComponentName> = {
Radio: ElRadio,
RadioGroup: ElRadioGroup,
RadioButton: ElRadioGroup,
Checkbox: ElCheckbox,
CheckboxGroup: ElCheckboxGroup,
CheckboxButton: ElCheckboxGroup,
Input: ElInput,

22
src/components/Form/src/components/useRenderCheckbox.tsx
View File

@ -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<typeof defineComponent>
return componentProps?.options?.map((option) => {
const { value, ...other } = option
return (
<Com {...other} label={option[valueAlias || 'value']}>
<Com
{...other}
disabled={option[disabledAlias || 'disabled']}
label={option[valueAlias || 'value']}
>
{option[labelAlias || 'label']}
</Com>
)

3
src/components/Form/src/components/useRenderRadio.tsx
View File

@ -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) => {

3
src/components/Form/src/components/useRenderSelect.tsx
View File

@ -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

7
src/components/Form/src/helper.ts
View File

@ -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 {

822
src/components/Form/src/types.ts
View File

@ -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<Lowercase<A>>}${Capitalize<Lowercase<B>>}`
: Capitalize<Lowercase<K>>
: 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<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?: (...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<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?: 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<number>
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<number, string>
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<string, any>
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?: <T = any>() => AxiosPromise<T>
}

2
src/hooks/web/useConfigGlobal.ts
View File

@ -1,4 +1,4 @@
import { ConfigGlobalTypes } from '@/types/configGlobal'
import { ConfigGlobalTypes } from '@/components/ConfigGlobal/src/types'
import { inject } from 'vue'
export const useConfigGlobal = () => {

590
src/types/components.d.ts vendored
View File

@ -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<Lowercase<A>>}${Capitalize<Lowercase<B>>}`
: Capitalize<Lowercase<K>>
: 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<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?: (...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<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?: 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
}

3
src/types/elementPlus.d.ts vendored
View File

@ -1,3 +0,0 @@
export type ElementPlusSize = 'default' | 'small' | 'large'
export type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'

106
src/types/form.d.ts vendored
View File

@ -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?: <T = any>() => AxiosPromise<T>
}

0
src/types/icon.d.ts → src/types/icon.ts
View File

0
src/types/infoTip.d.ts → src/types/infoTip.ts
View File

1
src/types/layout.d.ts vendored
View File

@ -1 +0,0 @@
export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'

0
src/types/localeDropdown.d.ts → src/types/localeDropdown.ts
View File

0
src/types/qrcode.d.ts → src/types/qrcode.ts
View File

0
src/types/table.d.ts → src/types/table.ts
View File

16
src/types/theme.d.ts vendored
View File

@ -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
}

16
src/types/theme.ts Normal file
View File

@ -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
}

1136
src/views/Components/Form/DefaultForm copy.vue
View File

File diff suppressed because it is too large Load Diff

657
src/views/Components/Form/DefaultForm.vue
View File

@ -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()
@ -937,52 +939,6 @@ const schema = reactive<FormSchema[]>([
label: t('formDemo.radio'),
component: 'Divider'
},
{
field: 'field39',
label: t('formDemo.default'),
component: 'Radio',
componentProps: {
options: [
{
// disabled: true,
label: 'option-1',
value: '1'
},
{
label: 'option-2',
value: '2'
}
]
}
},
{
field: 'field39-1',
label: t('formDemo.slot'),
component: 'Radio',
componentProps: {
options: [
{
// disabled: true,
label: 'option-1',
value: '1'
},
{
label: 'option-2',
value: '2'
}
],
slots: {
default: ({ option }) => {
return (
<>
<span>{option.label}</span>
<span> ({option.value}) </span>
</>
)
}
}
}
},
{
field: 'field39-2',
label: t('formDemo.radioGroup'),
@ -1081,13 +1037,13 @@ const schema = reactive<FormSchema[]>([
component: 'Divider'
},
{
field: 'field42',
label: t('formDemo.default'),
component: 'Checkbox',
field: 'field42-2',
label: t('formDemo.checkboxGroup'),
component: 'CheckboxGroup',
value: [],
componentProps: {
options: [
{
disabled: true,
label: 'option-1',
value: '1'
},
@ -1103,9 +1059,10 @@ const schema = reactive<FormSchema[]>([
}
},
{
field: 'field42-1',
label: t('formDemo.slot'),
component: 'Checkbox',
field: 'field42-3',
label: `${t('formDemo.checkboxGroup')} ${t('formDemo.slot')}`,
component: 'CheckboxGroup',
value: [],
componentProps: {
options: [
{
@ -1122,252 +1079,271 @@ const schema = reactive<FormSchema[]>([
}
],
slots: {
default: ({ option }) => {
default: (options: CheckboxOption[]) => {
return options?.map((v) => {
return (
<>
<span>{option.label}</span>
<span> ({option.value}) </span>
</>
<ElCheckbox label={v.value}>
{v.label}({v.value})
</ElCheckbox>
)
})
}
}
}
},
{
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: 'field43-1',
label: `${t('formDemo.button')} ${t('formDemo.slot')}`,
component: 'CheckboxButton',
value: [],
componentProps: {
options: [
{
disabled: true,
label: 'option-1',
value: '1'
},
{
label: 'option-2',
value: '2'
},
{
label: 'option-3',
value: '23'
}
],
slots: {
default: (options: CheckboxOption[]) => {
return options?.map((v) => {
return (
<ElCheckboxButton label={v.value}>
{v.label}({v.value})
</ElCheckboxButton>
)
})
}
}
}
},
{
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 (
<div class={{ cell: true, current: cell.isCurrent }}>
<span class="text">{cell.text}</span>
{isHoliday(cell) ? <span class="holiday" /> : null}
</div>
)
}
}
}
},
{
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 = () => {
</template>
</Form> -->
<Form @register="register">
<!-- <template #field4-prefix>
<Icon icon="ep:calendar" class="el-input__icon" />
</template>
<template #field4-suffix>
<Icon icon="ep:calendar" class="el-input__icon" />
</template>
<template #field5-prepend> Http:// </template>
<template #field5-append> .com </template>
<template #field9-default="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
<template #field15-option="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field17-option="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field20-default="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field22-default="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field25-default="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
<template #field36-default="{ option }">
<span>{{ option.value }} - {{ option.desc }}</span>
</template>
<template #field55-default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</template> -->
</Form>
<Form @register="register" />
</ContentWrap>
</template>
<style lang="less" scoped>
<style lang="less">
.cell {
height: 30px;
padding: 3px 0;
box-sizing: border-box;
.text {
position: absolute;
left: 50%;
display: block;
width: 24px;
height: 24px;
display: block;
margin: 0 auto;
line-height: 24px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
&.current {
.text {
color: #fff;
background: purple;
background: #626aef;
}
}
.holiday {
position: absolute;
bottom: 0px;
left: 50%;
width: 6px;
height: 6px;
background: red;
background: var(--el-color-danger);
border-radius: 50%;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}

6
types/global.d.ts vendored
View File

@ -17,6 +17,12 @@ declare global {
declare type TimeoutHandle = ReturnType<typeof setTimeout>
declare type IntervalHandle = ReturnType<typeof setInterval>
declare type ElementPlusSize = 'default' | 'small' | 'large'
declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
declare type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
declare type AxiosHeaders =
| 'application/json'
| 'application/x-www-form-urlencoded'