OnlineEducation-teacher-front/src/views/myResource/resourceLibrary/index.vue

<template>
	<div class="file-wrapper" @dragenter="showUploadMask">
		<a-layout class="layout-container">
			<a-layout-sider width="auto">
				<AsideMenu ref="asideMenu" @onNavigateTo="onNavigateTo"></AsideMenu>
			</a-layout-sider>
			<a-layout-content>
				<a-layout-content class="content-main">
					<FileList ref="fileList"></FileList>
				</a-layout-content>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script setup>
	import { useMyResourceStore } from '@/store/myResource'
	import AsideMenu from './file/AsideMenu.vue'
	import FileList from './file/FileList.vue'

	const asideMenu = ref(null)
	const fileList = ref(null)
	const myResourceStore = useMyResourceStore()
	// 显示拖拽上传文件遮罩
	const showUploadMask = (e) => {
		e.stopPropagation()
		e.preventDefault()
		myResourceStore.toggleUploadMask()
	}
	const onNavigateTo = (path) => {
		fileList.value.navigateTo(path)
	}

	onMounted(() => {
		//开始就有很多列
		myResourceStore.changeSelectedColumnList(['extendName', 'fileSize', 'uploadTime', 'deleteTime'])
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';
	@import '@/style/myResource/mixins.less';
	.file-wrapper {
		width: 100% !important;
	}

	.el-container {
		.el-aside {
			height: calc(100vh - 61px);
			overflow: hidden;
		}
	}

	.el-main {
		padding: 0px 16px !important;
		overflow: hidden;
	}
</style>