Vue+Gojs实现流程图demo

灰太狼 2022-03-15 08:18 745阅读 0赞

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

第二步：运行下述代码

<template>
    	<div id="wrap">
    		<div id="chart-wrap">
    			<div id="chart-palette"></div>
    			<div id="chart-diagram"></div>
    		</div>
    		<button @click="onSubmit"></button>
    	</div>
    	</div>
    </template>
    <script>
    	import go from 'gojs'
    	const MAKE = go.GraphObject.make;
    	export default {
    		data() {
    			return {}
    		},
    		mounted() {
    			var mySelf = this;
    			mySelf.myDiagram = MAKE(go.Diagram, "chart-diagram", {
    				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: true,
    				"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
    				layout: MAKE(go.TreeLayout, {
    					angle: 0,
    					layerSpacing: 35
    				})
    			}); //构建gojs对象
    			console.log(mySelf.myDiagram);
    			mySelf.myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
    				debugger
    				console.log(e.subject.part);
    
    			});
    
    			mySelf.myDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {
    				debugger
    				console.log("Double-clicked at" + e.diagram.lastInput.documentPoint);
    			});
    
    			mySelf.myDiagram.addDiagramListener("ClipboardPasted", function(e) {
    				debugger
    				console.log("Pasted" + e.diagram.selection.count + "parts");
    			});
    
    			mySelf.myDiagram.linkTemplate = MAKE(go.Link, {
    					curve: go.Link.Bezier
    				}, // 贝塞尔曲线
    				{
    					routing: go.Link.Orthogonal,
    					corner: 15
    				},
    				MAKE(go.Shape, {
    					strokeWidth: 2,
    					stroke: "#F60"
    				}),
    				MAKE(go.Shape, {
    					toArrow: "Standard",
    					fill: "red",
    					stroke: "blue"
    				}), //箭头
    				MAKE(go.TextBlock, {
    						margin: 20,
    						stroke: "blue",
    						font: "14px sans-serif",
    						width: 50,
    						wrap: go.TextBlock.WrapDesiredSize
    					},
    					new go.Binding("text", "linktext")), {
    					toolTip: MAKE(go.Adornment, "Auto",
    						MAKE(go.Shape, {
    							fill: "#FFFFCC"
    						}),
    						MAKE(go.TextBlock, {
    							margin: 4
    						}, new go.Binding("text", "name1"))
    					) // end of Adornment
    				}
    			);
    			let myModel = MAKE(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下
    			myModel.nodeDataArray = [];
    			myModel.linkDataArray = [];
    
    			var lightText = "whitesmoke";
    			mySelf.myDiagram.nodeTemplateMap.add(
    				"Next",
    				MAKE(
    					go.Node,
    					"Spot",
    					// nodeStyle(),
    					MAKE( //声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
    						go.Panel, //表明需要创建一个panel面板对象
    						"Auto", //页面布局为自动
    						MAKE( //声明构建一个圆角矩形
    							go.Shape,
    							"RoundedRectangle", {
    								fill: "#44CCFF",
    								stroke: '#FFF',
    								strokeWidth: 1,
    								angle: 0
    							},
    							new go.Binding("figure", "figure") //声明并创建一个新的图形
    						),
    						MAKE( //声明一个可编辑文本域
    							go.TextBlock, {
    								font: "12pt Helvetica, Arial, sans-serif",
    								stroke: lightText,
    								width: 125,
    								maxSize: new go.Size(360, NaN),
    								wrap: go.TextBlock.WrapFit, //文本域换行
    								editable: true, //是否可编辑
    								margin: 12,
    								wrap: go.TextBlock.WrapDesiredSize
    							},
    							new go.Binding("text").makeTwoWay()
    						)
    					),
    					// four named ports, one on each side:
    					makePort("T", go.Spot.Top, false, true),
    					makePort("L", go.Spot.Left, true, true),
    					makePort("R", go.Spot.Right, true, true),
    					makePort("B", go.Spot.Bottom, true, false)
    				)
    			);
    
    			//Node连接线
    			function makePort(name, spot, output, input) {
    				return MAKE(go.Shape, "Circle", {
    					fill: "transparent",
    					stroke: null, // this is changed to "white" in the showPorts function
    					desiredSize: new go.Size(10, 10),
    					alignment: spot,
    					alignmentFocus: spot, // align the port on the main Shape
    					portId: name, // declare this object to be a "port"
    					fromSpot: spot,
    					toSpot: spot, // declare where links may connect at this port
    					fromLinkable: output,
    					toLinkable: input, // declare whether the user may draw links to/from here
    					cursor: "pointer" // show a different cursor to indicate potential link point
    				});
    			};
    			mySelf.myDiagram.model = myModel;
    			mySelf.init();
    		},
    		methods: {
    			onSubmit() {
    
    			},
    			init() {
    				var mySelf = this;
    				window.myPalette = MAKE(
    					go.Palette,
    					"chart-palette", // must name or refer to the DIV HTML element
    					{
    						scrollsPageOnFocus: false,
    						nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // share the templates used by myDiagram
    						model: new go.GraphLinksModel([
    							// specify the contents of the Palette
    							{
    								category: "Next",
    								text: "新规则"
    							}
    						])
    					}
    				);
    			},
    		}
    	}
    </script>
    <style lang="less" scoped>
    	#form-wrap {
    		padding: 20px 40px;
    		// background-color: white;
    		border: solid 1px rgb(244, 244, 244);
    	}
    
    	#submit {
    		width: 102px;
    		height: 40px;
    		float: right;
    		margin: 20px 5px 16px 0;
    	}
    
    	#chart-wrap {
    		width: 100%;
    		display: flex;
    		justify-content: space-between;
    		margin-bottom: 22px;
    
    		#chart-palette {
    			width: 180px;
    			margin-right: 30px;
    			background-color: white;
    			border: solid 1px rgb(244, 244, 244);
    		}
    
    		#chart-diagram {
    			flex-grow: 1;
    			height: 720px;
    			background-color: white;
    			border: solid 1px rgb(244, 244, 244);
    		}
    	}
    
    	#lateEntry {
    		clear: both;
    		background-color: rgb(255, 255, 255);
    		border: solid 1px rgb(244, 244, 244);
    
    		>span {
    			display: inline-block;
    			height: 50px;
    			font-size: 16px;
    			line-height: 50px;
    			text-indent: 30px;
    			letter-spacing: 0.8px;
    			text-align: left;
    			color: rgb(35, 35, 35);
    			// border-bottom: 1px solid rgb(234, 234, 234);
    		}
    	}
    </style>

第三步：去水印

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; 需渲染数据赋值

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

[wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]: