jsplumb流程图应用实例

使用jsplumb背景

jsplumb功能非常强大，可以用来画流程图和组织图等其他的一些你想要的图。jsplumb有两个版本，一个商业版，一个社区版，商业版是需要收费的，社区版免费。在这里使用的是社区版2.15.6版本。jsplumb提供多种安装方式。在这里我们的使用范围是给公司内部人员通过后台去配置流程表单。前后端没有分离所以用的是引入js文件的方式。

表单效果图

1. 可以从左边面板拖动字段到右边的模块中
2. 点击右边的每个字段都可以编辑该字段的属性
3. 可以拖动右边字段排序，限制只能在同一个模块中
4. 表格字段里面可以再添加普通的字段但不能再次添加表格字段
5. 下一步判断是流程表单还是普通表单，流程表单则进入流程图编辑页面继续操作，普通表单则提交到后台保存
   
   

流程效果图

1. 初始进来只有一个初始状态节点
2. 可以添加4种类型的节点，添加一个节点会自动连线
3. 可以随意拖动节点，限制不能手动去连线，全部为自动连线
4. 可以删除每个流程节点，该节点所有子节点全部会被删除
5. 可以设置每个节点的属性
6. 审批节点属性比较特殊，可以指定完成后和拒绝后指向某个状态流程节点，相应的线会连接上，通过的连线为绿色，拒绝的连线为红色
7. 删除审批节点，则审批节点控制的连接节点不会删除，除非是该审批节点的子节点
8. 记录每个节点的坐标位置
9. 下一步提交到后台保存

代码实现

后端的前端页面都是使用vue混合开发的
由于代码比较多，这里就不贴详细代码了0.0

jsplumb引入关键代码
<script src="xxxx/js/jsplumb/jsplumb-2.15.6.js"></script>

jsplumb初始化
jsPlumb.ready(function () {
	
})