From 173746d6b3395b4d8a4c7c008ccefe68eacfc2bd Mon Sep 17 00:00:00 2001 From: ppo-0 <1304578864@qq.com> Date: Fri, 2 Feb 2024 14:45:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/personal/personal.vue | 253 +++++++++++++++++++++++++++++++- src/views/personal/utils.ts | 30 +++- 2 files changed, 277 insertions(+), 6 deletions(-) diff --git a/src/views/personal/personal.vue b/src/views/personal/personal.vue index 894d894..f0e32fa 100644 --- a/src/views/personal/personal.vue +++ b/src/views/personal/personal.vue @@ -101,6 +101,43 @@ +
+
+
+
移动到
+ +
+
+
path
+
+ + + +
+
+
+ +
{{ file.name }}
+
+
+
+ +
+
@@ -144,9 +181,9 @@ :style="{left: filePopupLeft + 'px', top: filePopupRight + 'px'}" >
上传至社区
-
查看详细信息
+
查看详细信息
下载
-
移动
+
移动
删除
移至回收站
@@ -216,8 +253,11 @@ import Search from '@/components/search.vue' import Popup from '@/views/personal/popup.vue' import { useStore } from '@/store/index'; import { ref, onMounted, computed, onUpdated } from 'vue' -import { getPrivateFiles, getFatherIdFromHerf, type createFiles } from './utils' +import { getPrivateFiles, getFatherIdFromHerf, getFolderList } from './utils' +import type { createFiles } from './utils' import type { Ref } from 'vue' +import { post } from '@/utils/request'; +import { successMsg } from '@/utils/message'; const files = ref() const music = ref() @@ -230,22 +270,28 @@ const isImages = ref(false) const isradios = ref(false) const isMusic = ref (false) const isFilePopup = ref(false) +const isMoveFiles = ref(false) const isClickPopup = ref(false) const isCreateFolder = ref(false) const isContexmenuPopup = ref(false) const isShowFileDetails = ref(false) -const path = ref([]) +const isMoveCreateFolder = ref(false) const nowPath = ref('') const userId = ref('') const fatherId = ref('') const createFolderName = ref('新建文件夹') +const moveCreateFolderName = ref('新建文件夹') +const path = ref([]) const filesList = ref([]) +const moveFoldersList = ref([]) +const tempMoveFolderList = ref([]) const popupLeft = ref(0) const popupRight = ref(0) const drawerLeft = ref(0) const filePopupLeft = ref(0) const filePopupRight = ref(0) const nowClickFileIndex = ref(-1) +const nowClickFolderIndex = ref(-1) const contentsMaginLeft = ref(140) const createFolderData = ref({ file: { @@ -299,6 +345,62 @@ const checkFileDetail = () => { } } +const moveFiles = () => { + isMoveFiles.value = true + isFilePopup.value = false + moveFoldersList.value = getFolderList(userId.value) +} +const cancelMoveFiles = () => { + isMoveFiles.value = false +} +const enterFolder = (index: number) => { + tempMoveFolderList.value.push(moveFoldersList.value) + moveFoldersList.value = getFolderList(moveFoldersList.value[index].fileId) + nowClickFolderIndex.value = index +} +const createFolder = () => { + isMoveCreateFolder.value = true +} +const confirmMoveCreateFolder = () => { + isMoveCreateFolder.value = false + const data = { + file: { + name: moveCreateFolderName.value, + url: '', + type: '文件夹', + fatherId: userId.value, // 这里需要修改 + spaceSize: -1, + } + } + post('/content/createFile', data) + .then(() => { + //需要修改 + filesList.value = getPrivateFiles(userId.value) + moveFoldersList.value = getFolderList(userId.value) + moveCreateFolderName.value = '新建文件夹' + successMsg('创建成功') + }) +} +const confirmMove = () => { + const tempFileId = filesList.value[nowClickFileIndex.value].fileId + const tempFatherId = tempMoveFolderList.value[0][nowClickFolderIndex.value].fileId + + post('/content/moveFile', { + fileId: tempFileId, + fatherId: tempFatherId, + }) + .then(() => { + if (fatherId.value === tempFatherId) { + filesList.value = getPrivateFiles(fatherId.value) + } + if (tempFileId.value === fatherId.value) { + filesList.value = getPrivateFiles(fatherId.value) + } + isMoveFiles.value = false + successMsg('移动成功') + }) +} + const cancelShowFileDetails = () => { isShowFileDetails.value = false } @@ -617,7 +719,7 @@ const clickMusic = () => { position: absolute; width: 100%; height: 100%; - z-index: 11; + z-index: 12; background-color: #cbcbcb3e; .create-folder { @@ -686,6 +788,147 @@ const clickMusic = () => { } } + + .move-files { + position: absolute; + width: 100%; + height: 100%; + z-index: 11; + padding: 50px; + background-color: #cbcbcb3e; + display: flex; + overflow: auto; + + .move-box { + position: relative; + width: 400px; + height: 500px; + background-color: rgb(240, 245, 254); + box-shadow: 0 0 30px 2px rgba(5, 5, 5, 0.1); + margin: auto; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .move-box-header { + width: 100%; + display: flex; + justify-content: space-between; + + i { + font-size: 20px; + cursor: pointer; + } + } + + .move-box-section { + width: 380px; + height: 400px; + background-color: #fff; + overflow-y: auto; + + .move-add-folder { + width: 100%; + height: 50px; + padding-left: 10px; + cursor: pointer; + font-size: 15px; + color: #1d1d1e; + background-color: #f5f5f5; + display: flex; + align-items: center; + + i:first-child { + font-size: 30px; + color: rgb(95, 134, 185); + margin-right: 10px; + } + + input { + width: 250px; + height: 30px; + border-radius: 5px; + border: 1px solid rgb(130, 149, 182); + padding-left: 10px; + margin-right: 50px; + } + input:hover { + border: 1px solid rgb(26, 73, 136); + } + input:focus { + outline: none; + border: 1px solid rgb(26, 73, 136); + } + + i:last-child { + font-size: 18px; + color: #d83b3b; + } + } + + .move-filesList-box { + display: flex; + overflow-x: hidden; + + .move-filesList-contents { + width: 100%; + height: 50px; + padding-left: 10px; + cursor: pointer; + display: flex; + align-items: center; + font-size: 15px; + color: #1d1d1e; + + i { + font-size: 30px; + color: rgb(95, 134, 185); + margin-right: 10px; + } + } + + .move-filesList-contents:hover { + background-color: #f5f5f5; + } + } + } + + .move-box-footer { + width: 380px; + height: 30px; + display: flex; + justify-content: space-between; + align-items: center; + + i { + font-size: 30px; + color: rgb(66, 100, 159); + cursor: pointer; + transition: all 0.1s; + } + i:active { + transform: scale(0.9); + } + + button { + width: 100px; + height: 30px; + font-size: 16px; + border: none; + border-radius: 3px; + color: rgb(66, 100, 159); + box-shadow: 0 0 3px 0.2px rgb(85, 138, 212); + background-color: rgb(250, 236, 228); + transition: all 0.1s; + } + button:active { + transform: scale(0.9); + } + } + } + } + .contents { /* width: 100%; */ height: 100%; diff --git a/src/views/personal/utils.ts b/src/views/personal/utils.ts index 5d9842e..30c7592 100644 --- a/src/views/personal/utils.ts +++ b/src/views/personal/utils.ts @@ -27,7 +27,7 @@ export interface getPrivateFiles { }, filterOptions: { onlyFatherId: string, - onlyFileType?: number + onlyType?: string[] }, paginationOptions?: { limit?: number, @@ -36,6 +36,7 @@ export interface getPrivateFiles { offset?: number, } } + //搜索、查询用户文件列表api export const getPrivateFiles = (id: string) => { const data = ref({ @@ -60,6 +61,30 @@ export const getPrivateFiles = (id: string) => { return filesList.value } +//获取文件夹名列表 +export const getFolderList = (id: string) => { + const data = ref({ + filterOptions: { + onlyFatherId: id, + onlyType: ['文件夹'] + }, + paginationOptions: { + limit: 40, + } + }) + const foldersList = ref([]) + post('/content/getPrivateFiles', data.value) + .then((res: any) => { + for (let i = 0; i < res.files.length; i ++) { + foldersList.value.push(res.files[i]) + } + }) + console.log(foldersList.value); + + return foldersList.value +} + +//从url中获取fatherId const store = useStore() export const getFatherIdFromHerf = () => { if (store.fatherId === "") { @@ -73,6 +98,7 @@ export const getFatherIdFromHerf = () => { } } +//时间戳转换 const getFileTime = (time: number): string => { const date = new Date(time); const year = date.getFullYear(); @@ -82,6 +108,8 @@ const getFileTime = (time: number): string => { const minutes = date.getMinutes().toString().padStart(2, '0'); return `${year}/${month}/${day} ${hours}:${minutes}`; } + +//文件大小转换 const getFileSize = (bits: number): string => { if (bits < 0) return '0B'; else if (bits < 1024) {