wfdesigner v0.5.0

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