[Update] 修改授权列表组件页面

src/components/ListTable/formatters/LengthFormatter.vue

@@ -0,0 +1,23 @@
+<template>
+  <span>{{ getCellValueLength }}</span>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'LengthFormatter',
+  extends: BaseFormatter,
+  computed: {
+    getCellValueLength() {
+      if (this.cellValue instanceof Array) {
+        return this.cellValue.length
+      }
+      return this.cellValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ListTable/formatters/base.vue

@@ -19,7 +19,7 @@ export default {
       default: () => ({})
     },
     cellValue: {
-      type: [String, Boolean, Number, Object],
+      type: [String, Boolean, Number, Object, Array],
       default: null
     },
     tableData: {

src/components/ListTable/formatters/index.js

@@ -2,4 +2,5 @@ export { default as DetailFormatter } from './DetailFormatter'
 export { default as DisplayFormatter } from './DisplayFormatter'
 export { default as BooleanFormatter } from './ChoicesFormatter'
 export { default as ActionsFormatter } from './ActionsFormatter'
+export { default as LengthFormatter } from './LengthFormatter'
 

src/views/perms/AssetPermissionList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters/index'
+import { LengthFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
@@ -14,59 +14,23 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/perms/asset-permissions/',
-        columns: [
+        columns: ['name', 'users', 'user_groups', 'assets', 'nodes', 'system_users', 'is_active', 'actions'],
-          {
+        columnsMeta: {
-            prop: 'name',
+          users: {
-            label: this.$t('common.name'),
+            formatter: LengthFormatter
-            formatter: DetailFormatter,
-            sortable: true,
-            route: 'AssetPermissionDetail'
           },
-          {
+          user_groups: {
-            prop: 'users.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.user')
           },
-          {
+          assets: {
-            prop: 'user_groups.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.userGroup')
           },
-          {
+          nodes: {
-            prop: 'assets.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.asset')
           },
-          {
+          system_users: {
-            prop: 'nodes.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.node')
-          },
-          {
-            prop: 'system_users.length',
-            label: this.$t('perms.systemUser')
-          },
-          {
-            prop: 'is_active',
-            label: this.$t('perms.validity'),
-            formatter: BooleanFormatter,
-            align: 'center',
-            width: '80px'
-          },
-          {
-            prop: 'id',
-            label: this.$tc('Action'),
-            align: 'center',
-            formatter: ActionsFormatter,
-            width: '200px',
-            actions: {
-              performDelete: ({ row, col }) => {
-                const id = row.id
-                const url = `/api/v1/perms/asset-permissions/${id}/`
-                return this.$axios.delete(url)
-              }
-            }
           }
-        ],
-        tableActions: {
-          hasEdit: true,
-          editRoute: '404'
         }
       },
       headerActions: {

src/views/perms/DatabaseAppPermissionList.vue

@@ -4,8 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters/index'
+import { LengthFormatter } from '@/components/ListTable/formatters/index'
-
 export default {
   components: {
     GenericListPage
@@ -14,52 +13,21 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/perms/database-app-permissions/',
-        columns: [
+        columns: ['name', 'users', 'user_groups', 'database_apps', 'system_users', 'is_valid', 'actions'],
-          {
+        columnsMeta: {
-            prop: 'name',
+          users: {
-            label: this.$t('perms.name'),
+            formatter: LengthFormatter
-            formatter: DetailFormatter,
-            sortable: true,
-            route: 'DatabaseAppPermissionDetail'
           },
-          {
+          user_groups: {
-            prop: 'users.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.user')
           },
-          {
+          database_apps: {
-            prop: 'user_groups.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.userGroup')
           },
-          {
+          system_users: {
-            prop: 'database_apps.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.DatabaseApp')
-          },
-          {
-            prop: 'system_users.length',
-            label: this.$t('perms.systemUser')
-          },
-          {
-            prop: 'is_valid',
-            label: this.$t('perms.validity'),
-            formatter: BooleanFormatter,
-            align: 'center',
-            width: '80px'
-          },
-          {
-            prop: 'id',
-            label: this.$tc('Action'),
-            align: 'center',
-            formatter: ActionsFormatter,
-            width: '200px',
-            actions: {
-              performDelete: ({ row, col }) => {
-                const id = row.id
-                const url = `/api/v1/perms/database-app-permissions/${id}/`
-                return this.$axios.delete(url)
-              }
-            }
           }
-        ]
+        }
       },
       headerActions: {
         hasBulkDelete: false,

src/views/perms/RemoteAppPermissionList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters/index'
+import { LengthFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
@@ -14,52 +14,21 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/perms/remote-app-permissions/',
-        columns: [
+        columns: ['name', 'users', 'user_groups', 'remote_apps', 'system_users', 'is_valid', 'actions'],
-          {
+        columnsMeta: {
-            prop: 'name',
+          users: {
-            label: this.$t('perms.name'),
+            formatter: LengthFormatter
-            formatter: DetailFormatter,
-            sortable: true,
-            route: 'RemoteAppPermissionDetail'
           },
-          {
+          user_groups: {
-            prop: 'users.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.user')
           },
-          {
+          remote_apps: {
-            prop: 'user_groups.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.userGroup')
           },
-          {
+          system_users: {
-            prop: 'remote_apps.length',
+            formatter: LengthFormatter
-            label: this.$t('perms.RemoteApp')
-          },
-          {
-            prop: 'system_users.length',
-            label: this.$t('perms.systemUser')
-          },
-          {
-            prop: 'is_valid',
-            label: this.$t('perms.validity'),
-            formatter: BooleanFormatter,
-            align: 'center',
-            width: '80px'
-          },
-          {
-            prop: 'id',
-            label: this.$tc('Action'),
-            align: 'center',
-            formatter: ActionsFormatter,
-            width: '200px',
-            actions: {
-              performDelete: ({ row, col }) => {
-                const id = row.id
-                const url = `/api/v1/perms/database-app-permissions/${id}/`
-                return this.$axios.delete(url)
-              }
-            }
           }
-        ]
+        }
       },
       headerActions: {
         hasBulkDelete: false,