Share interface to add a mount operation

src/components/FileTree/index.vue

@@ -3,7 +3,7 @@
     <el-tree
       ref="fileTree"
       :data="directoryTreeData"
-      :node-key="localFileMode?'path':'id'"
+      :node-key="localFileMode ? 'path' : 'id'"
       :props="directoryTreeProps"
       :load="localFileMode ? loadOfLocalFileMode : directoryTreeLoadNode"
       :highlight-current="true"
@@ -19,182 +19,257 @@
 </template>
 
 <script>
-  import api from '@/api/file-api'
+import api from "@/api/file-api";
-  import IconFile from "@/components/Icon/IconFile"
+import IconFile from "@/components/Icon/IconFile";
-  import SimTextPreview from "@/components/preview/SimTextPreview"
+import SimTextPreview from "@/components/preview/SimTextPreview";
-  import { iconClass,suffix } from '@/utils/file-type'
+import { iconClass } from "@/utils/file-type";
-  export default {
+
-    name: "FileTree",
+export default {
-    components: {IconFile,SimTextPreview},
+  name: "FileTree",
-    props: {
+  components: { IconFile, SimTextPreview },
-      directoryTreeData: {
+  props: {
-        type: Array,
+    directoryTreeData: {
-        default: () => []
+      type: Array,
-      },
+      default: () => []
-      localFileMode: { //本地文件模式, true:通过文件路径加载, false: 通用文件Id加载
-        type: Boolean,
-        default: true
-      },
-      tempDir: {
-        type: Boolean,
-        default: false
-      }
     },
-    data() {
+    localFileMode: {
-      return {
+      //本地文件模式, true:通过文件路径加载, false: 通用文件Id加载
-        directoryTreeProps: {
+      type: Boolean,
-          label: 'name',
+      default: true
-          children: 'children',
-          isLeaf: 'isLeaf'
-        }
-      }
     },
-    computed: {
+    tempDir: {
-      // 默认展开项
+      type: Boolean,
-      defaultExpandedKeys() {
+      default: false
-        if(!this.localFileMode){
+    },
-          return ['0']
+    showFooter: {
-        }else{
+      type: Boolean,
-          let keys = []
+      default: false
-          this.directoryTreeData.forEach(file => {
+    }
-            if(!file.isLeaf){
+  },
-              if(keys.length < 1){
+  data() {
-                keys.push(file.path)
+    return {
-              }
+      directoryTreeProps: {
+        label: "name",
+        children: "children",
+        isLeaf: "isLeaf"
+      }
+    };
+  },
+  created() {
+  },
+  computed: {
+    // 默认展开项
+    defaultExpandedKeys() {
+      if (!this.localFileMode) {
+        return ["0"];
+      } else {
+        let keys = [];
+        this.directoryTreeData.forEach(file => {
+          if (!file.isLeaf) {
+            if (keys.length < 1) {
+              keys.push(file.path);
             }
-          })
+          }
-          return keys
+        });
+        return keys;
+      }
+    }
+  },
+  methods: {
+    // 文件树里新建文件夹
+    fileTreeAndNewFolder(selectTreeNode) {
+      let newNodeId = "newFolderNodeKey";
+      let node = this.$refs.fileTree.getNode(newNodeId);
+      if (node !== null) {
+        this.$refs.fileTree.remove(node);
+      }
+
+      let childNodes = this.$refs.fileTree.store.currentNode.childNodes;
+      let newFolderName = this.getNewFileName(childNodes, "新建文件夹");
+      let newNode = {
+        id: newNodeId,
+        newFolder: true,
+        name: newFolderName,
+        showName: newFolderName,
+        isLeaf: true
+      };
+      this.$refs.fileTree.append(newNode, selectTreeNode);
+      setTimeout(function() {
+        let treeInput = document.getElementById("treeInput");
+        if (treeInput) {
+          treeInput.value = newFolderName;
+          treeInput.focus();
+          treeInput.select();
         }
-      },
+      }, 100);
     },
-    methods: {
+    getNewFileName(fileList, newFileName) {
-      // 加载下一级文件树  localFileMode = true
+      let append = 0;
-      loadOfLocalFileMode(node, resolve) {
+      let filenameList = [];
-        if (node.level === 0) {
+      fileList.forEach(file => {
-          return resolve(this.directoryTreeData)
+        let fileName = file.name || file.label;
+        filenameList.push(fileName);
+      });
+      const newName = newFileName;
+      while (filenameList.includes(newFileName)) {
+        append += 1;
+        if (newName.indexOf(".") > 0) {
+          const name = newName.substring(0, newName.lastIndexOf("."));
+          const suffix = newName.substring(newName.lastIndexOf("."));
+          newFileName = `${name}${append}${suffix}`;
+        } else {
+          newFileName = `${newName}${append}`;
         }
-        if (node.level > 0){
+      }
-          api.listfiles({
+      return newFileName;
+    },
+    // 加载下一级文件树  localFileMode = true
+    loadOfLocalFileMode(node, resolve) {
+      if (node.level === 0) {
+        return resolve(this.directoryTreeData);
+      }
+      if (node.level > 0) {
+        api
+          .listfiles({
             username: this.$store.state.user.name,
             path: encodeURI(node.data.path),
             tempDir: this.tempDir
-          }).then(res => {
-            const nextNodes = res.data.map(data => {
-              data.isLeaf = !data.isFolder
-              return data
-            })
-            return resolve(nextNodes)
           })
-        }
+          .then(res => {
-      },
+            const nextNodes = res.data.map(data => {
-      // 加载下一级文件树  localFileMode = false
+              data.isLeaf = !data.isFolder;
-      directoryTreeLoadNode(node, resolve) {
+              return data;
-        let fileId = null
+            });
-        if (node.level === 0) {
+            return resolve(nextNodes);
-          let data = [{'id':"0",'name':'全部文件'}]
+          });
-          const that = this
+      }
-          setTimeout(function () {
+    },
-            that.$refs.fileTree.setCurrentKey('0')
+    // 加载下一级文件树  localFileMode = false
-            that.$emit('treeNodeClick',data[0])
+    directoryTreeLoadNode(node, resolve) {
-          },0)
+      let fileId = null;
-          return resolve(data)
+      if (node.level === 0) {
-        }
+        let data = [{ id: "0", name: "全部文件" }];
-        if (node.level > 1){
+        const that = this;
-          fileId = node.data.id
+        setTimeout(function() {
-        }
+          that.$refs.fileTree.setCurrentKey("0");
-        api.queryFileTree({
+          that.$emit("treeNodeClick", data[0]);
+        }, 0);
+        return resolve(data);
+      }
+      if (node.level > 1) {
+        fileId = node.data.id;
+      }
+      api.queryFileTree({
           userId: this.$store.state.user.userId,
           username: this.$store.state.user.name,
-          fileId: fileId,
+          fileId: fileId
         }).then(res => {
-          const nextNodes = res.data
+          const nextNodes = res.data;
-          return resolve(nextNodes)
+          return resolve(nextNodes);
-        })
+        });
-      },
+    },
-      // 点击文件树
+    // 点击文件树
-      treeNodeClick(row) {
+    treeNodeClick(row) {
-        this.$emit('treeNodeClick',row)
+      this.$emit("treeNodeClick", row);
-      },
+    },
-      // 节点被展开时触发
+    // 节点被展开时触发
-      treeNodeExpand(row,node,event) {
+    treeNodeExpand(row, node, event) {},
-      },
+    renderContent(h, { node, data, store }) {
-      renderContent(h, { node, data, store }) {
+      if (data.newFolder) {
-        if(data.newFolder){
+        return (
-          return (
+          <span class="custom-tree-node">
-            <span class="custom-tree-node">
-            <span><svg-icon icon-class="folder" /></span>
             <span>
-            <div class="el-input el-input--mini el-input-tree">
+              <svg-icon icon-class="folder" />
-              <input type="text" autocomplete="on" value="新建文件夹" id="treeInput" class="el-input__inner"></input>
-            </div>
-            <button type="button" on-click={() => {
-              let path = '/'
-              let parentData = node.parent.data
-              if(parentData.path){
-                path = parentData.path + parentData.name + path
-              }
-              api.newFolder({
-                isFolder: true,
-                filename: encodeURI(data.name),
-                currentDirectory: encodeURI(path),
-                username: this.$store.state.user.name,
-                userId: this.$store.state.user.userId
-              }).then((res) => {
-                data.newFolder = false
-                data.id = res.data
-              }).catch(() => {
-                window.event.preventDefault()
-                window.event.stopPropagation()
-              })
-            }}
-                    class="el-button el-icon-check el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
-            <button type="button" on-click={() => {
-              this.$refs.fileTree.remove(node)
-              window.event.preventDefault()
-              window.event.stopPropagation()
-            }}
-                    class="el-button el-icon-close el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
             </span>
-            </span>);
+            <span>
-        }
+              <div class="el-input el-input--mini el-input-tree">
-        if(node.expanded){
+                <input
-          return (
+                  type="text"
-            <span class="custom-tree-node">
+                  autocomplete="on"
+                  value="新建文件夹"
+                  id="treeInput"
+                  class="el-input__inner"
+                />
+              </div>
+              <button type="button" on-click={() => {
+                let path = '/'
+                let parentData = node.parent.data
+                if (parentData.path) {
+                  path = parentData.path + parentData.name + path
+                }
+                let newFolderName = document.getElementById("treeInput").value
+                api.newFolder({
+                  isFolder: true,
+                  filename: encodeURI(newFolderName),
+                  currentDirectory: encodeURI(path),
+                  username: this.$store.state.user.name,
+                  userId: this.$store.state.user.userId
+                }).then((res) => {
+                  data.newFolder = false
+                  data.isFolder = true
+                  data.name = newFolderName
+                  data.id = res.data
+                }).catch(() => {
+                  window.event.preventDefault()
+                  window.event.stopPropagation()
+                })
+              }}
+                class="el-button el-icon-check el-button--mini el-input-tree-button"
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="#f6f7fa88"
+              />
+              <button
+                type="button"
+                on-click={() => {
+                  this.$refs.fileTree.remove(node);
+                  window.event.preventDefault();
+                  window.event.stopPropagation();
+                }}
+                class="el-button el-icon-close el-button--mini el-input-tree-button"
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="#f6f7fa88"
+              />
+            </span>
+          </span>
+        );
+      }
+      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>
+          </span>
-            </span>);
+        );
-        }else{
+      } else {
-          let iconClass = this.findIconClass(node.data)
+        let iconClass = this.findIconClass(node.data);
-          if(!this.localFileMode && node.data.id === '0'){
+        if (!this.localFileMode && node.data.id === "0") {
-            iconClass = 'folder'
+          iconClass = "folder";
-          }
+        }
-          return (
+        return (
-            <span class="custom-tree-node">
+          <span class="custom-tree-node">
-            <svg-icon icon-class={iconClass}/>
+            <svg-icon icon-class={iconClass} />
             <span style="margin-left: 5px;">{node.label}</span>
-            <span>
+            <span />
-            </span>
+          </span>
-            </span>);
+        );
-        }
-      },
-      findIconClass(file){
-        if(file.isFolder){
-          return 'folder'
-        }
-        let suffix = file.suffix;
-        if(!suffix && file.name){
-          suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
-        }
-        if(iconClass.has(suffix)){
-          return iconClass.get(suffix)
-        }
-        return 'file'
       }
+    },
+    findIconClass(file) {
+      if (file.isFolder) {
+        return "folder";
+      }
+      let suffix = file.suffix;
+      if (!suffix && file.name) {
+        suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      }
+      if (iconClass.has(suffix)) {
+        return iconClass.get(suffix);
+      }
+      return "file";
     }
   }
+};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-</style>

src/views/public/share/shareList.vue

@@ -10,7 +10,8 @@
           <span>{{ netdiskName }}</span>
         </div>
         <div class="share-header-content sharer" v-if="sharer">
-          <span><span class="user">{{ sharer.showName }}</span>的分享</span>
+          <el-button v-if="loginTitle.length > 0" type="primary" size="small" @click="loginOrMount"> {{ loginTitle }} </el-button>
+          <span class="user">{{ sharer.showName }}的分享</span>
           <el-avatar :src="sharerAvatarUrl"></el-avatar>
         </div>
       </div>
@@ -35,6 +36,15 @@
         </div>
       </el-breadcrumb>
     </div>
+
+    <el-dialog :title="'挂载到：' + selectTreeNode.showName" :visible.sync="mountToVisible">
+      <file-tree v-if="mountToVisible" :localFileMode="false" ref="fileTreeMount" @treeNodeClick="onTreeNodeClick"></file-tree>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="fileTreeAndNewFolder" :disabled="fileTreeAndNewFolderDisabled"><i class="el-icon-folder-add"></i>&nbsp;&nbsp;新建文件夹</el-button>
+        <el-button size="small" type="primary">挂载</el-button>
+      </div>
+    </el-dialog>
+
     <!--右键菜单-->
     <e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
       <div class="popper-arrow"></div>
@@ -284,9 +294,11 @@ import Clipboard from "clipboard";
 import OfficePreview from "@/components/preview/OfficePreview";
 import Logo from "@/components/Logo";
 import store from "@/store";
+import FileTree from "@/components/FileTree";
 
 export default {
   components: {
+    FileTree,
     Logo,
     OfficePreview, IconFile, BreadcrumbFilePath, AlLoading,
     AudioPreview, VideoPreview, ImageViewer, SimTextPreview
@@ -368,6 +380,7 @@ export default {
       dialogMoveOrCopyVisible: false,
       directoryTreeData: [],
       selectTreeNode: {},
+      fileTreeAndNewFolderDisabled: false,
       directoryTreeProps: {
         label: 'name',
         children: 'children',
@@ -404,13 +417,16 @@ export default {
       audioPreviewVisible: false,
       showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
       showSizeItem: this.$pc,// 列表模式下是否显示文件大小
-      sharer: undefined,//分享者信息
+      sharer: undefined,//分享者信息,
+      loginTitle: '',
       sharerAvatarUrl: '',
       netdiskName: 'JmalCloud',
       netdiskLogo: '',
       showShareCode: false,
       shareData: {},
-      extractionCode: ''
+      extractionCode: '',
+      mountToVisible: false,
+      mountFileData: [],
     }
   },
   computed: {
@@ -674,6 +690,7 @@ export default {
     getSharer() {
       api.getSharer({shareId: this.shareId}).then(res => {
         this.sharer = res.data
+        this.setLoginTitle()
         if (res.data) {
           this.sharerAvatarUrl = window.location.origin + this.imageUrl + res.data.avatar
           if (this.sharer.netdiskName) {
@@ -689,6 +706,17 @@ export default {
         }
       })
     },
+    setLoginTitle() {
+      if (this.$store.getters.token) {
+        if (this.sharer.userId === this.$store.getters.userId) {
+          this.loginTitle = ''
+        } else {
+          this.loginTitle = '挂载到我的云盘'
+        }
+      } else {
+        this.loginTitle = '登录'
+      }
+    },
     currentChange(pageIndex) {
       this.pagination.pageIndex = pageIndex
       if (this.pagination.fileId) {
@@ -934,6 +962,31 @@ export default {
       }
       this.$refs.contextShow.hideMenu()
     },
+    /**
+     * 登录或挂载
+     */
+    loginOrMount() {
+      if (this.$store.getters.token) {
+        // 挂载
+        this.mountToVisible = true
+        const that = this
+        // setTimeout(function () {
+        //   that.selectTreeNode = that.$refs.directoryTree.getCurrentNode()
+        //   that.selectTreeNode.showName = ' "' + that.selectTreeNode.name + '"'
+        // }, 100)
+      } else {
+        // 登录
+        this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
+      }
+    },
+    fileTreeAndNewFolder() {
+      this.$refs.fileTreeMount.fileTreeAndNewFolder(this.selectTreeNode)
+    },
+    onTreeNodeClick(row) {
+      this.fileTreeAndNewFolderDisabled = row.hasOwnProperty('newFolder');
+      this.selectTreeNode = row
+      this.selectTreeNode.showName = ' "' + row.name + '"'
+    },
     downloadFile(copy) {
       let totalSize = 0
       if (this.indexList.length > 0) {
@@ -1085,8 +1138,12 @@ export default {
   text-align: center;
   font-size: 18px;
   font-weight: 500;
-  margin-top: 20px;
+  margin-bottom: 10px;
-  height: 45px;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  justify-content: space-between;
 
   .logo {
     font-size: 20px;
@@ -1109,7 +1166,6 @@ export default {
     font-size: 14px;
     float: right;
     top: 10px;
-    margin-top: -34px;
 
     > > > .el-avatar {
       margin: 0 0 0 10px;
@@ -1211,5 +1267,13 @@ export default {
   margin-top: 10px;
 }
 
+>>> .el-input-tree {
+  width: 50% !important;
+}
+
+>>> .el-input-tree-button {
+  margin-left: 5px !important;
+}
+
 </style>