From 26c60c316ae688c41b9b0093ea5ee7d85fcb98af Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 5 Jul 2022 12:10:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20fieldset=20checkbox=20chang?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=B8=8D=E4=BC=9A=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Fieldset.vue | 124 +++++++++-------------
 packages/form/src/index.ts                |   2 +-
 packages/form/src/theme/fieldset.scss     |   4 +
 3 files changed, 53 insertions(+), 77 deletions(-)

diff --git a/packages/form/src/containers/Fieldset.vue b/packages/form/src/containers/Fieldset.vue
index 6a625a1c..de85dc8b 100644
--- a/packages/form/src/containers/Fieldset.vue
+++ b/packages/form/src/containers/Fieldset.vue
@@ -4,25 +4,15 @@
     class="m-fieldset"
     :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
   >
-    <el-checkbox
-      v-if="!show && name"
-      v-model="model[name].value"
-      :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
-      :true-label="1"
-      :false-label="0"
-      @change="change"
-      ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
-    ></el-checkbox>
-    <legend v-else-if="config.checkbox && name">
+    <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
       <el-checkbox
         v-model="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-label="1"
         :false-label="0"
-        @change="change"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></el-checkbox>
-    </legend>
+    </component>
     <legend v-else>
       <span v-html="config.legend"></span>
       <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
@@ -62,77 +52,59 @@
   </fieldset>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
 
 import { FieldsetConfig, FormState } from '../schema';
 
-export default defineComponent({
-  name: 'm-form-fieldset',
-
-  props: {
-    labelWidth: String,
-
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    config: {
-      type: Object as PropType<FieldsetConfig>,
-      default: () => ({}),
-    },
-
-    rules: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    prop: {
-      type: String,
-      default: () => '',
-    },
-
-    size: String,
+const props = withDefaults(
+  defineProps<{
+    labelWidth?: string;
+    prop: string;
+    size?: string;
+    model: Record<string, any>;
+    config: FieldsetConfig;
+    rules?: any;
+  }>(),
+  {
+    rules: {},
+    prop: '',
   },
+);
 
-  emits: ['change'],
+const emit = defineEmits(['change']);
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+const mForm = inject<FormState | undefined>('mForm');
 
-    const name = computed(() => props.config.name || '');
+const name = computed(() => props.config.name || '');
 
-    const show = computed(() => {
-      if (props.config.expand && name.value) {
-        return props.model[name.value]?.value;
-      }
-      return true;
-    });
-
-    const lWidth = computed(() => {
-      if (props.config.items) {
-        return props.config.labelWidth || props.labelWidth;
-      }
-      return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
-    });
-
-    const change = () => {
-      emit('change', props.model);
-    };
-
-    const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
-
-    return {
-      show,
-      name,
-      mForm,
-      lWidth,
-      key,
-      change,
-    };
-  },
+const show = computed(() => {
+  if (props.config.expand && name.value) {
+    return props.model[name.value]?.value;
+  }
+  return true;
 });
-</script>
 
-<style lang="scss"></style>
+const lWidth = computed(() => {
+  if (props.config.items) {
+    return props.config.labelWidth || props.labelWidth;
+  }
+  return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
+});
+
+const change = () => {
+  emit('change', props.model);
+};
+
+const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
+
+if (props.config.checkbox && name.value) {
+  watch(
+    () => props.model[name.value]?.value,
+    () => {
+      console.log(props.model);
+      emit('change', props.model);
+    },
+  );
+}
+</script>
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 81c8157b..3b5377f4 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -95,7 +95,7 @@ const install = (app: App, opt: any) => {
   app.component(Form.name, Form);
   app.component(FormDialog.name, FormDialog);
   app.component(Container.name, Container);
-  app.component(Fieldset.name, Fieldset);
+  app.component('m-form-fieldset', Fieldset);
   app.component(GroupList.name, GroupList);
   app.component(Panel.name, Panel);
   app.component(Row.name, Row);
diff --git a/packages/form/src/theme/fieldset.scss b/packages/form/src/theme/fieldset.scss
index f286c293..3bd8390b 100644
--- a/packages/form/src/theme/fieldset.scss
+++ b/packages/form/src/theme/fieldset.scss
@@ -5,6 +5,10 @@ fieldset.m-fieldset {
   margin-bottom: 10px;
   min-inline-size: auto;
 
+  .el-checkbox {
+    height: 22px;
+  }
+
   legend {
     font-size: 14px;
     position: absolute;