Browse Source

更新 disk 相关页面和接口

reghao 2 years ago
parent
commit
b007382860
2 changed files with 130 additions and 46 deletions
  1. 117 40
      src/views/disk/FileList.vue
  2. 13 6
      src/views/disk/UploadFile.vue

+ 117 - 40
src/views/disk/FileList.vue

@@ -1,7 +1,16 @@
 <template>
   <el-row>
     <el-row>
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-form-item>
+          <el-button size="mini" type="danger" @click="goToUpload">上传</el-button>
+          <el-button size="mini" type="danger" @click="downloadFile">下载</el-button>
+          <el-button size="mini" type="danger" @click="deleteMultiple">删除</el-button>
+          <el-button size="mini" type="danger" @click="createNewFolder">新建文件夹</el-button>
+          <el-button size="mini" type="danger" @click="move(1)">移动</el-button>
+          <el-button size="mini" type="danger" @click="move(2)">复制</el-button>
+          <el-button size="mini" type="danger" @click="share">分享</el-button>
+        </el-form-item>
         <el-form-item>
           <el-select v-model="searchForm.fileType" placeholder="文件类型" @change="search">
             <el-option label="全部" value="0" />
@@ -18,20 +27,20 @@
           <el-button size="mini" type="warning" @click="search">查询</el-button>
         </el-form-item>
       </el-form>
-      <el-form :inline="true" class="demo-form-inline" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-button size="mini" type="danger" @click="goToUpload">上传</el-button>
-        <el-button size="mini" type="danger" @click="downloadFile">下载</el-button>
-        <el-button size="mini" type="danger" @click="deleteMultiple">删除</el-button>
-        <el-button size="mini" type="danger" @click="createNewFolder">新建文件夹</el-button>
-        <el-button size="mini" type="danger" @click="move">移动</el-button>
-        <el-button size="mini" type="danger" @click="move">复制</el-button>
-        <el-button size="mini" type="danger" @click="share">分享</el-button>
-      </el-form>
-      <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-breadcrumb-item v-for="(item, index) of parentDirs" :key="index">
-          <a href="javascript:void(0)" style="text-decoration-line: none" @click="goTo(item.path)">{{ item.filename }}</a>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+    </el-row>
+    <el-row>
+      <el-col :md="2">
+        <span>当前路径:</span>
+      </el-col>
+      <el-col :md="22">
+        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-breadcrumb-item v-for="(item, index) of parentDirs" :key="index">
+            <a href="javascript:void(0)" style="text-decoration-line: none" @click="goTo(item.path)">{{ item.filename }}</a>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-col>
+    </el-row>
+    <el-row>
       <el-table
         ref="multipleTable"
         :data="dataList"
@@ -132,7 +141,7 @@
       />
     </el-row>
 
-    <!--录弹窗-->
+    <!--创建新目录弹窗-->
     <el-dialog
       title="创建新目录"
       append-to-body
@@ -183,12 +192,42 @@
         </div>
       </div>
     </el-dialog>
+    <!--移动/复制弹窗-->
+    <el-dialog
+      title="移动文件"
+      append-to-body
+      :visible.sync="moveDialog"
+      width="50%"
+      center
+    >
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
+          <div slot="header" class="clearfix">
+            <span>选择目录</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onMove">确定</el-button>
+          </div>
+          <div class="item">
+            <el-tree
+              :accordion="true"
+              :data="treeNode"
+              :props="defaultProps"
+              highlight-current
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }">
+                <span :class="data.icon">{{ node.label }}</span>
+              </span>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-row>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
 import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
-import { getFileList, deleteDiskFile, addDiskFolder, getFileDetail, getFileUrl } from '@/api/disk'
+import { getFileList, deleteDiskFile, addDiskFolder, getFileDetail, getFileUrl, getFolderTree } from '@/api/disk'
 
 export default {
   name: 'FileList',
@@ -209,31 +248,26 @@ export default {
       },
       currentDir: '/',
       multipleSelection: [],
-      parentDirs: [
-        {
-          filename: '/',
-          path: '/'
-        },
-        {
-          filename: '图片',
-          path: '/图片'
-        },
-        {
-          filename: '照片',
-          path: '/图片/照片'
-        },
-        {
-          filename: '2023',
-          path: '/图片/照片/2023'
-        }
-      ],
+      parentDirs: [],
       createFolderDialog: false,
       createFolderForm: {
         parent: null,
         folderName: null
       },
       previewFileDialog: false,
-      fileDetail: null
+      fileDetail: null,
+      moveDialog: false,
+      treeNode: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'value'
+      },
+      moveForm: {
+        type: 1,
+        fileId: null,
+        fileIds: []
+      }
     }
   },
   created() {
@@ -259,8 +293,8 @@ export default {
         if (resp.code === 0) {
           this.dataList = resp.data.fileList.list
           this.totalSize = resp.data.fileList.totalSize
-
           this.parentDirs = resp.data.pathList
+          this.currentDir = this.parentDirs[this.parentDirs.length - 1].path
         } else {
           this.$notify({
             title: '提示',
@@ -376,7 +410,9 @@ export default {
       }
     },
     goTo(path) {
-      console.log('go to ' + path)
+      this.searchForm.page = 1
+      this.searchForm.path = path
+      this.getData(this.searchForm)
     },
     previewFile(fileType, fileId) {
       getFileUrl(fileType, fileId).then(resp => {
@@ -403,8 +439,49 @@ export default {
         }
       })
     },
-    move() {
-      console.log('移动/复制文件')
+    move(type) {
+      if (this.multipleSelection.length === 0) {
+        this.$notify({
+          message: '至少应选中一行',
+          type: 'warning',
+          duration: 3000
+        })
+        return
+      }
+
+      this.moveForm.type = type
+      for (const item of this.multipleSelection) {
+        this.moveForm.fileIds.push(item.fileId)
+      }
+
+      getFolderTree().then(resp => {
+        if (resp.code === 0) {
+          this.treeNode = resp.data
+          this.moveDialog = true
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'error',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
+    handleNodeClick(data) {
+      this.moveForm.fileId = data.fileId
+    },
+    onMove() {
+      console.log(this.moveForm)
+      this.moveDialog = false
+      this.$refs.multipleTable.clearSelection()
     },
     share() {
       console.log('分享文件')

+ 13 - 6
src/views/disk/UploadFile.vue

@@ -26,7 +26,12 @@
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>上传文件到 <span style="color: red">{{ currentDir }}</span></span>
+            <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+              <span>存储节点: <span style="color: blue">{{ ossUrl }}</span></span>
+            </el-row>
+            <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+              <span>上传文件到目录: <span style="color: red">{{ currentDir }}</span></span>
+            </el-row>
           </div>
           <div class="text item">
             <uploader
@@ -80,6 +85,8 @@ export default {
         accept: '*'
       },
       // ****************************************************************************************************************
+      ossUrl: null,
+      // ****************************************************************************************************************
       treeNode: [],
       defaultProps: {
         children: 'children',
@@ -100,6 +107,7 @@ export default {
     getServerInfo(1).then(resp => {
       if (resp.code === 0) {
         const resData = resp.data
+        this.ossUrl = resData.ossUrl
         this.options.target = resData.ossUrl
         this.options.chunkSize = resData.maxSize
         this.options.headers.Authorization = 'Bearer ' + resData.token
@@ -163,8 +171,9 @@ export default {
         this.form.fileUrl = resp.data.url
 
         const jsonData = {}
-        jsonData.pid = this.pid
+        jsonData.ossUrl = this.ossUrl
         jsonData.uploadId = resp.data.uploadId
+        jsonData.pid = this.pid
         this.addDiskFile(jsonData)
       } else {
         this.$notify({
@@ -185,10 +194,8 @@ export default {
     },
     // ****************************************************************************************************************
     handleNodeClick(data) {
-      console.log(data)
-      this.currentPage = 1
-      // this.categoryId = data.value
-      // this.videoPageWrapper(this.categoryId, this.currentPage)
+      this.pid = data.fileId
+      this.currentDir = data.label
     },
     addDiskFile(jsonData) {
       addDiskFile(jsonData).then(resp => {