feat: 资产账号增加查看历史密码

src/components/AccountListTable/PasswordHistoryDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <GenericListTableDialog :visible.sync="iVisible" v-bind="config" />
+</template>
+
+<script>
+import { GenericListTableDialog } from '@/layout/components'
+
+export default {
+  components: {
+    GenericListTableDialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      config: {
+        title: this.$t('accounts.HistoryPassword'),
+        visible: false,
+        width: '60%',
+        tableConfig: {
+          url: `/api/v1/assets/accounts-historys?id=${this.account.id}`,
+          columns: [
+            'name', 'version', 'password', 'date_created'
+          ],
+          columnsShow: {
+            min: ['name'],
+            default: [
+              'name', 'version', 'password', 'date_created'
+            ]
+          },
+          columnsMeta: {
+            name: {
+              showOverflowTooltip: true
+            }
+          }
+        },
+        headerActions: {
+          hasImport: false,
+          hasExport: false,
+          hasLeftActions: false,
+          hasColumnSetting: false
+        }
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/AccountListTable/ShowSecretInfo.vue

@@ -18,16 +18,25 @@
       <div>
         <el-form label-position="right" label-width="80px" :model="authInfo">
           <el-form-item :label="this.$t('assets.Name')">
-            <el-input v-model="account['asset_name']" readonly />
+            <el-input v-model="account.asset.name" readonly />
           </el-form-item>
           <el-form-item :label="this.$t('assets.Username')">
             <el-input v-model="account['username']" readonly />
           </el-form-item>
-          <el-form-item :label="this.$t('assets.Password')">
-            <el-input v-model="authInfo.password" type="password" show-password />
+          <el-form-item v-if="secretTypePassword" :label="this.$t('assets.Password')">
+            <ShowKeyCopyFormatter v-model="authInfo.secret" />
           </el-form-item>
-          <el-form-item :label="this.$t('users.SSHKey')">
-            <el-input v-model="authInfo['private_key']" class="item-textarea" type="textarea" show-password />
+          <el-form-item v-else :label="this.$t('users.SSHKey')">
+            <el-input v-model="authInfo['private_key']" class="item-textarea" type="textarea" show-password readonly />
+          </el-form-item>
+          <el-form-item :label="this.$t('common.DateCreated')">
+            <span>{{ $moment(authInfo.date_created, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') }}</span>
+          </el-form-item>
+          <el-form-item :label="this.$t('common.DateUpdated')">
+            <span>{{ $moment(authInfo.date_updated, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') }}</span>
+          </el-form-item>
+          <el-form-item :label="this.$t('accounts.PasswordRecord')">
+            <span>{{ authInfo.version }}</span>
           </el-form-item>
         </el-form>
       </div>
@@ -38,11 +47,14 @@
 <script>
 import Dialog from '@/components/Dialog'
 import UserConfirmDialog from '@/components/UserConfirmDialog'
+import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+
 export default {
   name: 'ShowSecretInfo',
   components: {
     Dialog,
-    UserConfirmDialog
+    UserConfirmDialog,
+    ShowKeyCopyFormatter
   },
   props: {
     account: {
@@ -62,6 +74,11 @@ export default {
       url: `/api/v1/assets/account-secrets/${this.account.id}/`
     }
   },
+  computed: {
+    secretTypePassword() {
+      return this.authInfo.secret_type === 'password'
+    }
+  },
   methods: {
     getAuthInfo() {
       this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
@@ -76,8 +93,23 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .item-textarea >>> .el-textarea__inner {
     height: 110px;
   }
+  ul {
+    margin: 0;
+  }
+  li {
+    display: block;
+    font-size: 13px;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .title {
+      color: #303133;
+      font-weight: 500;
+    }
+  }
 </style>

src/components/AccountListTable/index.vue

@@ -15,6 +15,11 @@
       :account="account"
       @add="addAccountSuccess"
     />
+    <PasswordHistoryDialog
+      v-if="showPasswordHistoryDialog"
+      :account="account"
+      :visible.sync="showPasswordHistoryDialog"
+    />
   </div>
 </template>
 
@@ -27,6 +32,7 @@ import AddAccount from './AddAccount'
 import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
 import { hasUUID } from '@/utils/common'
+import PasswordHistoryDialog from './PasswordHistoryDialog'
 
 export default {
   name: 'AccountListTable',
@@ -34,7 +40,8 @@ export default {
     ListTable,
     UpdateSecretInfo,
     ShowSecretInfo,
-    AddAccount
+    AddAccount,
+    PasswordHistoryDialog
   },
   props: {
     url: {
@@ -71,6 +78,7 @@ export default {
   data() {
     const vm = this
     return {
+      showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
       showUpdateSecretDialog: false,
       showAddDialog: false,
@@ -176,6 +184,17 @@ export default {
                       vm.showAddDialog = true
                     })
                   }
+                },
+                {
+                  title: this.$t('accounts.HistoryPassword'),
+                  can: this.$hasPerm('assets.change_assetaccountsecret') && !this.$store.getters.currentOrgIsRoot,
+                  callback: ({ row }) => {
+                    vm.account = row
+                    vm.showPasswordHistoryDialog = false
+                    setTimeout(() => {
+                      vm.showPasswordHistoryDialog = true
+                    })
+                  }
                 }
               ]
             }

src/components/TableFormatters/ShowKeyCopyFormatter.vue

@@ -3,6 +3,7 @@
     <span>{{ currentValue }}</span>
     <span class="right">
       <el-tooltip
+        v-if="hasShow"
         effect="dark"
         placement="top"
         :content="this.$t('common.View')"
@@ -10,6 +11,7 @@
         <i class="el-icon-view" @click="onShow()" />
       </el-tooltip>
       <el-tooltip
+        v-if="hasCopy"
         effect="dark"
         placement="top"
         :content="this.$t('common.Copy')"
@@ -21,15 +23,24 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
-
 export default {
   name: 'ShowKeyCopyFormatter',
-  extends: BaseFormatter,
-  proops: {
-    cellValue: {
+  props: {
+    value: {
       type: String,
       default: () => ''
+    },
+    cellValue: {
+      type: [String, Number],
+      default: null
+    },
+    hasShow: {
+      type: Boolean,
+      default: true
+    },
+    hasCopy: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -37,18 +48,24 @@ export default {
       currentValue: this.switchShowValue()
     }
   },
+  computed: {
+    iValue() {
+      return this.value || this.cellValue
+    }
+  },
   methods: {
     switchShowValue() {
-      return '******' + this.cellValue.replace(/[\w-]/g, '')
+      const value = this.value || this.cellValue
+      return '******' + value.replace(/[\s\S]/g, '')
     },
     onShow() {
-      const { currentValue, cellValue, switchShowValue } = this
-      this.currentValue = currentValue === cellValue ? switchShowValue() : cellValue
+      const { currentValue, switchShowValue } = this
+      this.currentValue = currentValue === this.iValue ? switchShowValue() : this.iValue
     },
     onCopy: _.throttle(function() {
       const inputDom = document.createElement('input')
-      inputDom.id = 'creatInputDom'
-      inputDom.value = this.cellValue
+      inputDom.id = 'createInputDom'
+      inputDom.value = this.iValue
       document.body.appendChild(inputDom)
       inputDom.select()
       document?.execCommand('copy')
@@ -74,7 +91,7 @@ export default {
       cursor: pointer;
       .el-icon-view, .el-icon-copy-document {
         &:hover {
-          color: #1c84c6;
+          color: var(--color-primary);
         }
       }
     }