From 1af4c343e69bde50226f89990eae3c6c729cd029 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sun, 31 Dec 2023 18:44:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common-form-control/index.vue  | 21 +++++++++-
 src/services/global/GlobalService.js          |  2 +-
 .../components/global/GlobalSettings.vue      | 12 ++----
 src/views/tools/Forms.vue                     | 40 +++++++++++++++++++
 4 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/src/components/common-form-control/index.vue b/src/components/common-form-control/index.vue
index 83f0720..49f8200 100644
--- a/src/components/common-form-control/index.vue
+++ b/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"
         />
diff --git a/src/services/global/GlobalService.js b/src/services/global/GlobalService.js
index 1516516..903a817 100644
--- a/src/services/global/GlobalService.js
+++ b/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'
diff --git a/src/views/components/global/GlobalSettings.vue b/src/views/components/global/GlobalSettings.vue
index c1dccdf..54a598f 100644
--- a/src/views/components/global/GlobalSettings.vue
+++ b/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
     }]
   },
   {
diff --git a/src/views/tools/Forms.vue b/src/views/tools/Forms.vue
index afe930a..f779aca 100644
--- a/src/views/tools/Forms.vue
+++ b/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: '',