RoleDrawer.vue 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <el-drawer
  3. v-model="RoleDrawer.drawerVisible"
  4. title="权限配置"
  5. direction="rtl"
  6. size="80%"
  7. :close-on-click-modal="false"
  8. :before-close="RoleDrawer.handleDrawerClose"
  9. :destroy-on-close="true"
  10. >
  11. <template #header>
  12. <div>
  13. 当前授权角色:
  14. <el-tag style="margin-right: 20px">{{ RoleDrawer.roleName }}</el-tag>
  15. 授权人员:
  16. <el-button size="small" :icon="UserFilled" @click="handleUsers">{{ RoleDrawer.users.length }}</el-button>
  17. </div>
  18. </template>
  19. <splitpanes class="default-theme" style="height: 100%">
  20. <pane min-size="20" size="22">
  21. <div class="pane-box">
  22. <MenuTreeCom />
  23. </div>
  24. </pane>
  25. <pane min-size="20">
  26. <div class="pane-box">
  27. <el-tabs v-model="activeName" class="demo-tabs">
  28. <el-tab-pane label="接口权限" name="first"><MenuBtnCom /></el-tab-pane>
  29. <el-tab-pane label="列字段权限" name="second"><MenuFieldCom /></el-tab-pane>
  30. </el-tabs>
  31. </div>
  32. </pane>
  33. </splitpanes>
  34. </el-drawer>
  35. <el-dialog v-model="dialogVisible" title="授权用户" width="700px" :close-on-click-modal="false">
  36. <RoleUsersCom />
  37. </el-dialog>
  38. </template>
  39. <script setup lang="ts">
  40. import { Splitpanes, Pane } from 'splitpanes';
  41. import 'splitpanes/dist/splitpanes.css';
  42. import { UserFilled } from '@element-plus/icons-vue';
  43. import { RoleDrawerStores } from '../stores/RoleDrawerStores';
  44. import { defineAsyncComponent, ref } from 'vue';
  45. import { RoleUsersStores } from '../stores/RoleUsersStores';
  46. const MenuTreeCom = defineAsyncComponent(() => import('./RoleMenuTree.vue'));
  47. const MenuBtnCom = defineAsyncComponent(() => import('./RoleMenuBtn.vue'));
  48. const MenuFieldCom = defineAsyncComponent(() => import('./RoleMenuField.vue'));
  49. const RoleUsersCom = defineAsyncComponent(() => import('./RoleUsers.vue'));
  50. const RoleDrawer = RoleDrawerStores(); // 抽屉参数
  51. const RoleUsers = RoleUsersStores(); // 角色-用户
  52. const activeName = ref('first');
  53. const dialogVisible = ref(false);
  54. const handleUsers = () => {
  55. dialogVisible.value = true;
  56. RoleUsers.get_all_users(); // 获取所有用户
  57. RoleUsers.set_right_users(RoleDrawer.$state.users); // 设置已选中用户
  58. };
  59. </script>
  60. <style lang="scss" scoped>
  61. .pane-box {
  62. width: 100vw; /* 视口宽度 */
  63. height: 100vh; /* 视口高度 */
  64. max-width: 100%; /* 确保不超过父元素的宽度 */
  65. max-height: 100%; /* 确保不超过父元素的高度 */
  66. overflow: auto; /* 当内容超出容器尺寸时显示滚动条 */
  67. padding: 10px;
  68. background-color: #fff;
  69. }
  70. </style>