From 983cd266f5af3f426d924620535b233eae76ae7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Wed, 22 Feb 2023 18:05:14 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B4=A6=E5=8F=B7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9F=A5=E7=9C=8B=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AccountListTable/ViewSecret.vue           | 47 ++++++++++++-------
 .../accounts/Account/AccountDetail/Detail.vue | 30 +++++++++++-
 2 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/src/components/AccountListTable/ViewSecret.vue b/src/components/AccountListTable/ViewSecret.vue
index 4444bd9b4..b0f97cfa9 100644
--- a/src/components/AccountListTable/ViewSecret.vue
+++ b/src/components/AccountListTable/ViewSecret.vue
@@ -8,7 +8,7 @@
     <Dialog
       :destroy-on-close="true"
       :show-cancel="false"
-      :title="dialogTitle"
+      :title="title"
       :visible.sync="showSecret"
       :width="'50'"
       v-bind="$attrs"
@@ -16,12 +16,14 @@
       v-on="$listeners"
     >
       <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
-        <el-form-item :label="$tc('assets.Name')">
-          <span>{{ account['name'] }}</span>
-        </el-form-item>
-        <el-form-item :label="$tc('assets.Username')">
-          <span>{{ account['username'] }}</span>
-        </el-form-item>
+        <div v-if="!onlyShowPassword">
+          <el-form-item :label="$tc('assets.Name')">
+            <span>{{ account['name'] }}</span>
+          </el-form-item>
+          <el-form-item :label="$tc('assets.Username')">
+            <span>{{ account['username'] }}</span>
+          </el-form-item>
+        </div>
         <el-form-item :label="secretTypeLabel">
           <ShowKeyCopyFormatter
             :cell-value="secretInfo.secret"
@@ -30,15 +32,6 @@
             }}"
           />
         </el-form-item>
-        <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('assets.sshKeyFingerprint')">
-          <span>{{ sshKeyFingerprint }}</span>
-        </el-form-item>
-        <el-form-item :label="$tc('common.DateCreated')">
-          <span>{{ account['date_created'] | date }}</span>
-        </el-form-item>
-        <el-form-item :label="$tc('common.DateUpdated')">
-          <span>{{ account['date_updated'] | date }}</span>
-        </el-form-item>
         <el-form-item v-if="showPasswordRecord" :label="$tc('accounts.PasswordRecord')">
           <el-button
             v-perms="'accounts.view_historyaccountsecret'"
@@ -48,6 +41,17 @@
             {{ historyCount }}
           </el-button>
         </el-form-item>
+        <div v-if="!onlyShowPassword">
+          <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('assets.sshKeyFingerprint')">
+            <span>{{ sshKeyFingerprint }}</span>
+          </el-form-item>
+          <el-form-item :label="$tc('common.DateCreated')">
+            <span>{{ account['date_created'] | date }}</span>
+          </el-form-item>
+          <el-form-item :label="$tc('common.DateUpdated')">
+            <span>{{ account['date_updated'] | date }}</span>
+          </el-form-item>
+        </div>
       </el-form>
     </Dialog>
     <PasswordHistoryDialog
@@ -85,14 +89,23 @@ export default {
       type: String,
       default: ''
     },
+    title: {
+      type: String,
+      default: function() {
+        return this.$tc('assets.AccountDetail')
+      }
+    },
     showPasswordRecord: {
       type: Boolean,
       default: true
+    },
+    onlyShowPassword: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      dialogTitle: this.$tc('assets.AccountDetail'),
       secretInfo: {},
       showSecret: false,
       sshKeyFingerprint: '',
diff --git a/src/views/accounts/Account/AccountDetail/Detail.vue b/src/views/accounts/Account/AccountDetail/Detail.vue
index f73a5bbeb..7fb04333b 100644
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -5,6 +5,14 @@
     </el-col>
     <el-col :md="10" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
+      <ViewSecret
+        v-if="showViewSecretDialog"
+        :account="object"
+        :url="secretUrl"
+        :title="$tc('common.ViewSecret')"
+        :only-show-password="true"
+        :visible.sync="showViewSecretDialog"
+      />
     </el-col>
   </el-row>
 </template>
@@ -12,13 +20,15 @@
 <script>
 import AutoDetailCard from '@/components/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
+import ViewSecret from '@/components/AccountListTable/ViewSecret'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
   name: 'Detail',
   components: {
     AutoDetailCard,
-    QuickActions
+    QuickActions,
+    ViewSecret
   },
   props: {
     object: {
@@ -31,6 +41,8 @@ export default {
     const filterSuFrom = ['database', 'device', 'cloud', 'web']
 
     return {
+      secretUrl: `/api/v1/accounts/account-secrets/${this.object.id}/`,
+      showViewSecretDialog: false,
       quickActions: [
         {
           title: this.$t('common.Activate'),
@@ -107,6 +119,22 @@ export default {
             }
           })
         },
+        {
+          title: this.$t('common.ViewSecret'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('common.View'),
+            disabled: !vm.$hasPerm('accounts.view_accountsecret')
+          },
+          callbacks: Object.freeze({
+            click: () => {
+              vm.showViewSecretDialog = false
+              setTimeout(() => {
+                vm.showViewSecretDialog = true
+              })
+            }
+          })
+        },
         {
           title: this.$t('assets.UserSwitchFrom'),
           type: 'updateSelect',