From e34b5cb6132a2afd1446da598d2b0805afc65105 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Thu, 25 May 2023 11:33:37 +0800 Subject: [PATCH] =?UTF-8?q?wip:=20Form=E6=94=B9=E9=80=A0=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Form/src/Form.vue | 51 +++++++++-------- src/components/Form/src/componentMap.ts | 6 +- src/locales/en.ts | 2 + src/locales/zh-CN.ts | 2 + src/types/components.d.ts | 46 +++++++++++++++ src/types/form.d.ts | 4 +- src/views/Components/Form/DefaultForm.vue | 70 ++++++++++++++++++++--- 7 files changed, 144 insertions(+), 37 deletions(-) diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index 9e47bfb..0aeb8e2 100644 --- a/src/components/Form/src/Form.vue +++ b/src/components/Form/src/Form.vue @@ -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 ( - - {() => - componentProps?.slots?.default - ? componentProps?.slots?.default({ option: v }) - : v[labelAlias] - } - - ) - }) - } + const valueAlias = componentProps?.props?.value || 'value' + const labelAlias = componentProps?.props?.label || 'label' + const disabledAlias = componentProps?.props?.disabled || 'disabled' + return componentProps?.options?.map((v) => { + return ( + + {() => + componentProps?.slots?.default + ? componentProps?.slots?.default({ option: v }) + : v[labelAlias] + } + + ) + }) } const componentSlots = (item?.componentProps as any)?.slots || {} diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index e8e3731..2c48f60 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -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 = { Radio: ElRadio, RadioGroup: ElRadioGroup, RadioButton: ElRadioGroup, - Checkbox: ElCheckboxGroup, + Checkbox: ElCheckbox, + CheckboxGroup: ElCheckboxGroup, CheckboxButton: ElCheckboxGroup, Input: ElInput, Autocomplete: ElAutocomplete, diff --git a/src/locales/en.ts b/src/locales/en.ts index 575e810..9527e3d 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -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', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index c6cd808..619c4ba 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -244,6 +244,8 @@ export default { radioGroup: '单选框组', button: '按钮', checkbox: '多选框', + checkboxButton: '多选框按钮', + checkboxGroup: '多选框组', slider: '滑块', datePicker: '日期选择器', shortcuts: '快捷选项', diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 9cb0727..1354f65 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -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 diff --git a/src/types/form.d.ts b/src/types/form.d.ts index e8a564d..37ea21a 100644 --- a/src/types/form.d.ts +++ b/src/types/form.d.ts @@ -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文档 diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index 109c56e..fdaabe8 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/src/views/Components/Form/DefaultForm.vue @@ -1003,7 +1003,7 @@ const schema = reactive([ }, { 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([ } }, { - 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([ 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 ( + <> + {option.label} + ({option.value}) + + ) + } + } + } } // { - // 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([ // }, // { // label: 'option-3', - // value: '23' + // value: '3' // } // ] // } - // }, + // } // { // field: 'field43', // label: t('formDemo.button'),