| | |
| | | <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> |
| | | <el-menu |
| | | active-text-color="#ffd04b" |
| | | class="el-menu-vertical-demo" |
| | | :default-active="activeIndex" |
| | | background-color="transparent" |
| | | text-color="#fff" |
| | | @select="handleselect" |
| | | > |
| | | <customElMenu :menuData="menuList"></customElMenu> |
| | | </el-menu> |
| | | </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> |
| | | <menu-settings v-if="setMenuFlag == 'menuSettings'"></menu-settings> |
| | | <user-management v-if="setMenuFlag == 'userInfoManage'"></user-management> |
| | | <org-manage v-if="setMenuFlag == 'orgManage'"></org-manage> |
| | | <resource-manage v-if="setMenuFlag == 'resourceManage'"></resource-manage> |
| | | <role-manage v-if="setMenuFlag == 'roleManage'"></role-manage> |
| | | <authority-manage v-if="setMenuFlag == 'authorityManage'"></authority-manage> |
| | | <user-role-authorization v-if="setMenuFlag == 'userRoleAuthorization'"></user-role-authorization> |
| | | <menu-role-authorization v-if="setMenuFlag == 'menuRoleAuthorization'"></menu-role-authorization> |
| | | <role-menu-authorization v-if="setMenuFlag == 'roleMenuAuthorization'"> |
| | | </role-menu-authorization> |
| | | <role-res-authorization v-if="setMenuFlag == 'roleResAuthorization'"></role-res-authorization> |
| | | <log-log v-if="setMenuFlag == 'logLog'"> </log-log> |
| | | <operation-log v-if="setMenuFlag == 'operationLog'"></operation-log> |
| | | <eventlog-manage v-if="setMenuFlag == 'eventlogManage'"></eventlog-manage> |
| | | <tokentool v-if="setMenuFlag == 'tokentool'"></tokentool> |
| | | <blackwhite-list v-if="setMenuFlag == 'blackwhiteList'"></blackwhite-list> |
| | | <database-monitoring v-if="setMenuFlag == 'dataIfream'"></database-monitoring> |
| | | <system-monitoring v-if="setMenuFlag == 'systemMonitoring'"></system-monitoring> |
| | | <parameter-configuration v-if="setMenuFlag == 'parameterConfiguration'"></parameter-configuration> |
| | | <downlog v-if="setMenuFlag == 'downlog'"></downlog> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | |
| | | 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'; |
| | | |
| | | import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //用户角色授权 |
| | | import menuRoleAuthorization from '@/views/AuthorizationManagement/menuRoleAuthorization.vue'; //菜单权限授权 |
| | | import roleMenuAuthorization from '@/views/AuthorizationManagement/roleMenuAuthorization.vue'; //角色菜单授权 |
| | | import roleResAuthorization from '@/views/AuthorizationManagement/roleResAuthorization.vue'; //角色资源授权 |
| | | import logLog from '@/views/maintenance/logLog.vue'; //登录日志 |
| | | import operationLog from '@/views/maintenance/operationLog.vue'; //操作日志 |
| | | import eventlogManage from '@/views/maintenance/eventlogManage.vue'; //资源日志 |
| | | import tokentool from '@/views/maintenance/tokentool.vue'; //令牌管理 |
| | | import blackwhiteList from '@/views/maintenance/blackwhiteList.vue'; //黑白名单 |
| | | import databaseMonitoring from '@/views/maintenance/databaseMonitoring.vue'; //数据库监控 |
| | | import systemMonitoring from '@/views/maintenance/systemMonitoring.vue'; //系统监控 |
| | | import parameterConfiguration from '@/views/maintenance/parameterConfiguration.vue'; //系统配置 |
| | | import downlog from '@/views/maintenance/downlog.vue'; //下载日志 |
| | | import { selectMenuRecursive, queryMenuTree, getPerms } from '../../api/api'; |
| | | import customElMenu from '../../components/customElMenu.vue'; |
| | | export default { |
| | | components: { |
| | | menuSettings, |
| | | menuSettings, |
| | | userManagement, |
| | | orgManage, |
| | | resourceManage, |
| | | roleManage, |
| | | authorityManage, |
| | | userRoleAuthorization, |
| | | menuRoleAuthorization, |
| | | roleMenuAuthorization, |
| | | roleResAuthorization, |
| | | logLog, |
| | | operationLog, |
| | | eventlogManage, |
| | | tokentool, |
| | | blackwhiteList, |
| | | databaseMonitoring, |
| | | systemMonitoring, |
| | | parameterConfiguration, |
| | | customElMenu, |
| | | downlog |
| | | }, |
| | | data() { |
| | | return { |
| | | setMenuFlag: '1', |
| | | treeList: [], |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'cnName', |
| | | }, |
| | | setMenuFlag: ' ', |
| | | activeIndex: ' ', |
| | | oriData: [], //原始树数据 |
| | | dirData: [], //el树数据 |
| | | newData: [], //拖动后数据 |
| | | lang: 'zh', |
| | | |
| | | menuList: [], |
| | | editTitle: '', |
| | | showPopover: false, |
| | | showEditInfoWrapper: false, |
| | | showEdit: false, |
| | | editMenu: false, |
| | | editCatalogue: false, |
| | | editUnit: false, |
| | | itemdetail: {}, |
| | | formLabelWidth: '70px', |
| | | }; |
| | | }, |
| | | created() { }, |
| | | mounted() { |
| | | this.getTreeData(); |
| | | this.getTreeData(); |
| | | }, |
| | | methods: { |
| | | async getCookies() { |
| | | var boolean = this.getTimeCookies(); |
| | | if (boolean != true) { |
| | | this.$router.push('/login'); |
| | | return; |
| | | } |
| | | if (this.$store.state.permsEntity.length == 0) { |
| | | const data = await getPerms(); |
| | | this.$store.state.permsEntity = data.result; |
| | | } |
| | | var store = this.menuList[0]; |
| | | this.setViewController(store); |
| | | }, |
| | | getTimeCookies() { |
| | | var time1 = new Date(JSON.parse(localStorage.getItem('LFToken')).time); |
| | | var time2 = new Date(); |
| | | if (time2 > time1) { |
| | | return false; |
| | | } else { |
| | | return true; |
| | | } |
| | | }, |
| | | //获取树 |
| | | async getTreeData() { |
| | | const data = await selectMenuRecursive({ name: '运维管理' }); |
| | | this.treeList = this.treeData(data.result); |
| | | const data = await queryMenuTree(); |
| | | |
| | | let menuLists = data.result.filter((value) => { |
| | | return value.url == '/mochaitmo'; |
| | | }); |
| | | |
| | | const res = await selectMenuRecursive({ id: menuLists[0].id}); |
| | | |
| | | if (res.code == 200) { |
| | | if (res.result.length != 0) { |
| | | let menuList = res.result.filter((value) => { |
| | | return value.type == 1; |
| | | }); |
| | | this.menuList = this.treeData(menuList); |
| | | this.getCookies(); |
| | | // |
| | | } else { |
| | | alert('暂无菜单栏数据'); |
| | | } |
| | | } else { |
| | | console.log('接口报错'); |
| | | } |
| | | |
| | | // this.treeList = this.treeData(data.result); |
| | | }, |
| | | setViewController(res) { |
| | | if (res == null) { |
| | | return; |
| | | } |
| | | if (res.children != null) { |
| | | this.setViewController(res.children[0]); |
| | | } else { |
| | | this.$store.state.currentPerms = res.perms; |
| | | this.setMenuFlag = res.url; |
| | | this.activeIndex = res.url; |
| | | } |
| | | }, |
| | | 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; |
| | | // console.log(cloneData); |
| | | if (cloneData.length != 0) { |
| | | return cloneData.filter((father) => { |
| | | // 循环所有项 |
| | | let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据 |
| | | branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性,并赋值 |
| | | // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c , 那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2; |
| | | // 由此循环多次后,就能形成相应的树形数据结构 |
| | | return father.pid == 1; // 返回一级菜单 |
| | | }); |
| | | } else { |
| | | alert('暂无菜单栏数据'); |
| | | } |
| | | }, |
| | | |
| | | handleselect(index, indexPath, e) { |
| | | this.getTimeCookies(); |
| | | var data = e.$attrs.perms; |
| | | this.$store.state.currentPerms = data.perms; |
| | | var index = data.url; |
| | | if (index != null) { |
| | | if (index.indexOf('http') != -1) { |
| | | this.$store.commit('getIframe', data.url); |
| | | index = 'dataIfream'; |
| | | } |
| | | } |
| | | this.setMenuFlag = index; |
| | | |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | height: calc(100% - 20px); |
| | | margin: 0; |
| | | padding: 10px; |
| | | position: absolute; |
| | | overflow-y: hidden; |
| | | .left_tree { |
| | | width: 270px; |
| | | height: 100%; |
| | |
| | | border-radius: 5px; |
| | | } |
| | | .el-card-define { |
| | | min-height: 85%; |
| | | height: 100%; |
| | | background: #303030; |
| | | border: 1px solid gray; |
| | | padding: 1px; |
| | | padding: 1px !important; |
| | | } |
| | | .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; |
| | | } |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | } |
| | | .el-card__body, |
| | | .el-main { |
| | | padding: 10px; |
| | | padding: 0px !important; |
| | | height: 100%; |
| | | } |
| | | .right_page { |
| | | width: calc(100% - 280px); |
| | |
| | | position: relative; |
| | | float: right; |
| | | } |
| | | /deep/.el-menu { |
| | | border: transparent !important; |
| | | } |
| | | /deep/.el-submenu__title:hover { |
| | | background: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | /deep/ .el-submenu .el-menu-item:hover { |
| | | background: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | /deep/.el-textarea__inner { |
| | | background: transparent; |
| | | border-color: #fff !important; |
| | | color: white; |
| | | } |
| | | /deep/.el-textarea .el-input__count { |
| | | background: transparent; |
| | | color: #fff !important; |
| | | } |
| | | /deep/ .el-card__body { |
| | | padding: 0px !important; |
| | | height: 100%; |
| | | } |
| | | } |
| | | </style> |