fix: 修复tab组件没有权限页卡不显示时还会提示接口403问题

src/layout/components/TabPage/index.vue

@@ -30,8 +30,12 @@
           </el-tab-pane>
         </template>
       </el-tabs>
-      <transition name="fade-transform" mode="out-in">
+      <transition name="fade-transform" mode="out-in" appear>
-        <slot />
+        <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
           }
         }

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
   },

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
   },

src/views/assets/Cloud/index.vue

@@ -1,21 +1,14 @@
 <template>
-  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu">
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" />
-    <keep-alive>
-      <component :is="config.activeMenu" />
-    </keep-alive>
-  </TabPage>
 </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,
+    TabPage
-    AccountList,
-    SyncInstanceTaskList
   },
   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')
           }
         ]
       }