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

wip: Form改造中

This commit is contained in:
kailong321200875 2023-05-25 11:33:37 +08:00
parent deeee73bcb
commit e34b5cb613
7 changed files with 144 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,8 @@ import {
ComponentNameEnum,
SelectComponentProps,
SelectOption,
RadioComponentProps
RadioComponentProps,
CheckboxComponentProps
} from '@/types/components.d'
const { renderSelectOptions } = useRenderSelect()
@ -230,33 +231,33 @@ export default defineComponent({
const { autoSetPlaceholder } = unref(getProps)
// 需要特殊处理的组件
const specialComponents = [ComponentNameEnum.RADIO]
const specialComponents = [ComponentNameEnum.RADIO, ComponentNameEnum.CHECKBOX]
if (specialComponents.findIndex((v) => v === item.component) !== -1) {
switch (item.component) {
case ComponentNameEnum.RADIO:
const componentProps = item.componentProps as RadioComponentProps
const valueAlias = componentProps?.props?.value || 'value'
const labelAlias = componentProps?.props?.label || 'label'
const disabledAlias = componentProps?.props?.disabled || 'disabled'
const componentProps =
item.component === ComponentNameEnum.RADIO
? (item.componentProps as RadioComponentProps)
: (item.componentProps as CheckboxComponentProps)
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 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 || {}

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

@ -17,7 +17,8 @@ import {
ElTransfer,
ElAutocomplete,
ElDivider,
ElRadio
ElRadio,
ElCheckbox
} from 'element-plus'
import { InputPassword } from '@/components/InputPassword'
import { Editor } from '@/components/Editor'
@ -27,7 +28,8 @@ const componentMap: Recordable<Component, ComponentName> = {
Radio: ElRadio,
RadioGroup: ElRadioGroup,
RadioButton: ElRadioGroup,
Checkbox: ElCheckboxGroup,
Checkbox: ElCheckbox,
CheckboxGroup: ElCheckboxGroup,
CheckboxButton: ElCheckboxGroup,
Input: ElInput,
Autocomplete: ElAutocomplete,

2
src/locales/en.ts
View File

@ -244,6 +244,8 @@ export default {
radioGroup: 'Radio Group',
button: 'Button',
checkbox: 'Checkbox',
checkboxButton: 'Checkbox Button',
checkboxGroup: 'Checkbox Group',
slider: 'Slider',
datePicker: 'Date Picker',
shortcuts: 'Shortcuts',

2
src/locales/zh-CN.ts
View File

@ -244,6 +244,8 @@ export default {
radioGroup: '单选框组',
button: '按钮',
checkbox: '多选框',
checkboxButton: '多选框按钮',
checkboxGroup: '多选框组',
slider: '滑块',
datePicker: '日期选择器',
shortcuts: '快捷选项',

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

@ -14,6 +14,7 @@ export enum ComponentNameEnum {
RADIO_GROUP = 'RadioGroup',
RADIO_BUTTON = 'RadioButton',
CHECKBOX = 'Checkbox',
CHECKBOX_GROUP = 'CheckboxGroup',
CHECKBOX_BUTTON = 'CheckboxButton',
INPUT = 'Input',
AUTOCOMPLETE = 'Autocomplete',
@ -432,6 +433,7 @@ export interface RadioOption {
disabled?: boolean
[key: string]: any
}
export interface RadioComponentProps {
value?: string | number | boolean
label?: string | number | boolean
@ -513,6 +515,50 @@ export interface RadioButtonComponentProps {
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

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

@ -15,7 +15,8 @@ import {
TransferComponentProps,
RadioComponentProps,
RadioGroupComponentProps,
RadioButtonComponentProps
RadioButtonComponentProps,
CheckboxComponentProps
} from '@/types/components'
import { FormValueType, FormValueType } from '@/types/form'
import type { AxiosPromise } from 'axios'
@ -76,6 +77,7 @@ export interface FormSchema {
| RadioComponentProps
| RadioGroupComponentProps
| RadioButtonComponentProps
| CheckboxComponentProps
/**
* formItem组件属性，具体可以查看element-plus文档

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

@ -1003,7 +1003,7 @@ const schema = reactive<FormSchema[]>([
},
{
field: 'field39-3',
label: `${t('formDemo.radioGroup')}${t('formDemo.slot')}`,
label: `${t('formDemo.radioGroup')} ${t('formDemo.slot')}`,
component: 'RadioGroup',
componentProps: {
options: [
@ -1048,8 +1048,8 @@ const schema = reactive<FormSchema[]>([
}
},
{
field: 'field40',
label: `${t('formDemo.button')}${t('formDemo.slot')}`,
field: 'field40-1',
label: `${t('formDemo.button')} ${t('formDemo.slot')}`,
component: 'RadioButton',
componentProps: {
options: [
@ -1079,16 +1079,68 @@ const schema = reactive<FormSchema[]>([
field: 'field41',
label: t('formDemo.checkbox'),
component: 'Divider'
},
{
field: 'field42',
label: t('formDemo.default'),
component: 'Checkbox',
componentProps: {
options: [
{
disabled: true,
label: 'option-1',
value: '1'
},
{
label: 'option-2',
value: '2'
},
{
label: 'option-3',
value: '3'
}
]
}
},
{
field: 'field42-1',
label: t('formDemo.slot'),
component: 'Checkbox',
componentProps: {
options: [
{
label: 'option-1',
value: '1'
},
{
label: 'option-2',
value: '2'
},
{
label: 'option-3',
value: '3'
}
],
slots: {
default: ({ option }) => {
return (
<>
<span>{option.label}</span>
<span> ({option.value}) </span>
</>
)
}
}
}
}
// {
// field: 'field42',
// label: t('formDemo.default'),
// component: 'Checkbox',
// field: 'field42-2',
// label: t('formDemo.checkboxGroup'),
// component: 'CheckboxGroup',
// value: [],
// componentProps: {
// options: [
// {
// disabled: true,
// label: 'option-1',
// value: '1'
// },
@ -1098,11 +1150,11 @@ const schema = reactive<FormSchema[]>([
// },
// {
// label: 'option-3',
// value: '23'
// value: '3'
// }
// ]
// }
// },
// }
// {
// field: 'field43',
// label: t('formDemo.button'),