Merge pull request #21 from jumpserver/jym_dev

[Update] 初步实现授权模块详情
This commit is contained in:
八千流
2020-04-15 18:05:31 +08:00
committed by GitHub
13 changed files with 1110 additions and 32 deletions

22
src/api/perms.js Normal file
View File

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

View File

@@ -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',

View File

@@ -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' }
},
{

View File

@@ -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>

View File

@@ -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'

View File

@@ -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>

View File

@@ -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',

View File

@@ -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'
},

View File

@@ -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>

View File

@@ -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,
createRoute: 'DatabaseAppPermissionCreate'
hasBulkDelete: false
}
}
}

View File

@@ -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'
},

View File

@@ -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>

View File

@@ -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,
createRoute: 'RemoteAppPermissionCreate'
hasBulkDelete: false
}
}
}