修改文本编辑器

2020-07-07 14:48:50 +08:00 · 2020-07-07 14:48:50 +08:00 · 089520429e
commit 089520429e
parent 4c4a2beb9c
4 changed files with 146 additions and 87 deletions
--- 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;
--- 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;
--- a/src/components/message/MessageDialog.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>
--- 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>