perf: 账号详情增加查看密码

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: '',

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