Vue+Gojs实现流程图demo

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27047215/article/details/88061155

第一步：引入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; 需渲染数据赋值