最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
GOJS+VUE实现流程图效果的教程
时间：2022-06-25 15:27:38 编辑：袖梨 来源：一聚教程网
前言及展示
在项目中需要根据传过来的数据画出流程图，采用了GOJS插件，功能很全面，可以根据自己的需要调整，不过建议简单的流程图还是自己手写一个组件，更加便于维护和变换。有一点需要注意的是，GOJS是需要收费的，有水印，虽然可以手动去掉，但是公司用的话还是需要买。GOJS的官网上有关于在VUE中应用GOJS的小例子：Minimal GoJS Sample in Vue.js。推荐看一下，可以解决大部分简单需求，这个例子可以满足你并行步骤数比较固定的二叉树画法的流程图。
这是官网的例子，其中模块，线，箭头等画布元素都可以交互。
由于我的并行步骤数不固定，于是在图中加入了Group(组)。先展示一下成品：
其中批次中可以包含多个项目，表示并行的步骤。
具体实现
分为两个文件：
diagram.vue && stepMap.vue
diagram.vue声明组件，stepMap引用
diagram.vue
基本声明：
声明后在stepMap调用，比较重要的是这两个方法：
updateDiagramFromData: function() {
this.$refs.diag.updateDiagramFromData(); // 数据变化时调用组件中的更新方法
},
changedSelection: function(e) {
let node = e.diagram.selection.first();
if (node instanceof go.Node) {
this.currentNode = node;
this.currentNodeText = node.data.text;
this.selectNode(node.data);
} else {
this.currentNode = null;
this.currentNodeText = '';
}
},
最后，将需要展示的数据转化为需要的格式就可以啦。
流程图所需格式如下：
无分组：
"nodeDataArray": [
{"key":1, "text":"Alpha", "color":"lightblue"},
{"key":2, "text":"Beta", "color":"orange"},
{"key":3, "text":"Gamma", "color":"lightgreen"},
{"key":4, "text":"Delta", "color":"pink"}
]
"linkDataArray": [
{"from":1, "to":2},
{"from":1, "to":3},
{"from":3, "to":4}
]
有分组：
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta", group: "Omega" },
{ key: "Gamma", group: "Omega" },
{ key: "Omega", isGroup: true },
{ key: "Delta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Gamma" },
{ from: "Omega", to: "Delta" }
];