sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 增加流程图前端代码

Browse Source
This commit is contained in:
yunlong.li
2021-11-18 12:06:24 +08:00
parent 00f59fdc75
commit 3f90e79d8a
30 changed files with 7241 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
yudao-admin-ui/src/components/bpmn/Header.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<div>
<el-button-group>
<el-tooltip class="item" effect="dark" content="保存并发布" placement="bottom">
<el-button type="primary" size="small" @click="deploy"><i class="fa fa-save"> 保存并发布</i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="保存草稿" placement="bottom">
<el-button type="primary" size="small" @click="save"><i class="fa fa-save"> 保存草稿</i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="打开流程文件" placement="bottom">
<el-button type="primary" size="small" @click="importXml"><i class="fa fa-folder-open"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="创建新流程图" placement="bottom">
<el-button type="primary" size="small" @click="reset"><i class="fa fa-plus-circle"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="下载流程图" placement="bottom">
<el-button type="primary" size="small" @click="downloadSvg"><i class="fa fa-picture-o"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="下载流程文件" placement="bottom">
<el-button type="primary" size="small" @click="downloadBpmn"><i class="fa fa-download"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="撤销" placement="bottom">
<el-button size="small"><i class="fa fa-rotate-left" @click="undo"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复" placement="bottom">
<el-button size="small"><i class="fa fa-rotate-right" :class="!canRedo?'default-undo':''"
@click="redo"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放大" placement="bottom">
<el-button size="small" @click="zoom(0.05)"><i class="fa fa-search-plus"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="缩小" placement="bottom">
<el-button size="small" @click="zoom(-0.05)"><i class="fa fa-search-minus"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="重置" placement="bottom">
<el-button size="small" @click="zoom(0)"><i class="fa fa-arrows"></i></el-button>
</el-tooltip>
</el-button-group>
</div>
</template>
<script>
export default {
name: "ViewerHeader",
data() {
return {
scale: 1.0,
canRedo: false
}
},
props: {
processData: {
type: Object
},
modeler: {
type: Object
}
},
components: {},
methods: {
deploy() {
let that = this;
let _xml;
let _svg;
this.modeler.saveXML((err, xml) => {
if (err) {
console.error(err)
}
_xml = xml;
})
this.modeler.saveSVG((err, svg) => {
if (err) {
console.error(err)
}
_svg = svg;
})
that.post(this.Apis.deployProcess, {
processKey: "s1111",
processName: "阿达达",
resourceName: "test01",
xml: _xml,
svg: _svg
}, function (data) {
console.log(data)
});
},
save(){
let that = this;
let _xml;
let _svg;
this.modeler.saveXML((err, xml) => {
if (err) {
console.error(err)
}
_xml = xml;
})
this.modeler.saveSVG((err, svg) => {
if (err) {
console.error(err)
}
_svg = svg;
})
that.$emit("processSave",{"xmlStr":_xml,"svgStr":_svg});
},
reset() {
this.$emit('restart')
},
importXml() {
this.$emit('importXml')
},
downloadSvg() {
this.$emit("handleExportSvg")
},
downloadBpmn() {
this.$emit("handleExportBpmn");
},
undo() {
this.modeler.get('commandStack').undo();
this.canRedo = this.modeler.get('commandStack').canRedo();
},
redo() {
if (!this.canRedo) {
return;
}
this.modeler.get('commandStack').redo()
this.canRedo = this.modeler.get('commandStack').canRedo();
},
zoom(val) {
let newScale = !val ? 1.0 : ((this.scale + val) <= 0.2) ? 0.2 : (this.scale + val);
this.modeler.get('canvas').zoom(newScale);
this.scale = newScale;
}
}
}
</script>
<style scoped>
</style>