mirror of
https://github.com/jumpserver/lina.git
synced 2025-10-21 15:39:36 +00:00
[Update] 初步实现授权详情
This commit is contained in:
jym503558564
22
src/api/perms.js
Normal file
22
src/api/perms.js
Normal 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'
|
||||
})
|
||||
}
|
||||
@@ -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',
|
||||
|
||||
@@ -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' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
275
src/views/perms/AssetPermissionDetail.vue
Normal file
275
src/views/perms/AssetPermissionDetail.vue
Normal file
@@ -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>
|
||||
@@ -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: {
|
||||
|
||||
258
src/views/perms/DatabaseAppPermissionDetail.vue
Normal file
258
src/views/perms/DatabaseAppPermissionDetail.vue
Normal file
@@ -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>
|
||||
258
src/views/perms/RemoteAppPermissionDetail.vue
Normal file
258
src/views/perms/RemoteAppPermissionDetail.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user