<template>
|
<div class="mochaitmo_Box">
|
<div class="left_tree">
|
<el-card class="el-card-define">
|
<div class="card_tree">
|
<el-tree
|
:data="treeList"
|
:props="defaultProps"
|
node-key="id"
|
@node-click="handleNodeClick"
|
:default-expanded-keys="[23]"
|
:default-checked-keys="[24]"
|
></el-tree>
|
</div>
|
</el-card>
|
</div>
|
<div class="right_page">
|
<el-card class="el-card-define">
|
<div>
|
<menu-settings v-if="setMenuFlag == '1'"></menu-settings>
|
<user-management v-if="setMenuFlag == '2'"></user-management>
|
<org-manage v-if="setMenuFlag == '3'"></org-manage>
|
<resource-manage v-if="setMenuFlag == '4'"></resource-manage>
|
<role-manage v-if="setMenuFlag == '5'"></role-manage>
|
<authority-manage v-if="setMenuFlag == '6'"></authority-manage>
|
<user-role-authorization
|
v-if="setMenuFlag == '7'"
|
></user-role-authorization>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import menuSettings from '@/views/maintenance/menuSettings.vue'; //菜单管理
|
import userManagement from '@/views/maintenance/userManagement.vue'; //用户管理
|
import orgManage from '@/views/userManage/orgManage.vue'; //单位管理
|
import resourceManage from '@/views/userManage/resourceManage.vue'; //资源管理
|
import roleManage from '@/views/userManage/roleManage.vue'; //角色管理
|
import authorityManage from '@/views/userManage/authorityManage.vue'; //权限管理
|
import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //权限管理
|
import { selectMenuRecursive } from '../../api/api';
|
|
export default {
|
components: {
|
menuSettings,
|
userManagement,
|
orgManage,
|
resourceManage,
|
roleManage,
|
authorityManage,
|
userRoleAuthorization,
|
},
|
data() {
|
return {
|
setMenuFlag: '1',
|
treeList: [],
|
defaultProps: {
|
children: 'children',
|
label: 'cnName',
|
},
|
};
|
},
|
mounted() {
|
this.getTreeData();
|
},
|
methods: {
|
//获取树
|
async getTreeData() {
|
const data = await selectMenuRecursive({ name: '运维管理' });
|
this.treeList = this.treeData(data.result);
|
},
|
treeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 1 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
|
return father.pid == 1; // 返回一级菜单
|
});
|
},
|
//树点击
|
handleNodeClick(data) {
|
this.$store.state.currentPerms = data.perms;
|
|
switch (data.cnName) {
|
case '菜单管理':
|
this.setMenuFlag = '1';
|
break;
|
case '用户管理':
|
this.setMenuFlag = '2';
|
break;
|
case '单位管理':
|
this.setMenuFlag = '3';
|
break;
|
case '资源管理':
|
this.setMenuFlag = '4';
|
break;
|
case '角色管理':
|
this.setMenuFlag = '5';
|
break;
|
case '权限管理':
|
this.setMenuFlag = '6';
|
break;
|
case '用户角色授权':
|
this.setMenuFlag = '7';
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.mochaitmo_Box {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
margin: 0;
|
padding: 10px;
|
position: absolute;
|
.left_tree {
|
width: 270px;
|
height: 100%;
|
position: relative;
|
float: left;
|
border-radius: 5px;
|
}
|
.el-card-define {
|
min-height: 85%;
|
background: #303030;
|
border: 1px solid gray;
|
padding: 1px;
|
}
|
.el-tree {
|
background-color: transparent;
|
}
|
.card_tree {
|
/deep/ .el-tree .el-icon-caret-right:before {
|
color: white; /** 这里是要修改图标的颜色 **/
|
}
|
/deep/ .el-tree {
|
color: white; /** 这里是要修改图标的颜色 **/
|
background: transparent;
|
}
|
/deep/.el-tree-node__content {
|
&:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
}
|
/deep/.el-tree-node.is-current > .el-tree-node__content {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
color: #409eff;
|
}
|
}
|
.el-card__body,
|
.el-main {
|
padding: 10px;
|
}
|
.right_page {
|
width: calc(100% - 280px);
|
height: 100%;
|
background: #303030;
|
position: relative;
|
float: right;
|
}
|
}
|
</style>
|
