wfdesigner
v0.5.0
Published
工作流vue - Konvajs版
Downloads
7
Readme
WorkFlowDesigner
工作流vue - Konvajs版
WFDesigner组件
双向数据绑定组件,当WFDesigner的参数发生改变时,设计器会更新流程图,但是设计器更新流程图时,也会去改变传入的参数的。 如何使用:
<template>
<div>
<wf-designer :workflow="wf" ref="wfDesigner" />
<el-button @click="getwf">保存工作流</el-button>
</div>
</template>
<script>
import WFDesigner from "../components/WFDesigner.vue";
export default {
components: {
"wf-designer": WFDesigner
},
data() {
return {
wfs: [],
wf: {
WFNodes: [],
lines: [],
toolTips: [],
id: "",
name: "",
desc: "",
createUserId: "",
updateUserId: "",
createUserName: "",
updateUserName: "",
createTime: "",
updateTime: "",
version: "",
nodeInfos: []
}
};
},
mounted() {
this.wf.WFNodes = [];
this.wf.lines = [];
this.wf.toolTips = [];
this.wf.id = "";
this.wf.name = "";
this.wf.desc = "";
this.wf.createUserId = "";
this.wf.updateUserId = "";
this.wf.createUserName = "";
this.wf.updateUserName = "";
this.wf.createTime = "";
this.wf.updateTime = "";
this.wf.version = "";
this.wf.nodeInfos = [];
},
methods: {
getwf(e) {
//获取流程设计器中的流程图信息 等效于 this.wf
console.log(this.$refs.wfDesigner.getWorkflow());
console.log(this.wf);
}
}