pref: 优化授权列表

src/components/TableFormatters/AmountFormatter.vue

@@ -0,0 +1,68 @@
+<template>
+  <DetailFormatter>
+    <template>
+      <el-popover
+        placement="top-start"
+        :title="title"
+        width="400"
+        trigger="hover"
+        :disabled="cellValue.length === 0"
+      >
+        <div class="detail-content">
+          <div v-for="item of items" :key="item" class="detail-item">
+            <span class="detail-item-name">{{ item }}</span>
+          </div>
+        </div>
+        <span slot="reference">{{ cellValue.length }}</span>
+      </el-popover>
+    </template>
+  </DetailFormatter>
+</template>
+
+<script>
+import DetailFormatter from './DetailFormatter'
+export default {
+  name: 'AmountFormatter',
+  components: {
+    DetailFormatter
+  },
+  extends: DetailFormatter,
+  data() {
+    return {
+    }
+  },
+  computed: {
+    title() {
+      return this.formatterArgs.title || ''
+    },
+    items() {
+      const getItem = this.formatterArgs.getItem || function(item) { return item.name }
+      return this.cellValue.map(item => getItem(item))
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.detail-content {
+  padding: 10px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.detail-item {
+  border-bottom: 1px solid #EBEEF5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:hover {
+     background-color: #F5F7FA;
+  }
+
+  .detail-item-name {
+  }
+}
+
+</style>

src/components/TableFormatters/DetailFormatter.vue

@@ -7,7 +7,9 @@
       :type="col.type || 'info'"
       @click="goDetail"
     >
-      {{ iTitle }}
+      <slot>
+        {{ iTitle }}
+      </slot>
     </el-link>
   </div>
 </template>

src/components/TableFormatters/ShowKeyFormatter.vue

@@ -1,31 +0,0 @@
-<template>
-  <span v-if="systemuser.length===0"><a style="color: #1c84c6;" @click="showSystemUser">{{ this.$t('common.Show') }}</a></span>
-  <span v-else>{{ systemuser.toString() }}</span>
-</template>
-
-<script>
-import BaseFormatter from './base'
-export default {
-  name: 'ShowKeyFormatter',
-  extends: BaseFormatter,
-  data() {
-    return {
-      systemuser: []
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-
-  },
-  methods: {
-    showSystemUser() {
-      this.systemuser.push(this.cellValue)
-    }
-  }
-}
-</script>
-<style scoped>
-
-</style>

src/components/TableFormatters/index.js

@@ -6,7 +6,6 @@ import ActionsFormatter from './ActionsFormatter'
 import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
 import SystemUserFormatter from './GrantedSystemUsersShowFormatter'
-import ShowKeyFormatter from '@/components/TableFormatters/ShowKeyFormatter'
 import ShowKeyCopyFormatter from './ShowKeyCopyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
 import EditableInputFormatter from './EditableInputFormatter'
@@ -22,7 +21,6 @@ export default {
   DeleteActionFormatter,
   DateFormatter,
   SystemUserFormatter,
-  ShowKeyFormatter,
   ShowKeyCopyFormatter,
   DialogDetailFormatter,
   ArrayFormatter,
@@ -40,7 +38,6 @@ export {
   DeleteActionFormatter,
   DateFormatter,
   SystemUserFormatter,
-  ShowKeyFormatter,
   ShowKeyCopyFormatter,
   DialogDetailFormatter,
   ArrayFormatter,

src/views/perms/AssetPermission/AssetPermissionList.vue

@@ -15,7 +15,7 @@
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
 import PermBulkUpdateDialog from './components/PermBulkUpdateDialog'
-import { DetailFormatter } from '@/components/TableFormatters'
+import AmountFormatter from '@/components/TableFormatters/AmountFormatter'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -37,15 +37,16 @@ export default {
         url: '/api/v1/perms/asset-permissions/',
         hasTree: true,
         columns: [
-          'name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount',
-          'system_users_amount', 'date_expired', 'is_valid', 'is_expired', 'is_active',
-          'from_ticket', 'created_by', 'date_created', 'comment', 'org_name', 'actions'
+          'name', 'users', 'user_groups', 'assets', 'nodes',
+          'date_expired', 'is_valid', 'is_expired', 'is_active',
+          'from_ticket', 'created_by', 'date_created', 'comment',
+          'org_name', 'actions'
         ],
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'users_amount', 'user_groups_amount', 'assets_amount',
-            'nodes_amount', 'system_users_amount', 'is_valid', 'actions'
+            'name', 'users', 'user_groups', 'assets',
+            'nodes', 'system_users', 'is_valid', 'actions'
           ]
         },
         columnsMeta: {
@@ -57,16 +58,6 @@ export default {
             },
             showOverflowTooltip: true
           },
-          users_amount: {
-            label: this.$t('perms.User'),
-            width: '60px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'AssetPermissionUser'
-              }
-            }
-          },
           from_ticket: {
             label: this.$t('perms.fromTicket'),
             width: 100,
@@ -74,41 +65,44 @@ export default {
               showFalse: false
             }
           },
-          user_groups_amount: {
-            label: this.$t('perms.UserGroups'),
-            width: '100px',
-            formatter: DetailFormatter,
+          users: {
+            label: this.$t('perms.User'),
+            width: '60px',
+            formatter: AmountFormatter,
             formatterArgs: {
+              counting: true,
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
             }
           },
-          assets_amount: {
+          user_groups: {
+            label: this.$t('perms.UserGroups'),
+            width: '100px',
+            formatter: AmountFormatter,
+            formatterArgs: {
+              counting: true,
+              routeQuery: {
+                activeTab: 'AssetPermissionUser'
+              }
+            }
+          },
+          assets: {
             label: this.$t('perms.Asset'),
             width: '60px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'
               }
             }
           },
-          nodes_amount: {
+          nodes: {
             label: this.$t('perms.Node'),
             width: '60px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'AssetPermissionAsset'
-              }
-            }
-          },
-          system_users_amount: {
-            label: this.$t('perms.SystemUser'),
-            width: '100px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              counting: true,
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'
               }