From c4bba7e74d6fcd9217c83277a6a63d2945940a8b Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Tue, 11 Feb 2025 14:46:11 +0800
Subject: [PATCH] Perf: Change AccountConnectFormatter To Common Component

---
 .../Apps/AccountListTable/AccountList.vue     | 22 +++++++++++--------
 src/views/accounts/Account/AccountList.vue    | 13 +----------
 src/views/pam/Account/AccountList.vue         | 19 +---------------
 .../Integration/components/AccountList.vue    | 19 +---------------
 .../AssetPermissionAccount.vue                |  2 +-
 5 files changed, 17 insertions(+), 58 deletions(-)

diff --git a/src/components/Apps/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
index a166c89a6..e30530d30 100644
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -52,7 +52,7 @@
 <script>
 import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
-import { ActionsFormatter, PlatformFormatter, SecretViewerFormatter } from '@/components/Table/TableFormatters'
+import { ActionsFormatter, PlatformFormatter, SecretViewerFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import ResultDialog from './BulkCreateResultDialog.vue'
@@ -191,14 +191,18 @@ export default {
           connect: {
             label: this.$t('Connect'),
             width: '80px',
-            formatter: () => {
-              return (
-                <span className='connect'>
-                  <el-button type='primary' size='mini' plain>
-                    <i className='fa fa-desktop'/>
-                  </el-button>
-                </span>
-              )
+            formatter: AccountConnectFormatter,
+            formatterArgs: {
+              buttonIcon: 'fa fa-desktop',
+              titleText: '可选协议',
+              url: '/api/v1/assets/assets/{id}',
+              connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
+              setMapItem: (id, protocol) => {
+                this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
+                  key: id,
+                  value: protocol
+                })
+              }
             }
           },
           platform: {
diff --git a/src/views/accounts/Account/AccountList.vue b/src/views/accounts/Account/AccountList.vue
index ee729c3e9..555992fb7 100644
--- a/src/views/accounts/Account/AccountList.vue
+++ b/src/views/accounts/Account/AccountList.vue
@@ -9,7 +9,7 @@
 <script>
 import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import { AccountConnectFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AssetAccountList',
@@ -39,17 +39,6 @@ export default {
                 query: { tab: 'Basic' }
               })
             }
-          },
-          connect: {
-            label: this.$t('Connect'),
-            width: '80px',
-            formatter: AccountConnectFormatter,
-            formatterArgs: {
-              buttonIcon: 'fa fa-desktop',
-              titleText: '可选协议',
-              url: '/api/v1/assets/assets/{id}',
-              connectUrlTemplate: '/luna/pam_connect/{id}/{username}/{assetId}/{assetName}/{protocol}'
-            }
           }
         }
       },
diff --git a/src/views/pam/Account/AccountList.vue b/src/views/pam/Account/AccountList.vue
index f53ed034d..d3740d124 100644
--- a/src/views/pam/Account/AccountList.vue
+++ b/src/views/pam/Account/AccountList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import { DetailFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AssetAccountList',
@@ -30,23 +30,6 @@ export default {
                 query: { tab: 'Basic' }
               })
             }
-          },
-          connect: {
-            label: this.$t('Connect'),
-            width: '80px',
-            formatter: AccountConnectFormatter,
-            formatterArgs: {
-              buttonIcon: 'fa fa-desktop',
-              titleText: '可选协议',
-              url: '/api/v1/assets/assets/{id}',
-              connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
-              setMapItem: (id, protocol) => {
-                this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
-                  key: id,
-                  value: protocol
-                })
-              }
-            }
           }
         }
       }
diff --git a/src/views/pam/Integration/components/AccountList.vue b/src/views/pam/Integration/components/AccountList.vue
index e2b07b694..ccc9c08a6 100644
--- a/src/views/pam/Integration/components/AccountList.vue
+++ b/src/views/pam/Integration/components/AccountList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import { DetailFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AssetAccountList',
@@ -37,23 +37,6 @@ export default {
                 query: { tab: 'Basic' }
               })
             }
-          },
-          connect: {
-            label: this.$t('Connect'),
-            width: '80px',
-            formatter: AccountConnectFormatter,
-            formatterArgs: {
-              buttonIcon: 'fa fa-desktop',
-              titleText: '可选协议',
-              url: '/api/v1/assets/assets/{id}',
-              connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
-              setMapItem: (id, protocol) => {
-                this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
-                  key: id,
-                  value: protocol
-                })
-              }
-            }
           }
         }
       }
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
index b1a6f0053..b8f381f04 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
@@ -55,7 +55,7 @@ export default {
         disabled: false,
         username: ''
       },
-      columns: ['name', 'username', 'secret', 'asset']
+      columns: ['name', 'username', 'secret', 'asset', 'connect']
     }
   },
   computed: {