index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <fs-page>
  3. <el-row class="menu-el-row">
  4. <el-col :span="6">
  5. <div class="menu-box menu-left-box">
  6. <MenuTreeCom
  7. ref="menuTreeRef"
  8. :treeData="menuTreeData"
  9. @treeClick="handleTreeClick"
  10. @updateDept="handleUpdateMenu"
  11. @deleteDept="handleDeleteMenu"
  12. />
  13. </div>
  14. </el-col>
  15. <el-col :span="18">
  16. <el-tabs type="border-card">
  17. <el-tab-pane label="按钮权限配置" >
  18. <div style="height: 72vh">
  19. <MenuButtonCom ref="menuButtonRef" />
  20. </div>
  21. </el-tab-pane>
  22. <el-tab-pane label="列权限配置">
  23. <div style="height: 72vh">
  24. <MenuFieldCom ref="menuFieldRef"></MenuFieldCom>
  25. </div>
  26. </el-tab-pane>
  27. </el-tabs>
  28. </el-col>
  29. </el-row>
  30. <el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
  31. <MenuFormCom
  32. v-if="drawerVisible"
  33. :initFormData="drawerFormData"
  34. :cacheData="menuTreeCacheData"
  35. :treeData="menuTreeData"
  36. @drawerClose="handleDrawerClose"
  37. />
  38. </el-drawer>
  39. </fs-page>
  40. </template>
  41. <script lang="ts" setup name="menuPages">
  42. import { ref, onMounted } from 'vue';
  43. import XEUtils from 'xe-utils';
  44. import { ElMessageBox } from 'element-plus';
  45. import MenuTreeCom from './components/MenuTreeCom/index.vue';
  46. import MenuButtonCom from './components/MenuButtonCom/index.vue';
  47. import MenuFormCom from './components/MenuFormCom/index.vue';
  48. import MenuFieldCom from './components/MenuFieldCom/index.vue';
  49. import { GetList, DelObj } from './api';
  50. import { successNotification } from '/@/utils/message';
  51. import { APIResponseData, MenuTreeItemType } from './types';
  52. let menuTreeData = ref([]);
  53. let menuTreeCacheData = ref<MenuTreeItemType[]>([]);
  54. let drawerVisible = ref(false);
  55. let drawerFormData = ref<Partial<MenuTreeItemType>>({});
  56. let menuTreeRef = ref<InstanceType<typeof MenuTreeCom> | null>(null);
  57. let menuButtonRef = ref<InstanceType<typeof MenuButtonCom> | null>(null);
  58. let menuFieldRef = ref<InstanceType<typeof MenuFieldCom> | null>(null);
  59. const getData = () => {
  60. GetList({}).then((ret: APIResponseData) => {
  61. const responseData = ret.data;
  62. const result = XEUtils.toArrayTree(responseData, {
  63. parentKey: 'parent',
  64. children: 'children',
  65. strict: true,
  66. });
  67. menuTreeData.value = result;
  68. });
  69. };
  70. /**
  71. * 菜单的点击事件
  72. */
  73. const handleTreeClick = (record: MenuTreeItemType) => {
  74. menuButtonRef.value?.handleRefreshTable(record);
  75. menuFieldRef.value?.handleRefreshTable(record)
  76. };
  77. /**
  78. * 部门的 新增 or 编辑 事件
  79. */
  80. const handleUpdateMenu = (type: string, record?: MenuTreeItemType) => {
  81. if (type === 'update' && record) {
  82. const parentData = menuTreeRef.value?.treeRef?.currentNode.parent.data || {};
  83. menuTreeCacheData.value = [parentData];
  84. drawerFormData.value = record;
  85. }
  86. drawerVisible.value = true;
  87. };
  88. const handleDrawerClose = (type?: string) => {
  89. if (type === 'submit') {
  90. getData();
  91. }
  92. drawerVisible.value = false;
  93. drawerFormData.value = {};
  94. };
  95. /**
  96. * 部门的删除事件
  97. */
  98. const handleDeleteMenu = (id: string, callback: Function) => {
  99. ElMessageBox.confirm('您确认删除该菜单项吗?', '温馨提示', {
  100. confirmButtonText: '确认',
  101. cancelButtonText: '取消',
  102. type: 'warning',
  103. }).then(async () => {
  104. const res: APIResponseData = await DelObj(id);
  105. callback();
  106. if (res?.code === 2000) {
  107. successNotification(res.msg as string);
  108. getData();
  109. }
  110. });
  111. };
  112. onMounted(() => {
  113. getData();
  114. });
  115. </script>
  116. <style lang="scss" scoped>
  117. .menu-el-row {
  118. height: 100%;
  119. overflow: hidden;
  120. .el-col {
  121. height: 100%;
  122. padding: 10px 0;
  123. box-sizing: border-box;
  124. }
  125. }
  126. .menu-box {
  127. height: 100%;
  128. padding: 10px;
  129. background-color: var(--el-fill-color-blank);;
  130. box-sizing: border-box;
  131. }
  132. .menu-left-box {
  133. position: relative;
  134. border-radius: 0 8px 8px 0;
  135. margin-right: 10px;
  136. }
  137. .menu-right-box {
  138. border-radius: 8px 0 0 8px;
  139. }
  140. </style>