DiskFile.vue 添加删除文件/文件夹功能

src/api/disk.js

@@ -5,6 +5,7 @@ const diskApi = {
   renameFolderApi: '/api/content/disk/folder/rename',
   getFolderTreeApi: '/api/content/disk/folder/tree',
   addFileApi: '/api/content/disk/file/add',
+  deleteFileApi: '/api/content/disk/file/delete',
   moveFileApi: '/api/content/disk/file/move',
   diskFileApi: '/api/content/disk/file/list',
   filePreviewApi: '/api/content/disk/file/preview',
@@ -38,6 +39,10 @@ export function addFile(payload) {
   return post(diskApi.addFileApi, payload)
 }
 
+export function deleteFile(payload) {
+  return post(diskApi.deleteFileApi, payload)
+}
+
 export function moveFile(payload) {
   return post(diskApi.moveFileApi, payload)
 }

src/views/disk/DiskFile.vue

@@ -84,8 +84,9 @@
         />
       </el-table>
       <div style="margin-top: 20px">
-        <el-button v-if="selectedTable.length !== 0" @click="addToAlbum">添加 {{ selectedTable.length }} 到相册</el-button>
-        <el-button v-if="selectedTable.length !== 0" @click="moveToFolder">移动 {{ selectedTable.length }} 个文件</el-button>
+        <el-button v-if="selectedTable.length !== 0" type="primary" size="small" @click="addToAlbum">添加 {{ selectedTable.length }} 到合集</el-button>
+        <el-button v-if="selectedTable.length !== 0" type="primary" size="small" @click="moveToFolder">移动 {{ selectedTable.length }} 个文件</el-button>
+        <el-button v-if="selectedTable.length !== 0" type="primary" size="small" @click="onDeleteFile">删除 {{ selectedTable.length }} 个文件/文件夹</el-button>
       </div>
       <el-pagination
         background
@@ -218,18 +219,33 @@
       center
     >
       <el-table
-        :data="albumKeyValues"
+        :data="albumList"
         :show-header="true"
         style="width: 100%"
       >
         <el-table-column
-          prop="value"
-          label="相册 ID"
+          prop="albumName"
+          label="合集名"
         />
         <el-table-column
-          prop="label"
-          label="相册名"
-        />
+          prop="fileType"
+          label="合集类型"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.fileType === 1001" class="el-icon-picture">
+              图片
+            </span>
+            <span v-else-if="scope.row.fileType === 1002" class="el-icon-film">
+              视频
+            </span>
+            <span v-else-if="scope.row.fileType === 1003" class="el-icon-headset">
+              音频
+            </span>
+            <span v-else class="el-icon-files">
+              图片
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button
@@ -267,8 +283,9 @@
 <script>
 import {
   addFile,
-  createFolder, editAlbum,
-  getAlbumKeyValues,
+  createFolder, deleteFile,
+  editAlbum,
+  getAlbumList,
   getDiskChannelInfo,
   getDiskFile,
   getFileDetail,
@@ -308,7 +325,7 @@ export default {
       },
       // ****************************************************************************************************************
       showAddToAlbumUploadDialog: false,
-      albumKeyValues: [],
+      albumList: [],
       // ****************************************************************************************************************
       folderTree: [],
       defaultProps: {
@@ -371,26 +388,20 @@ export default {
         this.uploadForm.pid = this.currentPid
         this.uploadForm.uploadId = resp.data.uploadId
         addFile(this.uploadForm).then(resp0 => {
-          this.$message.info(resp0.msg)
+          if (resp0.code === 0) {
+            this.$message.info('文件 ' + file.file.name + ' 已添加到网盘中')
+          } else {
+            this.$message.info(resp0.msg)
+          }
         }).catch(error => {
           this.$message.error(error.message)
         })
       } else {
-        this.$notify({
-          title: '提示',
-          message: '文件上传失败',
-          type: 'warning',
-          duration: 3000
-        })
+        this.$message.error('文件上传失败')
       }
     },
     onFileError(rootFile, file, response, chunk) {
-      this.$notify({
-        title: '提示',
-        message: '文件上传错误',
-        type: 'warning',
-        duration: 3000
-      })
+      this.$message.error('文件上传错误')
     },
     onUploadComplete() {
       this.showUploadDialog = false
@@ -434,20 +445,10 @@ export default {
 
           this.showUploadDialog = true
         } else {
-          this.$notify({
-            title: '提示',
-            message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-            type: 'warning',
-            duration: 1000
-          })
+          this.$message.error('获取 OSS 服务器地址失败, 暂时无法上传文件')
         }
       }).catch(error => {
-        this.$notify({
-          title: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          message: error.message,
-          type: 'error',
-          duration: 1000
-        })
+        this.$message.error(error.message)
       })
     },
     // ****************************************************************************************************************
@@ -547,20 +548,20 @@ export default {
       this.selectedTable = val
     },
     addToAlbum() {
-      getAlbumKeyValues().then(resp => {
+      getAlbumList(1).then(resp => {
         if (resp.code === 0) {
-          this.albumKeyValues = resp.data
+          this.albumList = resp.data
           this.showAddToAlbumUploadDialog = true
         }
       })
     },
     onAddToAlbum(row) {
-      const albumId = row.value
+      const albumId = row.albumId
       const fileIds = []
       for (const item of this.selectedTable) {
         fileIds.push(item.fileId)
       }
-      /* const jsonData = {}
+      const jsonData = {}
       jsonData.albumId = albumId
       jsonData.operation = 1
       jsonData.fileIds = fileIds
@@ -568,8 +569,7 @@ export default {
         this.$message.info(resp.msg)
       }).catch(error => {
         this.$message.error(error.message)
-      })*/
-      this.$message.info('添加到合集')
+      })
 
       this.showAddToAlbumUploadDialog = false
       this.toggleSelection()
@@ -603,6 +603,35 @@ export default {
       this.showMoveToFolderDialog = false
       this.toggleSelection()
     },
+    onDeleteFile() {
+      this.$confirm('确定要删除选中的 ' + this.selectedTable.length + ' 个文件/文件夹?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        var fileIds = []
+        for (const item of this.selectedTable) {
+          fileIds.push(item.fileId)
+        }
+
+        const jsonData = {}
+        jsonData.fileIds = fileIds
+        deleteFile(jsonData).then(resp => {
+          if (resp.code === 0) {
+            this.$router.go(0)
+          } else {
+            this.$message.error(resp.msg)
+          }
+        }).finally(() => {
+          this.toggleSelection()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
     onSearchFile() {
       this.$message.info('search file')
     },