Vue+jsPlumb搭建流程

第一次用vue搭建的项目，在同时有多个表格显示的情况下，还是建议不使用vue这种单页面框架，一旦table数据量大时，页面就会出现几秒的卡动。

回归正题

还是讲讲jsPlumb怎么绘制一个流程图

安装 jsPlumb

npm install jsPlumb --save

安装成功后在node_modules 就会添加一个jsplumb文件夹

在main.js 或者在使用的页面引用jsplumb

注意：这里的引用没办法到具体模块，类似于script引用

import jsplumb from 'jsplumb'

最好确认jsPlumb加载完毕之后，再开始使用相关功能。

默认情况下，jsPlumb在浏览器的窗口中注册，为整个页面提供一个静态实例，所以也可以把它看成一个类，来实例化jsPlumb：

let j = jsPlumb.getInstance({
  PaintStyle: {stroke: '#56A7F9', strokeWidth: 2},  //连接线的默认样式
  HoverPaintStyle :{stroke: "#13E0F9", strokeWidth: 2},//鼠标滑过连线样式
  Endpoint: ["Dot", {radius: 6}], //连线终端点
  EndpointStyle: {fill: "#fff",outlineWidth:2,outlineStroke: '#56A7F9', radius: 5}, //这个是控制连线终端那个小点的样式
  EndpointHoverStyle: {fill: "#fff",outlineStroke: '#13E0F9'}, //这个是控制鼠标滑过连线终端那个小点的样式
  Connector: ["Straight"],//连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight]
  ConnectionOverlays: [ 
    ["Arrow", {location: 1,width: 11,length: 11,foldback:0.618}],//连线设置箭头
    ["Label", { //连线上设置label
      location: 0.5,
      label: "label", //label显示文字
      id: "label",
      cssClass: "aLabel",
       events:{//label点击事件
         tap:function() { alert("hey"); }
       }
      }
    ]
  ],
  Container: "parentManage" --可拖动区域 ID
});

连线配置

1、整个节点作为有效连接点，例：

j.makeSource(jsPlumb.getSelector(".process-step .node-item"),{ anchor: "Continuous" })
j.makeTarget(jsPlumb.getSelector(".process-step .node-item"),{anchor: "Continuous"})

let connectJson = {
    paintStyle : { stroke: '#56A7F9', strokeWidth: 2,dashstyle:"2 4" } //dashstyle设置虚线
}
//建立连线
j.connect({
  source: 'item-'+startId,//开始节点ID
  target: 'item-'+endId//结束节点ID
},connectJson)

2、设置节点位置作为有效连线点，可自定义不同连线的样式

//自定义样式
let common = {
   maxConnections:5,
   paintStyle:{
     strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4
   }
}

//描点
$("#labelManage"+self.index).find('.process-step').each(function (i) {
  var id = $(this).attr('process_id');
  j.addEndpoint(this,{uuid:id , anchor: "BottomCenter",  isSource:true},common);
});

//建立连线
j.connect({uuids: [开始节点ID, 结束节点ID]},connectJson)

拖动配置

let draggable={
  containment: 'parent',//拖动范围
  drag: function (event, ui) {
    event.stopPropagation(); return false;
  },
  stop: function (event) { //拖动结束执行方法【记录坐标点】
    let i = $(event.el).attr("name");
    self.list[i].viewConfig.coordinate=  {x:event.pos[0],y:event.pos[1]}
    event.stopPropagation();
    return false;
  }
}


j.draggable(jsPlumb.getSelector(".process-step"), draggable);

事件

1、连线之前的判断，主要用于连线之前的有效判断，重新设置连线样式等

注意：如果在此方法在调用了connect 建立连接 return 需返回false ,不然会出现两条连线

j.bind('beforeDrop', function (info) { 
   //判断连接是否有效

   //返回true连接成功（自动添加连线）/返回false连接不生效
   return true || false;
})

2、点击连线 

j.bind("click", function (conn, originalEvent) {
   j.deleteConnection(conn); //删除连线
});

 3、删除连线事件

j.bind("connectionDetached", function (info,a,c) {
  let startId = $("#"+info.sourceId).attr("process_id"),
    endId = $("#"+info.targetId).attr("process_id");

    self.relation.forEach((item,index)=>{
      if(item.relationFrom == startId && item.relationTo==endId ){
        self.relation.splice(index,1);
        return false
      }
    })

});

4、移动连线事件 

j.bind("connectionMoved",function(params){
  let startId = params.originalSourceId.replace(/item-/g,''),
    endId =params.originalTargetId.replace(/item-/g,'');

  self.relation.forEach((item,index)=>{
    if(item.relationFrom == startId && item.relationTo==endId ){
      self.relation.splice(index,1);
      return false
    }
  })
})

效果：

参考链接：https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_21-%E8%BF%9E%E6%8E%A5%E4%B8%A4%E4%B8%AA%E8%8A%82%E7%82%B9