feat:新增文件批量删除和批量恢复的功能

CHANGELOG.md

@@ -15,6 +15,10 @@
 
 * 修复多次上传的BUG
 
+* 文件批量上传
+
+* 文件批量删除
+
 ## 2024-03-27
 
 ### ✨ Features | 新功能

src/views/personal/files.vue

@@ -20,7 +20,7 @@
         <div class="files-box">
             <Option 
                 class="option" 
-                v-if="isShowOptions"
+                v-show="isShowOptions"
                 :style="{left: optionLeft + 'px', top: optionTop + 'px'}"
                 @sendOptions="optionType"
             ></Option>
@@ -412,6 +412,7 @@ const sliceFileName = (name: string) => {
 
         .option {
             position: absolute;
+            z-index: 2000;
         }
 
         .files-contents {

src/views/personal/recycle.vue

@@ -1,10 +1,19 @@
 <template>
-    <div class="recycle-box">
+    <div class="recycle-box" @click="cancelShowPop($event)">
+        <div 
+            class="options"
+            v-show="isShowOptions"
+            :style="{left: optionsLeft + 'px', top: optionsTop + 'px'}"
+        >
+            <button @click="recoverFiles">恢复</button>
+            <button @click="deleteFiles">删除</button>
+        </div>
         <div 
             class="recycle-file-content"
             v-for="(file, index) of recycleFilesList.files"
             :key="index"
             @click="chooseFile(file)"
+            @contextmenu="openRecycleOptions($event, index)"
         >
             <div class="name-box">
                 <div class="checkbox" v-if="!file.isChoose"></div>
@@ -34,7 +43,13 @@
 import { ref, onMounted } from 'vue'
 import { getRecycleFilesList } from './utils'
 import type { responseRecycleFilesList } from './utils'
+import { post } from '@/utils/request'
 
+const ctxIndex = ref(-1)
+const optionsTop = ref(0)
+const optionsLeft = ref(0)
+const ctxTarget = ref()
+const isShowOptions = ref(false)
 const recycleFilesList = ref<responseRecycleFilesList>({
     files: [
         {
@@ -66,6 +81,66 @@ onMounted(async() => {
     })
 })
 
+const cancelShowPop = (e: MouseEvent) => {
+    isShowOptions.value = false
+    const target = e.target as HTMLElement
+    if (target.className !== ctxTarget.value.className && ctxTarget.value) {
+        ctxIndex.value = -1
+        ctxTarget.value = null
+    }
+}
+
+const deleteFiles = () => {
+    const fileIds = getFilesId()
+    post('/content/deleteFile', {
+        fileIds,
+        deleteType: 3
+    })
+    .then(async() => {
+        recycleFilesList.value = await getRecycleFilesList({
+            limit: 100,
+            backward: true,
+            offset: 0
+        })
+    })
+}
+const recoverFiles = () => {
+    const fileIds = getFilesId()
+    post('/content/recoverRecycleBinFile', {
+        fileIds
+    })
+    .then(async() => {
+        recycleFilesList.value = await getRecycleFilesList({
+            limit: 100,
+            backward: true,
+            offset: 0
+        })
+    })
+}
+
+const getFilesId = () => {
+    let fileId: string[] = []
+    recycleFilesList.value.files.forEach(file => {
+        if (file.isChoose) {
+            fileId.push(file.fileId)
+        }
+    })
+    if (ctxIndex.value !== -1) {
+        fileId.push(recycleFilesList.value.files[ctxIndex.value].fileId)
+    }
+    return fileId
+}
+
+const openRecycleOptions = (e: MouseEvent, index: number) => {
+    e.preventDefault()
+    isShowOptions.value = true
+    optionsLeft.value = e.clientX
+    optionsTop.value = e.clientY
+    if (!recycleFilesList.value.files[index].isChoose) {
+        ctxIndex.value = index
+        ctxTarget.value = e.target
+    }
+}
 const chooseFile = (file: any) => {
     file.isChoose = !file.isChoose
 }
@@ -77,12 +152,40 @@ const chooseFile = (file: any) => {
     height: 100%;
     padding: 10px 10px;
 
+    .options {
+        position: absolute;
+        width: 120px;
+        height: 60px;
+        background-color: #fff;
+        box-shadow: 0 0 10px 1px rgb(214, 214, 214);
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        button {
+            width: 100%;
+            height: 30px;
+            background-color: #fff;
+            border: none;
+            cursor: pointer;
+            text-align: center;
+        }
+        button:hover {
+            background-color: #f5f5f5;
+        }
+        button:last-child {
+            color: red;
+        }
+    }
+
     .recycle-file-content {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;
         border-bottom: 1px solid #e5e5e5;
+        cursor: pointer;
 
         .name-box {
             width: 77%;