From 0952e9e9ae2458c7f012e8e92f5777d8f1a20d93 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 12 Jun 2024 18:59:29 +0800
Subject: [PATCH] perf: change asset permission detail bug

---
 .../Table/TableFormatters/DetailFormatter.vue | 22 +++++++++----------
 src/styles/index.scss                         | 13 ++++++++---
 .../AssetPermissionDetail/index.vue           | 11 ++++++++--
 src/views/perms/const.js                      |  5 +++++
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 9da69b975..59279b32f 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -2,10 +2,10 @@
   <div>
     <img v-if="icon" :src="icon" alt="icon" class="icon">
     <el-link
+      :class="{ 'clicked': linkClicked }"
       :disabled="disabled"
       :type="col.type || 'info'"
       class="detail"
-      :class="{ 'clicked': linkClicked }"
       @click="goDetail"
     >
       <slot>
@@ -70,8 +70,11 @@ export default {
         row: this.row,
         cellValue: this.cellValue
       })
-    },
-    detailRoute() {
+    }
+
+  },
+  methods: {
+    getDetailRoute() {
       // const defaultRoute = this.$route.name.replace('List', 'Detail')
       let route = this.formatterArgs.route
       if (this.formatterArgs.getRoute && typeof this.formatterArgs.getRoute === 'function') {
@@ -96,22 +99,17 @@ export default {
       const routeQuery = this.formatterArgs.routeQuery
       if (routeQuery && typeof routeQuery === 'object') {
         detailRoute.query = this.formatterArgs.routeQuery
-
-        if (detailRoute.query.tab) {
-          detailRoute.name = detailRoute.query.tab
-        }
       }
       return detailRoute
-    }
-  },
-  methods: {
+    },
     goDetail() {
+      const detailRoute = this.getDetailRoute()
       if (this.formatterArgs.openInNewPage) {
         this.linkClicked = this.formatterArgs.removeColorOnClick
-        const { href } = this.$router.resolve(this.detailRoute)
+        const { href } = this.$router.resolve(detailRoute)
         window.open(href, '_blank')
       } else {
-        this.$router.push(this.detailRoute)
+        this.$router.push(detailRoute)
       }
     }
   }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7caf83047..4f9f874db 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -19,12 +19,13 @@
 
 ::-webkit-scrollbar-track {
   border-radius: 10px;
+  border: 1px solid #f0f0f0;
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 8px;
   box-shadow: 8px 10px 20px #C6C6C6 inset;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border-left: 2px solid rgba(0, 0, 0, 0);
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -147,6 +148,7 @@ button, input, optgroup, select, textarea {
 .el-tooltip__popper.is-light {
   background-color: #ebeef5 !important;
 }
+
 .el-tooltip__popper.is-dark {
   max-width: 500px;
   opacity: 0.9;
@@ -264,6 +266,7 @@ input[type=file] {
       .sort-caret.ascending {
         top: 0;
       }
+
       .sort-caret.descending {
         bottom: 0;
       }
@@ -362,7 +365,7 @@ input[type=file] {
   font-weight: 300;
 }
 
-.el-link.is-underline:hover:after  {
+.el-link.is-underline:hover:after {
   border-bottom: 1px solid #007bff !important;
 }
 
@@ -415,6 +418,7 @@ input[type=file] {
   label {
     font-weight: 400;
   }
+
   .el-input__icon {
     vertical-align: super
   }
@@ -427,7 +431,7 @@ input[type=file] {
 
 .el-input input::placeholder {
   font-weight: 400 !important;
-  font-family: "Open Sans", sans-serif ;
+  font-family: "Open Sans", sans-serif;
   font-size: 13px;
 }
 
@@ -474,12 +478,15 @@ $tooltip-arrow-color: #c2d1e1;
   &[x-placement^=right] .popper__arrow {
     border-right-color: $tooltip-arrow-color !important;
   }
+
   &[x-placement^=left] .popper__arrow {
     border-left-color: $tooltip-arrow-color !important;
   }
+
   &[x-placement^=top] .popper__arrow {
     border-top-color: $tooltip-arrow-color !important;
   }
+
   &[x-placement^=bottom] .popper__arrow {
     border-bottom-color: $tooltip-arrow-color !important;
   }
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue
index 22a68416e..f252dbe4a 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue
@@ -1,5 +1,11 @@
 <template>
-  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="AssetPermission" v-bind="config" v-on="$listeners" @tab-click="TabClick">
+  <GenericDetailPage
+    :active-menu.sync="config.activeMenu"
+    :object.sync="AssetPermission"
+    v-bind="config"
+    v-on="$listeners"
+    @tab-click="TabClick"
+  >
     <keep-alive>
       <component :is="config.activeMenu" :object="AssetPermission" />
     </keep-alive>
@@ -25,7 +31,8 @@ export default {
   data() {
     return {
       AssetPermission: {
-        name: '', users_amount: 0, user_groups_amount: 0, assets_amount: 0, nodes_amount: 0, system_users_amount: 0,
+        name: '', users_amount: 0, user_groups_amount: 0, assets_amount: 0,
+        nodes_amount: 0, system_users_amount: 0,
         date_start: '', date_expired: ''
       },
       config: {
diff --git a/src/views/perms/const.js b/src/views/perms/const.js
index c62d7aa98..6d17c7456 100644
--- a/src/views/perms/const.js
+++ b/src/views/perms/const.js
@@ -66,6 +66,7 @@ export const AssetPermissionTableMeta = {
     formatter: AmountFormatter,
     formatterArgs: {
       async: true,
+      route: 'AssetPermissionDetail',
       routeQuery: {
         tab: 'AssetPermissionUser'
       }
@@ -76,6 +77,7 @@ export const AssetPermissionTableMeta = {
     formatter: AmountFormatter,
     formatterArgs: {
       async: true,
+      route: 'AssetPermissionDetail',
       routeQuery: {
         tab: 'AssetPermissionUser'
       }
@@ -85,6 +87,7 @@ export const AssetPermissionTableMeta = {
     formatter: AmountFormatter,
     formatterArgs: {
       async: true,
+      route: 'AssetPermissionDetail',
       routeQuery: {
         tab: 'AssetPermissionAsset'
       }
@@ -95,6 +98,7 @@ export const AssetPermissionTableMeta = {
     formatter: AmountFormatter,
     formatterArgs: {
       async: true,
+      route: 'AssetPermissionDetail',
       routeQuery: {
         tab: 'AssetPermissionAsset'
       }
@@ -108,6 +112,7 @@ export const AssetPermissionTableMeta = {
           return AccountLabelMapper[item] || item
         }
       },
+      route: 'AssetPermissionDetail',
       routeQuery: {
         tab: 'AssetPermissionAccount'
       }