OnlineEducation-back-front/src/views/myResource/components/EnterpriseDisk.vue

<template>
	<!-- 文件平铺 -->
	<div class="file-grid-wrapper">
		<ul class="file-list" v-loading="loading" :element-loading-text="'文件加载中……'">
			<li
				class="file-item"
				v-for="(item, index) in fileListSorted"
				:key="index"
				:title="$file.getFileNameComplete(item)"
				:style="`width: ${gridSize + 40}px; `"
				:class="item.userFileId === selectedFile.userFileId ? 'active' : ''"
				@click="$file.handleFileNameClick(item, index, fileListSorted)"
				@contextmenu.prevent="handleContextMenu(item, index, $event)"
			>
				<video
					:style="`height:${gridSize}px; width:${gridSize}px`"
					v-if="$file.isVideoFile(item)"
					:src="$file.setFileImg(item)"
				></video>
				<a-image
					class="file-img"
					:src="$file.setFileImg(item)"
					:style="`width: ${gridSize}px; height: ${gridSize}px;`"
					fit="cover"
					v-else
				/>
				<div class="file-name" v-html="$file.getFileNameComplete(item, true)"></div>
				<a-button
					class="file-operate"
					type="text"
					:class="`operate-more-${index}`"
					v-if="screenWidth <= 768"
					@click.stop="handleClickMore(item, $event)"
				>
					<template #icon><MoreOutlined /></template>
				</a-button>
				<div
					class="file-checked-wrapper"
					:class="{ checked: item.checked }"
					v-show="isBatchOperation"
					@click.stop.self="item.checked = !item.checked"
				>
					<a-checkbox
						class="file-checked"
						v-model:checked="item.checked"
						@click.stop="item.checked = !item.checked"
					></a-checkbox>
				</div>
			</li>
		</ul>
	</div>
</template>

<script setup>
	import { computed, ref, watch } from 'vue'
	import { useMyResourceStore } from '@/store/myResource'
	import { MoreOutlined } from '@ant-design/icons-vue'

	const props = defineProps({
		// 文件类型
		fileType: {
			required: true,
			type: Number
		},
		// 文件路径
		filePath: {
			required: true,
			type: String
		},
		fileList: Array, // 文件列表
		loading: Boolean
	})

	const emit = defineEmits(['getTableDataByType'])

	const myResourceStore = useMyResourceStore()
	const fileListSorted = ref([])
	const selectedFile = ref({})
	const officeFileType = ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx']

	// 计算属性
	const gridSize = computed(() => myResourceStore.gridSize)
	const isBatchOperation = computed(() => myResourceStore.isBatchOperation)
	const selectedFileList = computed(() => {
		return fileListSorted.value.filter((item) => item.checked)
	})
	const screenWidth = computed(() => myResourceStore.screenWidth)

	// 监听器
	watch(
		() => props.fileList,
		(newValue) => {
			fileListSorted.value = [...newValue]
				.sort((pre, next) => {
					return next.isDir - pre.isDir
				})
				.map((item) => {
					return {
						...item,
						checked: false
					}
				})
		}
	)

	watch(selectedFileList, (newValue) => {
		myResourceStore.changeSelectedFiles(newValue)
		myResourceStore.changeIsBatchOperation(newValue.length !== 0)
	})

	// 方法
	const handleContextMenu = (item, index, event) => {
		// 阻止右键事件冒泡
		event.cancelBubble = true
		// xs 以上的屏幕
		if (screenWidth.value > 768) {
			selectedFile.value = item
			if (!isBatchOperation.value) {
				event.preventDefault()
				$openBox
					.contextMenu({
						selectedFile: item,
						domEvent: event
					})
					.then((res) => {
						selectedFile.value = {}
						if (res === 'confirm') {
							emit('getTableDataByType') // 刷新文件列表
							myResourceStore.showStorage() // 刷新存储容量
						}
					})
			}
		}
	}

	const handleClickMore = (item, event) => {
		selectedFile.value = item
		if (!isBatchOperation.value) {
			event.preventDefault()
			$openBox
				.contextMenu({
					selectedFile: item,
					domEvent: event
				})
				.then((res) => {
					selectedFile.value = {}
					if (res === 'confirm') {
						emit('getTableDataByType') // 刷新文件列表
						myResourceStore.showStorage() // 刷新存储容量
					}
				})
		}
	}
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';
	@import '@/style/myResource/mixins.less';

	.file-grid-wrapper {
		border-top: 1px solid @border-color-base;
		.file-list {
			height: calc(100vh - 206px);
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			align-content: flex-start;
			list-style: none;
			.setScrollbar(6px, transparent, #C0C4CC);
			.file-item {
				margin: 0 16px 16px 0;
				position: relative;
				padding: 8px;
				text-align: center;
				cursor: pointer;
				z-index: 1;
				&:hover {
					background: @tab-back-color;
					.file-name {
						font-weight: 550;
					}
				}
				.file-name {
					margin-top: 8px;
					height: 44px;
					line-height: 22px;
					font-size: 12px;
					word-break: break-all;
					.setEllipsis(2);
					:deep(.keyword) {
						color: @error-color;
					}
				}
				.file-checked-wrapper {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					background: rgba(245, 247, 250, 0.5);
					width: 100%;
					height: 100%;
					.file-checked {
						position: absolute;
						top: 16px;
						left: 24px;
					}
				}
				.file-checked-wrapper.checked {
					background: rgba(245, 247, 250, 0);
				}
			}
			.file-item.active {
				background: @tab-back-color;
			}
		}
		.right-menu-list {
			position: fixed;
			display: flex;
			flex-direction: column;
			background: #fff;
			border: 1px solid @border-color-light;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			z-index: 2;
			padding: 4px 0;
			color: @text-color;
			.right-menu-item,
			.unzip-item {
				padding: 0 16px;
				height: 36px;
				line-height: 36px;
				cursor: pointer;
				&:hover {
					background: @primary-1;
					color: @primary-color;
				}
				i {
					margin-right: 8px;
				}
			}
			.unzip-menu-item {
				position: relative;
				&:hover {
					.unzip-list {
						display: block;
					}
				}
				.unzip-list {
					position: absolute;
					display: none;
					.unzip-item {
						width: 200px;
						.setEllipsis(1);
					}
				}
			}
		}
		.right-menu-list,
		.unzip-list {
			background: #fff;
			border: 1px solid @border-color-light;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			z-index: 2;
			padding: 4px 0;
			color: @text-color;
		}
	}
</style>