index.vue 980 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <route lang="yaml">
  2. meta:
  3. enabled: false
  4. </route>
  5. <script lang="ts" setup>
  6. import DirTreeComponent from './components/DirTree.vue'
  7. import FileListComponent from './components/FileList.vue'
  8. const dirTreeRef = ref()
  9. const fileListRef = ref()
  10. const onItemSelect = (dirId: number) => {
  11. fileListRef.value.loadData(dirId)
  12. }
  13. </script>
  14. <template>
  15. <div class="absolute-container">
  16. <tool-header title="企业网盘" />
  17. <div class="page-main">
  18. <LayoutContainer left-side-width="250px" hide-left-side-toggle>
  19. <template #leftSide>
  20. <DirTreeComponent ref="dirTreeRef" @onItemSelect="onItemSelect" />
  21. </template>
  22. <FileListComponent ref="fileListRef" />
  23. </LayoutContainer>
  24. </div>
  25. </div>
  26. </template>
  27. <style lang="scss" scoped>
  28. .container {
  29. height: 100%;
  30. display: flex;
  31. flex-direction: column;
  32. }
  33. .absolute-container {
  34. :deep(.left-side) {
  35. display: flex;
  36. flex-direction: column;
  37. height: 100%;
  38. }
  39. }
  40. </style>