Przeglądaj źródła

修改网盘的 获取网络数据方式改成使用数据存储的方式而不是地址栏变化

于添 8 miesięcy temu
rodzic
commit
6276bce11f

+ 30 - 15
src/libs/globalFunction/file.js

@@ -5,6 +5,7 @@ import { message } from 'ant-design-vue'
 import { fileImgMap, unknownImg, fileSuffixCodeModeMap, markdownFileType } from '@/libs/map.js'
 import { officeFileType } from '@/libs/map.js'
 import fileOperationPlugins from '@/libs/fileOperationPlugins.js'
+import { useMyResourceStore } from '@/store/myResource'
 
 // 全局函数 - 文件相关
 const fileFunction = {
@@ -304,6 +305,7 @@ const fileFunction = {
 	 * @param {array} fileList 文件列表
 	 */
 	handleFileNameClick(row, currentIndex, fileList = []) {
+		const myResourceStore = useMyResourceStore()
 		console.log('查看')
 		// 如果当前文件在回收站中,则不允许预览
 		if (row.deleteFlag !== undefined && row.deleteFlag !== 0) {
@@ -313,29 +315,42 @@ const fileFunction = {
 		if (row.isDir) {
 			if (router.currentRoute.value.name === 'Share') {
 				// 当前是查看他人分享列表的页面
-				router.push({
-					query: {
-						filePath: `${row.shareFilePath === '/' ? '' : row.shareFilePath}/${row.fileName}`
-					}
+				myResourceStore.changeQuery({
+					filePath: `${row.shareFilePath === '/' ? '' : row.shareFilePath}/${row.fileName}`
 				})
+				// router.push({
+				// 	query: {
+				// 		filePath: `${row.shareFilePath === '/' ? '' : row.shareFilePath}/${row.fileName}`
+				// 	}
+				// })
 			} else if (Number(router.currentRoute.value.query.fileType) === 8) {
 				// 当前是我的已分享列表页面
-				router.push({
-					query: {
-						fileType: 8,
-						filePath: `${row.shareFilePath === '/' ? '' : row.shareFilePath}/${row.fileName}`,
-						shareBatchNum: row.shareBatchNum
-					}
+				myResourceStore.changeQuery({
+					fileType: 8,
+					filePath: `${row.shareFilePath === '/' ? '' : row.shareFilePath}/${row.fileName}`,
+					shareBatchNum: row.shareBatchNum
 				})
+				// router.push({
+				// 	query: {
+				// 		fileType: 8,
+				// 		filePath: `${row.shareFilePath === '/' ? '' : row.shareFilePath}/${row.fileName}`,
+				// 		shareBatchNum: row.shareBatchNum
+				// 	}
+				// })
 			} else if (Number(router.currentRoute.value.query.fileType) !== 6) {
+				console.log('打开网盘文件夹', row)
 				// 回收站页面不允许打开文件夹
 				// 网盘页面
-				router.push({
-					query: {
-						filePath: `${row.filePath === '/' ? '' : row.filePath}/${row.fileName}`,
-						fileType: 0
-					}
+				myResourceStore.changeQuery({
+					filePath: `${row.filePath === '/' ? '' : row.filePath}/${row.fileName}`,
+					fileType: 0
 				})
+				// router.push({
+				// 	query: {
+				// 		filePath: `${row.filePath === '/' ? '' : row.filePath}/${row.fileName}`,
+				// 		fileType: 0
+				// 	}
+				// })
 			}
 		}
 		// 若是文件,则进行相应的预览

+ 8 - 2
src/store/myResource.js

@@ -20,7 +20,8 @@ export const useMyResourceStore = defineStore('myResource', {
 		storageValue: 0, //  文件已占用的存储空间大小
 		totalStorageValue: 0,
 		isLogin: localStorage.getItem('qiwen_isLogin') === 'true', //  用户登录状态
-		userInfoObj: {} //  用户信息
+		userInfoObj: {}, //  用户信息
+		query: {} //路径信息
 	}),
 	getters: {
 		// 登录状态
@@ -40,9 +41,14 @@ export const useMyResourceStore = defineStore('myResource', {
 		// 网格模式 & 时间线模式下 文件图标大小
 		getGridSize: (state) => state.gridSize,
 		// 剩余存储空间
-		getRemainderStorageValue: (state) => state.totalStorageValue - state.storageValue
+		getRemainderStorageValue: (state) => state.totalStorageValue - state.storageValue,
+		getQuery: (state) => state.query
 	},
 	actions: {
+		changeQuery(data) {
+			this.query = data
+		},
+
 		toggleUploadMask() {
 			this.showUploadMask = !this.showUploadMask
 		},

+ 2 - 1
src/views/myResource/Share.vue

@@ -168,7 +168,8 @@
 	 */
 	const handleCloseBtnClick = () => {
 		dialogShareFile.value.visible = false
-		router.push({ name: 'File', query: { fileType: 0, filePath: '/' } })
+		myResourceStore.changeQuery({ fileType: 0, filePath: '/' })
+		// router.push({ name: 'File', query: { fileType: 0, filePath: '/' } })
 	}
 
 	/**

+ 14 - 6
src/views/myResource/common/BreadCrumb.vue

@@ -23,7 +23,8 @@
 			</a-breadcrumb>
 			<a-breadcrumb v-else>
 				<a-breadcrumb-item v-for="(item, index) in breadCrumbList" :key="index">
-					<router-link :to="getRouteQuery(item)">{{ item.name }}</router-link>
+					<!-- <router-link :to="getRouteQuery(item)">{{ item.name }}</router-link> -->
+					<span style="cursor: pointer" @click="setRouteQuery(item)">{{ item.name }}</span>
 				</a-breadcrumb-item>
 			</a-breadcrumb>
 		</div>
@@ -33,7 +34,8 @@
 <script setup>
 	import { ref, computed, nextTick } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
-
+	import { useMyResourceStore } from '@/store/myResource'
+	const myResourceStore = useMyResourceStore()
 	const props = defineProps({
 		// 文件类型
 		fileType: {
@@ -75,7 +77,8 @@
 	 * 面包屑导航栏数组
 	 */
 	const breadCrumbList = computed(() => {
-		let filePath = route.query.filePath
+		// let filePath = route.query.filePath
+		let filePath = myResourceStore.getQuery.filePath ? myResourceStore.getQuery.filePath : '/'
 		let filePathList = filePath ? filePath.split('/') : []
 		let res = [] //  返回结果数组
 		let _path = [] //  存放祖先路径
@@ -128,9 +131,10 @@
 			const fixInputFilePath = inputFilePath.value.endsWith('/')
 				? inputFilePath.value.slice(0, -1)
 				: inputFilePath.value
-			router.push({
-				query: { filePath: `${fixInputFilePath}`, fileType: 0 }
-			})
+			// router.push({
+			// 	query: { filePath: `${fixInputFilePath}`, fileType: 0 }
+			// })
+			myResourceStore.changeQuery({ filePath: fixInputFilePath, fileType: 0 })
 		}
 	}
 
@@ -154,6 +158,10 @@
 			return { query: { filePath: item.path, fileType: 0 } }
 		}
 	}
+	const setRouteQuery = (item) => {
+		let data = getRouteQuery(item)
+		myResourceStore.changeQuery(data.query)
+	}
 </script>
 
 <style lang="less" scoped>

+ 21 - 6
src/views/myResource/common/FileTable.vue

@@ -50,9 +50,12 @@
 						style="cursor: pointer"
 						title="点击跳转"
 						@click="
-							router.push({
-								query: { filePath: record.filePath, fileType: 0 }
-							})
+							() => {
+								// router.push({
+								// 	query: { filePath: record.filePath, fileType: 0 }
+								// })
+								myResourceStore.changeQuery({ filePath: record.filePath, fileType: 0 })
+							}
 						"
 						>{{ record.filePath }}</span
 					>
@@ -161,8 +164,20 @@
 				showOverflowTooltip: true
 			}
 		]
-
-		if (![0, 8].includes(Number(route.query.fileType)) && routeName.value !== 'Share' && screenWidth.value > 768) {
+		console.log(
+			'selectedColumnList: ',
+			selectedColumnList.value,
+			' screenWidth ',
+			screenWidth.value,
+			' screenWidth.value > 768 ',
+			screenWidth.value > 768
+		)
+		// if (![0, 8].includes(Number(route.query.fileType)) && routeName.value !== 'Share' && screenWidth.value > 768) {
+		if (
+			![0, 8].includes(Number(myResourceStore.getQuery.fileType ? myResourceStore.getQuery.fileType : 0)) &&
+			routeName.value !== 'Share' &&
+			screenWidth.value > 768
+		) {
 			cols.push({
 				title: props.fileType === 6 ? '原路径' : '路径',
 				dataIndex: 'filePath',
@@ -307,7 +322,7 @@
 	const handleTableChange = (pagination, filters, sorter) => {
 		// Ant Design Vue 的 sorter 返回的是当前排序的列信息,需要根据实际情况更新 sortedFileList
 		// 这里简化处理,如果需要前端排序,可以根据 sorter.field 和 sorter.order 对 fileList 进行排序
-		// sortedFileList.value = multipleTableRef.value.tableData;
+		sortedFileList.value = multipleTableRef.value.tableData
 	}
 
 	// 表格某一行右键事件

+ 2 - 1
src/views/myResource/components/OperationMenu.vue

@@ -286,7 +286,8 @@
 	const handleClickAddFolderBtn = () => {
 		proxy.$openDialog
 			.addFolder({
-				filePath: route.query.filePath || '/'
+				// filePath: route.query.filePath || '/'
+				filePath: myResourceStore.getQuery.filePath || '/'
 			})
 			.then((res) => {
 				if (res === 'confirm') {

+ 0 - 2
src/views/myResource/components/SelectColumn.vue

@@ -8,7 +8,6 @@
 		<a-modal
 			title="设置表格列显隐"
 			width="700px"
-			:getContainer="() => document.body"
 			v-model:visible="dialogVisible"
 			@ok="dialogOk"
 			@cancel="dialogVisible = false"
@@ -73,7 +72,6 @@
 		myResourceStore.changeSelectedColumnList(selectedColumn.value)
 		dialogVisible.value = false
 	}
-
 	onMounted(() => {
 		// 可以在这里进行一些初始化操作,例如从本地存储加载列设置
 	})

+ 6 - 3
src/views/myResource/file/box/contextMenu/Box.vue

@@ -182,12 +182,14 @@
 
 	// 左侧菜单选中的文件类型
 	const fileType = computed(() => {
-		return router.currentRoute.value.query.fileType ? Number(router.currentRoute.value.query.fileType) : 0
+		// return router.currentRoute.value.query.fileType ? Number(router.currentRoute.value.query.fileType) : 0
+		return myResourceStore.getQuery.fileType ? Number(myResourceStore.getQuery.fileType) : 0
 	})
 
 	// 当前路径
 	const filePath = computed(() => {
-		return router.currentRoute.value.query.filePath
+		// return router.currentRoute.value.query.filePath
+		return myResourceStore.getQuery.filePath ? myResourceStore.getQuery.filePath : '/'
 	})
 
 	// 查看按钮是否显示
@@ -509,7 +511,8 @@
 	const handleClickAddFolderBtn = () => {
 		proxy.$openDialog
 			.addFolder({
-				filePath: router.currentRoute.value.query.filePath || '/'
+				// filePath: router.currentRoute.value.query.filePath || '/'
+				filePath: myResourceStore.getQuery.filePath || '/'
 			})
 			.then((res) => {
 				props.callback(res)

+ 6 - 3
src/views/myResource/file/dialog/showFileDetail/Dialog.vue

@@ -65,6 +65,8 @@
 	import { ref, computed } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import { WarningOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
+	import { useMyResourceStore } from '@/store/myResource.js'
+	const myResourceStore = useMyResourceStore()
 
 	const router = useRouter()
 	const route = useRoute()
@@ -112,9 +114,10 @@
 	 * @param {object} fileInfo 文件信息
 	 */
 	const handleClickFilePath = (fileInfo) => {
-		router.push({
-			query: { filePath: fileInfo.filePath, fileType: 0 }
-		})
+		// router.push({
+		// 	query: { filePath: fileInfo.filePath, fileType: 0 }
+		// })
+		myResourceStore.changeQuery({ filePath: fileInfo.filePath, fileType: 0 })
 		handleDialogClose()
 	}
 

+ 1 - 1
src/views/myResource/resourceLibrary/file/AsideMenu.vue

@@ -183,7 +183,7 @@
 	const isCollapse = ref(false) // 控制菜单收缩展开
 
 	// 将计算属性改为响应式变量
-	const activeIndex = ref([String(route.query.fileType || '0')])
+	const activeIndex = ref([String(myResourceStore.getQuery.fileType ? myResourceStore.getQuery.fileType : '' || '0')])
 
 	// 菜单 index 和名称 Map
 	const myFileMenuMap = {

+ 29 - 21
src/views/myResource/resourceLibrary/file/FileList.vue

@@ -109,7 +109,9 @@
 
 	// 当前所在路径
 	const filePath = computed(() => {
-		return route.query.filePath ? route.query.filePath : '/'
+		// return route.query.filePath ? route.query.filePath : '/'
+		console.log('filePath', myResourceStore.getQuery.filePath)
+		return myResourceStore.getQuery.filePath ? myResourceStore.getQuery.filePath : '/'
 	})
 
 	// 文件查看模式 0列表模式 1网格模式 2 时间线模式
@@ -133,6 +135,7 @@
 			// if (path.query.fileType == 0) {
 
 			// }
+			myResourceStore.changeQuery(path.query)
 			fileType.value = path.query.fileType
 
 			setPageCount()
@@ -140,27 +143,31 @@
 		}
 	}
 	// 监听路径变化
-	// watch(
-	// 	() => filePath.value,
-	// 	() => {
-	// 		// 当左侧菜单选择"全部"或"我的分享",文件路径发生变化时,再重新获取文件列表
-	// 		if (route.name === 'resourceLibrary' && [0, 8].includes(fileType.value)) {
-	// 			setPageCount()
-	// 			getTableDataByType()
-	// 		}
-	// 	}
-	// )
+	watch(
+		() => filePath.value,
+		() => {
+			// 当左侧菜单选择"全部"或"我的分享",文件路径发生变化时,再重新获取文件列表
+			// if (route.name === 'resourceLibrary' && [0, 8].includes(fileType.value)) {
+			// 	setPageCount()
+			// 	getTableDataByType()
+			// }
+			setPageCount()
+			getTableDataByType()
+		}
+	)
 
 	// 监听文件类型变化
-	// watch(
-	// 	() => fileType.value,
-	// 	() => {
-	// 		if (route.name === 'resourceLibrary') {
-	// 			setPageCount()
-	// 			getTableDataByType()
-	// 		}
-	// 	}
-	// )
+	watch(
+		() => fileType.value,
+		() => {
+			// if (route.name === 'resourceLibrary') {
+			// 	setPageCount()
+			// 	getTableDataByType()
+			// }
+			setPageCount()
+			getTableDataByType()
+		}
+	)
 
 	// 监听文件查看模式
 	watch(
@@ -300,7 +307,8 @@
 	const showMyShareFile = () => {
 		let data = {
 			shareFilePath: filePath.value,
-			shareBatchNum: route.query.shareBatchNum,
+			// shareBatchNum: route.query.shareBatchNum,
+			shareBatchNum: myResourceStore.getQuery.shareBatchNum ? myResourceStore.getQuery.shareBatchNum : '',
 			currentPage: pageData.value.currentPage,
 			pageCount: pageData.value.pageCount
 		}

+ 5 - 0
src/views/myResource/resourceLibrary/index.vue

@@ -34,6 +34,11 @@
 	const onNavigateTo = (path) => {
 		fileList.value.navigateTo(path)
 	}
+
+	onMounted(() => {
+		//开始就有很多列
+		myResourceStore.changeSelectedColumnList(['extendName', 'fileSize', 'uploadTime', 'deleteTime'])
+	})
 </script>
 
 <style lang="less" scoped>