技术栈

vue3+gojs+primevue+lodash+c#+sql server

效果展示

参考文档

初学者笔记

官网demo

实现思路

1. 运用官方demo，将gojs的数据结构转换为需要的数据库记录
2. 实际数据分为两部分：存储gojs节点、节点关系数据；实际业务数据。gojs数据负责存储流程顺序、流程节点。至于业务数据，则需要与节点关联。

踩坑简述

1. 官方demo是将gojs对于dom节点的操作放onMounted生命周期中，实际在vue3中放在一个init函数，然后在nextTick中调用会比较好，否则会导致找不到绑定gojs的dom
2. 不要用vue3的ref绑定dom语法，虽然一样可以实现gojs的demo，但是与官方demo相差较大，对于gojs小白不友好
3. gojs创建好流程、节点后，注意通过Diagram.model.linkDataArray处理出节点顺序，否则对数据库中存储的两部分数据，会对应不上
4. gojs模型的存储，通过Diagram.model.toJson();和go.Model.fromJson(此处为前json序列化后结果)进行模型→string→模型的过程，数据库中存储string
5. 本身gojs处理逻辑一般般，重点在于对数据的处理，以下为我接口数据结构，可以适当参考，红色部分存储流程本身数据，flowDiagramModel存储gojs模型转换的string；蓝色部分为节点信息，seq记录节点顺序，用于与gojs节点对应；绿色部分为节点绑定提交人/提交部门信息，sendType控制审批者的权限（审批/抄送）
6. 对于gojs节点与右下角信息对应，我是通过一张map维护，初始时，将接口数据转换为map；保存时，将map转为接口所需数据
7. 后端处理数据结构稍微麻烦一点
8. 对于gojs的点击图形以及删除图形，代码如下

   myDiagram.addDiagramListener("ObjectSingleClicked", (e) => {
           currentNode.value = myDiagram.selection.first().data.key;
           setCurrentNodeData(currentNode.value);
           console.log("currentDialogId-->", myDiagram.selection.first().data.key);
       });
   myDiagram.addDiagramListener("SelectionDeleting", (e) => {
           currentNode.value = myDiagram.selection.first().data.key;
           removeCurrentNodeData(currentNode.value);
           console.log("currentDialogId-->", myDiagram.selection.first().data.key);
       });

核心代码

// 将linkDataArray梳理出先后顺序数组
const sortLDA = (data) => {
    return _.chain(data)
        .filter({ from: -1 })
        .map("from")
        .concat(_.chain(data).map("to").sortedUniq().value())
        .value();
};

//通过这个，获取gojs中每个图形的key
myDiagram.selection.first().data.key

总结

因为所有的代码与业务强关联，且实际实现功能也很一般，故只做参考，如需完成代码留言即可，看到回复。