<template> <div class="MenuPermAssignment-Cmp"> <div v-if="type==='4'" class="left-part"> <SubHeader>场景权限</SubHeader> <WorkspacePermTree :role-info="roleInfo" :apps="apps" :curr-app-data="currAppData" :triple-tree-node="tripleTreeNode" style="height:calc(100% - 32px);" /> </div> <div v-if="type==='3'" class="left-part"> <SubHeader>目录菜单权限</SubHeader> <MenuPermTree :role-info="roleInfo" :apps="apps" :curr-app-data="currAppData" :triple-tree-node="tripleTreeNode" style="height:calc(100% - 32px);" /> </div> </div> </template> <script> import SubHeader from './subHeader' import WorkspacePermTree from './workspacePermTree' import MenuPermTree from './menuPermTree' export default { name: 'MenuPermAssignment', components: { SubHeader, WorkspacePermTree, MenuPermTree }, props: { type: { type: String, default: '3' }, apps: { type: Array, default: () => [] }, roleInfo: { type: Object, default: () => ({}) }, currAppData: { type: Object, default: () => ({}) }, tripleTreeNode: { type: Object, default: () => ({}) } }, data() { return { } }, computed: { }, methods: {} } </script> <style lang="scss"> .MenuPermAssignment-Cmp { width: 100%; height: 100%; box-sizing: border-box; .left-part { padding-left: 0; } .left-part, .right-part { padding: 10px; width: 100%; height: 100%; box-sizing: border-box; } .splitter-pane-resizer.vertical { width: 2px !important; cursor: col-resize; &:active { background: #409EFF; } } } </style>