From 2882d6e937a7d4996ae42ff62148d9a2f893fe47 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Wed, 27 Jan 2021 21:23:50 +0800
Subject: [PATCH] perf(form): perf form in modal

---
 package.json                                  |  2 +-
 src/components/Form/src/BasicForm.vue         | 24 +++++++++++++++----
 .../Form/src/hooks/useFormValues.ts           |  8 +------
 yarn.lock                                     |  8 +++----
 4 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 74ec8707..49f887f4 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "vite-plugin-html": "^2.0.0-beta.6",
     "vite-plugin-mock": "^2.0.0-rc.2",
     "vite-plugin-purge-icons": "^0.6.0",
-    "vite-plugin-pwa": "^0.4.0",
+    "vite-plugin-pwa": "^0.4.1",
     "vite-plugin-style-import": "^0.4.6",
     "vue-eslint-parser": "^7.4.1",
     "yargs": "^16.2.0"
diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index 8dd25ca0..af1cdc51 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -33,9 +33,19 @@
 <script lang="ts">
   import type { FormActionType, FormProps, FormSchema } from './types/form';
   import type { AdvanceState } from './types/hooks';
-  import type { CSSProperties, Ref, WatchStopHandle } from 'vue';
+  import type { CSSProperties, Ref } from 'vue';
 
-  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
+  import {
+    defineComponent,
+    reactive,
+    ref,
+    computed,
+    unref,
+    onMounted,
+    watch,
+    toRefs,
+    nextTick,
+  } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './components/FormItem';
   import FormAction from './components/FormAction.vue';
@@ -51,6 +61,7 @@
   import { useFormEvents } from './hooks/useFormEvents';
   import { createFormContext } from './hooks/useFormContext';
   import { useAutoFocus } from './hooks/useAutoFocus';
+  import { useModalContext } from '/@/components/Modal';
 
   import { basicProps } from './props';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -62,6 +73,7 @@
     emits: ['advanced-change', 'reset', 'submit', 'register'],
     setup(props, { emit }) {
       const formModel = reactive<Recordable>({});
+      const modalFn = useModalContext();
 
       const advanceState = reactive<AdvanceState>({
         isAdvanced: true,
@@ -188,11 +200,15 @@
         }
       );
 
-      const stopWatch: WatchStopHandle = watch(
+      watch(
         () => getSchema.value,
         (schema) => {
+          nextTick(() => {
+            //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
+            modalFn?.redoModalHeight?.();
+          });
           if (unref(isInitedDefaultRef)) {
-            return stopWatch();
+            return;
           }
           if (schema?.length) {
             initDefault();
diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts
index ca1be932..df3b68a5 100644
--- a/src/components/Form/src/hooks/useFormValues.ts
+++ b/src/components/Form/src/hooks/useFormValues.ts
@@ -1,10 +1,9 @@
 import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
 import { dateUtil } from '/@/utils/dateUtil';
 
-import { unref, nextTick } from 'vue';
+import { unref } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import type { FieldMapToTime, FormSchema } from '../types/form';
-import { useModalContext } from '/@/components/Modal';
 
 interface UseFormValuesContext {
   transformDateFuncRef: Ref<Fn>;
@@ -20,7 +19,6 @@ export function useFormValues({
   getSchema,
   formModel,
 }: UseFormValuesContext) {
-  const modalFn = useModalContext();
   // Processing form values
   function handleFormValues(values: Recordable) {
     if (!isObject(values)) {
@@ -85,10 +83,6 @@ export function useFormValues({
       }
     });
     defaultValueRef.value = obj;
-    nextTick(() => {
-      //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
-      modalFn?.redoModalHeight?.();
-    });
   }
 
   return { handleFormValues, initDefault };
diff --git a/yarn.lock b/yarn.lock
index 4cd84f8e..67119097 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7722,10 +7722,10 @@ vite-plugin-purge-icons@^0.6.0:
     "@purge-icons/generated" "^0.6.0"
     rollup-plugin-purge-icons "^0.6.0"
 
-vite-plugin-pwa@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.0.tgz#be7723315beed00ca7f9d23b24c5b1356276747c"
-  integrity sha512-+qsqpR6QgkxY8IdSyjHDGz5L5+3pbXKVP2KztqMeamu8Rpki45kEUMrdhloFSPiSNA7L+xS/U6WDyNe+u0IP4A==
+vite-plugin-pwa@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.1.tgz#eae03c4dd10cd51600c08fd1aaa179a92577c456"
+  integrity sha512-UvcdW93FT0+2dRSLasQtvJepBwXj+UTcvzBekca6YuVdn/MTdEX01J/QqPL+v3KUZBnNM2MAOFpLIkZ3wi9t8g==
   dependencies:
     debug "^4.3.2"
     fast-glob "^3.2.5"