Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "the method of realizing workflow chart in vue+jsplumb". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope that this article "the method of realizing workflow chart in vue+jsplumb" can help you solve the problem.

First, I wrote a demo, which looks like this:

Official website document Home | jsPlumb Toolkit Documentation

Install the plug-in first

Npm install jsplumb-save

Install panzoom, mainly for mouse wheel zoom flow chart

Npm install panzoom-save

Introduce plug-ins on the required pages

Import panzoom from 'panzoom'import {jsPlumb} from' jsplumb'

Next, write the layout first.

Parent component

FlowNode is a subcomponent

{{node.nodeName}}

The style is mainly for the child components, and the parent component style is at will.

@ labelColor: # 409efftransmissionnodeSize: 20pxleading viewSize: 10pxlead.nodeWhile item {position: absolute; display: flex; height: 40px; width: 120px; justify-content: center; align-items: center; border: 1px solid # b7b6b6; border-radius: 4px; cursor: move; box-sizing: content-box; font-size: 12px; z-index: 9995; &: hover {z-index: 9998; .delete-btn {display: block }. Log-wrap {width: 40px; height: 40px; border-right: 1px solid # b7b6b6;} .nodeName {flex-grow: 1; width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;} .node-anchor {display: flex; position: absolute; width: @ nodeSize; height: @ nodeSize; align-items: center Justify-content: center; border-radius: 10px; cursor: crosshair; z-index: 9999; background:-webkit-radial-gradient (sandybrown 10%, white 30%, # 9a54ff 60%);}. Anchor-top {top: calc ((@ nodeSize/2) *-1); left: 50%; margin-left: calc (@ nodeSize/2) *-1);}. Anchor-right {top: 50% Right: calc ((@ nodeSize / 2) *-1); margin-top: calc ((@ nodeSize / 2) *-1);} .anchor-bottom {bottom: calc ((@ nodeSize / 2) *-1); left: 50%; margin-left: calc ((@ nodeSize / 2) *-1);} .anchor-left {top: 50%; left: calc (@ nodeSize / 2) *-1) Margin-top: calc ((@ nodeSize / 2) *-1);}} .active {border: 1px dashed @ labelColor; box-shadow: 0px 5px 9px 0px rgba;} .common-circle-node {border-radius: 50%; height: 60px; width: 60px;}

When the page style is finished, then write the plug-in configuration

JsPlumb.ready () is a hook function that executes when the jsPlumb is ready.

The connection line is established through the jsPlumb.connect () method. This method accepts an object as a configuration item. It contains configuration items that correspond to the above concepts one by one, as well as some additional styles.

Source: the source object, which can be an object's id property, an Element object, or an Endpoint object.

Target: the target object, which can be an object's id property, an Element object, or an Endpoint object.

Anchor: an array in which each item defines an anchor point.

Initialization method

Init () {this.jsPlumb.ready () = > {/ / Import the default configuration this.jsPlumb.importDefaults (this.jsplumbSetting) / / complete the check this.jsPlumb.bind before connection ('beforeDrop', evt = > {const res = () = > {} / / you can add a check whether to create a connection here, and do not add it if you return false Return res}) this.loadEasyFlow () / / causes the entire jsPlumb to be redrawn immediately. This.jsPlumb.setSuspendDrawing (false, true)}) this.initPanZoom ()}, / / load flowchart loadEasyFlow () {/ / initialize node for (let I = 0; I)

< this.data.nodeList.length; i++) { const node = this.data.nodeList[i] // 设置源点，可以拖出线连接其他节点 this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions) // // 设置目标点，其他源点拖出的线可以连接该节点 this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions) // this.jsPlumb.draggable(node.id); this.draggableNode(node.id) } // 初始化连线 this.jsPlumb.unbind('connection') // 取消连接事件 console.log(this.data.lineList) for (let i = 0; i < this.data.lineList.length; i++) { const line = this.data.lineList[i] const conn = this.jsPlumb.connect( { source: line.sourceId, target: line.targetId, paintStyle: { stroke: line.cls.linkColor, strokeWidth: 2 // strokeWidth: line.cls.linkThickness } }, this.jsplumbConnectOptions ) conn.setLabel({ label: line.label, cssClass: `linkLabel ${line.id}` }) } }, this.data 是需要渲染的数据，放在文章末尾，具体数据按照接口实际返回的来写 this.jsplumbSourceOptions 是jsplumb配置信息，新建一个文件编写，具体如下： export const jsplumbSetting = { grid: [10, 10], // 动态锚点、位置自适应 anchor: ['TopCenter', 'RightMiddle', 'BottomCenter', 'LeftMiddle'], Container: 'flow', // 连线的样式 StateMachine、Flowchart,有四种默认类型：Bezier（贝塞尔曲线），Straight（直线），Flowchart（流程图），State machine（状态机） Connector: ['Flowchart', { cornerRadius: 5, alwaysRespectStubs: true, stub: 5 }], // 鼠标不能拖动删除线 ConnectionsDetachable: false, // 删除线的时候节点不删除 DeleteEndpointsOnDetach: false, // 连线的端点 // Endpoint: ["Dot", {radius: 5}], Endpoint: [ 'Rectangle', { height: 10, width: 10 } ], // 线端点的样式 EndpointStyle: { fill: 'rgba(255,255,255,0)', outlineWidth: 1 }, LogEnabled: false, // 是否打开jsPlumb的内部日志记录 // 绘制线 PaintStyle: { stroke: '#409eff', strokeWidth: 2 }, HoverPaintStyle: { stroke: '#409eff' }, // 绘制箭头 Overlays: [ [ 'Arrow', { width: 8, length: 8, location: 1 } ] ], RenderMode: 'svg'} // jsplumb连接参数export const jsplumbConnectOptions = { isSource: true, isTarget: true, // 动态锚点、提供了4个方向 Continuous、AutoDefault anchor: ['TopCenter', 'RightMiddle', 'BottomCenter', 'LeftMiddle']} export const jsplumbSourceOptions = { filter: '.node-anchor', // 触发连线的区域 /* "span"表示标签，".className"表示类，"#id"表示元素id*/ filterExclude: false, anchor: ['TopCenter', 'RightMiddle', 'BottomCenter', 'LeftMiddle'], allowLoopback: false} export const jsplumbTargetOptions = { filter: '.node-anchor', /* "span"表示标签，".className"表示类，"#id"表示元素id*/ filterExclude: false, anchor: ['TopCenter', 'RightMiddle', 'BottomCenter', 'LeftMiddle'], allowLoopback: false} 在父组件引入配置文件和方法 import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from './config/commonConfig' 接下来在上面说的初始化方法文件里面配置鼠标滚轮缩放插件的方法 this.initPanZoom()： // 鼠标滚动放大缩小 initPanZoom() { const mainContainer = this.jsPlumb.getContainer() const mainContainerWrap = mainContainer[xss_clean] const pan = panzoom(mainContainer, { smoothScroll: false, bounds: true, // autocenter: true, zoomDoubleClickSpeed: 1, minZoom: 0.5, maxZoom: 2, // 设置滚动缩放的组合键，默认不需要组合键 beforeWheel: (e) =>

{/ / console.log (e) / let shouldIgnore =! e.ctrlKey / / return shouldIgnore}, beforeMouseDown: function (e) {/ / allow mouse-down panning only if altKey is down. Otherwise-ignore var shouldIgnore = e.ctrlKey return shouldIgnore}}) this.jsPlumb.mainContainerWrap = mainContainerWrap this.jsPlumb.pan = pan / / set the zoom ratio of jsPlumb when zooming pan.on ('zoom', e = > {const {scale} = e.getTransform () this.jsPlumb.setZoom (scale)}) pan.on (' panend') (e) = > {}) / / set mouse style when panning mainContainerWrap.style.cursor = 'grab' mainContainerWrap.addEventListener (' mousedown', function wrapMousedown () {this.style.cursor = 'grabbing' mainContainerWrap.addEventListener () {this.style.cursor =' grab'})}) mainContainerWrap.addEventListener ('mouseup' Function wrapMouseup () {this.style.cursor = 'grab'})}

When you're done, the data data is put here, and the test uses:

{"FlowJson": {"nodeList": [{"type": "start", "nodeName": "New", "id": "start-HiXWf8wsAcrWXjAAXVWc6AQk00000001", "node_code": "New", "trigger_event": "," branch_flow ":" "icon": "play-circle", "x": 175, "y": 60, "width": 50, "height": 50}, {"type": "freedom", "nodeName": "pending approval" "id": "freedom-YakFJzZ5VSp3Gec6ZULD2JDK00000004", "node_code": "pending approval", "trigger_event": "," branch_flow ":"," icon ":" sync "," x ": 330," y ": 160," width ": 50 "height": 120}, {"type": "end", "nodeName": "passed", "id": "end-JjRvtD5J2GIJKCn8MF7IYwxh00000999", "node_code": "passed", "trigger_event": "," branch_flow ":" "icon": "stop", "x": 330, "y": 360, "width": 50, "height": 50}, {"type": "end", "nodeName": "approval rejection" "id": "end-J1DMScH5YjSKyk0HeNkbt62F00010001", "node_code": "approval rejection", "trigger_event": "," branch_flow ":"," icon ":" stop "," x ": 500,350," width ": 50 "height": 50}], "linkList": [{"type": "link", "id": "link-BpI6ZuX1bJywz5SEi3R5QaWoi7g3QiSr", "sourceId": "start-HiXWf8wsAcrWXjAAXVWc6AQk00000001", "targetId": "freedom-YakFJzZ5VSp3Gec6ZULD2JDK00000004", "label": "LINE000000" "role": [], "organize": [], "audit_role": [], "audit_organize": [], "audit_organize_same": "0", "audit_dealer_same": "0", "audit_dealers": [] "notice": "0", "plug": "", "pass_option": "pass", "row_par_json": "", "judge_fields": "", "auth_at": "," auth_user ":" "auth_stat": "," auth_mark ":", "cls": {"linkType": "Flowchart", "linkColor": "# 008000", "linkThickness": 4}} {"type": "link", "id": "link-5xJWzGlkIpUCsjmpfgesJxAOMHwkPlno", "sourceId": "freedom-YakFJzZ5VSp3Gec6ZULD2JDK00000004", "targetId": "end-J1DMScH5YjSKyk0HeNkbt62F00010001", "label": "LINE000001", "role": [], "organize": [] "audit_role": ["PROJECT_SUPPORT_PLAN_CODE"], "audit_organize": [], "audit_organize_same": "0", "audit_dealer_same": "0", "audit_dealers": [], "notice": "0" "plug": "," pass_option ":" reject "," row_par_json ":", "judge_fields": "," auth_at ":"," auth_user ":", "auth_stat": "" "auth_mark": "," cls ": {" linkType ":" Flowchart "," linkColor ":" # 808080 "," linkThickness ": 1}}, {" type ":" link " "id": "link-g05V3usXa86wAtpcMkvGzybdBlpasMjU", "sourceId": "freedom-YakFJzZ5VSp3Gec6ZULD2JDK00000004", "targetId": "end-JjRvtD5J2GIJKCn8MF7IYwxh00000999", "label": "LINE000002", "role": [], "organize": [] "audit_role": ["PROJECT_SUPPORT_PLAN_CODE"], "audit_organize": [], "audit_organize_same": "0", "audit_dealer_same": "0", "audit_dealers": [], "notice": "0" "plug": "," pass_option ":" approve "," row_par_json ":", "judge_fields": "," auth_at ":"," auth_user ":", "auth_stat": "" "auth_mark": "", "cls": {"linkType": "Flowchart", "linkColor": "# 808080", "linkThickness": 1}]} this is the end of the introduction to "vue+jsplumb 's method of implementing Workflow Chart". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.