feat: 更新流程图组件
This commit is contained in:
韦荣超
parent
2ab2cf01db
commit
63534d3eb5
217
resources/assets/js/components/Drawio.vue
Normal file
217
resources/assets/js/components/Drawio.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="flow-content">
|
||||
<iframe ref="myFlow" class="flow-iframe" :src="url"></iframe>
|
||||
<div v-if="loadIng" class="flow-loading"><Loading/></div>
|
||||
<div v-if="readOnly && zoom > 0" class="zoom-box" :class="{'zoom-ing': zoomIng}">
|
||||
<div class="zoom-svg">
|
||||
<svg t="1600613502044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1161" width="18" height="18"><path d="M598.646154 401.723077H279.630769c-15.753846 0-27.569231 11.815385-27.569231 31.507692 0 15.753846 11.815385 27.569231 31.507693 27.569231h319.015384c15.753846 0 27.569231-11.815385 27.569231-31.507692 0-15.753846-15.753846-27.569231-31.507692-27.569231z" fill="#666666" p-id="1162"></path><path d="M921.6 850.707692l-204.8-196.923077c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l204.8 196.923077c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-15.753846 11.815385-35.446154 0-43.323077z m-484.430769-126.030769c-161.476923 0-295.384615-133.907692-295.384616-295.384615S275.692308 133.907692 437.169231 133.907692s295.384615 133.907692 295.384615 295.384616-129.969231 295.384615-295.384615 295.384615z" fill="#666666" p-id="1163"></path></svg>
|
||||
<svg t="1600613514136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1403" width="18" height="18"><path d="M929.476923 854.646154l-212.676923-200.861539c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l212.676923 200.861539c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-11.815385 11.815385-31.507692 0-43.323077z m-488.369231-126.030769c-161.476923 0-295.384615-133.907692-295.384615-295.384616s133.907692-295.384615 295.384615-295.384615 295.384615 133.907692 295.384616 295.384615-133.907692 295.384615-295.384616 295.384616z" fill="#666666" p-id="1404"></path><path d="M598.646154 401.723077h-129.969231V271.753846c0-15.753846-11.815385-31.507692-31.507692-31.507692s-31.507692 11.815385-31.507693 31.507692v129.969231H279.630769c-15.753846 0-31.507692 11.815385-31.507692 31.507692s11.815385 31.507692 31.507692 31.507693h129.969231V590.769231c0 15.753846 11.815385 31.507692 31.507692 31.507692s31.507692-11.815385 31.507693-31.507692v-129.969231h129.96923c15.753846 0 31.507692-11.815385 31.507693-31.507692s-15.753846-27.569231-35.446154-27.569231z" fill="#666666" p-id="1405"></path></svg>
|
||||
</div>
|
||||
<Slider class="zoom-slider" v-model="zoom" :min="1" :max="300" :tip-format="formatZoom" @on-change="zoomIng=false" @on-input="zoomIng=true"></Slider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flow-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.flow-iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: 0 0;
|
||||
border: 0;
|
||||
float: none;
|
||||
margin: -1px 0 0;
|
||||
max-width: none;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.flow-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.zoom-box {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
height: 34px;
|
||||
max-width: 50%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
z-index: 10;
|
||||
padding: 0 6px;
|
||||
.zoom-svg {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
.zoom-slider {
|
||||
display: none;
|
||||
padding: 0 10px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover,
|
||||
&.zoom-ing {
|
||||
.zoom-svg {
|
||||
display: none;
|
||||
}
|
||||
.zoom-slider {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import JSPDF from "jspdf";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Drawio",
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadIng: true,
|
||||
|
||||
url: null,
|
||||
|
||||
zoom: -1,
|
||||
zoomIng: false,
|
||||
|
||||
bakData: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let language = 'en';
|
||||
switch (this.getLanguage()) {
|
||||
case 'CN':
|
||||
case 'TC':
|
||||
language = 'zh'
|
||||
break;
|
||||
}
|
||||
let route = this.readOnly ? 'viewer' : 'index';
|
||||
let theme = this.themeIsDark ? 'dark' : 'light'
|
||||
this.url = $A.originUrl('js/drawio/' + route + '.html?lang=' + language + '&theme=' + theme + '&dev=1');
|
||||
console.log('this.url',this.url);
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('message', this.handleMessage)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('message', this.handleMessage)
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (this.bakData == $A.jsonStringify(val)) {
|
||||
return;
|
||||
}
|
||||
this.bakData = $A.jsonStringify(val);
|
||||
this.updateContent();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
zoom(val) {
|
||||
this.$refs.myFlow.contentWindow.postMessage({
|
||||
act: 'zoom',
|
||||
params: {
|
||||
zoom: val / 100
|
||||
}
|
||||
}, '*')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['themeIsDark'])
|
||||
},
|
||||
methods: {
|
||||
formatZoom(val) {
|
||||
return val + '%';
|
||||
},
|
||||
|
||||
updateContent() {
|
||||
this.zoom = Math.max(1, (typeof this.value.scale === "number" ? this.value.scale : 1) * 100)
|
||||
this.$refs.myFlow.contentWindow.postMessage({
|
||||
act: 'setXml',
|
||||
params: Object.assign(this.value, typeof this.value.xml === "undefined" ? {
|
||||
xml: this.value.content
|
||||
} : {})
|
||||
}, '*')
|
||||
},
|
||||
|
||||
handleMessage (event) {
|
||||
const data = event.data;
|
||||
switch (data.act) {
|
||||
case 'ready':
|
||||
this.loadIng = false;
|
||||
this.updateContent();
|
||||
break
|
||||
|
||||
case 'change':
|
||||
this.bakData = $A.jsonStringify(data.params);
|
||||
this.$emit('input', data.params);
|
||||
break
|
||||
|
||||
case 'save':
|
||||
this.$emit('saveData');
|
||||
break
|
||||
|
||||
case 'imageContent':
|
||||
let pdf = new JSPDF({
|
||||
format: [data.params.width, data.params.height]
|
||||
});
|
||||
pdf.addImage(data.params.content, 'PNG', 0, 0, 0, 0);
|
||||
pdf.save(`${data.params.name}.pdf`);
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
exportPNG(name, scale = 10) {
|
||||
this.$refs.myFlow.contentWindow.postMessage({
|
||||
act: 'exportPNG',
|
||||
params: {
|
||||
name: name || this.$L('无标题'),
|
||||
scale: scale,
|
||||
type: 'png',
|
||||
}
|
||||
}, '*')
|
||||
},
|
||||
|
||||
exportPDF(name, scale = 10) {
|
||||
this.$refs.myFlow.contentWindow.postMessage({
|
||||
act: 'exportPNG',
|
||||
params: {
|
||||
name: name || this.$L('无标题'),
|
||||
scale: scale,
|
||||
type: 'imageContent',
|
||||
}
|
||||
}, '*')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -50,7 +50,7 @@
|
||||
<MDEditor v-if="contentDetail.type=='md'" v-model="contentDetail.content" height="100%"/>
|
||||
<TEditor v-else v-model="contentDetail.content" height="100%" @editorSave="handleClick('saveBefore')"/>
|
||||
</template>
|
||||
<Flow v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
|
||||
<Drawio v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
|
||||
<Minder v-else-if="file.type=='mind'" ref="myMind" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
|
||||
<OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :documentKey="documentKey"/>
|
||||
<AceEditor v-else-if="['code', 'txt'].includes(file.type)" v-model="contentDetail.content" :ext="file.ext" @saveData="handleClick('saveBefore')"/>
|
||||
@ -71,10 +71,11 @@ 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},
|
||||
components: {AceEditor, TEditor, MDEditor, Flow, OnlyOffice,Drawio},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user