From 089520429eeeee205445d56a424241455f161264 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 7 Jul 2020 14:48:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=9C=AC=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FancyTree/index.vue            |  42 +++---
 src/components/ShowFile/ShowFile.vue          |  19 +--
 .../MessageDialog.vue}                        |  34 +++--
 src/components/preview/SimTextPreview.vue     | 138 +++++++++++-------
 4 files changed, 146 insertions(+), 87 deletions(-)
 rename src/components/{confirm/WarnConfirm.vue => message/MessageDialog.vue} (74%)

diff --git a/src/components/FancyTree/index.vue b/src/components/FancyTree/index.vue
index 149ea33..db1b647 100644
--- a/src/components/FancyTree/index.vue
+++ b/src/components/FancyTree/index.vue
@@ -81,13 +81,18 @@
             break
           case 'remove':
             console.log('remove',this.contextData)
+            this.delFile(path)
             break
           default:
             console.log('default',this.contextData)
             break
         }
       },
-      //上级目录
+      // 删除文件/文件夹
+      delFile(){
+
+      },
+      // 上级目录
       upperLeve(){
         let path = this.tree.rootNode.children[0].key
         let title = this.tree.rootNode.children[0].title
@@ -140,27 +145,22 @@
           username: this.$store.state.user.name,
           path: treeData[0].path,
         }).then(res => {
-          treeData.map(data => {
-            let oldname = data.name
-            let pathlist = data.path.split("\/")
-            data.name = pathlist[pathlist.length-2]
-            data.expanded = true
-            data.children = res.data.map(doc => {
-              if(oldname === doc.name){
-                doc.active = true
-              }
-              doc.key = doc.path
-              doc.title = doc.name
-              doc.folder = doc.isFolder
-              doc.lazy = doc.isFolder
-              return doc
-            })
-            return data;
+          let oldname = treeData[0].name
+
+          let data = res.data.map(doc => {
+            if(oldname === doc.name){
+              doc.active = true
+            }
+            doc.key = doc.path
+            doc.title = doc.name
+            doc.folder = doc.isFolder
+            doc.lazy = doc.isFolder
+            return doc
           })
           if(reLoad){
-            this.tree.reload(this.convert(treeData))
+            this.tree.reload(this.convert(data))
           }else{
-            this.initTree(this.convert(treeData))
+            this.initTree(this.convert(data))
           }
         })
       },
@@ -255,6 +255,10 @@
 
 <style lang="scss" scoped>
   #dir-tree{
+    >>>span.fancytree-custom-icon {
+      margin-top: 3px;
+      margin-left: 0;
+    }
   }
   /deep/ul.fancytree-container {
     border: unset;
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 927af24..44c5a18 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-container" v-resize="containerResize">
+
     <el-breadcrumb class="app-breadcrumb" separator="">
       <transition-group name="breadcrumb" v-if="showNavigation">
         <el-breadcrumb-item v-for="(item,index) in pathList" :key="item.folder+index">
@@ -115,16 +116,16 @@
       </span>
     </el-dialog>
 
-    <warn-confirm
+    <message-dialog
       title="提示"
       content="此文件不支持预览, 是否下载该文件?"
       :show.sync="notPreviewDialogVisible"
-      operatButtonName="强行使用文本编辑器打开"
-      confirmButtonName="下载"
+      operatButtonText="强行使用文本编辑器打开"
+      confirmButtonText="下载"
       @operating="forciblyOpen(openingFile)"
       @confirm="determineDownload(openingFile)"
     >
-    </warn-confirm>
+    </message-dialog>
 
     <!--展示压缩文件-->
     <el-dialog :title="'预览:'+compressedFileName" :visible.sync="compressedFileVisible">
@@ -375,7 +376,7 @@
       :emptyStatus="emptyStatus"
     >
     </empty-file>
-    <sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
+    <sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
     <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
     <!-- <audio-preview :file="audioPreviewRow" :status.sync="audioPreviewVisible"></audio-preview> -->
@@ -431,7 +432,7 @@
   import VideoPreview from "@/components/preview/VideoPreview";
   import AudioPreview from "@/components/preview/AudioPreview";
   import ButtonUpload from "@/components/button/ButtonUpload";
-  import WarnConfirm from "@/components/confirm/WarnConfirm";
+  import MessageDialog from "@/components/message/MessageDialog";
 
   import FileTree from"@/components/FileTree"
 
@@ -446,7 +447,7 @@
   export default {
     name: 'ShowFile',
     components: {
-      WarnConfirm, AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
+      MessageDialog, AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
       PlTable,
       PlTableColumn,
       ButtonUpload,
@@ -2662,9 +2663,9 @@
   /deep/.el-input-tree-button {
     margin-left: 5px!important;
   }
-  /deep/.open-file-dialog {
+  >>>.open-file-dialog {
     .el-dialog {
-      width: 400px;
+      width: 420px;
     }
     .svg-icon {
       font-size: 20px;
diff --git a/src/components/confirm/WarnConfirm.vue b/src/components/message/MessageDialog.vue
similarity index 74%
rename from src/components/confirm/WarnConfirm.vue
rename to src/components/message/MessageDialog.vue
index d4f5b93..e46f520 100644
--- a/src/components/confirm/WarnConfirm.vue
+++ b/src/components/message/MessageDialog.vue
@@ -1,16 +1,17 @@
 <template>
   <div>
     <el-dialog
-      class="open-file-dialog"
+      class="jmal-message-dialog"
       :title="title"
-      top="35vh"
       :visible.sync="visible"
+      top="0vh"
+      :close-on-click-modal="false"
       @close="closeDialog">
       <svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
       <span slot="footer" class="dialog-footer">
-        <el-button :size="buttonSize" @click="operating">{{operatButtonName}}</el-button>
-        <el-button :size="buttonSize" @click="cancel">{{cancelButtonName}}</el-button>
-        <el-button :size="buttonSize" type="primary" @click=confirm>{{confirmButtonName}}</el-button>
+        <el-button :size="buttonSize" @click="operating">{{operatButtonText}}</el-button>
+        <el-button :size="buttonSize" @click="cancel">{{cancelButtonText}}</el-button>
+        <el-button :size="buttonSize" type="primary" @click=confirm>{{confirmButtonText}}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -18,7 +19,7 @@
 
 <script>
   export default {
-    name: "WarnConfirm",
+    name: "MessageDialog",
     props: {
       title: {
         type: String,
@@ -38,15 +39,15 @@
         type: String,
         default: 'small'
       },
-      operatButtonName: {
+      operatButtonText: {
         type: String,
         default: ''
       },
-      cancelButtonName: {
+      cancelButtonText: {
         type: String,
         default: '取 消'
       },
-      confirmButtonName: {
+      confirmButtonText: {
         type: String,
         default: '确 定'
       }
@@ -79,3 +80,18 @@
     }
   }
 </script>
+<style lang="scss" scoped>
+  >>>.jmal-message-dialog {
+    height: 200px;
+    top: calc(50% - 100px);
+    .el-dialog {
+      width: 420px;
+    }
+    .svg-icon {
+      font-size: 20px;
+    }
+    .dialog-msg {
+      margin-left: 10px;
+    }
+  }
+</style>
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index 23dd10f..da2a445 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -1,15 +1,26 @@
 <template>
   <div>
-    <warn-confirm
-      title="提示"
-      content="是否保存修改？"
+    <message-dialog
+      title="确认信息"
+      content="检测到未保存的内容，是否在离开前保存修改？"
       :show.sync="isSaveDialogVisible"
-      operatButtonName="不保存"
-      confirmButtonName="保存"
+      operatButtonText="放弃修改"
+      confirmButtonText="保存"
       @operating="closeDialog"
-      @confirm="saveAll(openingFile)"
+      @confirm="confirmUpdate"
     >
-    </warn-confirm>
+    </message-dialog>
+
+    <message-dialog
+      title="确认信息"
+      content="是否在关闭前保存修改？"
+      :show.sync="isTabSaveDialogVisible"
+      operatButtonText="放弃修改"
+      confirmButtonText="保存"
+      @operating="closeTabDialog"
+      @confirm="saveTab"
+    >
+    </message-dialog>
 
     <el-dialog
       ref="simTextDialog"
@@ -96,12 +107,12 @@
 
   import FileTree from"@/components/FileTree"
   import FancyTree from"@/components/FancyTree"
-  import WarnConfirm from "@/components/confirm/WarnConfirm"
+  import MessageDialog from "@/components/message/MessageDialog"
 
   export default {
     name: "SimTextPreview",
     components: {
-      MonacoEditor,FileTree,FancyTree,WarnConfirm
+      MonacoEditor,FileTree,FancyTree,MessageDialog
     },
     props: {
       file: {
@@ -154,6 +165,8 @@
         updating: false,
         modifyMsg: undefined,
         isSaveDialogVisible: false,
+        isTabSaveDialogVisible: false,
+        removeIndex: 0,
         loading: {},
         darkButton: {
           background: '#565656!important',
@@ -187,7 +200,10 @@
       }
     },
     watch: { //监听file的变化，进行相应的操作即可
-      file: function (file) {
+      file(file) {
+        if(!file.path){
+          return
+        }
         this.editableTabs = []
         this.editorWidth = document.body.clientWidth * this.dialogWidth - this.contentsWidth
         this.editorHieght = document.body.clientHeight * this.dialogWidth - 50
@@ -236,7 +252,6 @@
             name: res.data.path.substring(1,res.data.path.length)+res.data.name,
             content: res.data.contentText
           })
-          console.log(this.editableTabs)
           this.editableTabsValue = res.data.path.substring(1,res.data.path.length)+res.data.name
 
           // 界面的渲染后的初始化工作
@@ -274,7 +289,6 @@
         let resize = document.querySelector('.el-dialog__body .content .editor-resize');
         let left = document.querySelector('.file-contents');
         let leftTools = document.querySelector('.file-contents .dir-tools');
-        let leftTree = document.querySelector('.file-contents .content-tree');
         if(resize){
           // 鼠标按下事件
           const that = this
@@ -286,9 +300,6 @@
               let endX = e.clientX;
               // 移动的距离。负数向左移动,正数向右移动
               let moveLen = endX - startX
-              // left.style.width = (contentsStartWidth + moveLen)+'px'
-              // leftTree.style.width = (contentsStartWidth + moveLen)+'px'
-              console.log(leftTools.style.minWidth.split('\px')[0])
               if((contentsStartWidth + moveLen) > leftTools.style.minWidth.split('\px')[0]){
                 that.contentsWidth = contentsStartWidth + moveLen
                 that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen)
@@ -366,30 +377,35 @@
       },
       handleClose(done) {
         if(this.isShowUpdateBtn){
-          // this.isSaveDialogVisible = true
-          this.$confirm('',
-            {
-              message:'是否保存修改？',
-              cancelButtonText: '不保存',
-              confirmButtonText: '保存'
-            }
-          )
-          .then(_ => {
-            done();
-            this.saveAll()
-          })
-          .catch(_ => {
-            done();
-          });
+          this.isSaveDialogVisible = true
         }else{
           done()
+          this.closeAllTabs()
         }
       },
-      closeDialog() {
+      saveTab(){
+        this.update(this.editableTabs[this.removeIndex].change,this.editableTabs[this.removeIndex].name)
+        this.isTabSaveDialogVisible = false
+        this.editableTabs.splice(this.removeIndex,1)
+      },
+      confirmUpdate(){
+        this.saveAll(true)
+        this.textPreviewVisible = false
         this.$emit('update:status', this.textPreviewVisible)
         this.isSaveDialogVisible = false
         this.isShowUpdateBtn = false
       },
+      closeTabDialog(){
+        this.isTabSaveDialogVisible = false
+        this.editableTabs.splice(this.removeIndex,1)
+      },
+      closeDialog() {
+        this.textPreviewVisible = false
+        this.$emit('update:status', this.textPreviewVisible)
+        this.isSaveDialogVisible = false
+        this.isShowUpdateBtn = false
+        this.closeAllTabs()
+      },
       change(value,index) {
         if(value === this.editableTabs[index].content){
           if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
@@ -409,12 +425,23 @@
           }
         }
       },
-      saveAll(){
+      saveAll(isClose){
         this.editableTabs.forEach((tab,index) => {
           if(tab.status === 'Modifying'){
-            this.update(tab.change,tab.name,index)
+            if(isClose){
+              this.update(tab.change,tab.name)
+            }else{
+              this.update(tab.change,tab.name,index)
+            }
           }
         })
+        if(isClose){
+          this.closeAllTabs()
+        }
+      },
+      closeAllTabs(){
+        this.editableTabs.splice(0,this.editableTabs.length)
+        this.$emit('update:file', {})
       },
       save(value,index) {
         if(value !== this.editableTabs[index].content && this.isShowUpdateBtn){
@@ -440,6 +467,16 @@
                   this.isShowUpdateBtn = false
                 }
               }
+            }else{
+              let update = false
+              this.editableTabs.forEach((tab) => {
+                if(tab.status === 'Modifying'){
+                  update = true
+                }
+              })
+              if(!update){
+                this.isShowUpdateBtn = false
+              }
             }
             if(!this.modifyMsg){
               this.modifyMsg = this.$message({
@@ -519,15 +556,8 @@
           this.editableTabsValue = activeName;
           this.editableTabs = tabs.filter(tab => tab.name !== targetName);
         }else{
-          this.$confirm('',{message:'是否保存修改？',cancelButtonText: '不保存',confirmButtonText: '保存'}
-          ).then(()=>{
-            this.update(this.editableTabs[removeIndex].change,this.editableTabs[removeIndex].name,removeIndex)
-          }).catch(()=>{
-            console.log(this.editableTabs[removeIndex].change,this.editableTabs[removeIndex].name,removeIndex)
-          }).then(()=>{
-            this.editableTabsValue = activeName;
-            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-          })
+          this.removeIndex = removeIndex
+          this.isTabSaveDialogVisible = true
         }
       }
     }
@@ -776,15 +806,23 @@
         }
       }
 
-      /*.monaco-editor {*/
-        /*padding: 3px 0 0 0;*/
-
-        /*.scroll-decoration{*/
-          /*box-shadow: unset!important;*/
-        /*}*/
-      /*}*/
-
     }
   }
 
 </style>
+<style lang="scss" scoped>
+  >>>.jmal-message-dialog {
+    width: 420px;
+    height: 200px;
+    top: calc(50% - 100px);
+    left: calc(50% - 210px);
+    .el-dialog {
+      .el-dialog__header {
+        padding: 15px 20px 15px;
+      }
+      .el-dialog__body {
+        padding: 0 10px 5px 20px;
+      }
+    }
+  }
+</style>