feat: 资产授权规则详情页面添加授权账号tab页，显示所有授权的账号列表

src/i18n/langs/en.json

@@ -640,6 +640,7 @@
   },
   "perms": {
     "": "",
+    "permAccount": "Accounts",
     "Actions": "Actions",
     "Permission": "Permissions",
     "Asset": "Asset",

src/i18n/langs/ja.json

@@ -647,6 +647,7 @@
   },
   "perms": {
     "": "",
+    "permAccount": "認定アカウント",
     "Actions": "アクション",
     "Asset": "資産",
     "Basic": "基本",

src/i18n/langs/zh.json

@@ -657,6 +657,7 @@
   },
   "perms": {
     "": "",
+    "permAccount": "授权账号",
     "Actions": "动作",
     "Asset": "资产",
     "Basic": "基本",

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue

@@ -0,0 +1,81 @@
+<template>
+  <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" class- />
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+
+export default {
+  name: 'AssetPermissionAccount',
+  components: {
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/asset-permissions/${this.object.id}/accounts/`,
+        columns: [
+          'asset', 'name', 'username', 'privileged', 'version', 'comment'
+        ],
+        columnsShow: {
+          default: [
+            'asset', 'name', 'username', 'privileged', 'version'
+          ],
+          min: ['asset_name', 'name']
+        },
+        columnsMeta: {
+          asset: {
+            label: this.$t('assets.Asset'),
+            showOverflowTooltip: true,
+            formatter: function(row) {
+              const to = {
+                name: 'AssetDetail',
+                params: { id: row.asset.id }
+              }
+              if (vm.$hasPerm('assets.view_asset')) {
+                return <router-link to={ to } >{ row.asset.name }</router-link>
+              } else {
+                return <span>{ row.asset.name }</span>
+              }
+            }
+          },
+          name: {
+            formatter: null
+          },
+          privileged: {
+            width: '120px',
+            label: this.$t('assets.Privileged'),
+            formatterArgs: {
+              showFalse: false
+            }
+          }
+        },
+        tableAttrs: {
+          border: false
+        }
+      },
+      headerActions: {
+        hasSearch: true,
+        hasRefresh: true,
+        hasLeftActions: true,
+        hasRightActions: true,
+        hasExport: false,
+        hasImport: false,
+        hasCreate: false,
+        hasMoreActions: false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/AssetPermission/AssetPermissionDetail/index.vue

@@ -11,6 +11,7 @@ import { GenericDetailPage, TabPage } from '@/layout/components'
 import AssetPermissionDetail from './AssetPermissionDetail'
 import AssetPermissionUser from './AssetPermissionUser'
 import AssetPermissionAsset from './AssetPermissionAsset'
+import AssetPermissionAccount from './AssetPermissionAccount'
 
 export default {
   components: {
@@ -18,6 +19,7 @@ export default {
     AssetPermissionDetail,
     AssetPermissionUser,
     AssetPermissionAsset,
+    AssetPermissionAccount,
     TabPage
   },
   data() {
@@ -42,6 +44,11 @@ export default {
             title: this.$t('perms.assetAndNode'),
             name: 'AssetPermissionAsset',
             hidden: () => !this.$hasPerm('assets.view_asset') || !this.$hasPerm('perms.change_assetpermission')
+          },
+          {
+            title: this.$t('perms.permAccount'),
+            name: 'AssetPermissionAccount',
+            hidden: () => !this.$hasPerm('assets.view_account') || !this.$hasPerm('perms.change_assetpermission')
           }
         ]
       }