|
1
|
<template>
|
1
|
<template>
|
|
2
|
- <div class="organization-tree flex relative items-center py-4" :class="foldFlag ? '' : 'pl-4'">
|
2
|
+ <div
|
|
|
|
3
|
+ ref="tree"
|
|
|
|
4
|
+ class="organization-tree flex relative items-center py-4"
|
|
|
|
5
|
+ :class="foldFlag ? '' : 'pl-4'"
|
|
|
|
6
|
+ >
|
|
3
|
<div
|
7
|
<div
|
|
4
|
class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
|
8
|
class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
|
|
5
|
:class="foldFlag ? '' : '-right-4'"
|
9
|
:class="foldFlag ? '' : '-right-4'"
|
|
@@ -33,7 +37,9 @@ |
|
@@ -33,7 +37,9 @@ |
|
33
|
import { BasicTree, TreeItem } from '/@/components/Tree';
|
37
|
import { BasicTree, TreeItem } from '/@/components/Tree';
|
|
34
|
import { getOrganizationList } from '/@/api/system/system';
|
38
|
import { getOrganizationList } from '/@/api/system/system';
|
|
35
|
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
39
|
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
|
|
|
40
|
+ import { getBoundingClientRect } from '/@/utils/domUtils';
|
|
36
|
|
41
|
|
|
|
|
42
|
+ const tree = ref<Nullable<HTMLDivElement>>();
|
|
37
|
const emit = defineEmits(['select']);
|
43
|
const emit = defineEmits(['select']);
|
|
38
|
const treeData = ref<TreeItem[]>([]);
|
44
|
const treeData = ref<TreeItem[]>([]);
|
|
39
|
const selectedKeys = ref<string[]>();
|
45
|
const selectedKeys = ref<string[]>();
|
|
@@ -57,11 +63,23 @@ |
|
@@ -57,11 +63,23 @@ |
|
57
|
foldFlag.value = !unref(foldFlag);
|
63
|
foldFlag.value = !unref(foldFlag);
|
|
58
|
};
|
64
|
};
|
|
59
|
|
65
|
|
|
|
|
66
|
+ const setTreeHeight = () => {
|
|
|
|
67
|
+ const rect = getBoundingClientRect(unref(tree)!);
|
|
|
|
68
|
+ if (rect) {
|
|
|
|
69
|
+ const { y } = rect as DOMRect;
|
|
|
|
70
|
+ const clientHight = document.documentElement.clientHeight;
|
|
|
|
71
|
+ const maxHeight = clientHight - y;
|
|
|
|
72
|
+ if (unref(tree)) unref(tree)!.style.height = `${maxHeight}px`;
|
|
|
|
73
|
+ }
|
|
|
|
74
|
+ };
|
|
|
|
75
|
+
|
|
60
|
onMounted(async () => {
|
76
|
onMounted(async () => {
|
|
61
|
treeData.value = (await getOrganizationList()) as unknown as TreeItem[];
|
77
|
treeData.value = (await getOrganizationList()) as unknown as TreeItem[];
|
|
62
|
const getAllIds = findForAllId(treeData.value as any, []);
|
78
|
const getAllIds = findForAllId(treeData.value as any, []);
|
|
63
|
//设置要展开的id
|
79
|
//设置要展开的id
|
|
64
|
treeExpandData.value = getAllIds;
|
80
|
treeExpandData.value = getAllIds;
|
|
|
|
81
|
+
|
|
|
|
82
|
+ setTreeHeight();
|
|
65
|
});
|
83
|
});
|
|
66
|
defineExpose({
|
84
|
defineExpose({
|
|
67
|
resetOrganization,
|
85
|
resetOrganization,
|
|
@@ -70,6 +88,8 @@ |
|
@@ -70,6 +88,8 @@ |
|
70
|
|
88
|
|
|
71
|
<style scoped lang="less">
|
89
|
<style scoped lang="less">
|
|
72
|
.organization-tree {
|
90
|
.organization-tree {
|
|
|
|
91
|
+ max-height: 100vh;
|
|
|
|
92
|
+
|
|
73
|
.expand {
|
93
|
.expand {
|
|
74
|
opacity: 0;
|
94
|
opacity: 0;
|
|
75
|
}
|
95
|
}
|
