From 8fdd1d83853b92333d81092d5074718f388e748b Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 24 Aug 2020 23:48:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E6=B7=BB=E5=8A=A0=E9=80=89=E6=8B=A9=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileTree/DirTree.vue | 221 ++++++++++++++++++++++++++++
 src/views/markdown/index.vue        |  43 +++---
 2 files changed, 244 insertions(+), 20 deletions(-)
 create mode 100644 src/components/FileTree/DirTree.vue

diff --git a/src/components/FileTree/DirTree.vue b/src/components/FileTree/DirTree.vue
new file mode 100644
index 0000000..d84e92e
--- /dev/null
+++ b/src/components/FileTree/DirTree.vue
@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <!--移动或复制弹出框-->
+    <el-dialog
+      :title="selectTreeNode.showName"
+      :visible.sync="visible"
+      @close="clearTreeNode"
+    >
+      <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 size="small" @click="fileTreeAndNewFolder"><i class="el-icon-folder-add"></i>&nbsp;&nbsp;新建文件夹</el-button>
+        <span class="dialog-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </span>
+        <el-button size="small" @click="visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import api from "@/api/file-api";
+
+export default {
+  name: "DirTree",
+  props: {
+    currentDir: {
+      type: String,
+      default: '/'
+    },
+    unzip: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      directoryTreeData: [],
+      selectTreeNode: {},
+      directoryTreeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      }
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+      const that = this
+      setTimeout(function (){
+        if(!that.selectTreeNode.showName){
+          that.selectTreeNode = that.$refs.directoryTree.getCurrentNode()
+          that.selectTreeNode.showName = that.selectTreeNode.name
+        }
+      },100)
+    },
+    hide() {
+      this.visible = false
+    },
+    getSelectTreeNode() {
+      return this.selectTreeNode
+    },
+    clearTreeNode() {
+      let rootNode = this.$refs.directoryTree.getNode('0')
+      rootNode.loaded = false
+      rootNode.expanded = false
+    },
+    // 加载下一级文件树
+    directoryTreeLoadNode(node, resolve) {
+      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) {
+    },
+    // 文件树里新建文件夹
+    fileTreeAndNewFolder() {
+      let newNodeId = 'newFolderNodeKey'
+      let node = this.$refs.directoryTree.getNode(newNodeId)
+      if (node !== null) {
+        this.$refs.directoryTree.remove(node)
+      }
+
+      let childNodes = this.$refs.directoryTree.store.currentNode.childNodes
+      let newFolderName = this.getNewFileName(childNodes, '新建文件夹')
+      let newNode = {
+        id: newNodeId,
+        newFolder: true,
+        name: newFolderName,
+        showName: newFolderName,
+        isLeaf: true
+      }
+      this.$refs.directoryTree.append(newNode, this.selectTreeNode)
+      const that = this
+      setTimeout(function () {
+        let treeInput = document.getElementById("treeInput")
+        if (treeInput) {
+          treeInput.value = newFolderName
+          treeInput.focus()
+          treeInput.select()
+        }
+      }, 100)
+    },
+    getNewFileName(fileList, newFolderName) {
+      let append = 0
+      let filenameList = []
+      fileList.forEach(file => {
+        filenameList.push(file.name || file.label)
+      })
+      const newName = newFolderName
+      while (filenameList.includes(newFolderName)) {
+        append += 1
+        newFolderName = newName + append
+      }
+      return newFolderName
+    },
+    renderContent(h, {node, data, store}) {
+      if (data.newFolder) {
+        return (
+          <span class="custom-tree-node">
+            <span><svg-icon icon-class="folder"/></span>
+            <span>
+            <div class="el-input el-input--mini el-input-tree">
+            <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: data.name,
+                currentDirectory: path,
+                username: this.$store.state.user.name,
+                userId: this.$store.state.user.userId
+              }).then((res) => {
+                data.newFolder = false
+                data.id = res.data.id
+              }).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.directoryTree.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>);
+      }
+      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>);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/index";
+@import "src/styles/home-index";
+</style>
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index a477a40..f8d826b 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -1,19 +1,14 @@
 <template>
   <div>
-
-    <el-dialog title="文件夹选择文件夹" :visible.sync="selectLocaltionVisible">
-      <file-tree :directoryTreeData="directoryTreeData"></file-tree>
-    </el-dialog>
-
+    <dir-tree ref="dirTree">
+        <el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
+    </dir-tree>
     <el-header height="120px">
       <div class="header-item">
         文章标题：
-        <el-input placeholder="文章标题" v-model="filename"/>
-      </div>
-      <div class="header-item">
-        存储位置：
-        <el-input placeholder="存储位置" v-model="storageLocation">
-          <el-button slot="append" @click="selectDir">选择</el-button>
+        <el-input class="articles-title" placeholder="文章标题" v-model="filename"/>
+        <el-input class="articles-storage" placeholder="存储位置" v-model="storageLocation" :readonly="true" @click="selectDir">
+          <el-button slot="prepend" @click="selectDir">选择位置</el-button>
         </el-input>
         <el-button v-if="!editStatus" class="release-button" type="primary" @click="add" :loading="adding">发布文章</el-button>
         <el-button v-if="editStatus" class="release-button" type="primary" @click="update" :loading="updating">更新文章</el-button>
@@ -38,10 +33,10 @@
 <script>
   import markdownApi from '@/api/markdown-api'
   import uploadApi from '@/api/file-api'
-  import FileTree from"@/components/FileTree"
+  import DirTree from"@/components/FileTree/DirTree"
   export default {
     components: {
-      FileTree
+      DirTree
     },
     data() {
       return {
@@ -53,8 +48,7 @@
         updating: false,
         adding: false,
         storageLocation: '/',
-        selectLocaltionVisible: false,
-        directoryTreeData: []
+        selectLocationVisible: false,
       }
     },
     mounted() {
@@ -65,6 +59,7 @@
         }).then((res) => {
           this.content = res.data.contentText
           this.filename = res.data.name.split('.md')[0]
+          this.storageLocation = res.data.path
         })
       }
       const that = this
@@ -117,12 +112,10 @@
         }
       },
       imageFilter() {
-        console.log('imageFilter')
         return true
       },
       // add
       add(){
-        console.log("this.content",this.content)
         this.adding = true
         if(this.filename){
           const filename = this.filename + ".md"
@@ -130,6 +123,7 @@
             userId: this.$store.state.user.userId,
             username: this.$store.state.user.name,
             filename: filename,
+            currentDirectory: this.storageLocation,
             contentText: this.content
           }).then((res) => {
             this.adding = false
@@ -152,6 +146,7 @@
             userId: this.$store.state.user.userId,
             username: this.$store.state.user.name,
             filename: filename,
+            currentDirectory: this.storageLocation,
             contentText: this.content
           }).then(() => {
             this.updating = false
@@ -164,7 +159,13 @@
         }
       },
       selectDir(){
-        this.selectLocaltionVisible = true
+        this.$refs.dirTree.show()
+      },
+      confirmSelectDir(){
+        const node = this.$refs.dirTree.getSelectTreeNode()
+        console.log(this.$refs.dirTree.getSelectTreeNode())
+        this.storageLocation = node.path + node.name
+        this.$refs.dirTree.hide()
       }
     }
   }
@@ -174,18 +175,20 @@
     padding: 5px 20px 20px 20px;
   }
   /deep/ .el-header {
-    padding: 12.5px 20px 20px 20px;
+    padding: 12.5px 20px 10px 20px;
   }
   /deep/ .el-input-group {
     width: unset;
   }
   .header-item {
+    min-width: 800px;
     padding: 5px 0 5px 0;
     .release-button {
+      float: right;
       margin-left: 10px;
     }
     .el-input {
-      width: 50%;
+      width: 300px;
     }
   }