types: 迁移types
This commit is contained in:
kailong321200875
parent
e34b5cb613
commit
46b35e48b3
|
|
@ -7,7 +7,6 @@ import { useWindowSize } from '@vueuse/core'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { setCssVar } from '@/utils'
|
import { setCssVar } from '@/utils'
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
import { ElementPlusSize } from '@/types/elementPlus'
|
|
||||||
|
|
||||||
const { variables } = useDesign()
|
const { variables } = useDesign()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { ElementPlusSize } from './elementPlus'
|
|
||||||
export interface ConfigGlobalTypes {
|
export interface ConfigGlobalTypes {
|
||||||
size?: ElementPlusSize
|
size?: ElementPlusSize
|
||||||
}
|
}
|
||||||
|
|
@ -4,7 +4,7 @@ import { PropType, ref } from 'vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||||
import { contextMenuSchema } from '../../../types/contextMenu'
|
import { contextMenuSchema } from './types'
|
||||||
const { getPrefixCls } = useDesign()
|
const { getPrefixCls } = useDesign()
|
||||||
|
|
||||||
const prefixCls = getPrefixCls('context-menu')
|
const prefixCls = getPrefixCls('context-menu')
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { useDesign } from '@/hooks/web/useDesign'
|
||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
import { ref, unref, PropType, computed, useAttrs, useSlots } from 'vue'
|
import { ref, unref, PropType, computed, useAttrs, useSlots } from 'vue'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { DescriptionsSchema } from '@/types/descriptions'
|
import { DescriptionsSchema } from './types'
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import Form from './src/Form.vue'
|
import Form from './src/Form.vue'
|
||||||
import { ElForm } from 'element-plus'
|
import { ElForm } from 'element-plus'
|
||||||
import { FormSchema, FormSetPropsType } from '@/types/form'
|
import { FormSchema, FormSetPropsType } from './src/types'
|
||||||
|
|
||||||
export interface FormExpose {
|
export interface FormExpose {
|
||||||
setValues: (data: Recordable) => void
|
setValues: (data: Recordable) => void
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -20,14 +20,14 @@ import { findIndex } from '@/utils'
|
||||||
import { set } from 'lodash-es'
|
import { set } from 'lodash-es'
|
||||||
import { FormProps } from './types'
|
import { FormProps } from './types'
|
||||||
import { Icon } from '@/components/Icon'
|
import { Icon } from '@/components/Icon'
|
||||||
import { FormSchema, FormSetPropsType } from '@/types/form'
|
|
||||||
import {
|
import {
|
||||||
|
FormSchema,
|
||||||
|
FormSetPropsType,
|
||||||
ComponentNameEnum,
|
ComponentNameEnum,
|
||||||
SelectComponentProps,
|
SelectComponentProps,
|
||||||
SelectOption,
|
RadioGroupComponentProps,
|
||||||
RadioComponentProps,
|
CheckboxGroupComponentProps
|
||||||
CheckboxComponentProps
|
} from './types'
|
||||||
} from '@/types/components.d'
|
|
||||||
|
|
||||||
const { renderSelectOptions } = useRenderSelect()
|
const { renderSelectOptions } = useRenderSelect()
|
||||||
const { renderRadioOptions } = useRenderRadio()
|
const { renderRadioOptions } = useRenderRadio()
|
||||||
|
|
@ -230,36 +230,6 @@ export default defineComponent({
|
||||||
|
|
||||||
const { autoSetPlaceholder } = unref(getProps)
|
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 componentSlots = (item?.componentProps as any)?.slots || {}
|
||||||
const slotsMap: Recordable = {
|
const slotsMap: Recordable = {
|
||||||
...setItemComponentSlots(componentSlots)
|
...setItemComponentSlots(componentSlots)
|
||||||
|
|
@ -291,7 +261,21 @@ export default defineComponent({
|
||||||
? () => renderRadioOptions(item)
|
? () => renderRadioOptions(item)
|
||||||
: () => {
|
: () => {
|
||||||
return componentSlots.default(
|
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)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,19 +16,15 @@ import {
|
||||||
ElTimeSelect,
|
ElTimeSelect,
|
||||||
ElTransfer,
|
ElTransfer,
|
||||||
ElAutocomplete,
|
ElAutocomplete,
|
||||||
ElDivider,
|
ElDivider
|
||||||
ElRadio,
|
|
||||||
ElCheckbox
|
|
||||||
} from 'element-plus'
|
} from 'element-plus'
|
||||||
import { InputPassword } from '@/components/InputPassword'
|
import { InputPassword } from '@/components/InputPassword'
|
||||||
import { Editor } from '@/components/Editor'
|
import { Editor } from '@/components/Editor'
|
||||||
import { ComponentName } from '@/types/components'
|
import { ComponentName } from './types'
|
||||||
|
|
||||||
const componentMap: Recordable<Component, ComponentName> = {
|
const componentMap: Recordable<Component, ComponentName> = {
|
||||||
Radio: ElRadio,
|
|
||||||
RadioGroup: ElRadioGroup,
|
RadioGroup: ElRadioGroup,
|
||||||
RadioButton: ElRadioGroup,
|
RadioButton: ElRadioGroup,
|
||||||
Checkbox: ElCheckbox,
|
|
||||||
CheckboxGroup: ElCheckboxGroup,
|
CheckboxGroup: ElCheckboxGroup,
|
||||||
CheckboxButton: ElCheckboxGroup,
|
CheckboxButton: ElCheckboxGroup,
|
||||||
Input: ElInput,
|
Input: ElInput,
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,25 @@
|
||||||
import { FormSchema } from '@/types/form'
|
import { FormSchema, ComponentNameEnum, CheckboxGroupComponentProps } from '../types'
|
||||||
import { ElCheckbox, ElCheckboxButton } from 'element-plus'
|
import { ElCheckbox, ElCheckboxButton } from 'element-plus'
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
|
|
||||||
export const useRenderCheckbox = () => {
|
export const useRenderCheckbox = () => {
|
||||||
const renderCheckboxOptions = (item: FormSchema) => {
|
const renderCheckboxOptions = (item: FormSchema) => {
|
||||||
// 如果有别名，就取别名
|
// 如果有别名，就取别名
|
||||||
const labelAlias = item?.componentProps?.optionsAlias?.labelField
|
const componentProps = item.componentProps as CheckboxGroupComponentProps
|
||||||
const valueAlias = item?.componentProps?.optionsAlias?.valueField
|
const valueAlias = componentProps?.props?.value || 'value'
|
||||||
const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType<
|
const labelAlias = componentProps?.props?.label || 'label'
|
||||||
typeof defineComponent
|
const disabledAlias = componentProps?.props?.disabled || 'disabled'
|
||||||
>
|
const Com = (
|
||||||
return item?.componentProps?.options?.map((option) => {
|
item.component === ComponentNameEnum.CHECKBOX_GROUP ? ElCheckbox : ElCheckboxButton
|
||||||
|
) as ReturnType<typeof defineComponent>
|
||||||
|
return componentProps?.options?.map((option) => {
|
||||||
const { value, ...other } = option
|
const { value, ...other } = option
|
||||||
return (
|
return (
|
||||||
<Com {...other} label={option[valueAlias || 'value']}>
|
<Com
|
||||||
|
{...other}
|
||||||
|
disabled={option[disabledAlias || 'disabled']}
|
||||||
|
label={option[valueAlias || 'value']}
|
||||||
|
>
|
||||||
{option[labelAlias || 'label']}
|
{option[labelAlias || 'label']}
|
||||||
</Com>
|
</Com>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import { FormSchema } from '@/types/form'
|
import { FormSchema, ComponentNameEnum, RadioGroupComponentProps } from '../types'
|
||||||
import { ElRadio, ElRadioButton } from 'element-plus'
|
import { ElRadio, ElRadioButton } from 'element-plus'
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { ComponentNameEnum, RadioGroupComponentProps } from '@/types/components.d'
|
|
||||||
|
|
||||||
export const useRenderRadio = () => {
|
export const useRenderRadio = () => {
|
||||||
const renderRadioOptions = (item: FormSchema) => {
|
const renderRadioOptions = (item: FormSchema) => {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import { ElOption, ElOptionGroup } from 'element-plus'
|
import { ElOption, ElOptionGroup } from 'element-plus'
|
||||||
import { FormSchema } from '@/types/form'
|
import { FormSchema, SelectComponentProps, SelectOption } from '../types'
|
||||||
import { SelectComponentProps, SelectOption } from '@/types/components'
|
|
||||||
|
|
||||||
export const useRenderSelect = () => {
|
export const useRenderSelect = () => {
|
||||||
// 渲染 select options
|
// 渲染 select options
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { unref, type Slots } from 'vue'
|
import { unref, type Slots } from 'vue'
|
||||||
import { getSlot } from '@/utils/tsxHelper'
|
import { getSlot } from '@/utils/tsxHelper'
|
||||||
import { PlaceholderMoel } from './types'
|
import { PlaceholderMoel, FormSchema, ComponentNameEnum, ColProps } from './types'
|
||||||
import { FormSchema } from '@/types/form.d'
|
|
||||||
import { ColProps, ComponentNameEnum } from '@/types/components.d'
|
|
||||||
import { isFunction } from '@/utils/is'
|
import { isFunction } from '@/utils/is'
|
||||||
import { firstUpperCase, humpToDash } from '@/utils'
|
import { firstUpperCase, humpToDash } from '@/utils'
|
||||||
|
|
||||||
|
|
@ -39,7 +37,8 @@ export const setTextPlaceholder = (schema: FormSchema): PlaceholderMoel => {
|
||||||
const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
|
const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
|
||||||
if (
|
if (
|
||||||
twoTextMap.includes(
|
twoTextMap.includes(
|
||||||
(schema?.componentProps?.type || schema?.componentProps?.isRange) as string
|
((schema?.componentProps as any)?.type ||
|
||||||
|
(schema?.componentProps as any)?.isRange) as string
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,13 @@
|
||||||
import { FormSchema } from '@/types/form'
|
import { FormSchema } from '@/types/form'
|
||||||
|
import { CSSProperties, VNodeProps, VNode } from 'vue'
|
||||||
|
import {
|
||||||
|
InputProps,
|
||||||
|
AutocompleteProps,
|
||||||
|
InputNumberProps,
|
||||||
|
CascaderProps,
|
||||||
|
CascaderNode,
|
||||||
|
CascaderValue
|
||||||
|
} from 'element-plus'
|
||||||
|
|
||||||
export interface PlaceholderMoel {
|
export interface PlaceholderMoel {
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
|
|
@ -15,3 +24,816 @@ export type FormProps = {
|
||||||
isCustom?: boolean
|
isCustom?: boolean
|
||||||
labelWidth?: string | number
|
labelWidth?: string | number
|
||||||
} & Recordable
|
} & 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>
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { ConfigGlobalTypes } from '@/types/configGlobal'
|
import { ConfigGlobalTypes } from '@/components/ConfigGlobal/src/types'
|
||||||
import { inject } from 'vue'
|
import { inject } from 'vue'
|
||||||
|
|
||||||
export const useConfigGlobal = () => {
|
export const useConfigGlobal = () => {
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export type ElementPlusSize = 'default' | 'small' | 'large'
|
|
||||||
|
|
||||||
export type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
|
|
||||||
|
|
@ -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>
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,15 +5,17 @@ import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { useIcon } from '@/hooks/web/useIcon'
|
import { useIcon } from '@/hooks/web/useIcon'
|
||||||
import { ContentWrap } from '@/components/ContentWrap'
|
import { ContentWrap } from '@/components/ContentWrap'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { FormSchema } from '@/types/form'
|
import { SelectOption, RadioOption, CheckboxOption, FormSchema } from '@/components/Form/src/types'
|
||||||
import {
|
|
||||||
ComponentOptions,
|
|
||||||
SelectOption,
|
|
||||||
SelectComponentProps,
|
|
||||||
RadioOption
|
|
||||||
} from '@/types/components'
|
|
||||||
import { useForm } from '@/hooks/web/useForm'
|
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()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
|
@ -937,52 +939,6 @@ const schema = reactive<FormSchema[]>([
|
||||||
label: t('formDemo.radio'),
|
label: t('formDemo.radio'),
|
||||||
component: 'Divider'
|
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',
|
field: 'field39-2',
|
||||||
label: t('formDemo.radioGroup'),
|
label: t('formDemo.radioGroup'),
|
||||||
|
|
@ -1081,13 +1037,13 @@ const schema = reactive<FormSchema[]>([
|
||||||
component: 'Divider'
|
component: 'Divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'field42',
|
field: 'field42-2',
|
||||||
label: t('formDemo.default'),
|
label: t('formDemo.checkboxGroup'),
|
||||||
component: 'Checkbox',
|
component: 'CheckboxGroup',
|
||||||
|
value: [],
|
||||||
componentProps: {
|
componentProps: {
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
disabled: true,
|
|
||||||
label: 'option-1',
|
label: 'option-1',
|
||||||
value: '1'
|
value: '1'
|
||||||
},
|
},
|
||||||
|
|
@ -1103,9 +1059,10 @@ const schema = reactive<FormSchema[]>([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'field42-1',
|
field: 'field42-3',
|
||||||
label: t('formDemo.slot'),
|
label: `${t('formDemo.checkboxGroup')} ${t('formDemo.slot')}`,
|
||||||
component: 'Checkbox',
|
component: 'CheckboxGroup',
|
||||||
|
value: [],
|
||||||
componentProps: {
|
componentProps: {
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
|
|
@ -1122,252 +1079,271 @@ const schema = reactive<FormSchema[]>([
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
slots: {
|
slots: {
|
||||||
default: ({ option }) => {
|
default: (options: CheckboxOption[]) => {
|
||||||
|
return options?.map((v) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<ElCheckbox label={v.value}>
|
||||||
<span>{option.label}</span>
|
{v.label}({v.value})
|
||||||
<span> ({option.value}) </span>
|
</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({
|
const { register, formRef, methods } = useForm({
|
||||||
|
|
@ -1445,102 +1421,43 @@ const changeToggle = () => {
|
||||||
</template>
|
</template>
|
||||||
</Form> -->
|
</Form> -->
|
||||||
|
|
||||||
<Form @register="register">
|
<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>
|
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less">
|
||||||
.cell {
|
.cell {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 3px 0;
|
padding: 3px 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
display: block;
|
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
border-radius: 50%;
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.current {
|
&.current {
|
||||||
.text {
|
.text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: purple;
|
background: #626aef;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.holiday {
|
.holiday {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
|
||||||
left: 50%;
|
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: red;
|
background: var(--el-color-danger);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,12 @@ declare global {
|
||||||
declare type TimeoutHandle = ReturnType<typeof setTimeout>
|
declare type TimeoutHandle = ReturnType<typeof setTimeout>
|
||||||
declare type IntervalHandle = ReturnType<typeof setInterval>
|
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 =
|
declare type AxiosHeaders =
|
||||||
| 'application/json'
|
| 'application/json'
|
||||||
| 'application/x-www-form-urlencoded'
|
| 'application/x-www-form-urlencoded'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue