OnlineEducation-teacher-front/src/views/myResource/resourceLibrary/file/FileList.vue

<template>
	<div class="file-list-wrapper">
		<!-- 操作按钮 -->
		<div class="header">
			<OperationMenu
				:fileType="fileType"
				:filePath="filePath"
				@getSearchFileList="getSearchFileList"
				@getTableDataByType="getTableDataByType"
			></OperationMenu>
		</div>
		<div class="middle-wrapper">
			<!-- 面包屑导航栏 -->
			<BreadCrumb
				class="breadcrumb"
				:fileType="fileType"
				:filePath="filePath"
				@getTableDataByType="getTableDataByType"
			></BreadCrumb>
		</div>
		<!-- 文件列表-表格模式 -->
		<FileTable
			:fileType="fileType"
			:filePath="filePath"
			:fileList="fileList"
			:loading="loading"
			v-if="fileModel === 0"
			@getTableDataByType="getTableDataByType"
			@contextmenu="handleClickRight"
		></FileTable>
		<!-- 文件列表-网格模式 -->
		<FileGrid
			:fileType="fileType"
			:filePath="filePath"
			:fileList="fileList"
			:loading="loading"
			v-if="fileModel === 1"
			@getTableDataByType="getTableDataByType"
			@contextmenu="handleClickRight"
		></FileGrid>
		<!-- 图片-时间线模式 -->
		<FileTimeLine
			class="image-model"
			:fileList="fileList"
			:loading="loading"
			v-if="fileModel === 2 && fileType === 1"
			@getTableDataByType="getTableDataByType"
			@contextmenu="handleClickRight"
		></FileTimeLine>
		<div class="pagination-wrapper">
			<div class="current-page-count">当前页{{ fileList.length }}条</div>
			<!-- 回收站不展示分页组件 -->
			<a-pagination
				v-model:current="pageData.currentPage"
				v-model:pageSize="pageData.pageCount"
				:total="pageData.total"
				:pageSizeOptions="[10, 50, 100, 200]"
				showSizeChanger
				:showTotal="(total) => `共 ${total} 条`"
				showQuickJumper
				v-if="fileType !== 6"
				@change="handleCurrentChange"
				@showSizeChange="handleSizeChange"
			>
			</a-pagination>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed, watch, onMounted } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { message } from 'ant-design-vue'
	import OperationMenu from '@/views/myResource/components/OperationMenu.vue'
	import BreadCrumb from '@/views/myResource/common/BreadCrumb.vue'
	import FileTable from '@/views/myResource/common/FileTable.vue'
	import FileGrid from '@/views/myResource/components/FileGrid.vue'
	import FileTimeLine from '@/views/myResource/components/FileTimeLine.vue'
	import { useMyResourceStore } from '@/store/myResource'

	import {
		getFileListByPath,
		getFileListByType,
		getRecoveryFile,
		getMyShareFileList,
		searchFile
	} from '@/api/myResource/file'
	const { proxy } = getCurrentInstance()
	const route = useRoute()
	const router = useRouter()
	const myResourceStore = useMyResourceStore()

	const fileNameSearch = ref('')
	const loading = ref(true) // 表格数据-loading
	const fileList = ref([]) // 表格数据-文件列表

	// 分页数据
	const pageData = ref({
		currentPage: 1,
		pageCount: 50,
		total: 0
	})

	// 左侧菜单选中的文件类型
	// const fileType = computed(() => {
	// 	return route.query.fileType ? Number(route.query.fileType) : 0
	// })
	const fileType = ref(0)

	// 当前所在路径
	const filePath = computed(() => {
		return route.query.filePath ? route.query.filePath : '/'
	})

	// 文件查看模式 0列表模式 1网格模式 2 时间线模式
	const fileModel = computed(() => {
		return myResourceStore.getFileModel
	})

	// 屏幕宽度
	const screenWidth = computed(() => {
		return myResourceStore.screenWidth
	})
	const navigateTo = (path) => {
		// fileList.value.navigateTo(path)
		console.log('navigateTo 变化', path)
		//     {
		// "name": "resourceLibrary",
		// "query": {
		//     "fileType": 2
		// }
		if (path.name && path.name == 'resourceLibrary') {
			// if (path.query.fileType == 0) {

			// }
			fileType.value = path.query.fileType

			setPageCount()
			getTableDataByType()
		}
	}
	// 监听路径变化
	// watch(
	// 	() => filePath.value,
	// 	() => {
	// 		// 当左侧菜单选择"全部"或"我的分享"，文件路径发生变化时，再重新获取文件列表
	// 		if (route.name === 'resourceLibrary' && [0, 8].includes(fileType.value)) {
	// 			setPageCount()
	// 			getTableDataByType()
	// 		}
	// 	}
	// )

	// 监听文件类型变化
	// watch(
	// 	() => fileType.value,
	// 	() => {
	// 		if (route.name === 'resourceLibrary') {
	// 			setPageCount()
	// 			getTableDataByType()
	// 		}
	// 	}
	// )

	// 监听文件查看模式
	watch(
		() => fileModel.value,
		() => {
			setPageCount()
		}
	)

	onMounted(() => {
		setPageCount()
		getTableDataByType()
	})

	/**
	 * 文件展示区域的空白处右键事件
	 * @param {Document} event 右键事件对象
	 */
	const handleClickRight = (event) => {
		event.preventDefault()
		console.log('proxy', proxy)
		// 只有在全部页面才可以进行以下操作
		if (![6, 8].includes(fileType.value)) {
			proxy.$openBox
				.contextMenu({
					selectedFile: undefined,
					domEvent: event,
					serviceEl: proxy
				})
				.then((res) => {
					if (res === 'confirm') {
						getTableDataByType() // 刷新文件列表
						myResourceStore.showStorage() // 刷新存储容量
					}
				})
		}
	}

	/**
	 * 表格数据获取相关事件 | 调整分页大小
	 */
	const setPageCount = () => {
		pageData.value.currentPage = 1
		if (fileModel.value === 0) {
			pageData.value.pageCount = 50
		}
		if (fileModel.value === 1) {
			pageData.value.pageCount = 100
		}
	}

	/**
	 * 表格数据获取相关事件 | 获取文件列表数据
	 */
	const getTableDataByType = () => {
		loading.value = true
		// 分类型
		if (Number(fileType.value)) {
			switch (Number(fileType.value)) {
				case 6: {
					showFileRecovery() // 回收站
					break
				}
				case 8: {
					showMyShareFile() // 我的分享
					break
				}
				default: {
					showFileList()
					break
				}
			}
		} else {
			// 全部文件
			showFileList()
		}
		myResourceStore.showStorage()
	}

	/**
	 * 表格数据获取相关事件 | 获取当前路径下的文件列表
	 */
	const showFileList = () => {
		let data = {
			fileType: fileType.value,
			filePath: filePath.value,
			currentPage: pageData.value.currentPage,
			pageCount: pageData.value.pageCount
		}
		getFileListByPath(data).then((res) => {
			if (res.success) {
				console.log('获取到的数据呢', res.dataList)
				for (let i = 0; i < res.dataList.length; i++) {
					res.dataList[i].key = i
				}
				fileList.value = res.dataList
				pageData.value.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}

	/**
	 * 表格数据获取相关事件 | 分页组件 | 当前页码改变
	 */
	const handleCurrentChange = (currentPage) => {
		pageData.value.currentPage = currentPage
		getTableDataByType()
	}

	/**
	 * 表格数据获取相关事件 | 分页组件 | 页大小改变时
	 */
	const handleSizeChange = (pageSize) => {
		pageData.value.pageCount = pageSize
		getTableDataByType()
	}

	/**
	 * 表格数据获取相关事件 | 获取回收站文件列表
	 */
	const showFileRecovery = () => {
		getRecoveryFile().then((res) => {
			if (res.success) {
				fileList.value = res.dataList
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}

	/**
	 * 表格数据获取相关事件 | 获取我的分享列表
	 */
	const showMyShareFile = () => {
		let data = {
			shareFilePath: filePath.value,
			shareBatchNum: route.query.shareBatchNum,
			currentPage: pageData.value.currentPage,
			pageCount: pageData.value.pageCount
		}
		getMyShareFileList(data).then((res) => {
			if (res.success) {
				fileList.value = res.dataList
				pageData.value.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}

	/**
	 * 表格数据获取相关事件 | 根据文件类型展示文件列表
	 */
	const showFileListByType = () => {
		// 分类型
		let data = {
			fileType: fileType.value,
			currentPage: pageData.value.currentPage,
			pageCount: pageData.value.pageCount
		}
		getFileListByType(data).then((res) => {
			if (res.success) {
				fileList.value = res.dataList
				pageData.value.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}

	/**
	 * 获取搜索文件结果列表
	 * @param {string} fileName 文件名称
	 */
	const getSearchFileList = (fileName) => {
		loading.value = true
		searchFile({
			currentPage: pageData.value.currentPage,
			pageCount: pageData.value.pageCount,
			fileName: fileName
		}).then((res) => {
			loading.value = false
			if (res.success) {
				fileList.value = res.dataList.map((item) => {
					return {
						...item,
						highlightFields: item.highLight.fileName[0]
					}
				})
				pageData.value.total = res.data.totalHits
			} else {
				message.error(res.message)
			}
		})
	}

	defineExpose({ navigateTo })
</script>

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

	.file-list-wrapper {
		.header {
			padding: 0;
		}

		.middle-wrapper {
			margin-bottom: 8px;
		}

		.pagination-wrapper {
			position: relative;
			border-top: 1px solid @BorderBase;
			height: 44px;
			line-height: 44px;
			text-align: center;

			.current-page-count {
				position: absolute;
				left: 16px;
				height: 32px;
				line-height: 32px;
				font-size: 13px;
				color: @RegularText;
			}
		}
	}
</style>