Merge pull request #21 from jumpserver/jym_dev

[Update] 初步实现授权模块详情

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'
+  })
+}

src/i18n/langs/cn.js

@@ -95,10 +95,13 @@ const cn = {
     'Perms': '权限管理',
     'AssetPermission': '资产授权',
     'AssetPermissionCreate': '创建资产授权规则',
+    'AssetPermissionUpdate': '更新资产授权规则',
     'RemoteAppPermission': '远程应用授权',
     'RemoteAppPermissionCreate': '创建远程应用授权规则',
+    'RemoteAppPermissionUpdate': '更新远程应用授权规则',
     'DatabaseAppPermission': '数据库应用授权',
     'DatabaseAppPermissionCreate': '创建数据库应用授权规则',
+    'DatabaseAppPermissionUpdate': '更新数据库应用授权规则',
     'Sessions': '会话管理',
     'SessionOnline': '在线会话',
     'SessionOffline': '历史会话',
@@ -350,10 +353,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',

src/router/index.js

@@ -222,10 +222,24 @@ 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' }
+        meta: { title: 'AssetPermissionCreate', activeMenu: '/perms/asset-permissions', action: 'create' }
+      },
+      {
+        path: 'users/:id/update',
+        component: () => import('@/views/perms/AssetPermissionCreateUpdate.vue'), // Parent router-view
+        name: 'AssetPermissionUpdate',
+        hidden: true,
+        meta: { title: 'AssetPermissionUpdate', activeMenu: '/perms/asset-permissions', action: 'update' }
+      },
+      {
+        path: 'asset-permissions/:id',
+        component: () => import('@/views/perms/AssetPermissionDetail'),
+        name: 'AssetPermissionDetail',
+        hidden: true,
+        meta: { title: 'AssetPermissionDetail', activeMenu: '/perms/asset-permissions' }
       },
       {
         path: 'remote-app-permissions',
@@ -235,10 +249,24 @@ export const constantRoutes = [
       },
       {
         path: 'remote-app-permissions/create',
-        component: () => import('@/views/perms/RemoteAppPermissionCreateUpdate'), // Parent router-view
+        component: () => import('@/views/perms/RemoteAppPermissionCreateUpdate'),
         name: 'RemoteAppPermissionCreate',
         hidden: true,
-        meta: { title: 'RemoteAppPermissionCreate', activeMenu: '/perms/remote-app-permissions' }
+        meta: { title: 'RemoteAppPermissionCreate', activeMenu: '/perms/remote-app-permissions', action: 'create' }
+      },
+      {
+        path: 'remote-app-permissions/update',
+        component: () => import('@/views/perms/RemoteAppPermissionCreateUpdate'),
+        name: 'RemoteAppPermissionUpdate',
+        hidden: true,
+        meta: { title: 'RemoteAppPermissionUpdate', activeMenu: '/perms/remote-app-permissions', action: 'update' }
+      },
+      {
+        path: 'remote-app-permissions/:id',
+        component: () => import('@/views/perms/RemoteAppPermissionDetail'),
+        name: 'RemoteAppPermissionDetail',
+        hidden: true,
+        meta: { title: 'RemoteAppPermissionDetail', activeMenu: '/perms/remote-app-permissions' }
       },
       {
         path: 'database-app-permissions',
@@ -252,6 +280,20 @@ export const constantRoutes = [
         name: 'DatabaseAppPermissionCreate',
         hidden: true,
         meta: { title: 'DatabaseAppPermissionCreate', activeMenu: '/perms/database-app-permissions' }
+      },
+      {
+        path: 'database-app-permissions/update',
+        component: () => import('@/views/perms/DatabaseAppPermissionCreateUpdate'), // Parent router-view
+        name: 'DatabaseAppPermissionUpdate',
+        hidden: true,
+        meta: { title: 'DatabaseAppPermissionUpdate', activeMenu: '/perms/database-app-permissions', action: 'update' }
+      },
+      {
+        path: 'database-app-permissions/:id',
+        component: () => import('@/views/perms/DatabaseAppPermissionDetail'),
+        name: 'DatabaseAppPermissionDetail',
+        hidden: true,
+        meta: { title: 'DatabaseAppPermissionDetail', activeMenu: '/perms/asset-permissions' }
       }
     ]
   },
@@ -323,7 +365,7 @@ export const constantRoutes = [
       {
         path: 'command-executions/create',
         name: 'BatchCommand',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/jobcenter/CommandExecution'),
         meta: { title: 'BatchCommand' }
       },
       {

src/views/jobcenter/CommandExecution.vue

@@ -0,0 +1,61 @@
+<template>
+  <Page>
+    <el-alert v-if="helpMessage" type="success"> {{ helpMessage }} </el-alert>
+    <el-collapse-transition>
+      <el-row>
+        <el-col v-show="ShowTree" :span="4" class="transition-box">
+          <!--          <TreeNode :url="treeurl" @urlChanged="handleUrlChange" />-->
+          这里放资产树
+        </el-col>
+        <el-col :span="1" class="mini"><div style="display:block" class="mini-button" @click="ShowTree=!ShowTree"><i v-show="ShowTree" id="toggle-icon" class="fa fa-angle-left fa-x" /><i v-show="!ShowTree" id="toggle-icon" class="fa fa-angle-right fa-x" /></div></el-col>
+        <el-col :span="ShowTree?19:23" class="transition-box">
+          这里其它东西
+        </el-col>
+      </el-row>
+    </el-collapse-transition>
+  </Page>
+</template>
+
+<script>
+import { Page } from '@/layout/components'
+// import TreeNode from '@/components/TreeNode'
+export default {
+  components: {
+    Page
+    // TreeNode
+  },
+  data() {
+    return {
+      helpMessage: '',
+      ShowTree: true,
+      treeurl: '/api/v1/assets/nodes/children/tree/'
+    }
+  },
+  methods: {
+    handleUrlChange(_url) {
+      console.log(_url)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .mini-button{
+    width: 12px;
+    float: right;
+    text-align: center;
+    padding: 5px 0;
+    background-color: #1ab394;
+    border-color: #1ab394;
+    color: #FFFFFF;
+    border-radius: 3px;
+  }
+  .el-tree{
+    background-color: inherit !important;
+  }
+  .mini{
+    margin-right: 5px;
+    width: 12px !important;
+  }
+
+</style>

src/views/perms/AssetPermissionCreateUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericCreateUpdatePage :fields="fields" :form="form" :fields-meta="fieldsMeta" :url="url" />
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
   },
   data() {
     return {
-      form: {
+      initial: {
         is_active: true,
         actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file'],
         date_expired: '2099-12-31 00:00:00 +0800'

src/views/perms/AssetPermissionDetail.vue

@@ -0,0 +1,322 @@
+<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>
+            <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">
+        <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>
+
+<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'
+
+export default {
+  name: 'AssetPermissionDetail',
+  components: {
+    GenericDetailPage,
+    DetailCard,
+    ListTable,
+    Select2
+  },
+  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'
+        }
+      ],
+      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: {
+    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>

src/views/perms/AssetPermissionList.vue

@@ -1,19 +1,24 @@
 <template>
+  <!--  <TreeTable :table-config="tableConfig" :header-actions="headerActions" />-->
   <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+
 </template>
 
 <script>
+// import TreeTable from '@/components/TreeTable'
 import { GenericListPage } from '@/layout/components'
 import { LengthFormatter, ExpandAssetPermissionFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
+    // TreeTable
     GenericListPage
   },
   data() {
     return {
       tableConfig: {
         url: '/api/v1/perms/asset-permissions/',
+        treeurl: '/api/v1/assets/nodes/children/tree/',
         hasSelection: false,
         columns: ['expand', 'name', 'users', 'user_groups', 'assets', 'nodes', 'system_users', 'is_active', 'actions'],
         columnsMeta: {
@@ -22,27 +27,32 @@ export default {
             formatter: ExpandAssetPermissionFormatter
           },
           users: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.User')
           },
           user_groups: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.UserGroups')
           },
           assets: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.Asset')
           },
           nodes: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.Node')
           },
           system_users: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.SystemUser')
           }
+        },
+        actions: {
+          updateRoute: 'AssetPermissionUpdate'
         }
       },
       headerActions: {
-        hasDelete: false,
-        hasUpdate: false,
         hasBulkDelete: false,
-        createRoute: 'AssetPermissionCreate',
         extraActions: [
           {
             name: 'RefreshPermissionCache',

src/views/perms/DatabaseAppPermissionCreateUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericCreateUpdatePage :fields="fields" :form="form" :fields-meta="fieldsMeta" :url="url" />
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
   },
   data() {
     return {
-      form: {
+      initial: {
         is_active: true,
         date_expired: '2099-12-31 00:00:00 +0800'
       },

src/views/perms/DatabaseAppPermissionDetail.vue

@@ -0,0 +1,296 @@
+<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>
+            <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">
+        <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>
+
+<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'
+
+export default {
+  name: 'DatabaseAppPermissionDetail',
+  components: {
+    GenericDetailPage,
+    DetailCard,
+    ListTable,
+    Select2
+  },
+  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'
+        }
+      ],
+      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: {
+    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>

src/views/perms/DatabaseAppPermissionList.vue

@@ -16,22 +16,25 @@ export default {
         columns: ['name', 'users', 'user_groups', 'database_apps', 'system_users', 'is_valid', 'actions'],
         columnsMeta: {
           users: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.User')
           },
           user_groups: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.UserGroups')
           },
           database_apps: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.DatabaseApp')
           },
           system_users: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.SystemUser')
           }
         }
       },
       headerActions: {
-        hasBulkDelete: false,
+        hasBulkDelete: false
-        createRoute: 'DatabaseAppPermissionCreate'
       }
     }
   }

src/views/perms/RemoteAppPermissionCreateUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericCreateUpdatePage :fields="fields" :form="form" :fields-meta="fieldsMeta" :url="url" />
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
   },
   data() {
     return {
-      form: {
+      initial: {
         is_active: true,
         date_expired: '2099-12-31 00:00:00 +0800'
       },

src/views/perms/RemoteAppPermissionDetail.vue

@@ -0,0 +1,296 @@
+<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>
+            <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">
+        <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>
+
+<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'
+
+export default {
+  name: 'RemoteAppPermissionDetail',
+  components: {
+    GenericDetailPage,
+    DetailCard,
+    ListTable,
+    Select2
+  },
+  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'
+        }
+      ],
+      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,
+        value: []
+      },
+      selectSystemUser: {
+        url: '/api/v1/assets/system-users/',
+        initial: this.remoteAppPermissionSystemUser,
+        value: []
+      }
+    }
+  },
+  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>

src/views/perms/RemoteAppPermissionList.vue

@@ -17,22 +17,25 @@ export default {
         columns: ['name', 'users', 'user_groups', 'remote_apps', 'system_users', 'is_valid', 'actions'],
         columnsMeta: {
           users: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.User')
           },
           user_groups: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.UserGroups')
           },
           remote_apps: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.RemoteApp')
           },
           system_users: {
-            formatter: LengthFormatter
+            formatter: LengthFormatter,
+            label: this.$t('perms.SystemUser')
           }
         }
       },
       headerActions: {
-        hasBulkDelete: false,
+        hasBulkDelete: false
-        createRoute: 'RemoteAppPermissionCreate'
       }
     }
   }