index.vue 3.4 KB

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