perf: 授权的资产列表中支持查看某个资产授权的账号

src/components/Apps/GrantedAssets/index.vue

@@ -5,6 +5,7 @@
 <script type="text/jsx">
 import TreeTable from '../../Table/TreeTable/index.vue'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import { AccountInfoFormatter } from '@/components/Table/TableFormatters'
 import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
 
 export default {
@@ -58,10 +59,11 @@ export default {
       tableConfig: {
         url: this.tableUrl,
         hasTree: true,
+        columnsExtra: ['view_account'],
         columnsExclude: ['spec_info'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
-          default: ['name', 'address', 'platform', 'connectivity']
+          default: ['name', 'address', 'platform', 'view_account', 'connectivity']
         },
         columnsMeta: {
           name: {
@@ -73,6 +75,11 @@ export default {
           actions: {
             has: false
           },
+          view_account: {
+            label: this.$t('assets.Account'),
+            formatter: AccountInfoFormatter,
+            width: '100px'
+          },
           connectivity: connectivityMeta
         }
       },

src/components/Table/TableFormatters/AccountInfoFormatter.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-popover
+    :title="title"
+    placement="left-start"
+    trigger="click"
+    @show="getAsyncItems"
+  >
+    <div>
+      <div v-for="account of accountData" :key="account.id" class="detail-item">
+        <span>{{ account.name }}({{ account.username }})</span>
+      </div>
+    </div>
+    <el-button slot="reference" size="mini" type="primary">{{ $t('common.View') }}</el-button>
+  </el-popover>
+</template>
+
+<script>
+import BaseFormatter from './base.vue'
+
+export default {
+  name: 'SwitchFormatter',
+  extends: BaseFormatter,
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
+      value: this.cellValue,
+      accountData: []
+    }
+  },
+  computed: {
+    title() {
+      return this.formatterArgs.title || this.col.label
+    }
+  },
+  methods: {
+    async getAsyncItems() {
+      const userId = this.$route.params.id
+      const url = `api/v1/perms/users/${userId}/assets/${this.row.id}`
+      this.$axios.get(url).then(res => {
+        this.accountData = res?.permed_accounts || []
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detail-item {
+  border-bottom: 1px solid #EBEEF5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:hover {
+    background-color: #F5F7FA;
+  }
+}
+</style>

src/components/Table/TableFormatters/index.js

@@ -17,6 +17,7 @@ import TwoTabFormatter from './TwoTabFormatter.vue'
 import ProtocolsFormatter from './ProtocolsFormatter.vue'
 import TagChoicesFormatter from './TagChoicesFormatter.vue'
 import SwitchFormatter from './SwitchFormatter.vue'
+import AccountInfoFormatter from './AccountInfoFormatter.vue'
 
 export default {
   DetailFormatter,
@@ -37,7 +38,8 @@ export default {
   ProtocolsFormatter,
   TagChoicesFormatter,
   LabelsFormatter,
-  SwitchFormatter
+  SwitchFormatter,
+  AccountInfoFormatter
 }
 
 export {
@@ -59,5 +61,6 @@ export {
   ProtocolsFormatter,
   TagChoicesFormatter,
   LabelsFormatter,
-  SwitchFormatter
+  SwitchFormatter,
+  AccountInfoFormatter
 }