[Update] 修改授权组件详情

src/views/perms/AssetPermissionAsset.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card primary">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ userCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectUser.value" v-bind="selectUser" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card success">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ userGroupCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectUserGroup.value" v-bind="selectUserGroup" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Select2 from '@/components/Select2'
+
+export default {
+  name: 'AssetPermissionUser',
+  components: {
+    ListTable,
+    Select2
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/users/all/`,
+        columns: [
+          'user_display'
+        ],
+        columnsMeta: {
+          user_display: {
+            label: this.$t('perms.User')
+          }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      assetPermissionUser: [],
+      assetPermissionUserGroup: [],
+      selectUser: {
+        url: '/api/v1/users/users/',
+        initial: this.assetPermissionUser,
+        value: []
+      },
+      selectUserGroup: {
+        url: '/api/v1/users/groups/',
+        initial: this.assetPermissionUserGroup,
+        value: []
+      }
+    }
+  },
+  computed: {
+    userCardActions() {
+      return this.$t('perms.User')
+    },
+    userGroupCardActions() {
+      return this.$t('perms.UserGroups')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/AssetPermissionDetail.vue

@@ -3,7 +3,7 @@
     <div slot="detail">
       <el-row :gutter="20">
         <el-col :span="14">
-          <DetailCard :title="cardTitle" :items="detailCardItems" />
+          <DetailCard v-if="flag" :title="cardTitle" :items="detailCardItems" />
         </el-col>
         <el-col :span="10">
           <el-card class="box-card primary">
@@ -29,73 +29,10 @@
       </el-row>
     </div>
     <div slot="userAndUserGroups">
-      <el-row :gutter="20">
+      <AssetPermissionUser />
-        <el-col :span="14">
-          <ListTable :table-config="tableConfig.userAndUserGroups" :header-actions="headerActions" />
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ userCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectUser.value" v-bind="selectUser" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card success">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ userGroupCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectUserGroup.value" v-bind="selectUserGroup" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
     <div slot="assetAndNode">
-      <el-row :gutter="20">
+      <AssetPermissionAsset />
-        <el-col :span="14">
-          <ListTable :table-config="tableConfig.assetAndNode" :header-actions="headerActions" />
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ assetCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectAsset.value" v-bind="selectAsset" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card success">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ nodeCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectNode.value" v-bind="selectNode" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card warning">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ systemUserCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectSystemUser.value" v-bind="selectSystemUser" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
   </GenericDetailPage>
 </template>
@@ -103,57 +40,24 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import DetailCard from '@/components/DetailCard/index'
-import ListTable from '@/components/ListTable'
 import { getAssetPermissionDetail } from '@/api/perms'
-import Select2 from '@/components/Select2'
+import { toSafeLocalDateStr } from '@/utils/common'
+import AssetPermissionUser from './AssetPermissionUser'
+import AssetPermissionAsset from './AssetPermissionAsset'
 
 export default {
   name: 'AssetPermissionDetail',
   components: {
     GenericDetailPage,
     DetailCard,
-    ListTable,
+    AssetPermissionUser,
-    Select2
+    AssetPermissionAsset
   },
   data() {
     return {
-      tableConfig: {
+      flag: false,
-        userAndUserGroups: {
-          url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/users/all/`,
-          columns: [
-            'user_display'
-          ],
-          columnsMeta: {
-            user_display: {
-              label: this.$t('perms.User')
-            }
-          }
-        },
-        assetAndNode: {
-          url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/assets/all/`,
-          columns: [
-            'asset_display'
-          ],
-          columnsMeta: {
-            asset_display: {
-              label: this.$t('perms.Asset')
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: false,
-        hasRightActions: false
-      },
       activeSubMenu: 'detail',
-      assetData: {},
+      assetPermissionData: {},
       submenu: [
         {
           title: this.$t('perms.AssetPermissionDetail'),
@@ -167,37 +71,7 @@ export default {
           title: this.$t('perms.AssetAndNode'),
           name: 'assetAndNode'
         }
-      ],
+      ]
-      assetPermissionUser: [],
-      assetPermissionUserGroup: [],
-      assetPermissionAsset: [],
-      assetPermissionNode: [],
-      assetPermissionSystemUser: [],
-      selectUser: {
-        url: '/api/v1/users/users/',
-        initial: this.assetPermissionUser,
-        value: []
-      },
-      selectUserGroup: {
-        url: '/api/v1/users/groups/',
-        initial: this.assetPermissionUserGroup,
-        value: []
-      },
-      selectAsset: {
-        url: '/api/v1/assets/assets/',
-        initial: this.assetPermissionAsset,
-        value: []
-      },
-      selectNode: {
-        url: '/api/v1/assets/nodes/',
-        initial: this.assetPermissionNode,
-        value: []
-      },
-      selectSystemUser: {
-        url: '/api/v1/assets/system-users/',
-        initial: this.assetPermissionSystemUser,
-        value: []
-      }
     }
   },
   computed: {
@@ -205,7 +79,7 @@ export default {
       return this.$t('perms.AssetPermissionDetail')
     },
     cardTitle() {
-      return this.assetData.id
+      return this.assetPermissionData.id
     },
     detailCardActions() {
       return this.$t('perms.QuickModify')
@@ -214,37 +88,36 @@ export default {
       return [
         {
           key: this.$t('common.Name'),
-          value: this.assetData.name
+          value: this.assetPermissionData.name
         },
         {
           key: this.$t('perms.UserCount'),
-          value: this.assetData.users
+          value: this.getDataLength(this.assetPermissionData.users)
         },
         {
           key: this.$t('perms.UserGroupCount'),
-          value: this.assetData.user_groups
+          value: this.getDataLength(this.assetPermissionData.user_groups)
         },
         {
           key: this.$t('perms.AssetCount'),
-          value: this.assetData.assets
+          value: this.getDataLength(this.assetPermissionData.assets)
         },
         {
           key: this.$t('perms.NodeCount'),
-          value: this.assetData.nodes
+          value: this.getDataLength(this.assetPermissionData.nodes)
         },
         {
           key: this.$t('perms.SystemUserCount'),
-          value: this.assetData.system_users
+          value: this.getDataLength(this.assetPermissionData.system_users)
         },
         {
           key: this.$t('perms.DateStart'),
-          // value: toSafeLocalDateStr(this.assetData.date_start),
+          value: toSafeLocalDateStr(this.assetPermissionData.date_start)
-          value: this.assetData.date_start
         },
         {
           key: this.$t('perms.DateExpired'),
           // value: toSafeLocalDateStr(this.assetData.date_expired),
-          value: this.assetData.date_expired
+          value: toSafeLocalDateStr(this.assetPermissionData.date_expired)
         },
         {
           key: this.$t('perms.DateCreated'),
@@ -256,7 +129,7 @@ export default {
         },
         {
           key: this.$t('common.Comment'),
-          value: this.assetData.comment
+          value: this.assetPermissionData.comment
         }
       ]
     },
@@ -267,34 +140,27 @@ export default {
           is_active: true
         }
       ]
-    },
-    userCardActions() {
-      return this.$t('perms.User')
-    },
-    userGroupCardActions() {
-      return this.$t('perms.UserGroups')
-    },
-    assetCardActions() {
-      return this.$t('perms.Asset')
-    },
-    nodeCardActions() {
-      return this.$t('perms.Node')
-    },
-    systemUserCardActions() {
-      return this.$t('perms.SystemUser')
     }
   },
   mounted() {
-    getAssetPermissionDetail(this.$route.params.id).then(data => {
+    this.getAssetPermissionDetailData()
-      console.log('详情页的数据==>', data)
-      this.assetData = data
-    })
   },
   methods: {
+    getAssetPermissionDetailData() {
+      getAssetPermissionDetail(this.$route.params.id).then(data => {
+        this.assetPermissionData = data
+        this.flag = true
+      })
+    },
     HandleChangeAction: function(index, row) {
       const url = `/api/v1/perms/asset-permissions/${this.$route.params.id}/`
-      console.log('点击激活的url==>', url)
+      console.log(url)
-      console.log('激活的数据==>', row)
+    },
+    getDataLength(data) {
+      if (data instanceof Array) {
+        return data.length
+      }
+      return data
     }
   }
 }

src/views/perms/AssetPermissionUser.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card primary">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ assetCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectAsset.value" v-bind="selectAsset" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card success">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ nodeCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectNode.value" v-bind="selectNode" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card warning">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ systemUserCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectSystemUser.value" v-bind="selectSystemUser" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Select2 from '@/components/Select2'
+
+export default {
+  name: 'AssetPermissionAsset',
+  components: {
+    ListTable,
+    Select2
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/assets/all/`,
+        columns: [
+          'asset_display'
+        ],
+        columnsMeta: {
+          asset_display: {
+            label: this.$t('perms.Asset')
+          }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      assetPermissionAsset: [],
+      assetPermissionNode: [],
+      assetPermissionSystemUser: [],
+      selectAsset: {
+        url: '/api/v1/assets/assets/',
+        initial: this.assetPermissionAsset,
+        value: []
+      },
+      selectNode: {
+        url: '/api/v1/assets/nodes/',
+        initial: this.assetPermissionNode,
+        value: []
+      },
+      selectSystemUser: {
+        url: '/api/v1/assets/system-users/',
+        initial: this.assetPermissionSystemUser,
+        value: []
+      }
+    }
+  },
+  computed: {
+    assetCardActions() {
+      return this.$t('perms.Asset')
+    },
+    nodeCardActions() {
+      return this.$t('perms.Node')
+    },
+    systemUserCardActions() {
+      return this.$t('perms.SystemUser')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/DatabaseAppPermissionDatabaseApp.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card primary">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ databaseAppCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectDatabaseApp.value" v-bind="selectDatabaseApp" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card success">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ systemUserCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectSystemUser.value" v-bind="selectSystemUser" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Select2 from '@/components/Select2'
+
+export default {
+  name: 'DatabaseAppPermissionDatabaseApp',
+  components: {
+    ListTable,
+    Select2
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/database-app-permissions/${this.$route.params.id}/database-apps/all/`,
+        columns: [
+          'databaseapp_display'
+        ],
+        columnsMeta: {
+          databaseapp_display: {
+            label: this.$t('perms.DatabaseApp')
+          }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      databaseAppPermissionDatabaseApp: [],
+      databaseAppPermissionSystemUser: [],
+      selectDatabaseApp: {
+        url: '/api/v1/applications/database-apps/',
+        initial: this.databaseAppPermissionDatabaseApp,
+        value: []
+      },
+      selectSystemUser: {
+        url: '/api/v1/assets/system-users/',
+        initial: this.databaseAppPermissionSystemUser,
+        value: []
+      }
+    }
+  },
+  computed: {
+    databaseAppCardActions() {
+      return this.$t('perms.Add DatabaseApp to this permission')
+    },
+    systemUserCardActions() {
+      return this.$t('perms.SystemUser')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/DatabaseAppPermissionDetail.vue

@@ -3,7 +3,7 @@
     <div slot="detail">
       <el-row :gutter="20">
         <el-col :span="14">
-          <DetailCard :title="cardTitle" :items="detailCardItems" />
+          <DetailCard v-if="flag" :title="cardTitle" :items="detailCardItems" />
         </el-col>
         <el-col :span="10">
           <el-card class="box-card primary">
@@ -29,62 +29,10 @@
       </el-row>
     </div>
     <div slot="userAndUserGroups">
-      <el-row :gutter="20">
+      <DatabaseAppPermissionUser />
-        <el-col :span="14">
-          <ListTable :table-config="tableConfig.userAndUserGroups" :header-actions="headerActions" />
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ userCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectUser.value" v-bind="selectUser" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card success">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ userGroupCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectUserGroup.value" v-bind="selectUserGroup" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
     <div slot="databaseApp">
-      <el-row :gutter="20">
+      <DatabaseAppPermissionDatabaseApp />
-        <el-col :span="14">
-          <ListTable :table-config="tableConfig.databaseApp" :header-actions="headerActions" />
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ databaseAppCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectDatabaseApp.value" v-bind="selectDatabaseApp" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card success">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ systemUserCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectSystemUser.value" v-bind="selectSystemUser" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
   </GenericDetailPage>
 </template>
@@ -92,55 +40,22 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import DetailCard from '@/components/DetailCard/index'
-import ListTable from '@/components/ListTable'
 import { getDatabaseAppPermissionDetail } from '@/api/perms'
-import Select2 from '@/components/Select2'
+import { toSafeLocalDateStr } from '@/utils/common'
+import DatabaseAppPermissionUser from './DatabaseAppPermissionUser'
+import DatabaseAppPermissionDatabaseApp from './DatabaseAppPermissionDatabaseApp'
 
 export default {
   name: 'DatabaseAppPermissionDetail',
   components: {
+    DatabaseAppPermissionDatabaseApp,
+    DatabaseAppPermissionUser,
     GenericDetailPage,
-    DetailCard,
+    DetailCard
-    ListTable,
-    Select2
   },
   data() {
     return {
-      tableConfig: {
+      flag: false,
-        userAndUserGroups: {
-          url: `/api/v1/perms/database-app-permissions/${this.$route.params.id}/users/all/`,
-          columns: [
-            'user_display'
-          ],
-          columnsMeta: {
-            user_display: {
-              label: this.$t('perms.User')
-            }
-          }
-        },
-        databaseApp: {
-          url: `/api/v1/perms/database-app-permissions/${this.$route.params.id}/database-apps/all/`,
-          columns: [
-            'databaseapp_display'
-          ],
-          columnsMeta: {
-            databaseapp_display: {
-              label: this.$t('perms.DatabaseApp')
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: false,
-        hasRightActions: false
-      },
       activeSubMenu: 'detail',
       databaseAppData: {},
       submenu: [
@@ -156,31 +71,7 @@ export default {
           title: this.$t('perms.DatabaseApp'),
           name: 'databaseApp'
         }
-      ],
+      ]
-      databaseAppPermissionUser: [],
-      databaseAppPermissionUserGroup: [],
-      databaseAppPermissionDatabaseApp: [],
-      databaseAppPermissionSystemUser: [],
-      selectUser: {
-        url: '/api/v1/users/users/',
-        initial: this.databaseAppPermissionUser,
-        value: []
-      },
-      selectUserGroup: {
-        url: '/api/v1/users/groups/',
-        initial: this.databaseAppPermissionUserGroup,
-        value: []
-      },
-      selectDatabaseApp: {
-        url: '/api/v1/applications/database-apps/',
-        initial: this.databaseAppPermissionDatabaseApp,
-        value: []
-      },
-      selectSystemUser: {
-        url: '/api/v1/assets/system-users/',
-        initial: this.databaseAppPermissionSystemUser,
-        value: []
-      }
     }
   },
   computed: {
@@ -201,31 +92,31 @@ export default {
         },
         {
           key: this.$t('perms.UserCount'),
-          value: this.databaseAppData.users
+          value: this.getDataLength(this.databaseAppData.users)
         },
         {
           key: this.$t('perms.UserGroupCount'),
-          value: this.databaseAppData.user_groups
+          value: this.getDataLength(this.databaseAppData.user_groups)
         },
         {
           key: this.$t('perms.RemoteAppCount'),
-          value: this.databaseAppData.database_apps
+          value: this.getDataLength(this.databaseAppData.database_apps)
         },
         {
           key: this.$t('perms.SystemUserCount'),
-          value: this.databaseAppData.system_users
+          value: this.getDataLength(this.databaseAppData.system_users)
         },
         {
           key: this.$t('perms.DateStart'),
-          value: this.databaseAppData.date_start
+          value: toSafeLocalDateStr(this.databaseAppData.date_start)
         },
         {
           key: this.$t('perms.DateExpired'),
-          value: this.databaseAppData.date_expired
+          value: toSafeLocalDateStr(this.databaseAppData.date_expired)
         },
         {
           key: this.$t('perms.DateCreated'),
-          value: this.databaseAppData.date_created
+          value: toSafeLocalDateStr(this.databaseAppData.date_created)
         },
         {
           key: this.$t('perms.CreatedBy'),
@@ -244,31 +135,27 @@ export default {
           is_active: true
         }
       ]
-    },
-    userCardActions() {
-      return this.$t('perms.User')
-    },
-    userGroupCardActions() {
-      return this.$t('perms.UserGroups')
-    },
-    databaseAppCardActions() {
-      return this.$t('perms.Add DatabaseApp to this permission')
-    },
-    systemUserCardActions() {
-      return this.$t('perms.SystemUser')
     }
   },
   mounted() {
-    getDatabaseAppPermissionDetail(this.$route.params.id).then(data => {
+    this.getDatabaseAppPermissionDetailData()
-      console.log('详情数据==>', data)
-      this.databaseAppData = data
-    })
   },
   methods: {
+    getDatabaseAppPermissionDetailData() {
+      getDatabaseAppPermissionDetail(this.$route.params.id).then(data => {
+        this.databaseAppData = data
+        this.flag = true
+      })
+    },
     HandleChangeAction: function(index, row) {
       const url = `/api/v1/perms/database-app-permissions/${this.$route.params.id}/`
-      console.log('点击激活的url===>', url)
+      console.log(url)
-      console.log('激活的数据===>', row)
+    },
+    getDataLength(data) {
+      if (data instanceof Array) {
+        return data.length
+      }
+      return data
     }
   }
 }

src/views/perms/DatabaseAppPermissionUser.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card primary">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ userCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectUser.value" v-bind="selectUser" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card success">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ userGroupCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectUserGroup.value" v-bind="selectUserGroup" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Select2 from '@/components/Select2'
+export default {
+  name: 'DatabaseAppPermissionUser',
+  components: {
+    ListTable,
+    Select2
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/database-app-permissions/${this.$route.params.id}/users/all/`,
+        columns: [
+          'user_display'
+        ],
+        columnsMeta: {
+          user_display: {
+            label: this.$t('perms.User')
+          }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      databaseAppPermissionUser: [],
+      databaseAppPermissionUserGroup: [],
+      selectUser: {
+        url: '/api/v1/users/users/',
+        initial: this.databaseAppPermissionUser,
+        value: []
+      },
+      selectUserGroup: {
+        url: '/api/v1/users/groups/',
+        initial: this.databaseAppPermissionUserGroup,
+        value: []
+      }
+    }
+  },
+  computed: {
+    userCardActions() {
+      return this.$t('perms.User')
+    },
+    userGroupCardActions() {
+      return this.$t('perms.UserGroups')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/RemoteAppPermissionDetail.vue

@@ -3,7 +3,7 @@
     <div slot="detail">
       <el-row :gutter="20">
         <el-col :span="14">
-          <DetailCard :title="cardTitle" :items="detailCardItems" />
+          <DetailCard v-if="flag" :title="cardTitle" :items="detailCardItems" />
         </el-col>
         <el-col :span="10">
           <el-card class="box-card primary">
@@ -29,62 +29,10 @@
       </el-row>
     </div>
     <div slot="userAndUserGroups">
-      <el-row :gutter="20">
+      <RemoteAppPermissionUser />
-        <el-col :span="14">
-          <ListTable :table-config="tableConfig.userAndUserGroups" :header-actions="headerActions" />
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ userCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectUser.value" v-bind="selectUser" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card success">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ userGroupCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectUserGroup.value" v-bind="selectUserGroup" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
     <div slot="remoteApp">
-      <el-row :gutter="20">
+      <RemoteAppPermissionRemoteApp />
-        <el-col :span="14">
-          <ListTable :table-config="tableConfig.remoteApp" :header-actions="headerActions" />
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ remoteAppCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectRemoteApp.value" v-bind="selectRemoteApp" />
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card success">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ systemUserCardActions }}</span>
-            </div>
-            <div>
-              <Select2 v-model="selectSystemUser.value" v-bind="selectSystemUser" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
   </GenericDetailPage>
 </template>
@@ -92,55 +40,22 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import DetailCard from '@/components/DetailCard/index'
-import ListTable from '@/components/ListTable'
 import { getRemoteAppPermissionDetail } from '@/api/perms'
-import Select2 from '@/components/Select2'
+import { toSafeLocalDateStr } from '@/utils/common'
+import RemoteAppPermissionUser from './RemoteAppPermissionUser'
+import RemoteAppPermissionRemoteApp from './RemoteAppPermissionRemoteApp'
 
 export default {
   name: 'RemoteAppPermissionDetail',
   components: {
+    RemoteAppPermissionUser,
+    RemoteAppPermissionRemoteApp,
     GenericDetailPage,
-    DetailCard,
+    DetailCard
-    ListTable,
-    Select2
   },
   data() {
     return {
-      tableConfig: {
+      flag: false,
-        userAndUserGroups: {
-          url: `/api/v1/perms/remote-app-permissions/${this.$route.params.id}/users/all/`,
-          columns: [
-            // 'user_display'
-          ],
-          columnsMeta: {
-            // user_display: {
-            //   label: this.$t('perms.User')
-            // }
-          }
-        },
-        remoteApp: {
-          url: `/api/v1/perms/remote-app-permissions/${this.$route.params.id}/remote-apps/all/`,
-          columns: [
-            // 'remote_app_display'
-          ],
-          columnsMeta: {
-            // asset_display: {
-            //   label: this.$t('perms.RemoteApp')
-            // }
-          }
-        }
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: false,
-        hasRightActions: false
-      },
       activeSubMenu: 'detail',
       remoteAppData: {},
       submenu: [
@@ -157,20 +72,8 @@ export default {
           name: 'remoteApp'
         }
       ],
-      remoteAppPermissionUser: [],
-      remoteAppPermissionUserGroup: [],
       remoteAppPermissionRemoteApp: [],
       remoteAppPermissionSystemUser: [],
-      selectUser: {
-        url: '/api/v1/users/users/',
-        initial: this.remoteAppPermissionUser,
-        value: []
-      },
-      selectUserGroup: {
-        url: '/api/v1/users/groups/',
-        initial: this.remoteAppPermissionUserGroup,
-        value: []
-      },
       selectRemoteApp: {
         url: '/api/v1/applications/remote-apps/',
         initial: this.remoteAppPermissionRemoteApp,
@@ -201,31 +104,31 @@ export default {
         },
         {
           key: this.$t('perms.UserCount'),
-          value: this.remoteAppData.users
+          value: this.getDataLength(this.remoteAppData.users)
         },
         {
           key: this.$t('perms.UserGroupCount'),
-          value: this.remoteAppData.user_groups
+          value: this.getDataLength(this.remoteAppData.user_groups)
         },
         {
           key: this.$t('perms.RemoteAppCount'),
-          value: this.remoteAppData.remote_apps
+          value: this.getDataLength(this.remoteAppData.remote_apps)
         },
         {
           key: this.$t('perms.SystemUserCount'),
-          value: this.remoteAppData.system_users
+          value: this.getDataLength(this.remoteAppData.system_users)
         },
         {
           key: this.$t('perms.DateStart'),
-          value: this.remoteAppData.date_start
+          value: toSafeLocalDateStr(this.remoteAppData.date_start)
         },
         {
           key: this.$t('perms.DateExpired'),
-          value: this.remoteAppData.date_expired
+          value: toSafeLocalDateStr(this.remoteAppData.date_expired)
         },
         {
           key: this.$t('perms.DateCreated'),
-          value: this.remoteAppData.date_created
+          value: toSafeLocalDateStr(this.remoteAppData.date_created)
         },
         {
           key: this.$t('perms.CreatedBy'),
@@ -245,12 +148,6 @@ export default {
         }
       ]
     },
-    userCardActions() {
-      return this.$t('perms.User')
-    },
-    userGroupCardActions() {
-      return this.$t('perms.UserGroups')
-    },
     remoteAppCardActions() {
       return this.$t('perms.RemoteApp')
     },
@@ -259,16 +156,26 @@ export default {
     }
   },
   mounted() {
-    getRemoteAppPermissionDetail(this.$route.params.id).then(data => {
+    this.getRemoteAppPermissionDetailData()
-      console.log('详情数据==>', data)
-      this.remoteAppData = data
-    })
   },
   methods: {
+    getRemoteAppPermissionDetailData() {
+      getRemoteAppPermissionDetail(this.$route.params.id).then(data => {
+        console.log('详情数据==>', data)
+        this.remoteAppData = data
+        this.flag = true
+      })
+    },
     HandleChangeAction: function(index, row) {
       const url = `/api/v1/perms/remote-app-permissions/${this.$route.params.id}/`
       console.log('点击激活的url==>', url)
       console.log('激活的数据==>', row)
+    },
+    getDataLength(data) {
+      if (data instanceof Array) {
+        return data.length
+      }
+      return data
     }
   }
 }

src/views/perms/RemoteAppPermissionRemoteApp.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card primary">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ remoteAppCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectRemoteApp.value" v-bind="selectRemoteApp" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card success">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ systemUserCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectSystemUser.value" v-bind="selectSystemUser" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Select2 from '@/components/Select2'
+
+export default {
+  name: 'RemoteAppPermissionUser',
+  components: {
+    ListTable,
+    Select2
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/remote-app-permissions/${this.$route.params.id}/remote-apps/all/`,
+        columns: [
+          // 'remote_app_display'
+        ],
+        columnsMeta: {
+          // asset_display: {
+          //   label: this.$t('perms.RemoteApp')
+          // }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      remoteAppPermissionRemoteApp: [],
+      remoteAppPermissionSystemUser: [],
+      selectRemoteApp: {
+        url: '/api/v1/applications/remote-apps/',
+        initial: this.remoteAppPermissionRemoteApp,
+        value: []
+      },
+      selectSystemUser: {
+        url: '/api/v1/assets/system-users/',
+        initial: this.remoteAppPermissionSystemUser,
+        value: []
+      }
+    }
+  },
+  computed: {
+    remoteAppCardActions() {
+      return this.$t('perms.RemoteApp')
+    },
+    systemUserCardActions() {
+      return this.$t('perms.SystemUser')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/RemoteAppPermissionUser.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card primary">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ userCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectUser.value" v-bind="selectUser" />
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="10">
+      <el-card class="box-card success">
+        <div slot="header" class="clearfix">
+          <i class="fa fa-info" />
+          <span>{{ userGroupCardActions }}</span>
+        </div>
+        <div>
+          <Select2 v-model="selectUserGroup.value" v-bind="selectUserGroup" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Select2 from '@/components/Select2'
+
+export default {
+  name: 'RemoteAppPermissionUser',
+  components: {
+    ListTable,
+    Select2
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/perms/remote-app-permissions/${this.$route.params.id}/users/all/`,
+        columns: [
+          // 'user_display'
+        ],
+        columnsMeta: {
+          // user_display: {
+          //   label: this.$t('perms.User')
+          // }
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      remoteAppPermissionUser: [],
+      remoteAppPermissionUserGroup: [],
+      selectUser: {
+        url: '/api/v1/users/users/',
+        initial: this.remoteAppPermissionUser,
+        value: []
+      },
+      selectUserGroup: {
+        url: '/api/v1/users/groups/',
+        initial: this.remoteAppPermissionUserGroup,
+        value: []
+      }
+    }
+  },
+  computed: {
+    userCardActions() {
+      return this.$t('perms.User')
+    },
+    userGroupCardActions() {
+      return this.$t('perms.UserGroups')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>