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

<template>
	<div class="file-list-wrapper">
		<!-- 操作按钮 -->
		<a-layout-header>
			<OperationMenu
				v-if="fileType != 12 && fileType != 13 && fileType != 14 && fileType != 15"
				:fileType="fileType"
				:filePath="filePath"
				@getSearchFileList="getSearchFileList"
				@getTableDataByType="getTableDataByType"
			></OperationMenu>
		</a-layout-header>
		<div class="middle-wrapper">
			<!-- 面包屑导航栏 -->
			<BreadCrumb
				class="breadcrumb"
				:fileType="fileType"
				:filePath="filePath"
				@getTableDataByType="getTableDataByType"
			></BreadCrumb>
		</div>
		<!-- 文件列表-表格模式 -->
		<FileTable
			:fileType="fileType"
			:filePath="filePath"
			:fileList="fileList"
			v-model:loading="loading"
			v-if="fileModel === 0 && fileType !== 12 && fileType !== 13 && fileType !== 14 && fileType !== 15"
			@getTableDataByType="getTableDataByType"
			@contextmenu="handleClickRight"
		></FileTable>
		<!-- 文件列表-网格模式 -->
		<FileGrid
			:fileType="fileType"
			:filePath="filePath"
			:fileList="fileList"
			:loading="loading"
			v-if="fileModel === 1 && fileType !== 12 && fileType !== 13 && fileType !== 14 && fileType !== 15"
			@getTableDataByType="getTableDataByType"
			@contextmenu="handleClickRight"
		></FileGrid>
		<!-- 图片-时间线模式 -->
		<FileTimeLine
			class="image-model"
			:fileList="fileList"
			v-model:loading="loading"
			v-if="fileModel === 2 && fileType === 1"
			@getTableDataByType="getTableDataByType"
			@contextmenu="handleClickRight"
		></FileTimeLine>
		<!-- 敏感词管理 -->
		<SensitiveList :tableData="sensitiveListData" v-if="fileType === 12" @addSensitiveSuccess="addSensitiveSuccess" />
		<!-- 敏感词管理记录 -->
		<SensitiveListManage :tableData="sensitiveRecordsData" v-if="fileType === 13" @delRecords="delRecords" />
		<!-- 跨网传输 -->
		<TransferList :tableData="transferData" v-if="fileType === 14" @delTransferList="delTransferList" />
		<!-- 企业云盘 -->
		<EnterpriseDisk
			:fileType="fileType"
			:filePath="filePath"
			:fileList="fileList"
			v-model:loading="loading"
			:tableData="fileList"
			v-if="fileType === 15"
			@enterpriseDiskList="enterpriseDiskList"
			@contextmenu="handleClickRight"
		/>
		<div class="pagination-wrapper">
			<div class="current-page-count" v-if="fileType == 12">当前页{{ sensitiveListData.length }}条</div>
			<div class="current-page-count" v-else-if="fileType == 13">当前页{{ sensitiveRecordsData.length }}条</div>
			<div class="current-page-count" v-else-if="fileType == 14">当前页{{ transferData.length }}条</div>
			<!-- <div class="current-page-count" v-else-if="fileType == 15">
				当前页{{ enterpriseDiskData.length }}条
			</div> -->
			<div class="current-page-count" v-else>当前页{{ fileList.length }}条</div>
			<!-- 回收站不展示分页组件 -->
			<a-pagination
				:current="pageData.currentPage"
				:page-size="pageData.pageCount"
				:total="pageData.total"
				:page-size-options="['10', '50', '100', '200']"
				:show-total="(total) => `总共 ${total} 条`"
				:show-size-changer="screenWidth > 768"
				:show-quick-jumper="screenWidth <= 768"
				@change="handleCurrentChange"
				@showSizeChange="handleSizeChange"
				v-if="fileType !== 6"
			>
			</a-pagination>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'
	import { useRoute } from 'vue-router'
	import { useMyResourceStore } from '@/store/myResource'
	import { message } from 'ant-design-vue'

	import OperationMenu from '../../components/OperationMenu.vue'
	import BreadCrumb from '../../common/BreadCrumb.vue'
	import FileTable from '../../common/FileTable.vue'
	import FileGrid from '../../components/FileGrid.vue'
	import FileTimeLine from '../../components/FileTimeLine.vue'

	import SensitiveList from '../../components/SensitiveList.vue'
	import SensitiveListManage from '../../components/SensitiveListManage.vue'
	import TransferList from '../../components/TransferList.vue'
	import EnterpriseDisk from '../../components/EnterpriseDisk.vue'
	import {
		getFileListByPath,
		getFileListByType,
		getRecoveryFile,
		getMyShareFileList,
		getSensitiveList,
		searchByFileName,
		getSensitiveRecord,
		getTransferRecord,
		getEnterpriseDiskList
	} from '@/api/myResource/file.js'

	const route = useRoute()
	const myResourceStore = useMyResourceStore()
	const { proxy } = getCurrentInstance()
	console.log('proxy.$openBox---', proxy.$openBox)
	const fileNameSearch = ref('')
	const loading = ref(true) //  表格数据-loading
	const fileList = ref([]) //  表格数据-文件列表
	// 分页数据
	const pageData = reactive({
		currentPage: 1,
		pageCount: 50,
		total: 0
	})
	const sensitiveListData = ref([])
	const sensitiveRecordsData = ref([])
	const transferData = ref([])
	const enterpriseDiskData = ref([])

	// 左侧菜单选中的文件类型
	const fileType = computed(() => {
		return route.query.fileType ? Number(route.query.fileType) : 0
	})
	// 当前所在路径
	const filePath = computed(() => {
		return route.query.filePath ? route.query.filePath : '/'
	})
	// 文件查看模式 0列表模式 1网格模式 2 时间线模式
	const fileModel = computed(() => {
		return myResourceStore.fileModel
	})
	console.log('fileModel---', fileModel.value)
	// 屏幕宽度
	const screenWidth = computed(() => {
		return myResourceStore.screenWidth
	})

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

	watch(fileType, () => {
		if (route.name === 'File') {
			setPageCount()
			getTableDataByType()
		}
	})

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

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

	const delRecords = () => {
		getSensitiveRecordData()
	}
	const delTransferList = () => {
		getTransferListData()
	}
	const addSensitiveSuccess = () => {
		getSensitiveListData()
	}
	// 企业云盘
	const enterpriseDiskList = () => {
		getEnterpriseDisk()
	}
	/**
	 * 文件展示区域的空白处右键事件
	 * @param {Document} event 右键事件对象
	 */
	const handleClickRight = (event) => {
		console.log('右键事件', proxy.$openBox)
		event.preventDefault()
		console.log('fileType.value---', fileType.value)

		// 只有在全部页面才可以进行以下操作
		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.currentPage = 1
		if (myResourceStore.fileModel === 0) {
			pageData.pageCount = 50
		}
		if (myResourceStore.fileModel === 1) {
			pageData.pageCount = 100
		}
		if (fileType.value == 12 || fileType.value == 13) {
			pageData.pageCount = 10
		}
	}
	/**
	 * 表格数据获取相关事件 | 获取文件列表数据
	 */
	const getTableDataByType = () => {
		console.log('事件执行。。。', fileType.value)
		loading.value = true
		// 分类型
		if (Number(fileType.value)) {
			switch (Number(fileType.value)) {
				case 6:
					showFileRecovery() //  回收站
					break
				case 8:
					showMyShareFile() //  我的分享
					break
				case 12: //敏感词
					getSensitiveListData()
					break
				case 13: //敏感词记录过滤
					getSensitiveRecordData()
					break
				case 14: //跨网传输
					getTransferListData()
					break
				case 15: //企业云盘
					getEnterpriseDisk()
					break
				default:
					showFileList()
					break
			}
		} else {
			// 全部文件
			showFileList()
		}
		myResourceStore.showStorage()
	}
	/**
	 * 表格数据获取相关事件 | 获取当前路径下的文件列表
	 */
	const showFileList = () => {
		let data = {
			fileType: fileType.value,
			filePath: filePath.value,
			currentPage: pageData.currentPage,
			pageCount: pageData.pageCount
		}
		getFileListByPath(data).then((res) => {
			console.log('res---', res)
			if (res.success) {
				fileList.value = res.dataList
				pageData.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}
	/**
	 * 表格数据获取相关事件 | 分页组件 | 当前页码改变
	 */
	const handleCurrentChange = (currentPage) => {
		pageData.currentPage = currentPage
		getTableDataByType()
	}
	/**
	 * 表格数据获取相关事件 | 分页组件 | 页大小改变时
	 */
	const handleSizeChange = (current, pageSize) => {
		pageData.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.currentPage,
			pageCount: pageData.pageCount
		}
		getMyShareFileList(data).then((res) => {
			if (res.success) {
				fileList.value = res.dataList
				pageData.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}
	/**
	 * 表格数据获取相关事件 | 根据文件类型展示文件列表
	 */
	const showFileListByType = () => {
		//  分类型
		let data = {
			fileType: fileType.value,
			currentPage: pageData.currentPage,
			pageCount: pageData.pageCount
		}
		getFileListByType(data).then((res) => {
			if (res.success) {
				fileList.value = res.dataList
				pageData.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}

	/**
	 * 获取搜索文件结果列表
	 * @param {string} fileName 文件名称
	 */
	const getSearchFileList = (fileName) => {
		loading.value = true
		searchByFileName({
			currentPage: pageData.currentPage,
			pageCount: pageData.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.total = res.data.totalHits
				pageData.total = res.total
			} else {
				message.error(res.message)
			}
		})
	}
	//获取敏感词刘表
	const getSensitiveListData = () => {
		getSensitiveList({
			page: pageData.currentPage,
			pageSize: pageData.pageCount
		}).then((res) => {
			console.log(res)

			sensitiveListData.value = res.dataList

			pageData.total = res.total
		})
	}
	const getSensitiveRecordData = () => {
		getSensitiveRecord({
			page: pageData.currentPage,
			pageSize: pageData.pageCount
		}).then((res) => {
			for (let item of res.dataList) {
				let date = new Date(item.createTime)
				console.log(date.getMonth())
				item.createTime =
					date.getFullYear() +
					'-' +
					(date.getMonth() + 1).toString().padStart(2, 0) +
					'-' +
					date.getDay().toString().padStart(2, 0) +
					' ' +
					date.getHours().toString().padStart(2, 0) +
					':' +
					date.getMinutes().toString().padStart(2, 0) +
					':' +
					date.getSeconds().toString().padStart(2, 0)
			}
			sensitiveRecordsData.value = res.dataList

			pageData.total = res.total
		})
	}
	const getTransferListData = () => {
		getTransferRecord({
			page: pageData.currentPage,
			pageSize: pageData.pageCount
		}).then((res) => {
			transferData.value = res.dataList
			pageData.total = res.total
		})
	}
	// 企业云盘的列表
	const getEnterpriseDisk = () => {
		fileList.value = []
		let data = {
			fileType: 0,
			filePath: filePath.value,
			currentPage: pageData.currentPage,
			pageCount: pageData.pageCount
		}
		getEnterpriseDiskList(data).then((res) => {
			if (res.success) {
				fileList.value = res.dataList
				pageData.total = Number(res.total)
				loading.value = false
			} else {
				message.error(res.message)
			}
		})
	}
</script>

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

	.file-list-wrapper {
		:deep(.ant-layout-header) {
			padding: 0;
		}
		.middle-wrapper {
			margin-bottom: 8px;
			margin-top: 10px;
		}
		.pagination-wrapper {
			position: relative;
			border-top: 1px solid @border-base;
			height: 44px;
			line-height: 44px;
			text-align: center;
			.current-page-count {
				position: absolute;
				left: 16px;
				height: 32px;
				line-height: 32px;
				font-size: 13px;
				color: @regular-text;
			}
		}
	}
	:deep(.ant-pagination-item-active) {
		color: #29175b;
		cursor: default;
	}
	:deep(.ant-pagination-item:hover) {
		color: #29175b;
	}
</style>