<template> <div class="perm-management page-wrap"> <dee-fold-pane :min-percent="18" :default-percent="22" split="vertical" > <template slot="paneL"> <div class="header-wrap">应用: <el-select v-model="appId" style="width:75%"> <el-option v-for="item in apps" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> <permTree ref="permTree" @change="nodeClick" /> </template> <template slot="paneR"> <div class="detail-box"> <dee-fold-pane :min-percent="40" :default-percent="45" split="vertical" > <template slot="paneL"> <div style="height:100%;padding-right:8px"> <perms ref="premFun" :cur-node="curNode" :appid="appId" :select-data="selectData" @getPerm="getPerm" /> </div> </template> <template slot="paneR"> <div class="detail-box"> <dee-table :index-row="{title:'序号',width: '80'}" :data="tableData" :columns="permColumns" /> <settings v-if="showSettings" ref="settings" :user-info="userInfo" /> </div> </template> </dee-fold-pane> </div> </template> </dee-fold-pane> </div> </template> <script> import { getRoleList } from '@/api/mgt/role.js' import settings from './components/settings' import permTree from '../permission/permTree' import perms from './components/perms' export default { name: 'PermManagement', components: { settings, permTree, perms }, props: {}, data() { return { showSettings: false, userInfo: {}, apps: [], appId: '', curNode: null, tableData: [], permColumns: [ { title: '权限组名称', key: 'name', align: 'center', minWidth: 120, component: { render: (h, params) => { return h('div', [ h('span', { class: 'link-style', on: { click: () => { this.showSettings = true this.userInfo = params this.$nextTick(() => { this.$refs.settings.getUser() }) } } }, params.name || '/') ]) } }}, { title: '权限组描述', key: 'remark', align: 'center', minWidth: 120 }, { title: '所属应用', key: 'appName', align: 'center', minWidth: 120 } ], roleConfiguratorOptions: [], parentIds: [], selectData: [] } }, computed: { }, watch: { appId() { this.$refs.permTree.getAllObj(this.appId) } }, created() { }, mounted() { this.getApps() }, methods: { getApps() { let items = [ { 'fieldName': 'isDisable', 'operator': 'EQ', 'value': false } ] if (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '2') { items = items.concat([{ 'fieldName': 'scope', 'operator': 'EQ', 'value': 'ORGANIZATION' }, { 'fieldName': 'organizationId', 'operator': 'EQ', 'value': JSON.parse(localStorage.getItem('userLevel')).organizationId }]) } const params = { 'pageFrom': 1, 'pageSize': 9999, 'searchItems': { 'items': items, 'operator': 'AND' } } this.$api.searchApi('DxApplication', params).then(res => { this.apps = res.items.content.map(m => { return { label: m.name, value: m.id } }) this.appId = this.apps[0] && this.apps[0].value }) }, nodeClick(data, parentIds) { this.curNode = data this.selectData = parentIds this.tableData = [] this.$refs.settings && this.$refs.settings.clearData() }, getPerm(data) { getRoleList({ permId: data.id }).then(res => { this.tableData = res.items.map(r => { const app = (this.apps || []).find(m => m.value === r.appId) if (app) { r.appName = app.label } r.show = true return r }) this.$refs.settings && this.$refs.settings.clearData() }) } } } </script> <style lang="scss"> @import "../../styles/variables.scss"; .link-style{ color: $link-color; cursor:pointer; } .perm-management{ height:100%; .detail-box{ height: 100%; padding-left: 8px; overflow:hidden; } } </style>