GOJS + VUE 流程图实现

前言及展示

在项目中需要根据传过来的数据画出流程图，采用了GOJS插件，功能很全面，可以根据自己的需要调整，不过建议简单的流程图还是自己手写一个组件，更加便于维护和变换。有一点需要注意的是，GOJS是需要收费的，有水印，虽然可以手动去掉，但是公司用的话还是需要买。GOJS的官网上有关于在VUE中应用GOJS的小例子：Minimal GoJS Sample in Vue.js。推荐看一下，可以解决大部分简单需求，这个例子可以满足你并行步骤数比较固定的二叉树画法的流程图。

这是官网的例子，其中模块，线，箭头等画布元素都可以交互。
由于我的并行步骤数不固定，于是在图中加入了Group(组)。先展示一下成品：

其中批次中可以包含多个项目，表示并行的步骤。

具体实现

分为两个文件：
diagram.vue && stepMap.vue
diagram.vue声明组件，stepMap引用
diagram.vue
基本声明：

<script>
    import go from 'gojs';
    let $ = go.GraphObject.make;  // 后面很多用到该变量来初始化diagram
    export default{
    
      name: 'diagram',
      props: ['modelData'],  // accept model data as a parameter
      data() {
    
         return {
    
           diagram: null,
          }; 
        },  // provide access to the GoJS Diagram

初始化diagram：

      mounted: function() {
    
        let self = this;
        let myDiagram =
          $(go.Diagram, this.$el,
            {
    
              'initialContentAlignment': go.Spot.Center,
               'isEnabled': false,  // 是否可拖拽，默认为是
              // 'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone,
              'allowLink': false,   
              'allowMove': false,
              'allowRelink': false,  // 由于项目只想展示数据，我禁用了大部分图像交互操作，具体可参看官网API
              'layout': $(go.TreeLayout, {
    angle: 0, arrangement: go.TreeLayout.ArrangementHorizontal}),      // angle可控制图像展示方向
              'undoManager.isEnabled': true,
              // Model ChangedEvents get passed up to component users
              'ChangedSelection': function(e) {
    
                 self.$emit('changed-selection', e); 
                },
            });
            
        myDiagram.nodeTemplate =  //  节点的初始化设置
          $(go.Node, 'Auto',
          $(go.Shape,  // 节点形状设置
            {