GOJS + VUE 流程图实现

最新推荐文章于 2024-08-21 09:30:42 发布

cicistream

最新推荐文章于 2024-08-21 09:30:42 发布

阅读量4.9w

点赞数 2

分类专栏：工作日志 Vue 文章标签： GOJS VUE

本文链接：https://blog.csdn.net/sinat_31231955/article/details/81904922

版权

本文介绍如何在项目中使用GOJS插件绘制流程图，强调了GOJS的功能强大但可能需要购买，以及在Vue中应用GOJS的示例。通过创建Group来处理并行步骤数不固定的情况，展示了最终的流程图成品，并提到了具体实现分为diagram.vue和stepMap.vue两个文件，详细说明了组件初始化和数据更新的方法。

摘要由CSDN通过智能技术生成

前言及展示

在项目中需要根据传过来的数据画出流程图，采用了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,  // 节点形状设置
            {