diff --git a/src/api/perms.js b/src/api/perms.js
new file mode 100644
index 000000000..59c28e6a9
--- /dev/null
+++ b/src/api/perms.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+export function getAssetPermissionDetail(id) {
+  return request({
+    url: `/api/v1/perms/asset-permissions/${id}/`,
+    method: 'get'
+  })
+}
+
+export function getRemoteAppPermissionDetail(id) {
+  return request({
+    url: `/api/v1/perms/remote-app-permissions/${id}/`,
+    method: 'get'
+  })
+}
+
+export function getDatabaseAppPermissionDetail(id) {
+  return request({
+    url: `/api/v1/perms/database-app-permissions/${id}/`,
+    method: 'get'
+  })
+}
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 63019d979..8df8cbb18 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -350,10 +350,30 @@ const cn = {
     'UserGroups': '用户组',
     'Node': '节点',
     'SystemUser': '系统用户',
+    'UserCount': '用户数量',
+    'UserGroupCount': '用户组数量',
+    'AssetCount': '资产数量',
+    'NodeCount': '节点数量',
+    'SystemUserCount': '系统用户数量',
+    'DateStart': '开始日期',
+    'DateExpired': '失效日期',
+    'DateCreated': '创建日期',
+    'CreatedBy': '创建者',
+    'Comment': '备注',
+    'QuickModify': '快速修改',
+    'AssetPermissionDetail': '资产授权详情',
+    'UsersAndUserGroups': '用户或用户组',
+    'AssetAndNode': '资产或节点',
+    'Active': '激活中',
     //
     'RemoteApp': '远程应用',
+    'RemoteAppCount': '远程应用数量',
+    'RemoteAppPermissionDetail': '远程应用授权详情',
+    'Add RemoteApp to this permission': '添加远程应用',
     //
-    'DatabaseApp': '数据库应用'
+    'DatabaseApp': '数据库应用',
+    'DatabaseAppPermissionDetail': '数据库应用授权详情',
+    'Add DatabaseApp to this permission': '添加数据库应用'
   },
   sessions: {
     'id': 'ID',
diff --git a/src/router/index.js b/src/router/index.js
index b4b5a533f..959bd41e5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -222,11 +222,18 @@ export const constantRoutes = [
       },
       {
         path: 'asset-permissions/create',
-        component: () => import('@/views/perms/AssetPermissionCreateUpdate'), // Parent router-view
+        component: () => import('@/views/perms/AssetPermissionCreateUpdate'),
         name: 'AssetPermissionCreate',
         hidden: true,
         meta: { title: 'AssetPermissionCreate', activeMenu: '/perms/asset-permissions' }
       },
+      {
+        path: 'asset-permissions/:id',
+        component: () => import('@/views/perms/AssetPermissionDetail'),
+        name: 'AssetPermissionDetail',
+        hidden: true,
+        meta: { title: 'AssetPermissionDetail', activeMenu: '/perms/asset-permissions' }
+      },
       {
         path: 'remote-app-permissions',
         name: 'RemoteAppPermissionList',
@@ -240,6 +247,13 @@ export const constantRoutes = [
         hidden: true,
         meta: { title: 'RemoteAppPermissionCreate', activeMenu: '/perms/remote-app-permissions' }
       },
+      {
+        path: 'remote-app-permissions/:id',
+        component: () => import('@/views/perms/RemoteAppPermissionDetail'),
+        name: 'RemoteAppPermissionDetail',
+        hidden: true,
+        meta: { title: 'RemoteAppPermissionDetail', activeMenu: '/perms/asset-permissions' }
+      },
       {
         path: 'database-app-permissions',
         name: 'DatabaseAppPermissionList',
@@ -252,6 +266,13 @@ export const constantRoutes = [
         name: 'DatabaseAppPermissionCreate',
         hidden: true,
         meta: { title: 'DatabaseAppPermissionCreate', activeMenu: '/perms/database-app-permissions' }
+      },
+      {
+        path: 'database-app-permissions/:id',
+        component: () => import('@/views/perms/DatabaseAppPermissionDetail'),
+        name: 'DatabaseAppPermissionDetail',
+        hidden: true,
+        meta: { title: 'DatabaseAppPermissionDetail', activeMenu: '/perms/asset-permissions' }
       }
     ]
   },
diff --git a/src/views/perms/AssetPermissionDetail.vue b/src/views/perms/AssetPermissionDetail.vue
new file mode 100644
index 000000000..f8c7f4ea6
--- /dev/null
+++ b/src/views/perms/AssetPermissionDetail.vue
@@ -0,0 +1,275 @@
+<template>
+  <GenericDetailPage :submenu="submenu" :active-menu="activeSubMenu" :title="title">
+    <div slot="detail">
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <DetailCard :title="cardTitle" :items="detailCardItems" />
+        </el-col>
+        <el-col :span="10">
+          <el-card class="box-card primary">
+            <div slot="header" class="clearfix">
+              <i class="fa fa-info" />
+              <span>{{ detailCardActions }}</span>
+            </div>
+            <el-table class="el-table" :data="detailCardActionData" :show-header="false">
+              <el-table-column prop="name" />
+              <el-table-column prop="is_active" align="right">
+                <template slot-scope="scope">
+                  <el-switch
+                    v-model="scope.row.is_active"
+                    active-color="#13ce66"
+                    inactive-color="#ff4949"
+                    @change="HandleChangeAction(scope.$index, scope.row)"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="userAndUserGroups">
+      <el-row :gutter="20">
+        <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>
+          </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>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="assetAndNode">
+      <el-row :gutter="20">
+        <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>
+          </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>
+          </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>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import DetailCard from '@/components/DetailCard/index'
+import ListTable from '@/components/ListTable'
+import { getAssetPermissionDetail } from '@/api/perms'
+
+export default {
+  name: 'AssetPermissionDetail',
+  components: {
+    GenericDetailPage,
+    DetailCard,
+    ListTable
+  },
+  data() {
+    return {
+      tableConfig: {
+        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: {},
+      submenu: [
+        {
+          title: this.$t('perms.AssetPermissionDetail'),
+          name: 'detail'
+        },
+        {
+          title: this.$t('perms.UsersAndUserGroups'),
+          name: 'userAndUserGroups'
+        },
+        {
+          title: this.$t('perms.AssetAndNode'),
+          name: 'assetAndNode'
+        }
+      ]
+    }
+  },
+  computed: {
+    title() {
+      return this.$t('perms.AssetPermissionDetail')
+    },
+    cardTitle() {
+      return this.assetData.id
+    },
+    detailCardActions() {
+      return this.$t('perms.QuickModify')
+    },
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.assetData.name
+        },
+        {
+          key: this.$t('perms.UserCount'),
+          value: this.assetData.users
+        },
+        {
+          key: this.$t('perms.UserGroupCount'),
+          value: this.assetData.user_groups
+        },
+        {
+          key: this.$t('perms.AssetCount'),
+          value: this.assetData.assets
+        },
+        {
+          key: this.$t('perms.NodeCount'),
+          value: this.assetData.nodes
+        },
+        {
+          key: this.$t('perms.SystemUserCount'),
+          value: this.assetData.system_users
+        },
+        {
+          key: this.$t('perms.DateStart'),
+          // value: toSafeLocalDateStr(this.assetData.date_start),
+          value: this.assetData.date_start
+        },
+        {
+          key: this.$t('perms.DateExpired'),
+          // value: toSafeLocalDateStr(this.assetData.date_expired),
+          value: this.assetData.date_expired
+        },
+        {
+          key: this.$t('perms.DateCreated'),
+          value: '没有这个字段'
+        },
+        {
+          key: this.$t('perms.CreatedBy'),
+          value: '没有这个字段'
+        },
+        {
+          key: this.$t('common.Comment'),
+          value: this.assetData.comment
+        }
+      ]
+    },
+    detailCardActionData() {
+      return [
+        {
+          name: this.$t('perms.Active'),
+          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 => {
+      console.log('详情页的数据==>', data)
+      this.assetData = data
+    })
+  },
+  methods: {
+    HandleChangeAction: function(index, row) {
+      const url = `/api/v1/perms/asset-permissions/${this.$route.params.id}/`
+      console.log('点击激活的url==>', url)
+      console.log('激活的数据==>', row)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .el-table /deep/ .el-table__row > td {
+    line-height: 1.5;
+    padding: 8px 0;
+  }
+  .el-table /deep/ .el-table__row > td> div > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .el-table /deep/ .el-table__header > thead > tr >th {
+    padding: 8px 0;
+    background-color: #F5F5F6;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  .table{
+    margin-top: 15px;
+  }
+</style>
diff --git a/src/views/perms/AssetPermissionList.vue b/src/views/perms/AssetPermissionList.vue
index e334f4680..7eb3e548f 100644
--- a/src/views/perms/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermissionList.vue
@@ -1,14 +1,18 @@
 <template>
-  <TreeTable :table-config="tableConfig" :header-actions="headerActions" />
+  <!--  <TreeTable :table-config="tableConfig" :header-actions="headerActions" />-->
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+
 </template>
 
 <script>
-import TreeTable from '@/components/TreeTable'
+// import TreeTable from '@/components/TreeTable'
+import { GenericListPage } from '@/layout/components'
 import { LengthFormatter, ExpandAssetPermissionFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
-    TreeTable
+    // TreeTable
+    GenericListPage
   },
   data() {
     return {
@@ -37,6 +41,9 @@ export default {
           system_users: {
             formatter: LengthFormatter
           }
+        },
+        actions: {
+          updateRoute: 'RemoteAppPermissionUpdate'
         }
       },
       headerActions: {
diff --git a/src/views/perms/DatabaseAppPermissionDetail.vue b/src/views/perms/DatabaseAppPermissionDetail.vue
new file mode 100644
index 000000000..7ac96d1b3
--- /dev/null
+++ b/src/views/perms/DatabaseAppPermissionDetail.vue
@@ -0,0 +1,258 @@
+<template>
+  <GenericDetailPage :submenu="submenu" :active-menu="activeSubMenu" :title="title">
+    <div slot="detail">
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <DetailCard :title="cardTitle" :items="detailCardItems" />
+        </el-col>
+        <el-col :span="10">
+          <el-card class="box-card primary">
+            <div slot="header" class="clearfix">
+              <i class="fa fa-info" />
+              <span>{{ detailCardActions }}</span>
+            </div>
+            <el-table class="el-table" :data="detailCardActionData" :show-header="false">
+              <el-table-column prop="name" />
+              <el-table-column prop="is_active" align="right">
+                <template slot-scope="scope">
+                  <el-switch
+                    v-model="scope.row.is_active"
+                    active-color="#13ce66"
+                    inactive-color="#ff4949"
+                    @change="HandleChangeAction(scope.$index, scope.row)"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="userAndUserGroups">
+      <el-row :gutter="20">
+        <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>
+          </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>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="databaseApp">
+      <el-row :gutter="20">
+        <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>
+          </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>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import DetailCard from '@/components/DetailCard/index'
+import ListTable from '@/components/ListTable'
+import { getDatabaseAppPermissionDetail } from '@/api/perms'
+
+export default {
+  name: 'DatabaseAppPermissionDetail',
+  components: {
+    GenericDetailPage,
+    DetailCard,
+    ListTable
+  },
+  data() {
+    return {
+      tableConfig: {
+        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: [
+        {
+          title: this.$t('perms.DatabaseAppPermissionDetail'),
+          name: 'detail'
+        },
+        {
+          title: this.$t('perms.UsersAndUserGroups'),
+          name: 'userAndUserGroups'
+        },
+        {
+          title: this.$t('perms.DatabaseApp'),
+          name: 'databaseApp'
+        }
+      ]
+    }
+  },
+  computed: {
+    title() {
+      return this.$t('perms.DatabaseAppPermissionDetail')
+    },
+    cardTitle() {
+      return this.databaseAppData.id
+    },
+    detailCardActions() {
+      return this.$t('perms.QuickModify')
+    },
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.databaseAppData.name
+        },
+        {
+          key: this.$t('perms.UserCount'),
+          value: this.databaseAppData.users
+        },
+        {
+          key: this.$t('perms.UserGroupCount'),
+          value: this.databaseAppData.user_groups
+        },
+        {
+          key: this.$t('perms.RemoteAppCount'),
+          value: this.databaseAppData.database_apps
+        },
+        {
+          key: this.$t('perms.SystemUserCount'),
+          value: this.databaseAppData.system_users
+        },
+        {
+          key: this.$t('perms.DateStart'),
+          value: this.databaseAppData.date_start
+        },
+        {
+          key: this.$t('perms.DateExpired'),
+          value: this.databaseAppData.date_expired
+        },
+        {
+          key: this.$t('perms.DateCreated'),
+          value: this.databaseAppData.date_created
+        },
+        {
+          key: this.$t('perms.CreatedBy'),
+          value: this.databaseAppData.created_by
+        },
+        {
+          key: this.$t('common.Comment'),
+          value: this.databaseAppData.comment
+        }
+      ]
+    },
+    detailCardActionData() {
+      return [
+        {
+          name: this.$t('perms.Active'),
+          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 => {
+      console.log('详情数据==>', data)
+      this.databaseAppData = data
+    })
+  },
+  methods: {
+    HandleChangeAction: function(index, row) {
+      const url = `/api/v1/perms/database-app-permissions/${this.$route.params.id}/`
+      console.log('点击激活的url===>', url)
+      console.log('激活的数据===>', row)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .el-table /deep/ .el-table__row > td {
+    line-height: 1.5;
+    padding: 8px 0;
+  }
+  .el-table /deep/ .el-table__row > td> div > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .el-table /deep/ .el-table__header > thead > tr >th {
+    padding: 8px 0;
+    background-color: #F5F5F6;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  .table{
+    margin-top: 15px;
+  }
+</style>
diff --git a/src/views/perms/RemoteAppPermissionDetail.vue b/src/views/perms/RemoteAppPermissionDetail.vue
new file mode 100644
index 000000000..2772054ec
--- /dev/null
+++ b/src/views/perms/RemoteAppPermissionDetail.vue
@@ -0,0 +1,258 @@
+<template>
+  <GenericDetailPage :submenu="submenu" :active-menu="activeSubMenu" :title="title">
+    <div slot="detail">
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <DetailCard :title="cardTitle" :items="detailCardItems" />
+        </el-col>
+        <el-col :span="10">
+          <el-card class="box-card primary">
+            <div slot="header" class="clearfix">
+              <i class="fa fa-info" />
+              <span>{{ detailCardActions }}</span>
+            </div>
+            <el-table class="el-table" :data="detailCardActionData" :show-header="false">
+              <el-table-column prop="name" />
+              <el-table-column prop="is_active" align="right">
+                <template slot-scope="scope">
+                  <el-switch
+                    v-model="scope.row.is_active"
+                    active-color="#13ce66"
+                    inactive-color="#ff4949"
+                    @change="HandleChangeAction(scope.$index, scope.row)"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="userAndUserGroups">
+      <el-row :gutter="20">
+        <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>
+          </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>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="remoteApp">
+      <el-row :gutter="20">
+        <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>
+          </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>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import DetailCard from '@/components/DetailCard/index'
+import ListTable from '@/components/ListTable'
+import { getRemoteAppPermissionDetail } from '@/api/perms'
+
+export default {
+  name: 'RemoteAppPermissionDetail',
+  components: {
+    GenericDetailPage,
+    DetailCard,
+    ListTable
+  },
+  data() {
+    return {
+      tableConfig: {
+        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: [
+        {
+          title: this.$t('perms.RemoteAppPermissionDetail'),
+          name: 'detail'
+        },
+        {
+          title: this.$t('perms.UsersAndUserGroups'),
+          name: 'userAndUserGroups'
+        },
+        {
+          title: this.$t('perms.RemoteApp'),
+          name: 'remoteApp'
+        }
+      ]
+    }
+  },
+  computed: {
+    title() {
+      return this.$t('perms.RemoteAppPermissionDetail')
+    },
+    cardTitle() {
+      return this.remoteAppData.id
+    },
+    detailCardActions() {
+      return this.$t('perms.QuickModify')
+    },
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.remoteAppData.name
+        },
+        {
+          key: this.$t('perms.UserCount'),
+          value: this.remoteAppData.users
+        },
+        {
+          key: this.$t('perms.UserGroupCount'),
+          value: this.remoteAppData.user_groups
+        },
+        {
+          key: this.$t('perms.RemoteAppCount'),
+          value: this.remoteAppData.remote_apps
+        },
+        {
+          key: this.$t('perms.SystemUserCount'),
+          value: this.remoteAppData.system_users
+        },
+        {
+          key: this.$t('perms.DateStart'),
+          value: this.remoteAppData.date_start
+        },
+        {
+          key: this.$t('perms.DateExpired'),
+          value: this.remoteAppData.date_expired
+        },
+        {
+          key: this.$t('perms.DateCreated'),
+          value: this.remoteAppData.date_created
+        },
+        {
+          key: this.$t('perms.CreatedBy'),
+          value: this.remoteAppData.created_by
+        },
+        {
+          key: this.$t('common.Comment'),
+          value: this.remoteAppData.comment
+        }
+      ]
+    },
+    detailCardActionData() {
+      return [
+        {
+          name: this.$t('perms.Active'),
+          is_active: true
+        }
+      ]
+    },
+    userCardActions() {
+      return this.$t('perms.User')
+    },
+    userGroupCardActions() {
+      return this.$t('perms.UserGroups')
+    },
+    remoteAppCardActions() {
+      return this.$t('perms.RemoteApp')
+    },
+    systemUserCardActions() {
+      return this.$t('perms.SystemUser')
+    }
+  },
+  mounted() {
+    getRemoteAppPermissionDetail(this.$route.params.id).then(data => {
+      console.log('详情数据==>', data)
+      this.remoteAppData = data
+    })
+  },
+  methods: {
+    HandleChangeAction: function(index, row) {
+      const url = `/api/v1/perms/remote-app-permissions/${this.$route.params.id}/`
+      console.log('点击激活的url==>', url)
+      console.log('激活的数据==>', row)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .el-table /deep/ .el-table__row > td {
+    line-height: 1.5;
+    padding: 8px 0;
+  }
+  .el-table /deep/ .el-table__row > td> div > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .el-table /deep/ .el-table__header > thead > tr >th {
+    padding: 8px 0;
+    background-color: #F5F5F6;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  .table{
+    margin-top: 15px;
+  }
+</style>