Vue+Gojs实现流程图demo

第一步：引入package.json引入gojs依赖包-- "gojs": "^2.0.3", (npm install gojs --save)

第二步：运行下述代码

第三步：去水印

在哪个文件中找到破解的文件。 

在node_modules\gojs\release\go.js 下进行破解

1. 在文件中搜索7eba17a4ca3b1a8346，找到类似a.$q=b.V[Za("7eba17a4ca3b1a8346")][Za("78a118b7")](b.V,yk,4,4);这样结构的代码
2. 将其注释，替换成a.$q=function(){return true;};
3. 直接npm install可以在module里寻找go.js文件，需修改的代码一般在769行

------拓展：相关构建gojs流程图时的某些参数及相关配置使用方式

====================-构建gojs流程面板
import go from  'gojs'
const MAKE = go.GraphObject.make;
mySelf.myDiagram = MAKE(go.Diagram, "mygoChart", {
    initialContentAlignment: go.Spot.Center, // 居中显示
    "undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
    "toolManager.hoverDelay": 100, //tooltip提示显示延时
    "toolManager.toolTipDuration": 10000, //tooltip持续显示时间
    //isReadOnly:true,//只读
    "grid.visible": true, //显示网格
    allowMove: true, //允许拖动
    // allowDragOut:true,
    allowDelete: true,//允许删除
    allowCopy: true,//允许复制
    allowClipboard: false,//允许剪切
    "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
    layout: MAKE(go.TreeLayout, {//创建布局,示例为树
        angle: 0,    //角度
        layerSpacing: 35 //层间距
    })
}); //构建gojs对象
====================-
mySelf.myDiagram.nodeTemplateMap.add(： //声明左侧Node工具栏Tools
        "Next", // 关键参数,需要与init初始化时window.myPalette中model对象配置的category保持一致
         MAKE(
            go.Node, //
            "Spot",
            // nodeStyle(),
            MAKE(//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
                go.Panel, //表明需要创建一个panel面板对象
                "Auto",      //页面布局为自动
                MAKE(     //声明构建一个圆角矩形
                    go.Shape,
                    "RoundedRectangle", {
                        fill: "rgb(54, 128, 181)", //内填充颜色
                        stroke: null  //外边框颜色
                    },
                    new go.Binding("figure", "figure") //声明并创建一个新的图形
                ),
                MAKE(    //声明一个可编辑文本域
                    go.TextBlock, {
                        font: "11pt Helvetica, Arial, sans-serif",
                        stroke: lightText,
                        margin: 8,
                        maxSize: new go.Size(160, NaN),
                        wrap: go.TextBlock.WrapFit, //文本域换行
                        editable: true    //是否可编辑
                    },
                    new go.Binding("text").makeTwoWay()
                )
            ),
            makePort("T", go.Spot.Top, false, true),//创建Top顶端可延申链接点
            makePort("L", go.Spot.Left, true, true),//创建Left左端可延申链接点
            makePort("R", go.Spot.Right, true, true),//创建Righ右端可延申链接点
            makePort("B", go.Spot.Bottom, true, false)//创建Buttom底端可延申链接点
        )
    );
====================-自定义流程图流程节点相关配置
mySelf.myDiagram.nodeTemplate : 自定义流程图节点
    -> MAKE(go.Node,//声明创建的是node对象
        new go.Binding("location", "loc", go.Point.parse),//创建节点并设定节点的初始位置
        MAKE(go.Shape, "RoundedRectangle", {//构建节点的形状,示例为圆角矩形
            fill: "#44CCFF",//模块内填充颜色
            stroke: 'green',//外填充颜色(可理解为margin,也可以当成外边框颜色来理解)
            strokeWidth: 2,//外边框(填充)宽度
            angle: 0//模块形状的偏移量(角度)
       }),
       "Auto", //设置并定义节点模块内容布局走向:Vertical(垂直),Auto(自动),Horizontal(水平)
       { background: "#44CCFF" },//将Node背景底色渲染为蓝色
       MAKE(go.Picture,//构建Node区域图像类内容
            { source:"../assets/img/01.png",margin: 10, width: 50, height: 50, background: "red" },//基本参数设置
       new go.Binding("source")),//*Picture.source参数值与模型数据中的"source"字段绑定
       MAKE(go.TextBlock,//构建Node区域文本类内容
         "Default Text",  // 初始化默认文本
         // 文字周围的空隙, 大号字体, 白色笔画:
         { margin: 12, stroke: "white", font: "bold 16px sans-serif",
            width:75,
            wrap: go.TextBlock.WrapDesiredSize
         },
       new go.Binding("text", "name1")), // name1为linktext为nodeDataArray对象中的参数
       {
           mouseEnter: function(e, node, prev) {
               console.log('mouseEnter');//鼠标点击事件
           },
           mouseLeave: function(e, node, prev) {
               mySelf.detailShow = false;//鼠标移开事件
           },
       },
       MAKE(go.Panel, "Horizontal", {//创建并设置node内模板:实现Node块内的控件布局
               padding: 5
       },
====================-自定义流程图连接线相关配置
mySelf.myDiagram.linkTemplate:自定义流程图连接线
    -> { curve: go.Link.Bezier } ： 设置并定义连接线曲线样式,示例为贝塞尔曲线
    -> MAKE(go.Shape, {
            strokeWidth: 2, //连接线宽(厚)度
            stroke: "#F60"//连接线笔画默认(未选中)颜色
        }) : 设置并定义连接线宽度及颜色
    -> MAKE(go.Shape, {
            toArrow: "Standard",//箭头样式,示例为标准
            fill: "#000",//箭头的填充颜色(内填充,可以理解为padding)
            stroke: null//连接线笔画默认(未选中)颜色,(外填充,可以理解为margin)
        }), //设置并定义箭头样式
    --> MAKE(go.TextBlock, { //文本块创建器
                margin: 20,//外边距,默认单位为px
                stroke: "blue",//字体颜色
                font: "14px sans-serif",//字体样式
                width:50,//内容宽度
                wrap: go.TextBlock.WrapDesiredSize//样式包装器
            },
            new go.Binding("text", "linktext")), { //创建并绑定显示的文本域信息,linktext为nodeDataArray对象中的参数
            toolTip: MAKE(go.Adornment, "Auto",
                    MAKE(go.Shape, {
                        fill: "#FFFFCC",//悬浮提示框内填充颜色
                    }),
                    MAKE(go.TextBlock, {
                        margin: 4 // 外边距
                    }, new go.Binding("text", "name1")) //创建并绑定显示的文本域信息,name1为nodeDataArray对象中的参数
                ) ：设置并定义鼠标悬浮提示信息样式
            } : 设置并定义连接线指示及指针悬浮提示内容
=================-渲染数据相关配置
--> let myModel = MAKE(go.Model);//无连接线模型渲染
    let myModel = MAKE(go.GraphLinksModel);//指定连接(适用于复杂业务);需要配置myModel.linkDataArray
    let myModel = MAKE(go.TreeModel); //使用Tree树图模型渲染
--> myModel.nodeDataArray = [{},{},{}] : 流程节点数据(对象数组)
--> myModel.linkDataArray = [ {from:"1",to:"2"}, {from:"1",to:"2"}……] : 流程链接指示数组,用于构建各个node节点间的数据关系，需要使用go.GraphLinksModel
--> mySelf.myDiagram.model = myModel; 需渲染数据赋值