feat: 账号历史信息 (#1841)

* perf: 账号历史信息 * del app Co-authored-by: feng626 <1304903146@qq.com>
2026-01-13 11:24:17 +00:00 · 2022-07-04 18:55:46 +08:00
parent 4b376b65b3
commit 5f8b3f1986
8 changed files with 266 additions and 0 deletions
--- a/src/components/AccountHistoryTable/index.vue
+++ b/src/components/AccountHistoryTable/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <GenericListPage :table-config="tableConfig" :header-actions="headerActions" :help-message="title" />
+    <ShowSecretInfo v-if="showViewSecretDialog" :visible.sync="showViewSecretDialog" :account="account" />
+  </div>
+</template>
+
+<script>
+import { ActionsFormatter, DetailFormatter, DisplayFormatter } from '@/components/TableFormatters'
+import ShowSecretInfo from '../AccountListTable/ShowSecretInfo'
+import { GenericListPage } from '@/layout/components'
+
+export default {
+  name: 'AccountHistoryTable',
+  components: {
+    GenericListPage,
+    ShowSecretInfo
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    exportUrl: {
+      type: String,
+      default() {
+        return this.url.replace('/assets/accounts-history/', '/assets/account-history-secrets/')
+      }
+    },
+    hasLeftActions: {
+      type: Boolean,
+      default: false
+    },
+    otherActions: {
+      type: Array,
+      default: null
+    },
+    hasClone: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      showViewSecretDialog: false,
+      account: {},
+      tableConfig: {
+        url: this.url,
+        permissions: {
+          app: 'assets',
+          resource: 'authbook'
+        },
+        columns: [
+          'hostname', 'ip', 'username', 'version',
+          'systemuser', 'date_created', 'date_updated', 'actions'
+        ],
+        columnsShow: {
+          min: ['username', 'actions'],
+          default: ['hostname', 'ip', 'username', 'version', 'actions']
+        },
+        columnsMeta: {
+          hostname: {
+            prop: 'hostname',
+            label: this.$t('assets.Hostname'),
+            showOverflowTooltip: true,
+            formatter: DetailFormatter,
+            formatterArgs: {
+              can: this.$hasPerm('assets.view_asset'),
+              getRoute({ row }) {
+                return {
+                  name: 'AssetDetail',
+                  params: { id: row.asset }
+                }
+              }
+            }
+          },
+          ip: {
+            width: '120px'
+          },
+          username: {
+            showOverflowTooltip: true
+          },
+          systemuser: {
+            formatter: DisplayFormatter
+          },
+          version: {
+            width: '70px'
+          },
+          actions: {
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: false, // can set function(row, value)
+              hasDelete: false, // can set function(row, value)
+              hasClone: this.hasClone,
+              moreActionsTitle: this.$t('common.More'),
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('common.View'),
+                  can: this.$hasPerm('assets.view_assethistoryaccountsecret'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    vm.account = row
+                    vm.showViewSecretDialog = true
+                  }
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasLeftActions: this.hasLeftActions,
+        hasMoreActions: false,
+        hasCreate: false,
+        hasImport: false,
+        hasExport: this.$hasPerm('assets.view_assethistoryaccountsecret'),
+        exportOptions: {
+          url: this.exportUrl,
+          mfaVerifyRequired: true
+        },
+        searchConfig: {
+          exclude: ['systemuser', 'asset']
+        },
+        hasSearch: true
+      }
+    }
+  },
+  computed: {
+    title() {
+      return this.$t('accounts.AccountHistableHelpMessage')
+    }
+  },
+  watch: {
+    url(iNew) {
+      this.$set(this.tableConfig, 'url', iNew)
+      this.$set(this.headerActions.exportOptions, 'url', iNew.replace('/accounts-history/', '/account-history-secrets/'))
+    }
+  },
+  mounted() {
+    if (this.otherActions) {
+      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+      for (const item of this.otherActions) {
+        actionColumn.formatterArgs.extraActions.push(item)
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -13,6 +13,7 @@ import ShowSecretInfo from './ShowSecretInfo'
 import UpdateSecretInfo from './UpdateSecretInfo'
 import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
+import i18n from '@/i18n/i18n'

 export default {
  name: 'AccountListTable',
@@ -148,6 +149,17 @@ export default {
                      vm.showUpdateSecretDialog = true
                    })
                  }
+                },
+                {
+                  name: 'History',
+                  title: i18n.t('common.History'),
+                  can: this.$hasPerm('assets.view_assethistoryaccount') && !this.$store.getters.currentOrgIsRoot,
+                  callback: ({ row }) => {
+                    this.$router.push({
+                      name: 'AssetAccountHistoryList',
+                      query: { id: row.id }
+                    })
+                  }
                }
              ]
            }
--- a/src/components/ListTable/TableAction/ExportDialog.vue
+++ b/src/components/ListTable/TableAction/ExportDialog.vue
@@ -2,6 +2,7 @@
  <div>
    <UserConfirmDialog
      v-if="mfaDialogShow"
+      :url="url"
      @UserConfirmDone="showExportDialog"
      @UserConfirmCancel="handleExportCancel"
    />
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -1,6 +1,7 @@
 {
  "": "",
  "accounts": {
+    "AccountHistableHelpMessage": "Record the historical version of the current account",
    "PleaseClickLeftAssetToViewAssetAccount": "Asset account list,  please click on the assets on the left to view",
    "PleaseClickLeftApplicationToViewApplicationAccount": "Application account list, please click on the application on the left to view",
    "PleaseClickLeftAssetToViewGatheredUser": "Gathered user list, please click on the assets on the left to view"
@@ -254,6 +255,7 @@
  "common": {
    "VerificationCodeSent": "The verification code has been sent",
    "SendVerificationCode": "Send verification code",
+    "History": "History",
    "ChangeViewHelpText": "Click to change view",
    "Component": "component",
    "PrivateCloud": "Private cloud",
@@ -683,6 +685,7 @@
    "SessionDetail": "SessionDetail",
    "Accounts": "Accounts",
    "AssetAccount": "Asset Account",
+    "AssetHistoryAccount": "Asset History Account",
    "ApplicationAccount": "Application Account",
    "Ticket": "Tickets",
    "CommandConfirm": "Command confirm",
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -1,6 +1,7 @@
 {
  "": "",
  "accounts": {
+    "AccountHistableHelpMessage": "現在のアカウントの履歴バージョンを記録する",
    "PleaseClickLeftAssetToViewAssetAccount": "資産のアカウントのリスト、左側の資産をクリックして表示します",
    "PleaseClickLeftApplicationToViewApplicationAccount": "アカウントのリストを適用して、左側のアプリケーションをクリックして表示します",
    "PleaseClickLeftAssetToViewGatheredUser": "ユーザーリストを収集し、左側の資産をクリックして表示します。"
@@ -259,6 +260,7 @@
  "common": {
    "VerificationCodeSent": "検証コードが送信されました",
    "SendVerificationCode": "認証コードの送信",
+    "History": "歴史",
    "ChangeViewHelpText": "クリックしてさまざまなビューにアクセス",
    "Component": "コンポーネント",
    "PrivateCloud": "プライベートクラウド",
@@ -695,6 +697,7 @@
    "TicketFlowUpdate": "承認フローの更新",
    "Accounts": "アカウント管理",
    "AssetAccount": "資産アカウント",
+    "AssetHistoryAccount": "資産履歴",
    "ApplicationAccount": "アプリアカウント",
    "Ticket": "ワークオーダー",
    "SessionDetail": "セッションの詳細",
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -1,6 +1,7 @@
 {
  "": "",
  "accounts": {
+    "AccountHistableHelpMessage": "记录当前账号的历史版本",
    "PleaseClickLeftAssetToViewAssetAccount": "资产账号列表，点击左侧资产进行查看",
    "PleaseClickLeftApplicationToViewApplicationAccount": "应用账号列表，点击左侧应用进行查看",
    "PleaseClickLeftAssetToViewGatheredUser": "收集用户列表，点击左侧资产进行查看"
@@ -259,6 +260,7 @@
  "common": {
    "VerificationCodeSent": "验证码已发送",
    "SendVerificationCode": "发送验证码",
+    "History": "历史",
    "ChangeViewHelpText": "点击切换不同视图",
    "Component": "组件",
    "PrivateCloud": "私有云",
@@ -695,6 +697,7 @@
    "TicketFlowUpdate": "更新审批流",
    "Accounts": "账号管理",
    "AssetAccount": "资产账号",
+    "AssetHistoryAccount": "资产历史账号",
    "ApplicationAccount": "应用账号",
    "Ticket":"工单",
    "MyTickets": "我的申请",
--- a/src/router/console/accounts.js
+++ b/src/router/console/accounts.js
@@ -21,6 +21,16 @@ export default [
          app: 'assets',
          permissions: ['assets.view_authbook']
        }
+      },
+      {
+        path: 'history',
+        name: 'AssetAccountHistoryList',
+        component: () => import('@/views/accounts/AssetAccount/AssetAccountHistoryList'),
+        hidden: true,
+        meta: {
+          title: i18n.t('route.AssetHistoryAccount'),
+          permissions: ['assets.view_assethistoryaccount']
+        }
      }
    ]
  },
--- a/src/views/accounts/AssetAccount/AssetAccountHistoryList.vue
+++ b/src/views/accounts/AssetAccount/AssetAccountHistoryList.vue
@@ -0,0 +1,78 @@
+<template>
+  <Page v-bind="$attrs">
+    <AccountHistoryTable ref="table" :url="accountsUrl" :has-left-actions="true" />
+  </Page>
+</template>
+
+<script>
+import AccountHistoryTable from '@/components/AccountHistoryTable'
+
+export default {
+  name: 'AssetAccountHistoryList',
+  components: {
+    AccountHistoryTable
+  },
+  data() {
+    return {
+      isInit: true,
+      clickedRow: null,
+      iShowTree: true,
+      accountsUrl: `/api/v1/assets/accounts-history/?id=${this.$route.query.id}`
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
+    background-color: #f5f7fa;
+  }
+  .asset-table {
+    &:hover {
+      cursor: pointer;
+    }
+    & >>> .table-content {
+      margin-left: 21px;
+    }
+    & ::v-deep .el-table__row{
+      height: 40px;
+      & > td{
+        padding: 0;
+      }
+    }
+  }
+  .mini-button{
+    width: 12px;
+    float: left;
+    margin-right: 10px;
+    text-align: center;
+    padding: 9px 0;
+    background-color: #1ab394;
+    border-color: #1ab394;
+    color: #FFFFFF;
+    border-radius: 5px;
+    line-height: 1.428;
+    cursor:pointer;
+  }
+  .noDataR{
+    width: 100%;
+    height: 40vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-direction: column;
+    .hintWrap{
+      color: #D4D6E6;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-direction: column;
+    }
+  }
+  .asset-user-table{
+    padding-left: 20px;
+  }
+</style>