From 54ac9b5109c313cbc16a473dec14ecee21d55d8d Mon Sep 17 00:00:00 2001
From: xinwen <coderWen@126.com>
Date: Thu, 28 May 2020 14:30:01 +0800
Subject: [PATCH] =?UTF-8?q?[Update]=20=E8=BF=9B=E5=85=A5=20Detail=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8F=AF=E4=BB=A5=E6=8C=87=E5=AE=9A=20Tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListTable/formatters/DetailFormatter.vue  |  3 +-
 src/layout/components/TabPage/index.vue       | 34 +++++++++++--------
 .../AssetPermission/AssetPermissionList.vue   | 23 +++++++++----
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/components/ListTable/formatters/DetailFormatter.vue b/src/components/ListTable/formatters/DetailFormatter.vue
index eb8cd9afb..83d88f802 100644
--- a/src/components/ListTable/formatters/DetailFormatter.vue
+++ b/src/components/ListTable/formatters/DetailFormatter.vue
@@ -11,8 +11,9 @@ export default {
     goDetail() {
       const defaultRoute = this.$route.name.replace('List', 'Detail')
       const routeName = this.col.route || this.col.detailRoute || defaultRoute
+      const routeQuery = this.col.routeQuery || {}
       this.$log.debug('Will go to detail route: ', routeName)
-      this.$router.push({ name: routeName, params: { id: this.row.id }})
+      this.$router.push({ name: routeName, params: { id: this.row.id }, query: routeQuery })
     }
   }
 }
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index 189051d65..76ab9a502 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -20,6 +20,9 @@
 
 <script>
 import Page from '../Page/'
+
+const ACTIVE_TAB_KEY = 'activeTab'
+
 export default {
   name: 'TabPage',
   components: {
@@ -53,29 +56,32 @@ export default {
     }
   },
   mounted() {
-    // 尝试从cookie中取活跃的tab
     this.iActiveMenu = this.getPropActiveTab()
   },
   methods: {
     handleTabClick(tab) {
       this.$emit('tab-click', tab)
       this.$emit('update:activeMenu', tab.name)
-      this.$cookie.set('activeTab', tab.name, 1)
+      this.$cookie.set(ACTIVE_TAB_KEY, tab.name, 1)
     },
     getPropActiveTab() {
-      const tabActive = this.$cookie.get('activeTab')
-      let tabIndex = this.tabIndices[tabActive]
-      let activeMenu = ''
-      if (tabIndex !== undefined) {
-        activeMenu = tabActive
-      } else {
-        activeMenu = this.activeMenu
+      let activeTab = ''
+      let tabObj = null
+
+      const activeTabs = [
+        this.$route.query[ACTIVE_TAB_KEY],
+        this.$cookie.get(ACTIVE_TAB_KEY),
+        this.activeMenu
+      ]
+
+      for (activeTab of activeTabs) {
+        tabObj = this.tabIndices[activeTab]
+        if (tabObj !== undefined) {
+          return activeTab
+        }
       }
-      tabIndex = this.tabIndices[activeMenu]
-      if (tabIndex === undefined) {
-        activeMenu = this.submenu[0].name
-      }
-      return activeMenu
+
+      return this.submenu[0].name
     }
   }
 }
diff --git a/src/views/perms/AssetPermission/AssetPermissionList.vue b/src/views/perms/AssetPermission/AssetPermissionList.vue
index 58244b505..bb3a6a176 100644
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
-import { ExpandAssetPermissionFormatter } from '@/components/ListTable/formatters/index'
+import { DetailFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
@@ -35,20 +35,29 @@ export default {
           { label: this.$t('perms.SystemUser'), key: 'system_user' },
           { label: '继承(先占位)', key: 'all=0' }
         ],
-        columns: ['expand', 'name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount', 'system_users_amount', 'is_active', 'actions'],
+        columns: ['name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount', 'system_users_amount', 'is_active', 'actions'],
         columnsMeta: {
-          expand: {
-            type: 'expand',
-            formatter: ExpandAssetPermissionFormatter
+          name: {
+            routeQuery: {
+              activeTab: 'AssetPermissionDetail'
+            }
           },
           users_amount: {
-            label: this.$t('perms.User')
+            label: this.$t('perms.User'),
+            formatter: DetailFormatter,
+            routeQuery: {
+              activeTab: 'AssetPermissionUser'
+            }
           },
           user_groups_amount: {
             label: this.$t('perms.UserGroups')
           },
           assets_amount: {
-            label: this.$t('perms.Asset')
+            label: this.$t('perms.Asset'),
+            formatter: DetailFormatter,
+            routeQuery: {
+              activeTab: 'AssetPermissionAsset'
+            }
           },
           nodes_amount: {
             label: this.$t('perms.Node')