From 1235fcb78d7a45062874fb57980625f0e4874186 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 2 Mar 2020 10:36:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9F=A5=E6=89=BE=E4=B8=8B?=
 =?UTF-8?q?=E7=BA=A7=E6=96=87=E4=BB=B6=E5=A4=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/upload-api.js            |  27 +++++-
 src/components/Icon/IconFile.vue |   2 +-
 src/icons/svg/open-folder.svg    |   1 +
 src/layout/index.vue             |   2 +
 src/views/home/index.vue         | 156 ++++++++++++++++++++++++++++++-
 5 files changed, 180 insertions(+), 8 deletions(-)
 create mode 100644 src/icons/svg/open-folder.svg

diff --git a/src/api/upload-api.js b/src/api/upload-api.js
index 9191503..ed67a21 100644
--- a/src/api/upload-api.js
+++ b/src/api/upload-api.js
@@ -74,13 +74,36 @@ export default {
       params
     })
   },
-  // 搜索文件🔍
+  // 搜索文件🔍-打开目录
   searchFileAndOpenDir: function(params) {
     return request({
       url: 'search-file-open',
       method: 'get',
       params
     })
+  },
+  // 查找下级目录
+  queryFileTree: function(params) {
+    return request({
+      url: 'query-file-tree',
+      method: 'get',
+      params
+    })
+  },
+  // 移动文件/文件夹
+  move: function(params) {
+    return request({
+      url: 'move',
+      method: 'get',
+      params
+    })
+  },
+  // 复制文件/文件夹
+  copy: function(params) {
+    return request({
+      url: 'copy',
+      method: 'get',
+      params
+    })
   }
-
 }
diff --git a/src/components/Icon/IconFile.vue b/src/components/Icon/IconFile.vue
index a706b95..a1368fd 100644
--- a/src/components/Icon/IconFile.vue
+++ b/src/components/Icon/IconFile.vue
@@ -6,7 +6,7 @@
             <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
             <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
             <svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
-            <el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
+            <el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.path+'/'+item.name"></el-avatar>
             <svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
             <svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
             <svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
diff --git a/src/icons/svg/open-folder.svg b/src/icons/svg/open-folder.svg
new file mode 100644
index 0000000..c346bbd
--- /dev/null
+++ b/src/icons/svg/open-folder.svg
@@ -0,0 +1 @@
+<svg t="1582970424727" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5857" width="32" height="32"><path d="M861.9 822.16666667c0 31.1-25.2 56.2-56.2 56.2H103.5l98.3-454.2c0-31 25-56.2 56.1-56.2h646.2c31 0 56.1 25.2 56.1 56.2l-98.3 398zM215.8 325.76666667h632v-55.2c0-31-25.2-56.2-56.2-56.2h-337v-50.9c0-31-25.2-56.2-56.2-56.2H117.6c-31 0-56.2 25.2-56.2 56.2v658.6l98.2-440.2c0-30.9 25.2-56.1 56.2-56.1z m0 0" fill="#FFCA28" p-id="5858"></path></svg>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 990d151..3876e65 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -50,8 +50,10 @@ export default {
   mounted() {
     if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
       this.isShow = false
+      window.pc = false
     } else {
       this.isShow = true
+      window.pc = true
     }
   },
   methods: {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8e8ae01..f0fb6cb 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -56,6 +56,7 @@
       </div>
     </el-breadcrumb>
 
+    <!--右键菜单-->
     <e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
       <div class="popper-arrow"></div>
       <ul v-for="(item,index) in menus" :key="item.label">
@@ -79,6 +80,34 @@
       </ul>
     </e-vue-contextmenu>
 
+    <!--移动或复制弹出框-->
+    <el-dialog
+      :title="'移动或复制到'+selectTreeNode.showName"
+      :visible.sync="dialogMoveOrCopyVisible"
+    >
+        <el-tree
+          ref="directoryTree"
+          :data="directoryTreeData"
+          node-key="id"
+          :props="directoryTreeProps"
+          :load="directoryTreeLoadNode"
+          :highlight-current="true"
+          :default-expanded-keys="['0']"
+          :render-content="renderContent"
+          hight="100"
+          lazy
+          @node-click="treeNodeClick"
+          @node-expand="treeNodeExpand"
+        >
+      </el-tree>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogMoveOrCopyVisible = false"><i class="el-icon-folder-add"></i>&nbsp;&nbsp;新建文件夹</el-button>
+        <el-button type="primary" @click="moveFileTree">移 动</el-button>
+        <el-button type="primary" @click="copyFileTree">复制</el-button>
+        <el-button @click="dialogMoveOrCopyVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
     <!--<div class="dashboard-text">path: {{ path }}</div>-->
 
     <el-table
@@ -304,7 +333,15 @@ export default {
       renameLoading: false,
       menuTriangle: '', // 三角菜单
       cellMouseIndex: -1,
-      editingIndex: -1
+      editingIndex: -1,
+      dialogMoveOrCopyVisible: false,
+      directoryTreeData: [],
+      selectTreeNode: {},
+      directoryTreeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      }
     }
   },
   computed: {
@@ -530,6 +567,7 @@ export default {
         this.tableLoading = true
         api.searchFile({
           userId: this.$store.state.user.userId,
+          username: this.$store.state.user.name,
           keyword: key,
           currentDirectory: this.$route.query.path,
           pageIndex: this.pagination.pageIndex,
@@ -567,6 +605,7 @@ export default {
       this.tableLoading = true
       api.fileList({
         userId: this.$store.state.user.userId,
+        username: this.$store.state.user.name,
         currentDirectory: this.$route.query.path,
         pageIndex: this.pagination.pageIndex,
         pageSize: this.pagination.pageSize
@@ -939,6 +978,12 @@ export default {
           break
         case 'copy':
           console.log('移动或复制')
+          this.dialogMoveOrCopyVisible = true
+          const that = this
+          setTimeout(function () {
+            that.selectTreeNode = that.$refs.directoryTree.getCurrentNode()
+            that.selectTreeNode.showName = ' "' + that.selectTreeNode.name + '"'
+          },100)
           break
         case 'download':
           console.log('下载')
@@ -951,6 +996,76 @@ export default {
       }
       this.$refs.contextShow.hideMenu()
     },
+    // 加载下一级文件树
+    directoryTreeLoadNode(node, resolve) {
+      console.log(node)
+      let fileId = null
+      if (node.level === 0) {
+        const that = this
+        setTimeout(function () {
+          that.$refs.directoryTree.setCurrentKey('0')
+        },0)
+        return resolve([{'id':"0",'name':'全部文件'}])
+      }
+      if (node.level > 1){
+        fileId = node.data.id
+      }
+
+      api.queryFileTree({
+        userId: this.$store.state.user.userId,
+        username: this.$store.state.user.name,
+        fileId: fileId,
+      }).then(res => {
+        const nextNodes = res.data
+        return resolve(nextNodes)
+      })
+    },
+    // 点击文件树
+    treeNodeClick(row,node,event) {
+      this.selectTreeNode = row
+      this.selectTreeNode.showName = ' "' + row.name + '"'
+    },
+    // 节点被展开时触发
+    treeNodeExpand(row,node,event) {
+    },
+    // 移动文件
+    moveFileTree() {
+      this.$refs.directoryTree.append(this.rowContextData,this.selectTreeNode.id)
+      // this.dialogMoveOrCopyVisible = false
+    },
+    // 复制文件
+    copyFileTree() {
+      // this.dialogMoveOrCopyVisible = false
+      console.log(this.selectTreeNode)
+      this.$refs.directoryTree.append(this.rowContextData,this.selectTreeNode.id)
+      api.copy({
+        userId: this.$store.state.user.userId,
+        username: this.$store.state.user.username,
+        from: this.rowContextData.id,
+        to: this.selectTreeNode.id
+      }).then(res => {
+        console.log(res)
+      })
+    },
+    renderContent(h, { node, data, store }) {
+      if(node.expanded){
+        return (
+          <span class="custom-tree-node">
+          <svg-icon icon-class="open-folder" />
+          <span style="margin-left: 5px;">{node.label}</span>
+          <span>
+          </span>
+          </span>);
+      }else{
+        return (
+          <span class="custom-tree-node">
+          <svg-icon icon-class="folder" />
+          <span style="margin-left: 5px;">{node.label}</span>
+          <span>
+          </span>
+          </span>);
+      }
+    },
     downloadFile() {
       let totalSize = 0
       this.selectRowData.forEach(item => {
@@ -958,11 +1073,11 @@ export default {
       })
       if (totalSize > 0) {
         var fileIds = [];
-        if (this.menusIsMultiple) {
-          this.selectRowData.forEach(value => {
+      if (this.menusIsMultiple) {
+        this.selectRowData.forEach(value => {
             fileIds.push(value.id)
-          })
-        } else {
+        })
+      } else {
           fileIds.push(this.rowContextData.id)
         }
         window.open(process.env.VUE_APP_BASE_FILE_API + 'download?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds, '_self')
@@ -1265,5 +1380,36 @@ export default {
     margin-top: 50px;
   }
 
+  /deep/ .el-dialog__header {
+    padding: 20px 20px 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /deep/ .el-dialog__title {
+    font-size: 16px;
+  }
+  /deep/ .el-dialog__body {
+    padding: 0 20px 0 20px;
+  }
+  /deep/ .el-tree-node__content {
+    height: 35px;
+    /*border-bottom: 1px solid #ccc;*/
+    position: relative;
+  }
+
+  /deep/ .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+
+  /deep/ .el-tree-node.is-expanded>.el-tree-node__children {
+    max-height: 500px;
+    overflow: auto;
+  }
+
 </style>