[Update] 进入 Detail 页面可以指定 Tab

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

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

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')