gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: 【文件】流程图只读接入新组件及删除旧组件引入代码

Browse Source
This commit is contained in:
韦荣超 2022-02-18 11:21:56 +08:00
parent ae527a78ef
commit 1521d1e883
5 changed files with 214 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/drawio/images/manifest.json
View File

@ -1,5 +1,5 @@
{
"name": "diagrams.net",
"name": "",
"short_name": "Diagrams",
"description": "diagrams.net is a completely free diagram editor",
"icons": [

105
public/js/drawio/viewer.html Normal file
View File

@ -0,0 +1,105 @@
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>Grapheditor viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
#graph {
position: absolute;
cursor: move;
left: 0;
right: 0;
top: 0;
bottom: 0
}
</style>
<script type="text/javascript">
var STENCIL_PATH = 'stencils';
var IMAGE_PATH = 'images';
var STYLE_PATH = 'styles';
var urlParams = (function (url) {
var result = {};
var idx = url.lastIndexOf('?');
if (idx > 0) {
var params = url.substring(idx + 1).split('&');
for (var i = 0; i < params.length; i++) {
idx = params[i].indexOf('=');
if (idx > 0) {
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
}
}
}
return result;
})(window.location.href);
var mxLoadResources = false;
var mxBasePath = './src';
</script>
<script type="text/javascript" src="js/sanitizer/sanitizer.min.js"></script>
<script type="text/javascript" src="./mxgraph/mxClient.js"></script>
<script type="text/javascript" src="js/grapheditor/Graph.js"></script>
<script type="text/javascript" src="js/grapheditor/Shapes.js"></script>
</head>
<body class="geEditor">
<div id="graph"></div>
<script type="text/javascript">
(function (win) {
var graph = new Graph(document.getElementById('graph'));
graph.setTooltips(false);
graph.setEnabled(false);
graph.setPanning(true);
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FONTCOLOR] = "#000000";
style[mxConstants.STYLE_STROKECOLOR] = "#777777";
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
(style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
graph.panningHandler.useLeftButtonForPanning = true;
graph.panningHandler.ignoreCell = true;
graph.container.style.cursor = "move";
graph.resizeContainer = false;
graph.centerZoom = true;
graph.border = 0;
win.addEventListener("message", function (event) {
var data = event.data;
switch (data.act) {
case 'setXml':
try {
var xmlDoc = mxUtils.parseXml(data.params.xml);
var codec = new mxCodec(xmlDoc);
codec.decode(xmlDoc.documentElement, graph.getModel());
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
// typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
// typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
} catch (e) {
}
break;
case 'zoom':
try {
graph.zoomTo(data.params.zoom);
} catch (e) {
}
break;
}
});
win.parent.postMessage({
act: 'ready',
params: {}
}, '*');
})(window);
</script>
</body>
</html>

3
resources/assets/js/pages/manage/components/FileContent.vue
View File

@ -68,14 +68,13 @@ Vue.use(Minder)
const MDEditor = () => import('../../../components/MDEditor/index');
const TEditor = () => import('../../../components/TEditor');
const Flow = () => import('../../../components/Flow');
const AceEditor = () => import('../../../components/AceEditor');
const OnlyOffice = () => import('../../../components/OnlyOffice');
const Drawio = () => import('../../../components/Drawio');
export default {
name: "FileContent",
components: {AceEditor, TEditor, MDEditor, Flow, OnlyOffice,Drawio},
components: {AceEditor, TEditor, MDEditor, OnlyOffice,Drawio},
props: {
value: {
type: Boolean,

5
resources/assets/js/pages/manage/components/FilePreview.vue
View File

@ -27,7 +27,7 @@
<MDPreview v-if="contentDetail.type=='md'" :initialValue="contentDetail.content"/>
<TEditor v-else v-model="contentDetail.content" height="100%" readOnly/>
</template>
<Flow v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" readOnly/>
<Drawio v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" readOnly/>
<Minder v-else-if="file.type=='mind'" ref="myMind" v-model="contentDetail" readOnly/>
<OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :code="code" :documentKey="documentKey" readOnly/>
<AceEditor v-else-if="['code', 'txt'].includes(file.type)" v-model="contentDetail.content" :ext="file.ext" readOnly/>
@ -44,13 +44,12 @@ Vue.use(Minder)
const MDPreview = () => import('../../../components/MDEditor/preview');
const TEditor = () => import('../../../components/TEditor');
const Flow = () => import('../../../components/Flow');
const AceEditor = () => import('../../../components/AceEditor');
const OnlyOffice = () => import('../../../components/OnlyOffice');
export default {
name: "FilePreview",
components: {AceEditor, TEditor, MDPreview, Flow, OnlyOffice},
components: {AceEditor, TEditor, MDPreview, OnlyOffice, Drawio},
props: {
code: {
type: String,

105
resources/assets/statics/public/js/drawio/viewer.html Normal file
View File

@ -0,0 +1,105 @@
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>Grapheditor viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
#graph {
position: absolute;
cursor: move;
left: 0;
right: 0;
top: 0;
bottom: 0
}
</style>
<script type="text/javascript">
var STENCIL_PATH = 'stencils';
var IMAGE_PATH = 'images';
var STYLE_PATH = 'styles';
var urlParams = (function (url) {
var result = {};
var idx = url.lastIndexOf('?');
if (idx > 0) {
var params = url.substring(idx + 1).split('&');
for (var i = 0; i < params.length; i++) {
idx = params[i].indexOf('=');
if (idx > 0) {
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
}
}
}
return result;
})(window.location.href);
var mxLoadResources = false;
var mxBasePath = './src';
</script>
<script type="text/javascript" src="js/sanitizer/sanitizer.min.js"></script>
<script type="text/javascript" src="./mxgraph/mxClient.js"></script>
<script type="text/javascript" src="js/grapheditor/Graph.js"></script>
<script type="text/javascript" src="js/grapheditor/Shapes.js"></script>
</head>
<body class="geEditor">
<div id="graph"></div>
<script type="text/javascript">
(function (win) {
var graph = new Graph(document.getElementById('graph'));
graph.setTooltips(false);
graph.setEnabled(false);
graph.setPanning(true);
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FONTCOLOR] = "#000000";
style[mxConstants.STYLE_STROKECOLOR] = "#777777";
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
(style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
graph.panningHandler.useLeftButtonForPanning = true;
graph.panningHandler.ignoreCell = true;
graph.container.style.cursor = "move";
graph.resizeContainer = false;
graph.centerZoom = true;
graph.border = 0;
win.addEventListener("message", function (event) {
var data = event.data;
switch (data.act) {
case 'setXml':
try {
var xmlDoc = mxUtils.parseXml(data.params.xml);
var codec = new mxCodec(xmlDoc);
codec.decode(xmlDoc.documentElement, graph.getModel());
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
// typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
// typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
} catch (e) {
}
break;
case 'zoom':
try {
graph.zoomTo(data.params.zoom);
} catch (e) {
}
break;
}
});
win.parent.postMessage({
act: 'ready',
params: {}
}, '*');
})(window);
</script>
</body>
</html>