From 979336c05254783225f4fc5681ef407489c41e67 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 8 Mar 2022 20:07:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20=E8=A1=A8=E5=8D=95=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=B2=A1=E6=9C=89=E5=8F=98=E5=8C=96,=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=80=BC=E5=8F=98=E5=8C=96=E6=97=B6,=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=8F=91=E7=94=9F=E9=87=8D=E7=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/Form.vue            | 61 +++++++++++++++------------
 packages/form/src/containers/Tabs.vue |  4 ++
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 1c41b9c3..b2e68873 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -1,6 +1,5 @@
 <template>
-  <ElForm
-    v-if="initialized && Array.isArray(config)"
+  <el-form
     class="m-form"
     ref="elForm"
     :model="values"
@@ -10,25 +9,26 @@
     :inline="inline"
     :label-position="labelPosition"
   >
-    <MContainer
-      v-for="(item, index) in config"
-      :key="item[keyProp] ?? index"
-      :config="item"
-      :model="values"
-      :label-width="item.labelWidth || labelWidth"
-      :step-active="stepActive"
-      :size="size"
-      @change="changeHandler"
-    ></MContainer>
-  </ElForm>
+    <template v-if="initialized && Array.isArray(config)">
+      <m-form-container
+        v-for="(item, index) in config"
+        :key="item[keyProp] ?? index"
+        :config="item"
+        :model="values"
+        :label-width="item.labelWidth || labelWidth"
+        :step-active="stepActive"
+        :size="size"
+        @change="changeHandler"
+      ></m-form-container>
+    </template>
+  </el-form>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, provide, reactive, ref, watchEffect } from 'vue';
+import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
 import { ElForm } from 'element-plus';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEqual } from 'lodash-es';
 
-import MContainer from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import { FormConfig, FormState, FormValue } from './schema';
@@ -45,8 +45,6 @@ export interface FieldErrorList {
 export default defineComponent({
   name: 'm-form',
 
-  components: { ElForm, MContainer },
-
   props: {
     // 表单初始化值
     initValues: {
@@ -140,16 +138,23 @@ export default defineComponent({
 
     provide('mForm', formState);
 
-    watchEffect(() => {
-      initialized.value = false;
-      initValue(formState, {
-        initValues: props.initValues,
-        config: props.config,
-      }).then((value) => {
-        values.value = value;
-        initialized.value = true;
-      });
-    });
+    watch(
+      [() => props.config, () => props.initValues],
+      ([config], [preConfig]) => {
+        if (!isEqual(toRaw(config), toRaw(preConfig))) {
+          initialized.value = false;
+        }
+
+        initValue(formState, {
+          initValues: props.initValues,
+          config: props.config,
+        }).then((value) => {
+          values.value = value;
+          initialized.value = true;
+        });
+      },
+      { immediate: true },
+    );
 
     return {
       initialized,
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index c7e92174..5f5bbcf3 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -54,6 +54,10 @@ const getActive = (mForm: FormState | undefined, props: any, activeTabName: stri
 
 const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) => {
   const { config, model, prop } = props;
+
+  // 兼容vue2的element-ui
+  tab.name = tab.paneName;
+
   if (typeof config.onTabClick === 'function') {
     config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
   }