views/disk/DiskFile.vue 更新创建目录和移动文件操作

src/api/disk.js

@@ -1,6 +1,10 @@
 import { get, post } from '@/utils/request'
 
 const diskApi = {
+  createFolderApi: '/api/content/disk/folder/create',
+  renameFolderApi: '/api/content/disk/folder/rename',
+  getFolderTreeApi: '/api/content/disk/folder/tree',
+  moveFileApi: '/api/content/disk/file/move',
   diskFileApi: '/api/content/disk/file/list',
   filePreviewApi: '/api/content/disk/file/preview',
   createAlbumApi: '/api/content/disk/album/create',
@@ -16,6 +20,22 @@ const diskApi = {
   getDiskChannelInfoApi: '/api/file/oss/serverinfo/file'
 }
 
+export function createFolder(payload) {
+  return post(diskApi.createFolderApi, payload)
+}
+
+export function renameFolder(payload) {
+  return post(diskApi.renameFolderApi, payload)
+}
+
+export function getFolderTree() {
+  return get(diskApi.getFolderTreeApi)
+}
+
+export function moveFile(payload) {
+  return post(diskApi.moveFileApi, payload)
+}
+
 export function getDiskFile(query) {
   return get(diskApi.diskFileApi, query)
 }

src/views/disk/DiskFile.vue

@@ -27,6 +27,7 @@
       </el-breadcrumb>
       <el-divider />
       <el-table
+        ref="multipleTable"
         :data="dataList"
         :show-header="true"
         style="width: 100%"
@@ -76,6 +77,7 @@
       </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>
       </div>
       <el-pagination
         background
@@ -146,7 +148,7 @@
         <el-form ref="createFolderForm" :model="createFolderForm">
           <el-form-item label="当前文件夹" label-width="120px" prop="title">
             <el-input
-              v-model="createFolderForm.path"
+              v-model="createFolderForm.parentPath"
               style="margin-left: 5px"
               readonly
             />
@@ -226,11 +228,40 @@
         </el-table-column>
       </el-table>
     </el-dialog>
+    <el-dialog
+      :visible.sync="showMoveToFolderDialog"
+      width="50%"
+      center
+    >
+      <div style="padding: 5px;">
+        <el-card style="padding: 5px;">
+          <div slot="header" class="clearfix">
+            <span>目录树</span>
+          </div>
+          <div class="text item">
+            <el-tree :data="folderTree" :props="defaultProps" @node-click="handleNodeClick"/>
+          </div>
+        </el-card>
+        <el-button
+          style="padding: 5px;"
+          size="mini"
+          @click="onMoveToFolder"
+        >确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { addToAlbum, getAlbumKeyValues, getDiskChannelInfo, getDiskFile, getFileDetail } from '@/api/disk'
+import {
+  addToAlbum,
+  createFolder,
+  getAlbumKeyValues,
+  getDiskChannelInfo,
+  getDiskFile,
+  getFileDetail,
+  getFolderTree, moveFile
+} from '@/api/disk'
 import { hashFile } from '@/utils/functions'
 
 export default {
@@ -259,13 +290,24 @@ export default {
       // ****************************************************************************************************************
       showCreateFolderDialog: false,
       createFolderForm: {
-        path: '/',
+        parentPath: '/',
         folderName: null
       },
       // ****************************************************************************************************************
       showAddToAlbumUploadDialog: false,
       albumKeyValues: [],
       // ****************************************************************************************************************
+      folderTree: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      showMoveToFolderDialog: false,
+      moveFileForm: {
+        pid: null,
+        fileIds: []
+      },
+      // ****************************************************************************************************************
       showUploadDialog: false,
       options: {
         target: '',
@@ -449,8 +491,16 @@ export default {
       this.showCreateFolderDialog = true
     },
     createFolder() {
-      console.log(this.createFolderForm)
       this.showCreateFolderDialog = false
+      createFolder(this.createFolderForm).then(resp => {
+        if (resp.code === 0) {
+          this.$router.go(0)
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
     // ****************************************************************************************************************
     handleCurrentChange(pageNumber) {
@@ -506,11 +556,57 @@ export default {
         this.$message.info(resp.msg)
       }).finally(() => {
         this.showAddToAlbumUploadDialog = false
-        this.selectedTable = []
+        this.toggleSelection()
+      })
+    },
+    moveToFolder() {
+      for (const item of this.selectedTable) {
+        this.moveFileForm.fileIds.push(item.fileId)
+      }
+      getFolderTree().then(resp => {
+        if (resp.code === 0) {
+          this.folderTree = resp.data
+          this.showMoveToFolderDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
       })
     },
+    handleNodeClick(data) {
+      this.moveFileForm.pid = data.fileId
+      const label = data.label
+      this.$message.info('移动文件到 ' + label + ' 目录')
+    },
+    onMoveToFolder() {
+      moveFile(this.moveFileForm).then(resp => {
+        this.$message.info(resp.msg)
+      }).catch(error => {
+        this.$message.info(error.message)
+      })
+      this.showMoveToFolderDialog = false
+      this.toggleSelection()
+    },
     onSearchFile() {
       this.$message.info('search file')
+    },
+    toggleSelection() {
+      this.toggleSelection0(this.selectedTable)
+      this.selectedTable = []
+    },
+    // 取消选中
+    toggleSelection0(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row)
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
     }
   }
 }