优化表单配置

src/components/common-form-control/index.vue

@@ -78,6 +78,23 @@ const modelValue = computed({
   }
 })
 
+const childTypeMapping = { // 自动映射子元素类型，配置的时候可以不写type
+  'checkbox-group': 'checkbox',
+  'radio-group': 'radio',
+  select: 'option'
+}
+
+const children = computed(() => {
+  const option = props.option
+  const result = option.children || [] // 初始化一些默认值
+  result.forEach(childItem => {
+    if (!childItem.type) {
+      childItem.type = childTypeMapping[option.type]
+    }
+  })
+  return result
+})
+
 </script>
 
 <template>
@@ -94,9 +111,9 @@ const modelValue = computed({
       :readonly="option.readonly"
       @change="option.change"
     >
-      <template v-if="option.children&&option.children.length">
+      <template v-if="children&&children.length">
         <control-child
-          v-for="(childItem, index) in option.children"
+          v-for="(childItem, index) in children"
           :key="index"
           :option="childItem"
         />

src/services/global/GlobalService.js

@@ -1,4 +1,4 @@
-import { GlobalLayoutMode, GlobalLocales } from '@/consts/GlobalConstants'
+import { GlobalLocales } from '@/consts/GlobalConstants'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { ref } from 'vue'
 import { $i18nBundle } from '@/messages'

src/views/components/global/GlobalSettings.vue

@@ -28,12 +28,10 @@ const options = [
     },
     children: [{
       labelKey: 'common.label.langCn',
-      value: GlobalLocales.CN,
-      type: 'option'
+      value: GlobalLocales.CN
     }, {
       labelKey: 'common.label.langEn',
-      value: GlobalLocales.EN,
-      type: 'option'
+      value: GlobalLocales.EN
     }]
   },
   {
@@ -46,12 +44,10 @@ const options = [
     },
     children: [{
       labelKey: 'common.label.layoutLeft',
-      value: GlobalLayoutMode.LEFT,
-      type: 'option'
+      value: GlobalLayoutMode.LEFT
     }, {
       labelKey: 'common.label.layoutTop',
-      value: GlobalLayoutMode.TOP,
-      type: 'option'
+      value: GlobalLayoutMode.TOP
     }]
   },
   {

src/views/tools/Forms.vue

@@ -35,6 +35,46 @@ const formOptions = [{
   value: '',
   placeholder: '选择出生日期',
   required: true
+}, {
+  label: '兴趣爱好',
+  type: 'checkbox-group',
+  prop: 'hobby',
+  value: '',
+  required: true,
+  children: [
+    {
+      label: '编程',
+      value: 'program'
+    },
+    {
+      label: '吃饭',
+      value: 'eat'
+    },
+    {
+      label: '睡觉',
+      value: 'sleep'
+    }
+  ]
+}, {
+  label: '性别',
+  type: 'radio-group',
+  prop: 'gender',
+  value: '',
+  required: true,
+  children: [
+    {
+      label: '男',
+      value: 'male'
+    },
+    {
+      label: '女',
+      value: 'female'
+    },
+    {
+      label: '保密',
+      value: 'unknown'
+    }
+  ]
 }]
 const userDto = ref({
   userName: '',