修改文本编辑器

src/components/ShowFile/ShowFile.vue

@@ -115,29 +115,22 @@
       </span>
     </el-dialog>
 
-    <el-dialog
+    <warn-confirm
-      class="open-file-dialog"
       title="提示"
-      top="35vh"
+      content="此文件不支持预览, 是否下载该文件?"
-      :visible.sync="notPreviewDialogVisible">
+      :show.sync="notPreviewDialogVisible"
-      <svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">此文件不支持预览, 是否下载该文件?</span>
+      operatButtonName="强行使用文本编辑器打开"
-      <span slot="footer" class="dialog-footer">
+      confirmButtonName="下载"
-        <el-button  size="small" @click="forciblyOpen(openingFile)">强行使用文本编辑器打开</el-button>
+      @operating="forciblyOpen(openingFile)"
-      <el-button size="small" @click="notPreviewDialogVisible = false">取 消</el-button>
+      @confirm="determineDownload(openingFile)"
-      <el-button size="small" type="primary" @click=determineDownload(openingFile)>确 定</el-button>
+    >
-      </span>
+    </warn-confirm>
-    </el-dialog>
 
     <!--展示压缩文件-->
     <el-dialog :title="'预览:'+compressedFileName" :visible.sync="compressedFileVisible">
       <file-tree :directoryTreeData="compressedFileData" :tempDir="compressedFileTempDir"></file-tree>
     </el-dialog>
 
-    <!--&lt;!&ndash;解压到哪里&ndash;&gt;-->
-    <!--<el-dialog class="unzip-to-dialog" :title="'解压到: '+unzipToName" :visible.sync="unzipToVisible">-->
-      <!--<file-tree :directoryTreeData="unzipToData" :localFileMode="false" :tempDir="unzipToTempDir" @treeNodeClick="unzipToNodeClick"></file-tree>-->
-    <!--</el-dialog>-->
-
     <!--移动或复制弹出框-->
     <el-dialog
       :title="titlePrefix+selectTreeNode.showName"
@@ -424,10 +417,7 @@
   import 'vant/lib/grid-item/style';
   import 'vant/lib/checkbox/style';
   import 'vant/lib/checkbox-group/style';
-  /* eslint-disable */
   import { mapGetters } from 'vuex'
-  // import defaultSettings from '@/settings'
-  // import { getPath, getPathList, setPath, removePath } from '@/utils/path'
   import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
   import { suffix } from '@/utils/file-type'
   import Bus from '@/assets/js/bus'
@@ -441,6 +431,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 FileTree from"@/components/FileTree"
 
@@ -449,12 +440,13 @@
   import 'pl-table/themes/index.css';
   import { PlTable, PlTableColumn } from 'pl-table';
 
-  // import ws from '@/websocket/websocket_config';
+  import ws from '@/websocket/websocket_config';
 
   var rowStyleExecuting = false
   export default {
     name: 'ShowFile',
-    components: {AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
+    components: {
+      WarnConfirm, AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
       PlTable,
       PlTableColumn,
       ButtonUpload,
@@ -766,10 +758,22 @@
       this.darwRectangle()
 
       // 监听websocket
-      this.onmessage()
+      if(ws.isConnected){
+        this.onmessage()
+      }else{
+        const that = this
+        setTimeout(function () {
+          if(ws.isConnected){
+            that.onmessage()
+          }
+        },3000)
+      }
     },
     destroyed() {
       window.removeEventListener('popstate', this.goBack, false);
+      if(this.stompClient){
+        this.stompClient.unsubscribe()
+      }
     },
     // watch: {
     //   fileList: function (newValue,oldValue) {
@@ -805,12 +809,18 @@
     },
     methods: {
       onmessage(){
-        // if(ws.isConnected){
+        // 订阅系统数据
-        //   // 订阅系统数据
+        console.log("订阅",'/user/queue/sendUser')
-        //   this.stompClient = ws.stompClient.subscribe('/topic/updateData', (msg) => {
+        this.stompClient = ws.stompClient.subscribe('/user/queue/sendUser', (msg) => {
-        //     console.log('/topic/updateData',msg)
+          let fileDoc = JSON.parse(msg.body)
-        //   },ws.headers);
+          console.log('/queue/sendUser', fileDoc)
-        // }
+          let index = this.fileList.findIndex(file=>file.id === fileDoc.id)
+          if(index > -1){
+            console.log(this.fileList[index])
+            this.fileList[index].size = fileDoc.size
+            this.fileList[index].agoTime = 1
+          }
+        },ws.headers);
       },
       load () {
         this.getFileList(true)

src/components/confirm/WarnConfirm.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-dialog
+      class="open-file-dialog"
+      :title="title"
+      top="35vh"
+      :visible.sync="visible"
+      @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>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "WarnConfirm",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      show: {
+        type: Boolean,
+        default: function () {
+          return false
+        }
+      },
+      content: {
+        type: String,
+        default: ''
+      },
+      buttonSize: {
+        type: String,
+        default: 'small'
+      },
+      operatButtonName: {
+        type: String,
+        default: ''
+      },
+      cancelButtonName: {
+        type: String,
+        default: '取 消'
+      },
+      confirmButtonName: {
+        type: String,
+        default: '确 定'
+      }
+    },
+    data () {
+      return {
+        visible: false
+      }
+    },
+    watch: {
+      show: function(visible) {
+         this.visible = visible
+      }
+    },
+    methods: {
+      closeDialog(){
+        this.$emit('update:show', this.visible)
+      },
+      operating(){
+        this.$emit('operating')
+      },
+      cancel(){
+        this.visible = false
+        this.$emit('update:show', this.visible)
+        this.$emit('cancel')
+      },
+      confirm(){
+        this.$emit('confirm')
+      }
+    }
+  }
+</script>

src/components/preview/SimTextPreview.vue

@@ -1,73 +1,87 @@
 <template>
-  <el-dialog
+  <div>
-              ref="simTextDialog"
+    <warn-confirm
-              v-bind="$attrs" v-on="$listeners"
+      title="提示"
-             :fullscreen="fullscreen"
+      content="是否保存修改？"
-             :visible.sync="textPreviewVisible"
+      :show.sync="isSaveDialogVisible"
-             :title="file.name"
+      operatButtonName="不保存"
-             :close-on-click-modal="false"
+      confirmButtonName="保存"
-             @close="closeDialog"
+      @operating="closeDialog"
-             :before-close="handleClose"
+      @confirm="saveAll(openingFile)"
-             :width="dialogWidth*100+'%'"
+    >
-             v-resize="containerResize"
+    </warn-confirm>
-             class="simtext-dialog"
+
-             v-dialogDrag="{ dialogWidth: dialogWidth}">
+    <el-dialog
+      ref="simTextDialog"
+      v-bind="$attrs" v-on="$listeners"
+      :fullscreen="fullscreen"
+      :visible.sync="textPreviewVisible"
+      :title="file.name"
+      :close-on-click-modal="false"
+      @close="closeDialog"
+      :before-close="handleClose"
+      :width="dialogWidth*100+'%'"
+      v-resize="containerResize"
+      class="simtext-dialog"
+      v-dialogDrag="{ dialogWidth: dialogWidth}">
       <div slot="title" class="simtext-header-title">
-            <span class="title-name">{{file.name}}</span>
+        <span class="title-name">{{file.name}}</span>
-          <div class="title-extension">
+        <div class="title-extension">
-            <el-button v-if="isShowUpdateBtn" @click="saveAll" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
+          <el-button v-if="isShowUpdateBtn" @click="saveAll" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
-            <!-- <el-button @click="changePreviewMode">{{previewMode?'预览模式':'源码模式'}}</el-button> -->
+          <!-- <el-button @click="changePreviewMode">{{previewMode?'预览模式':'源码模式'}}</el-button> -->
-            <el-button @click="skinning" :class="lightTheme?'':'dark-button'" size="small" :icon="lightTheme?'el-icon-moon':'el-icon-sunny'" circle></el-button>
+          <el-button @click="skinning" :class="lightTheme?'':'dark-button'" size="small" :icon="lightTheme?'el-icon-moon':'el-icon-sunny'" circle></el-button>
-            <button class="title-extension-button" @click="fullScreen" size="small">
+          <button class="title-extension-button" @click="fullScreen" size="small">
-              <svg-icon :icon-class="fullscreen?'normalscreen':'fullscreen'"></svg-icon>
+            <svg-icon :icon-class="fullscreen?'normalscreen':'fullscreen'"></svg-icon>
-            </button>
+          </button>
+        </div>
+      </div>
+      <div class="content">
+        <!--<div class="editor_main_storey"></div>-->
+        <div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+31+'px'}">
+          <div class="dir-tools" :style="{width: contentsWidth+2+'px',minWidth: 272+'px'}">
+            <el-button-group>
+              <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-arrow-left" @click="upperLeve">上一级</el-button>
+              <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
+              <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-plus">新建</el-button>
+              <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-search">搜索</el-button>
+            </el-button-group>
+          </div>
+          <div class="content-tree" :style="{width: contentsWidth+'px',height: editorHieght+'px'}">
+            <fancy-tree ref="fancTree" v-if="directoryTreeData.length > 0" :lightTheme="lightTheme" :directoryTreeData="directoryTreeData" @treeNodeClick="treeNodeClick"></fancy-tree>
           </div>
-      </div>
-    <div class="content">
-      <!--<div class="editor_main_storey"></div>-->
-      <div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+31+'px'}">
-        <div class="dir-tools" :style="{width: contentsWidth+2+'px',minWidth: 272+'px'}">
-          <el-button-group>
-            <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-arrow-left" @click="upperLeve">上一级</el-button>
-            <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
-            <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-plus">新建</el-button>
-            <el-button :class="lightTheme?'light-button':'dark-button'" size="small" icon="el-icon-search">搜索</el-button>
-          </el-button-group>
         </div>
-        <div class="content-tree" :style="{width: contentsWidth+'px',height: editorHieght+'px'}">
+        <div class="editor-resize" style="width: 3px;cursor: col-resize;"></div>
-          <fancy-tree ref="fancTree" v-if="directoryTreeData.length > 0" :lightTheme="lightTheme" :directoryTreeData="directoryTreeData" @treeNodeClick="treeNodeClick"></fancy-tree>
+        <div :style="{width: editorWidth-3+'px'}">
+          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
+            <el-tab-pane
+              v-for="(item,index) in editableTabs"
+              :key="item.name"
+              :label="item.title"
+              :name="item.name"
+            >
+              <div class="editor">
+                <MonacoEditor
+                  v-if="textPreviewVisible"
+                  ref="monacoEditor"
+                  :width="editorWidth"
+                  :height="editorHieght"
+                  :theme="lightTheme?'vs':'vs-dark'"
+                  :language="item.language"
+                  :diffEditor="diffEditor"
+                  original="..."
+                  :value="item.content"
+                  :options="options"
+                  @change="change($event,index)"
+                  @save="save($event,index)"
+                ></MonacoEditor>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </div>
-      <div class="editor-resize" style="width: 3px;cursor: col-resize;"></div>
+    </el-dialog>
-      <div :style="{width: editorWidth-3+'px'}">
+
-        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
+  </div>
-          <el-tab-pane
-            v-for="(item,index) in editableTabs"
-            :key="item.name"
-            :label="item.title"
-            :name="item.name"
-          >
-            <div class="editor">
-              <MonacoEditor
-                v-if="textPreviewVisible"
-                ref="monacoEditor"
-                :width="editorWidth"
-                :height="editorHieght"
-                :theme="lightTheme?'vs':'vs-dark'"
-                :language="item.language"
-                :diffEditor="diffEditor"
-                original="..."
-                :value="item.content"
-                :options="options"
-                @change="change($event,index)"
-                @save="save($event,index)"
-              ></MonacoEditor>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </div>
-  </el-dialog>
 </template>
 <script>
 
@@ -82,11 +96,12 @@
 
   import FileTree from"@/components/FileTree"
   import FancyTree from"@/components/FancyTree"
+  import WarnConfirm from "@/components/confirm/WarnConfirm"
 
   export default {
     name: "SimTextPreview",
     components: {
-      MonacoEditor,FileTree,FancyTree
+      MonacoEditor,FileTree,FancyTree,WarnConfirm
     },
     props: {
       file: {
@@ -137,6 +152,8 @@
         previewMode: true,
         isShowUpdateBtn: false,
         updating: false,
+        modifyMsg: undefined,
+        isSaveDialogVisible: false,
         loading: {},
         darkButton: {
           background: '#565656!important',
@@ -349,10 +366,17 @@
       },
       handleClose(done) {
         if(this.isShowUpdateBtn){
-          this.$confirm('是否保存修改？')
+          // this.isSaveDialogVisible = true
+          this.$confirm('',
+            {
+              message:'是否保存修改？',
+              cancelButtonText: '不保存',
+              confirmButtonText: '保存'
+            }
+          )
           .then(_ => {
             done();
-            this.update()
+            this.saveAll()
           })
           .catch(_ => {
             done();
@@ -363,6 +387,7 @@
       },
       closeDialog() {
         this.$emit('update:status', this.textPreviewVisible)
+        this.isSaveDialogVisible = false
         this.isShowUpdateBtn = false
       },
       change(value,index) {
@@ -380,13 +405,14 @@
             this.editableTabs[index].title += '*'
             this.editableTabs[index].status = 'Modifying'
             this.isShowUpdateBtn = true
+            this.editableTabs[index].change = value
           }
         }
       },
       saveAll(){
         this.editableTabs.forEach((tab,index) => {
           if(tab.status === 'Modifying'){
-            this.update(tab.content,tab.name,index)
+            this.update(tab.change,tab.name,index)
           }
         })
       },
@@ -415,11 +441,17 @@
                 }
               }
             }
-            this.$message({
+            if(!this.modifyMsg){
-              message: "更新成功",
+              this.modifyMsg = this.$message({
-              type: 'success',
+                message: "更新成功",
-              duration : 1000
+                type: 'success',
-            });
+                duration : 1000
+              });
+              const that = this
+              setTimeout(function () {
+                that.modifyMsg = undefined
+              },1000)
+            }
           })
       },
       // 全屏
@@ -487,9 +519,14 @@
           this.editableTabsValue = activeName;
           this.editableTabs = tabs.filter(tab => tab.name !== targetName);
         }else{
-          this.$confirm('是否保存修改？').then(()=>{
+          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);
           })
         }
       }

src/layout/index.vue

@@ -69,7 +69,6 @@ export default {
     if(getToken()){
       this.isShow = window.pc;
       //与服务器建立websocket连接
-      console.log(ws)
       if(!ws.isConnected){
         toConnection(this.$store.state.user.name,this.$store.state.user.token);
       }

src/websocket/sockJS.js

@@ -20,16 +20,16 @@ export function toConnection(username,token) {
 
 function connect(username,token){
   //地址+端点路径，构建websocket链接地址,注意，对应config配置里的addEndpoint
-  console.log("ws.url",ws.url,process.env)
   let socket = new SockJS(ws.url + '/mq' + '?name='+username+'&jmal-token='+token);
   // 获取STOMP子协议的客户端对象
   ws.stompClient = Stomp.over(socket);
   // 定义客户端的认证信息,按需求配置
   ws.headers = {
-    Authorization:''
+    Authorization:token
   };
   // 向服务器发起websocket连接
   ws.stompClient.connect(ws.headers,() => {
+    console.log('websocket连接成功！')
     ws.isConnected = true;
     // 订阅系统数据 '/topic/updateData/2/system'
     // 订阅合并数据 '/topic/updateData/mergeDate/2'