Showing
1 changed file
with
19 additions
and
1 deletions
| 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, |