1. vue-flow-graph

vue-flow-graph

vue-flow-graph

Usage

 npm i vue-flow-graph
import { 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