From d0988da2775bc4d03a5e384e41d1c0e425cb469c Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Thu, 5 Dec 2024 18:09:20 +0800
Subject: [PATCH] =?UTF-8?q?perf=EF=BC=9AUniversal=20Drawer=20assembly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Apps/AccountListTable/AccountList.vue     |  4 +-
 .../Table/TableFormatters/DetailFormatter.vue | 34 +++++++--
 .../accounts/Account/AccountDetail/Detail.vue | 71 +++++++++++++------
 .../components/AssetAccounts.vue              |  1 -
 .../assets/Asset/AssetDetail/PermUser.vue     |  4 +-
 src/views/pam/Account/AccountList.vue         | 64 ++++++-----------
 src/views/pam/Account/AccountTemplate.vue     | 19 ++---
 src/views/pam/Account/AssetList.vue           | 50 ++++++-------
 8 files changed, 133 insertions(+), 114 deletions(-)

diff --git a/src/components/Apps/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
index 61dda2a93..560fc07a2 100644
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -299,7 +299,7 @@ export default {
         columnsMeta: {
           name: {
             width: '120px',
-            formatter: function(row) {
+            formatter: (row) => {
               const to = {
                 name: 'AssetAccountDetail',
                 params: { id: row.id }
@@ -333,7 +333,7 @@ export default {
             }
           },
           asset: {
-            formatter: function(row) {
+            formatter: (row) => {
               const to = {
                 name: 'AssetDetail',
                 params: { id: row.asset.id }
diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index a33a38ef6..5e22ef9bf 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -12,14 +12,25 @@
         {{ iTitle }}
       </slot>
     </el-link>
+
+    <Drawer v-if="showTableDetailDrawer" :title="drawerTitle" @close-drawer="showTableDetailDrawer = !showTableDetailDrawer">
+      <component :is="currentTemplate" />
+    </Drawer>
   </div>
 </template>
 
 <script>
 import BaseFormatter from './base.vue'
+import Drawer from '@/components/Drawer/index.vue'
 
 export default {
   name: 'DetailFormatter',
+  components: {
+    Drawer,
+    AssetDetail: () => import('@/views/assets/Asset/AssetDetail'),
+    AssetAccountList: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
+    AccountTemplateDetail: () => import('@/views/accounts/AccountTemplate/AccountTemplateDetail/index.vue')
+  },
   extends: BaseFormatter,
   props: {
     formatterArgsDefault: {
@@ -46,6 +57,9 @@ export default {
     const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
     return {
       linkClicked: false,
+      showTableDetailDrawer: false,
+      drawerTitle: '',
+      currentTemplate: null,
       formatterArgs: formatterArgs
     }
   },
@@ -107,12 +121,24 @@ export default {
       const detailRoute = this.getDetailRoute()
 
       if (this.formatterArgs.openInNewPage) {
-        this.linkClicked = this.formatterArgs.removeColorOnClick
         const { href } = this.$router.resolve(detailRoute)
-        window.open(href, '_blank')
-      } else {
-        this.$router.push(detailRoute)
+        this.linkClicked = this.formatterArgs.removeColorOnClick
+
+        return window.open(href, '_blank')
       }
+
+      if (this.formatterArgs.isPam) {
+        this.showTableDetailDrawer = true
+
+        console.log('%c DEBUG[ detailRoute ]-20:', 'font-size:13px; background:pink; color:#2E8B57;', detailRoute)
+
+        this.currentTemplate = detailRoute.name
+        this.$route.params.id = detailRoute.params.id
+
+        return
+      }
+
+      this.$router.push(detailRoute)
     }
   }
 }
diff --git a/src/views/accounts/Account/AccountDetail/Detail.vue b/src/views/accounts/Account/AccountDetail/Detail.vue
index 56aa6d98b..998d60a06 100644
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -1,25 +1,36 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :md="15" :sm="24" class="auto-detail-card">
-      <AutoDetailCard :object="object" v-bind="detail" />
-    </el-col>
-    <el-col :md="9" :sm="24" class="quick-actions">
-      <QuickActions :actions="quickActions" type="primary" />
-      <ViewSecret
-        v-if="showViewSecretDialog"
-        :account="object"
-        :url="secretUrl"
-        :visible.sync="showViewSecretDialog"
-      />
-      <AutomationParamsForm
-        :has-button="false"
-        :method="pushAccountMethod"
-        :visible.sync="autoPushVisible"
-        @canSetting="onCanSetting"
-        @submit="onSubmit"
-      />
-    </el-col>
-  </el-row>
+  <div>
+    <el-row :gutter="20">
+      <el-col :md="15" :sm="24" class="auto-detail-card">
+        <AutoDetailCard :object="object" v-bind="detail" />
+      </el-col>
+      <el-col :md="9" :sm="24" class="quick-actions">
+        <QuickActions :actions="quickActions" type="primary" />
+        <ViewSecret
+          v-if="showViewSecretDialog"
+          :account="object"
+          :url="secretUrl"
+          :visible.sync="showViewSecretDialog"
+        />
+        <AutomationParamsForm
+          :has-button="false"
+          :method="pushAccountMethod"
+          :visible.sync="autoPushVisible"
+          @canSetting="onCanSetting"
+          @submit="onSubmit"
+        />
+      </el-col>
+    </el-row>
+
+    <el-drawer
+      size="50%"
+      :with-header="false"
+      :append-to-body="true"
+      :visible.sync="pamDrawerShow"
+    >
+      <component :is="drawerRefName" />
+    </el-drawer>
+  </div>
 </template>
 
 <script>
@@ -28,12 +39,14 @@ import QuickActions from '@/components/QuickActions/index.vue'
 import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret.vue'
 import { openTaskPage } from '@/utils/jms'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
+import AssetDetail from '@/views/assets/Asset/AssetDetail'
 
 export default {
   name: 'Detail',
   components: {
     AutoDetailCard,
     QuickActions,
+    AssetDetail,
     AutomationParamsForm,
     ViewSecret
   },
@@ -47,6 +60,8 @@ export default {
   data() {
     const vm = this
     return {
+      pamDrawerShow: false,
+      drawerRefName: null,
       needSetAutoPushParams: false,
       autoPushVisible: false,
       secretUrl: `/api/v1/accounts/account-secrets/${this.object.id}/`,
@@ -213,6 +228,20 @@ export default {
               name: 'AssetDetail',
               params: { id: this.object.asset.id }
             }
+
+            if (this.$route.query.type === 'pam') {
+              return (
+                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
+                  this.pamDrawerShow = true
+                  this.$route.params.id = this.object.asset.id
+
+                  this.drawerRefName = 'AssetDetail'
+                }}>
+                  {value.name}
+                </span>
+              )
+            }
+
             return <router-link to={route}>{value?.name}</router-link>
           },
           su_from: (item, value) => {
diff --git a/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue b/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
index bd2dc6806..6ca1164b9 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
@@ -59,7 +59,6 @@
     </div>
 
     <el-drawer
-      direction="btt"
       size="50%"
       :with-header="false"
       :append-to-body="true"
diff --git a/src/views/assets/Asset/AssetDetail/PermUser.vue b/src/views/assets/Asset/AssetDetail/PermUser.vue
index 4960c6620..bec295387 100644
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -54,7 +54,9 @@ export default {
         },
         columnsMeta: {
           name: {
-            formatter: vm.$hasPerm('users.view_user') ? DetailFormatter : '',
+            formatter: (row) => {
+              return vm.$hasPerm('users.view_user') ? DetailFormatter : ''
+            },
             formatterArgs: {
               route: 'UserDetail'
             }
diff --git a/src/views/pam/Account/AccountList.vue b/src/views/pam/Account/AccountList.vue
index 5761715fe..a0af10e89 100644
--- a/src/views/pam/Account/AccountList.vue
+++ b/src/views/pam/Account/AccountList.vue
@@ -1,31 +1,20 @@
 <template>
   <div>
     <AccountListTable ref="table" v-bind="tableConfig" :origin="'pam'" />
-
-    <Drawer v-if="showTableDetailDrawer" :title="drawerTitle" @close-drawer="showTableDetailDrawer = !showTableDetailDrawer">
-      <component :is="currentTemplate" />
-    </Drawer>
   </div>
 </template>
 
 <script>
-import Drawer from '@/components/Drawer/index.vue'
-import AssetDetail from '@/views/assets/Asset/AssetDetail'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import AssetAccountDetail from '@/views/accounts/Account/AccountDetail/index.vue'
 
 export default {
   name: 'AssetAccountList',
   components: {
-    Drawer,
-    AssetDetail,
-    AccountListTable,
-    AssetAccountDetail
+    AccountListTable
   },
   data() {
     return {
-      showTableDetailDrawer: false,
-      currentTemplate: null,
       drawerTitle: '',
       tableConfig: {
         url: '/api/v1/accounts/accounts/',
@@ -33,39 +22,26 @@ export default {
         hasImport: true,
         columnsMeta: {
           name: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-
-                  this.currentTemplate = 'AssetAccountDetail'
-                  this.showTableDetailDrawer = true
-                  this.drawerTitle = this.$t('AssetAccountDetail')
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AssetAccountList',
+                params: { id: row.id }
+              })
+            },
+            formatter: DetailFormatter
           },
           asset: {
-            formatter: (row) => {
-              return (
-                this.$hasPerm('assets.view_asset') ? (
-                  <span
-                    style={{ color: '#1c84c6', cursor: 'pointer' }}
-                    onClick={() => {
-                      this.$route.params.id = row.asset.id
-                      this.currentTemplate = 'AssetDetail'
-                      this.showTableDetailDrawer = true
-                      this.drawerTitle = this.$t('AssetDetail')
-                    }}
-                  >
-                    {row.name}
-                  </span>
-                ) : (
-                  <span>{row.asset ? row.asset.name : ''}</span>
-                )
-              )
+            formatter: DetailFormatter,
+            formatterArgs: {
+              isPam: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => row.asset.name,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.asset.id }
+              })
             }
           },
           connect: {
diff --git a/src/views/pam/Account/AccountTemplate.vue b/src/views/pam/Account/AccountTemplate.vue
index fbd665a5b..73565dcfb 100644
--- a/src/views/pam/Account/AccountTemplate.vue
+++ b/src/views/pam/Account/AccountTemplate.vue
@@ -53,18 +53,13 @@ export default {
         },
         columnsMeta: {
           name: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-
-                  this.currentTemplate = 'AccountTemplateDetail'
-                  this.showTableUpdateDrawer = true
-                  this.drawerTitle = this.$t('AccountTemplate')
-                }}>
-                  {row.name}
-                </span>
-              )
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AccountTemplateDetail',
+                params: { id: row.id }
+              })
             }
           },
           privileged: {
diff --git a/src/views/pam/Account/AssetList.vue b/src/views/pam/Account/AssetList.vue
index 4ff66b305..573e096ff 100644
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -13,7 +13,7 @@ import AssetDetail from '@/views/assets/Asset/AssetDetail'
 import BaseList from '@/views/assets/Asset/AssetList/components/BaseList'
 
 import HostUpdate from '@/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -35,36 +35,28 @@ export default {
         columnsExclude: ['date_verified'],
         columnsMeta: {
           name: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-                  this.$route.query.tab = 'Basic'
-
-                  this.currentTemplate = 'AssetDetail'
-                  this.showTableUpdateDrawer = true
-                  this.drawerTitle = this.$t('AssetDetail')
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.id }
+              })
+            },
+            formatter: DetailFormatter
           },
           accounts_amount: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-                  this.$route.query.tab = 'Account'
-
-                  this.currentTemplate = 'AssetDetail'
-                  this.showTableUpdateDrawer = true
-                  this.drawerTitle = this.$t('AssetDetail')
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getTitle: ({ row }) => row.accounts_amount,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.id },
+                query: { tab: 'Account' }
+              })
+            },
+            formatter: DetailFormatter
           },
           actions: {
             formatter: ActionsFormatter,