wip: Form改造中

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'
-
-                      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 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 || {}

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

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',

src/locales/zh-CN.ts

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

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

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文档

src/views/Components/Form/DefaultForm.vue

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