From 2cb7a859a8456ff9d051ac43fbbf503f1d03ee30 Mon Sep 17 00:00:00 2001
From: wangruidong <940853815@qq.com>
Date: Fri, 29 Mar 2024 16:07:08 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=8E=88=E6=9D=83=E7=9A=84=E8=B5=84?=
 =?UTF-8?q?=E4=BA=A7=E5=88=97=E8=A1=A8=E4=B8=AD=E6=94=AF=E6=8C=81=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E6=9F=90=E4=B8=AA=E8=B5=84=E4=BA=A7=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E7=9A=84=E8=B4=A6=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Apps/GrantedAssets/index.vue   |  9 ++-
 .../TableFormatters/AccountInfoFormatter.vue  | 57 +++++++++++++++++++
 src/components/Table/TableFormatters/index.js |  7 ++-
 3 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Table/TableFormatters/AccountInfoFormatter.vue

diff --git a/src/components/Apps/GrantedAssets/index.vue b/src/components/Apps/GrantedAssets/index.vue
index 15ff26757..533ec9ffd 100644
--- a/src/components/Apps/GrantedAssets/index.vue
+++ b/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
         }
       },
diff --git a/src/components/Table/TableFormatters/AccountInfoFormatter.vue b/src/components/Table/TableFormatters/AccountInfoFormatter.vue
new file mode 100644
index 000000000..eca46bfc4
--- /dev/null
+++ b/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>
diff --git a/src/components/Table/TableFormatters/index.js b/src/components/Table/TableFormatters/index.js
index c3230faec..b3782104d 100644
--- a/src/components/Table/TableFormatters/index.js
+++ b/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
 }