bpmn-design v1.0.13

bpmn-design 是一个基于 @nutflow/nf-design-elp 改造而来的简易流程设计,预览组件

使用方式

<bpmn-design
    style="height: 500px"
    id="bpmnDesign"
    ref="bpmnDesign"
    :options="option"
    @select="bpmnDesignSelect"
    >
</bpmn-design>

配置 options

options:{
  toolbar:[ //工具栏配置
    "open",
    "create",
    "fit",
    "undo",
    "redo",
    "download",
    "import",
    "preview"
  ],
  mode:'view',//view 预览/编辑模式
  minimap:true, //缩略图
  xml:'', //数据
  simulation:true, //流程模拟
  lint:true, //模型校验
  flows:[], //节点配置 数组配置,作用与setNodeColor,参考setNodeColor入参
}

方法

通过ref方式调用

获取xml/svg

getData(type, download = false, lint = true, format = true)  //type xml/svg,download 下载,lint 校验,format 是否格式化

添加节点

addTask({ id="", name="", x=300, y=300 }) //id 节点id,name 节点名称, x 节点x坐标,y 节点y坐标

添加节点颜色

setNodeColor(nodes=[]) //nodes 数组, {id,class,name,tooltip} id 节点id,class 类名(nodePrimary,nodeSuccess,nodeWarn,nodeError,linePrimary,lineSuccess,lineWarn,lineError),可以修改样式,name 节点名称,tooltip 节点提示

事件

点击事件

@select({ id, name: name, nodeType: nodeType }) //点击节点后抛出 id 节点id,name 节点名称, nodeType 节点类型

change事件

@changed(nodes,node)  //当数据有变化时抛出, nodes //所有节点 //node 选中的节点

流程实例

this.$refs.bpmnDesign.modeler //bpmn 流程实例,如有未满足的功能,可自定义去实现

npm publish --registry https://registry.npmjs.org