lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改文本编辑器

Browse Source
This commit is contained in:
jmal 2020-07-06 18:03:11 +08:00
parent ff0cce8e16
commit 4c4a2beb9c
5 changed files with 233 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/ShowFile/ShowFile.vue
View File

@ -115,29 +115,22 @@
</span>
</el-dialog>
<el-dialog
class="open-file-dialog"
<warn-confirm
title="提示"
top="35vh"
:visible.sync="notPreviewDialogVisible">
<svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">此文件不支持预览, 是否下载该文件?</span>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="forciblyOpen(openingFile)">强行使用文本编辑器打开</el-button>
<el-button size="small" @click="notPreviewDialogVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click=determineDownload(openingFile)>确 定</el-button>
</span>
</el-dialog>
content="此文件不支持预览, 是否下载该文件?"
:show.sync="notPreviewDialogVisible"
operatButtonName="强行使用文本编辑器打开"
confirmButtonName="下载"
@operating="forciblyOpen(openingFile)"
@confirm="determineDownload(openingFile)"
>
</warn-confirm>
<!--展示压缩文件-->
<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){
// // 订阅系统数据
// this.stompClient = ws.stompClient.subscribe('/topic/updateData', (msg) => {
// console.log('/topic/updateData',msg)
// },ws.headers);
// }
// 订阅系统数据
console.log("订阅",'/user/queue/sendUser')
this.stompClient = ws.stompClient.subscribe('/user/queue/sendUser', (msg) => {
let fileDoc = JSON.parse(msg.body)
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)

81
src/components/confirm/WarnConfirm.vue Normal file
View File

@ -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>

187
src/components/preview/SimTextPreview.vue
View File

@ -1,73 +1,87 @@
<template>
<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>
<warn-confirm
title="提示"
content="是否保存修改？"
:show.sync="isSaveDialogVisible"
operatButtonName="不保存"
confirmButtonName="保存"
@operating="closeDialog"
@confirm="saveAll(openingFile)"
>
</warn-confirm>
<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>
<div class="title-extension">
<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="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">
<svg-icon :icon-class="fullscreen?'normalscreen':'fullscreen'"></svg-icon>
</button>
<span class="title-name">{{file.name}}</span>
<div class="title-extension">
<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="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">
<svg-icon :icon-class="fullscreen?'normalscreen':'fullscreen'"></svg-icon>
</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'}">
<fancy-tree ref="fancTree" v-if="directoryTreeData.length > 0" :lightTheme="lightTheme" :directoryTreeData="directoryTreeData" @treeNodeClick="treeNodeClick"></fancy-tree>
<div class="editor-resize" style="width: 3px;cursor: col-resize;"></div>
<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>
<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>
</el-dialog>
</el-dialog>
</div>
</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({
message: "更新成功",
type: 'success',
duration : 1000
});
if(!this.modifyMsg){
this.modifyMsg = this.$message({
message: "更新成功",
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);
})
}
}

1
src/layout/index.vue
View File

@ -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);
}

4
src/websocket/sockJS.js
View File

@ -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'