From a73e9984986427c88189f6dfa54fd84374fdf3ef Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sun, 31 Dec 2023 22:24:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=89=B9=E6=AE=8A=E5=A4=84?=
 =?UTF-8?q?=E7=90=86checkbox=E5=92=8Cradio=E6=B2=A1=E6=9C=89value=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-form-control/control-child.vue     | 19 ++++++++++++++++--
 src/components/common-form-control/index.vue  | 16 +++++++--------
 src/components/common-table/index.vue         |  4 ++--
 src/views/tools/Forms.vue                     | 20 +++++++++++++++++++
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/common-form-control/control-child.vue b/src/components/common-form-control/control-child.vue
index 553c9e7..f1ba009 100644
--- a/src/components/common-form-control/control-child.vue
+++ b/src/components/common-form-control/control-child.vue
@@ -26,6 +26,19 @@ const label = computed(() => {
   }
   return option.label
 })
+/**
+ * element-plus的复选框和单选框没有value值，只有label用于存储值，因此特殊处理
+ * @type {string[]}
+ */
+const labelAsValueKeys = ['checkbox', 'radio', 'checkbox-button', 'radio-button']
+
+const labelOrValue = computed(() => {
+  const option = props.option
+  if (labelAsValueKeys.includes(option.type)) {
+    return option.value
+  }
+  return label.value
+})
 
 </script>
 
@@ -33,9 +46,11 @@ const label = computed(() => {
   <component
     :is="inputType"
     :value="option.value"
-    :label="label"
+    :label="labelOrValue"
     v-bind="option.attrs"
-  />
+  >
+    {{ label }}
+  </component>
 </template>
 
 <style scoped>
diff --git a/src/components/common-form-control/index.vue b/src/components/common-form-control/index.vue
index 49f8200..3bd50a8 100644
--- a/src/components/common-form-control/index.vue
+++ b/src/components/common-form-control/index.vue
@@ -7,7 +7,7 @@ import ControlChild from '@/components/common-form-control/control-child.vue'
  * 定义一些注释属性，方便代码提示
  * @typedef {Object} CommonFormOption
  * @property {'input'|'input-number'|'cascader'|'radio'
- * |'radio-group'|'checkbox'|'checkbox-group'|'date-picker'
+ * |'radio-group'|'radio-button'|'checkbox'|'checkbox-group'|'checkbox-button'|'date-picker'
  * |'time-picker'|'switch'|'select'|'option'|'slider'|'transfer'|'upload'} type 类型
  * @property {any} value 数据值
  * @property {string|[string]} prop 属性
@@ -60,20 +60,20 @@ const label = computed(() => {
   return option.label
 })
 
-const controlModel = computed(() => props.option.model || props.model)
+const formModel = computed(() => props.option.model || props.model)
 
 const modelValue = computed({
   get () {
-    console.info('=================', controlModel.value)
-    if (controlModel.value && props.option.prop) {
-      return controlModel.value[props.option.prop]
+    console.info('=================', formModel.value)
+    if (formModel.value && props.option.prop) {
+      return formModel.value[props.option.prop]
     }
     return null
   },
   set (val) {
-    console.info('set===============', controlModel.value)
-    if (controlModel.value && props.option.prop) {
-      controlModel.value[props.option.prop] = val
+    console.info('set===============', formModel.value)
+    if (formModel.value && props.option.prop) {
+      formModel.value[props.option.prop] = val
     }
   }
 })
diff --git a/src/components/common-table/index.vue b/src/components/common-table/index.vue
index c7dfe47..7add52f 100644
--- a/src/components/common-table/index.vue
+++ b/src/components/common-table/index.vue
@@ -1,10 +1,10 @@
 <script setup>
+import CommonTableColumn from '@/components/common-table/common-table-column.vue'
+
 /**
  * @typedef {TableProps} CommonTableProps
  * @property {[CommonTableColumn]} columns
  */
-import CommonTableColumn from '@/components/common-table/common-table-column.vue'
-
 /**
  * @type CommonTableProps
  */
diff --git a/src/views/tools/Forms.vue b/src/views/tools/Forms.vue
index 5ab2537..0d56b86 100644
--- a/src/views/tools/Forms.vue
+++ b/src/views/tools/Forms.vue
@@ -55,6 +55,26 @@ const formOptions = [{
       value: 'sleep'
     }
   ]
+}, {
+  label: '职业',
+  type: 'select',
+  prop: 'career',
+  value: '',
+  required: true,
+  children: [
+    {
+      label: '程序员',
+      value: 'programer'
+    },
+    {
+      label: '无业游民',
+      value: 'none'
+    },
+    {
+      label: '教师',
+      value: 'teacher'
+    }
+  ]
 }, {
   label: '性别',
   type: 'radio-group',