From 07b69ab9a8f571fd0fc7f1fa5e2f39d085409a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Wed, 16 Mar 2022 18:14:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dtab=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E6=9D=83=E9=99=90=E9=A1=B5=E5=8D=A1=E4=B8=8D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=97=B6=E8=BF=98=E4=BC=9A=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3403=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/TabPage/index.vue       | 22 +++++++++++++++----
 .../assets/Cloud/Account/AccountList.vue      |  1 +
 .../SyncInstanceTask/SyncInstanceTaskList.vue |  1 +
 src/views/assets/Cloud/index.vue              | 22 +++++++------------
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index ecaf79e13..b5a40808f 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -30,8 +30,12 @@
           </el-tab-pane>
         </template>
       </el-tabs>
-      <transition name="fade-transform" mode="out-in">
-        <slot />
+      <transition name="fade-transform" mode="out-in" appear>
+        <slot>
+          <keep-alive>
+            <component :is="computeActiveComponent" />
+          </keep-alive>
+        </slot>
       </transition>
     </div>
   </Page>
@@ -76,9 +80,19 @@ export default {
         }
       })
       return map
+    },
+    computeActiveComponent() {
+      let needActiveComponent = ''
+      for (const i of this.submenu) {
+        if (i.component && (i.name === this.iActiveMenu)) {
+          needActiveComponent = i.component
+          break
+        }
+      }
+      return needActiveComponent
     }
   },
-  mounted() {
+  created() {
     this.iActiveMenu = this.getPropActiveTab()
   },
   methods: {
@@ -106,7 +120,7 @@ export default {
         const currentTab = typeof preTab === 'object' ? preTab.name : preTab
         for (const tabName of this.tabIndices) {
           const currentTabName = tabName?.name || ''
-          if (currentTab && currentTabName && currentTab.toLowerCase() === currentTabName.toLowerCase()) {
+          if (currentTab?.toLowerCase() === currentTabName?.toLowerCase()) {
             return currentTabName
           }
         }
diff --git a/src/views/assets/Cloud/Account/AccountList.vue b/src/views/assets/Cloud/Account/AccountList.vue
index 966f0399b..5fc5a1455 100644
--- a/src/views/assets/Cloud/Account/AccountList.vue
+++ b/src/views/assets/Cloud/Account/AccountList.vue
@@ -7,6 +7,7 @@ import GenericListTable from '@/layout/components/GenericListTable'
 import { ACCOUNT_PROVIDER_ATTRS_MAP, aliyun, aws_china, aws_international, huaweicloud, qcloud, azure, azure_international, vmware, nutanix, qingcloud_private, huaweicloud_private, openstack, gcp } from '../const'
 
 export default {
+  name: 'AccountList',
   components: {
     GenericListTable
   },
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue
index fceced22f..c63386dd5 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue
@@ -8,6 +8,7 @@ import { DetailFormatter } from '@/components/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
+  name: 'SyncInstanceTaskList',
   components: {
     GenericListTable
   },
diff --git a/src/views/assets/Cloud/index.vue b/src/views/assets/Cloud/index.vue
index 29532b2d3..61c25fbdb 100644
--- a/src/views/assets/Cloud/index.vue
+++ b/src/views/assets/Cloud/index.vue
@@ -1,21 +1,14 @@
 <template>
-  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu">
-    <keep-alive>
-      <component :is="config.activeMenu" />
-    </keep-alive>
-  </TabPage>
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" />
 </template>
 
 <script>
 import { TabPage } from '@/layout/components'
-import AccountList from './Account/AccountList'
-import SyncInstanceTaskList from './SyncInstanceTask/SyncInstanceTaskList'
+
 export default {
-  name: 'Index',
+  name: 'CloudIndex',
   components: {
-    TabPage,
-    AccountList,
-    SyncInstanceTaskList
+    TabPage
   },
   data() {
     return {
@@ -25,13 +18,14 @@ export default {
           {
             title: this.$t('xpack.Cloud.SyncInstanceTaskList'),
             name: 'SyncInstanceTaskList',
-            hidden: () => !this.$hasPerm('xpack.view_syncinstancetask')
+            hidden: () => !this.$hasPerm('xpack.view_syncinstancetask'),
+            component: () => import('@/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue')
           },
           {
             title: this.$t('xpack.Cloud.AccountList'),
             name: 'AccountList',
-            hidden: () => !this.$hasPerm('xpack.view_account')
-
+            hidden: () => !this.$hasPerm('xpack.view_account'),
+            component: () => import('@/views/assets/Cloud/Account/AccountList.vue')
           }
         ]
       }