vue-flow-graph
v1.0.0
Published
vue flow graph 流程图
Downloads
4
Readme
vue-flow-graph
Usage
npm i vue-flow-graphimport { Graph } from "vue-flow-graph";
<Graph
ref="graph"
:initData="initData"
@onChange="changeGraph"
>
</Graph>
API
- this.$refs.graph.reRender() 重新渲染
- this.$refs.graph.exportSchema() 获取流程图节点信息
- this.$refs.graph.verifySchema() 校验流程图流程是否形成闭环
- this.$refs.graph.setNodeText() 设置节点名称
- this.$refs.graph.setNodeData() 设置节点数据
- onChange 节点发生变化回调函数
- type 当前操作名称
- id 当前节点id
- data 当前流程图数据
- initData 初始化数据
{
"cells":[
{
"shape":"edge",
"attrs":{
"line":{
"stroke":"#5F95FF",
"strokeWidth":1,
"targetMarker":{
"name":"block",
"width":12,
"height":8
}
}
},
"id":"2f0229d1-da30-4d9c-a906-0c2ec225b2a4",
"zIndex":0,
"type":"line",
"source":{
"cell":"83406711-e560-4cdb-83ed-a024ebde56e7",
"port":"6461b3b3-43c8-4c75-aaea-1fd142900938"
},
"target":{
"cell":"36beca30-0118-4dd0-bb49-feef929d65e3",
"port":"aff5c784-bd51-4869-a840-d2ea673528a9"
},
"data":{
"id":"2f0229d1-da30-4d9c-a906-0c2ec225b2a4",
"type":"line",
"shape":"edge"
}
},
{
"shape":"edge",
"attrs":{
"line":{
"stroke":"#5F95FF",
"strokeWidth":1,
"targetMarker":{
"name":"block",
"width":12,
"height":8
}
}
},
"id":"ee747204-8e0b-45a9-931b-97586232bbfb",
"zIndex":0,
"type":"line",
"source":{
"cell":"36beca30-0118-4dd0-bb49-feef929d65e3",
"port":"13b8f38c-1cff-47e5-85b2-6456039e52a1"
},
"target":{
"cell":"0fced0e9-1281-445c-826d-54b603813427",
"port":"5432ddd9-c661-4727-aa7d-8b8fcb1ddfa6"
},
"data":{
"id":"ee747204-8e0b-45a9-931b-97586232bbfb",
"type":"line",
"shape":"edge"
}
},
{
"position":{
"x":240,
"y":50
},
"size":{
"width":160,
"height":60
},
"attrs":{
"body":{
"fill":"#F7F9FE",
"opacity":1,
"stroke":"#E1E3E5"
},
"label":{
"text":"开始节点",
"fill":"#000"
}
},
"shape":"start-node",
"type":"node",
"ports":{
"groups":{
"top":{
"position":"top",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"right":{
"position":"right",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"bottom":{
"position":"bottom",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"left":{
"position":"left",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
}
},
"items":[
{
"group":"top",
"id":"aac252c5-85de-4e23-9e0f-2f2545b43c3c"
},
{
"group":"right",
"id":"d5f31eb2-1e33-4bd9-93c5-e6818a5e7b92"
},
{
"group":"bottom",
"id":"6461b3b3-43c8-4c75-aaea-1fd142900938"
},
{
"group":"left",
"id":"c504dd69-32e0-4ad5-aaef-d609d1aea65a"
}
]
},
"id":"83406711-e560-4cdb-83ed-a024ebde56e7",
"zIndex":1,
"data":{
"id":"83406711-e560-4cdb-83ed-a024ebde56e7",
"type":"node",
"shape":"start-node",
"title":"开始节点",
"optButtonList":[
{
"type":"1",
"alias":"提交",
"enable":true,
"isEdit":false,
"candidateCtl":false,
"candidateList":[
]
},
{
"type":"4",
"alias":"结束",
"enable":false,
"isEdit":false,
"candidateCtl":false,
"candidateList":[
]
}
],
"componentPermissionList":[
{
"componentId":"idad3e9e7d22c74951ba69320205b21500",
"label":"输入框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"idf0b7f010a78b44ca9d863bb42c8886ab",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id83b2365dd4364416b6dcc4f3f09d695f",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id633c99ebb02340049cc1632ae31154ac",
"label":"下拉多选",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"ida3a0532f699746e98cc7941e51bf799b",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id01dde5b2c9f344a5a9eca656671112e0",
"label":"下拉单选",
"permission":"000",
"readOnly":false,
"edit":false
}
]
}
},
{
"position":{
"x":240,
"y":181
},
"size":{
"width":160,
"height":60
},
"attrs":{
"body":{
"fill":"#F7F9FE",
"opacity":1,
"stroke":"#E1E3E5"
},
"label":{
"text":"流程节点",
"fill":"#000"
}
},
"shape":"flow-node",
"type":"node",
"ports":{
"groups":{
"top":{
"position":"top",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"right":{
"position":"right",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"bottom":{
"position":"bottom",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"left":{
"position":"left",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
}
},
"items":[
{
"group":"top",
"id":"aff5c784-bd51-4869-a840-d2ea673528a9"
},
{
"group":"right",
"id":"a8f153c6-5d6e-4c0c-accb-2f7a78f843eb"
},
{
"group":"bottom",
"id":"13b8f38c-1cff-47e5-85b2-6456039e52a1"
},
{
"group":"left",
"id":"8a491fd2-589a-4bb4-9ace-4a76bfc8bdb0"
}
]
},
"id":"36beca30-0118-4dd0-bb49-feef929d65e3",
"zIndex":2,
"data":{
"id":"36beca30-0118-4dd0-bb49-feef929d65e3",
"type":"node",
"shape":"flow-node",
"title":"流程节点",
"optButtonList":[
{
"type":"1",
"alias":"提交",
"enable":true,
"isEdit":false,
"candidateCtl":false,
"candidateList":[
]
},
{
"type":"4",
"alias":"结束",
"enable":false,
"isEdit":false,
"candidateCtl":false,
"candidateList":[
]
},
{
"type":"2",
"alias":"转交",
"enable":false,
"isEdit":false,
"candidateCtl":true,
"candidateList":[
]
},
{
"type":"3",
"alias":"回退",
"enable":false,
"isEdit":false,
"candidateCtl":true,
"candidateList":[
],
"backToNodeId":""
}
],
"componentPermissionList":[
{
"componentId":"idad3e9e7d22c74951ba69320205b21500",
"label":"输入框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"idf0b7f010a78b44ca9d863bb42c8886ab",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id83b2365dd4364416b6dcc4f3f09d695f",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id633c99ebb02340049cc1632ae31154ac",
"label":"下拉多选",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"ida3a0532f699746e98cc7941e51bf799b",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id01dde5b2c9f344a5a9eca656671112e0",
"label":"下拉单选",
"permission":"000",
"readOnly":false,
"edit":false
}
],
"handleTimeConfig":{
"timeType":"day",
"interval":"",
"enable":false
},
"appointCandidateType":"appoint",
"selfChooseType":"single",
"candidateList":[
],
"allowType":"and",
"isRequired":true
}
},
{
"position":{
"x":240,
"y":313
},
"size":{
"width":160,
"height":60
},
"attrs":{
"body":{
"fill":"#F7F9FE",
"opacity":1,
"stroke":"#E1E3E5"
},
"label":{
"text":"结束节点",
"fill":"#000"
}
},
"shape":"end-node",
"type":"node",
"ports":{
"groups":{
"top":{
"position":"top",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"right":{
"position":"right",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"bottom":{
"position":"bottom",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
},
"left":{
"position":"left",
"attrs":{
"circle":{
"r":4,
"magnet":true,
"stroke":"#2695FA",
"strokeWidth":1,
"fill":"#fff",
"style":{
"visibility":"hidden"
}
}
}
}
},
"items":[
{
"group":"top",
"id":"5432ddd9-c661-4727-aa7d-8b8fcb1ddfa6"
},
{
"group":"right",
"id":"d5b04409-ba91-4af4-8e6c-76730ad94ad5"
},
{
"group":"bottom",
"id":"1bd941a0-288c-4e84-aaad-af3a9a4b993f"
},
{
"group":"left",
"id":"216749ee-bba7-4fd4-a65d-dda7894011e0"
}
]
},
"id":"0fced0e9-1281-445c-826d-54b603813427",
"zIndex":3,
"data":{
"id":"0fced0e9-1281-445c-826d-54b603813427",
"type":"node",
"shape":"end-node",
"title":"结束节点",
"componentPermissionList":[
{
"componentId":"idad3e9e7d22c74951ba69320205b21500",
"label":"输入框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"idf0b7f010a78b44ca9d863bb42c8886ab",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id83b2365dd4364416b6dcc4f3f09d695f",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id633c99ebb02340049cc1632ae31154ac",
"label":"下拉多选",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"ida3a0532f699746e98cc7941e51bf799b",
"label":"单选框",
"permission":"000",
"readOnly":false,
"edit":false
},
{
"componentId":"id01dde5b2c9f344a5a9eca656671112e0",
"label":"下拉单选",
"permission":"000",
"readOnly":false,
"edit":false
}
]
}
}
]
}节点类型
- type: line 线类型
- type: node 节点类型
- shape: start-node 流程开始节点
- shape: flow-node 流程节点
- shape: end-node 结束节点
校验规则
- 开始节点 至少有一个输出线
- 结束节点 至少有一个输入线
- 流程节点 至少一个输入一个输出
事件类型 onChange
- 添加节点 add
- 删除节点 delete
- 选中节点 selected
- 取消选中 unSelected
- 回退 undo
- 撤销 redo