From 4b3406237c151bf00a2cc2784a14a4c85d915ad4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 20 Dec 2022 19:44:29 +0800
Subject: [PATCH] fix: system settings form could not be loaded
 (halo-dev/console#787)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug

#### What this PR does / why we need it:

修复系统设置页面切换选项卡无法正常加载表单的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3001

#### Special notes for your reviewer:

测试方式：

1. 测试系统设置页面的选项卡切换和保存功能。

#### Does this PR introduce a user-facing change?

```release-note
修复 Console 端系统设置页面切换选项卡无法正常加载表单的问题。
```
---
 src/modules/system/settings/SystemSetting.vue | 53 ++++++++++---------
 .../settings/layouts/SystemSettingsLayout.vue | 14 +++--
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/modules/system/settings/SystemSetting.vue b/src/modules/system/settings/SystemSetting.vue
index 29ef7a68e..6f96232f2 100644
--- a/src/modules/system/settings/SystemSetting.vue
+++ b/src/modules/system/settings/SystemSetting.vue
@@ -33,31 +33,36 @@ await handleFetchSettings();
 await handleFetchConfigMap();
 </script>
 <template>
-  <div class="bg-white p-4">
-    <div>
-      <FormKit
-        v-if="group && formSchema && configMapFormData"
-        :id="group"
-        v-model="configMapFormData[group]"
-        :name="group"
-        :actions="false"
-        :preserve="true"
-        type="form"
-        @submit="handleSaveConfigMap"
-      >
-        <FormKitSchema :schema="formSchema" :data="configMapFormData[group]" />
-      </FormKit>
-    </div>
-    <div v-permission="['system:configmaps:manage']" class="pt-5">
-      <div class="flex justify-start">
-        <VButton
-          :loading="saving"
-          type="secondary"
-          @click="$formkit.submit(group || '')"
+  <Transition mode="out-in" name="fade">
+    <div class="bg-white p-4">
+      <div>
+        <FormKit
+          v-if="group && formSchema && configMapFormData"
+          :id="group"
+          v-model="configMapFormData[group]"
+          :name="group"
+          :actions="false"
+          :preserve="true"
+          type="form"
+          @submit="handleSaveConfigMap"
         >
-          保存
-        </VButton>
+          <FormKitSchema
+            :schema="formSchema"
+            :data="configMapFormData[group]"
+          />
+        </FormKit>
+      </div>
+      <div v-permission="['system:configmaps:manage']" class="pt-5">
+        <div class="flex justify-start">
+          <VButton
+            :loading="saving"
+            type="secondary"
+            @click="$formkit.submit(group || '')"
+          >
+            保存
+          </VButton>
+        </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
diff --git a/src/modules/system/settings/layouts/SystemSettingsLayout.vue b/src/modules/system/settings/layouts/SystemSettingsLayout.vue
index 9ed0f8b3c..479cc4102 100644
--- a/src/modules/system/settings/layouts/SystemSettingsLayout.vue
+++ b/src/modules/system/settings/layouts/SystemSettingsLayout.vue
@@ -113,14 +113,12 @@ watch([() => route.name, () => route.params], async () => {
       <div class="bg-white">
         <RouterView :key="activeTab" v-slot="{ Component }">
           <template v-if="Component">
-            <Transition appear mode="out-in" name="fade">
-              <Suspense>
-                <component :is="Component"></component>
-                <template #fallback>
-                  <VLoading />
-                </template>
-              </Suspense>
-            </Transition>
+            <Suspense>
+              <component :is="Component"></component>
+              <template #fallback>
+                <VLoading />
+              </template>
+            </Suspense>
           </template>
         </RouterView>
       </div>