1 <template>
2 <v-container class="workflow-container" grid-list-xl fluid>
3 <div class="super-flow-demo">
4 <div class="node-container">
5 <div
6 class="node-item"
7 v-for="(item, index) in nodeItemList"
8 :key="index"
9 @mousedown="evt => nodeItemMouseDown(evt, item.value)">
10 {{ item.label }}
11 </div>
12 </div>
13 <div
14 class="flow-container"
15 ref="flowContainer">
16 <super-flow
17 ref="superFlow"
18 :graph-menu="graphMenu"
19 :node-menu="nodeMenu"
20 :link-menu="linkMenu"
21 :link-desc="linkDesc"
22 :node-list="nodeList"
23 :link-list="linkList">
24 <template v-slot:node="{meta}">
25 <div
26 :class="meta.type? `flow-node-${meta.type}`: ''"
27 class="flow-node ellipsis">
28 <div class="node-content" :title="meta.name">{{ meta.name }}</div>
29 </div>
30 </template>
31 </super-flow>
32 <v-btn
33 @click="saveFlow"
34 color="primary"
35 class="saveIcon"
36 >SAVE
37 </v-btn>
38 </div>
39 </div>
40
41 <el-dialog
42 :title="drawerConf.title"
43 :visible.sync="drawerConf.visible"
44 :close-on-click-modal="false"
45 width="500px">
46 <el-form
47 @keyup.native.enter="settingSubmit"
48 @submit.native.prevent
49 v-show="drawerConf.type === drawerType.node"
50 ref="nodeSetting"
51 :model="nodeSetting">
52 <el-form-item
53 label="node name"
54 prop="name">
55 <el-input
56 v-model="nodeSetting.name"
57 placeholder="Please enter the node name"
58 maxlength="30">
59 </el-input>
60 </el-form-item>
61 <el-form-item
62 label="node description"
63 prop="desc">
64 <el-input
65 v-model="nodeSetting.desc"
66 placeholder="Please enter a node description"
67 maxlength="30">
68 </el-input>
69 </el-form-item>
70 </el-form>
71 <el-form
72 @keyup.native.enter="settingSubmit"
73 @submit.native.prevent
74 v-show="drawerConf.type === drawerType.link"
75 ref="linkSetting"
76 :model="linkSetting">
77 <el-form-item
78 label="link description"
79 prop="desc">
80 <el-input
81 v-model="linkSetting.desc"
82 placeholder="Please enter a link description">
83 </el-input>
84 </el-form-item>
85 </el-form>
86 <span
87 slot="footer"
88 class="dialog-footer">
89 <el-button @click="drawerConf.cancel">
90 CANCEL
91 </el-button>
92 <el-button type="primary" @click="settingSubmit">
93 OK
94 </el-button>
95 </span>
96 </el-dialog>
97 </v-container>
98 </template>
99
100 <script>
101 import SuperFlow from 'vue-super-flow'
102 import 'vue-super-flow/lib/index.css'
103
104 const drawerType = {
105 node: 0,
106 link: 1
107 }
108
109 export default {
110 components: {
111 SuperFlow
112 },
113 data () {
114 return {
115 drawerType,
116 nodeList: [
117 {
118 id: "N1",
119 coordinate: [771, 32],
120 width: 120,
121 height: 40,
122 meta: {
123 label: 'start',
124 name: 'start',
125 type: 'start'
126 }
127 },
128 {
129 id: "N2",
130 coordinate: [731, 137],
131 width: 200,
132 height: 40,
133 meta: {
134 desc: '1',
135 label: 'process',
136 name: 'process11111',
137 type: 'process'
138 }
139 },
140 {
141 id: "N3",
142 coordinate: [747, 237],
143 width: 168,
144 height: 168,
145 meta: {
146 desc: '?',
147 label: 'if',
148 name: 'if?????',
149 type: 'if'
150 }
151 },
152 {
153 id: "N4",
154 coordinate: [731, 505],
155 width: 200,
156 height: 40,
157 meta: {
158 desc: '2',
159 label: 'process',
160 name: 'process22222',
161 type: 'process'
162 }
163 },
164 {
165 id: "N5",
166 coordinate: [1088, 300],
167 width: 200,
168 height: 40,
169 meta: {
170 desc: '3',
171 label: 'process',
172 name: 'process33333',
173 type: 'process'
174 }
175 },
176 {
177 id: "N6",
178 coordinate: [771, 597],
179 width: 120,
180 height: 40,
181 meta: {
182 label: 'end',
183 name: 'end',
184 type: 'end'
185 }
186 }
187 ],
188 linkList: [
189 {
190 id: "L1",
191 startAt: [60, 40],
192 startId: "N1",
193 endAt: [100, 0],
194 endId: "N2",
195 meta: null
196 },
197 {
198 id: "L2",
199 startAt: [100, 40],
200 startId: "N2",
201 endAt: [84, 0],
202 endId: "N3",
203 meta: null
204 },
205 {
206 id: "L3",
207 startAt: [100, 40],
208 startId: "N4",
209 endAt: [60, 0],
210 endId: "N6",
211 meta: null
212 },
213 {
214 id: "L4",
215 startAt: [84, 168],
216 startId: "N3",
217 endAt: [100, 0],
218 endId: "N4",
219 meta: {
220 desc: 'YES'
221 }
222 },
223 {
224 id: "L5",
225 startAt: [168, 84],
226 startId: "N3",
227 endAt: [0, 20],
228 endId: "N5",
229 meta: {
230 desc: 'NO'
231 }
232 },
233 {
234 id: "L6",
235 startAt: [100, 0],
236 startId: "N5",
237 endAt: [200, 20],
238 endId: "N2",
239 meta: null
240 }
241 ],
242 drawerConf: {
243 title: '',
244 visible: false,
245 type: null,
246 info: null,
247 open: (type, info) => {
248 const conf = this.drawerConf
249 conf.visible = true
250 conf.type = type
251 conf.info = info
252 if (conf.type === drawerType.node) {
253 conf.title = 'NODE'
254 if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
255 this.$set(this.nodeSetting, 'name', info.meta.name)
256 this.$set(this.nodeSetting, 'desc', info.meta.desc)
257 } else {
258 conf.title = 'LINK'
259 if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
260 this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
261 }
262 },
263 cancel: () => {
264 this.drawerConf.visible = false
265 if (this.drawerConf.type === drawerType.node) {
266 this.$refs.nodeSetting.clearValidate()
267 } else {
268 this.$refs.linkSetting.clearValidate()
269 }
270 }
271 },
272 linkSetting: {
273 desc: ''
274 },
275 nodeSetting: {
276 name: '',
277 desc: ''
278 },
279 nodeItemList: [
280 {
281 label: 'start',
282 value: () => ({
283 width: 120,
284 height: 40,
285 meta: {
286 label: 'start',
287 name: 'start',
288 type: 'start'
289 }
290 })
291 },
292 {
293 label: 'process',
294 value: () => ({
295 width: 200,
296 height: 40,
297 meta: {
298 label: 'process',
299 name: 'process',
300 type: 'process'
301 }
302 })
303 },
304 {
305 label: 'if',
306 value: () => ({
307 width: 168,
308 height: 168,
309 meta: {
310 label: 'if',
311 name: 'if',
312 type: 'if'
313 }
314 })
315 },
316 {
317 label: 'end',
318 value: () => ({
319 width: 120,
320 height: 40,
321 meta: {
322 label: 'end',
323 name: 'end',
324 type: 'end'
325 }
326 })
327 }
328 ],
329 graphMenu: [
330 [
331 {
332 // 选项 label
333 label: 'start',
334 // 选项是否禁用
335 disable (graph) {
336 return !!graph.nodeList.find(node => node.meta.label === 'start')
337 },
338 // 选项选中后回调函数
339 selected (graph, coordinate) {
340 graph.addNode({
341 width: 120,
342 height: 40,
343 coordinate,
344 meta: {
345 label: 'start',
346 name: 'start',
347 type: 'start'
348 }
349 })
350 }
351 },
352 {
353 label: 'process',
354 selected (graph, coordinate) {
355 graph.addNode({
356 width: 200,
357 height: 40,
358 coordinate,
359 meta: {
360 label: 'process',
361 name: 'process',
362 type: 'process'
363 }
364 })
365 }
366 },
367 {
368 label: 'if',
369 selected (graph, coordinate) {
370 graph.addNode({
371 width: 168,
372 height: 168,
373 coordinate,
374 meta: {
375 label: 'if',
376 name: 'if',
377 type: 'if'
378 }
379 })
380 }
381 }
382 ],
383 [
384 {
385 label: 'end',
386 selected (graph, coordinate) {
387 graph.addNode({
388 width: 120,
389 height: 40,
390 coordinate,
391 meta: {
392 label: 'end',
393 name: 'end',
394 type: 'end'
395 }
396 })
397 }
398 }
399 ],
400 [
401 {
402 label: 'select all',
403 selected: graph => {
404 graph.selectAll()
405 }
406 }
407 ]
408 ],
409 nodeMenu: [
410 [
411 {
412 label: 'delete',
413 selected: node => {
414 node.remove()
415 }
416 },
417 {
418 label: 'edit',
419 selected: node => {
420 this.drawerConf.open(drawerType.node, node)
421 }
422 }
423 ]
424 ],
425 linkMenu: [
426 [
427 {
428 label: 'delete',
429 selected: link => {
430 link.remove()
431 }
432 },
433 {
434 label: 'edit',
435 selected: link => {
436 this.drawerConf.open(drawerType.link, link)
437 }
438 }
439 ]
440 ],
441 dragConf: {
442 isDown: false,
443 isMove: false,
444 offsetTop: 0,
445 offsetLeft: 0,
446 clientX: 0,
447 clientY: 0,
448 ele: null,
449 info: null
450 }
451 }
452 },
453 mounted () {
454 document.addEventListener('mousemove', this.docMousemove)
455 document.addEventListener('mouseup', this.docMouseup)
456 this.$once('hook:beforeDestroy', () => {
457 document.removeEventListener('mousemove', this.docMousemove)
458 document.removeEventListener('mouseup', this.docMouseup)
459 })
460 },
461 methods: {
462 saveFlow () {
463 this.nodeList = this.$refs.superFlow.toJSON().nodeList
464 this.linkList = this.$refs.superFlow.toJSON().linkList
465 console.log(this.nodeList)
466 console.log(this.linkList)
467 },
468 linkDesc (link) {
469 return link.meta ? link.meta.desc : ''
470 },
471 settingSubmit () {
472 const conf = this.drawerConf
473 if (this.drawerConf.type === drawerType.node) {
474 if (!conf.info.meta) conf.info.meta = {}
475 Object.keys(this.nodeSetting).forEach(key => {
476 this.$set(conf.info.meta, key, this.nodeSetting[key])
477 })
478 this.$refs.nodeSetting.resetFields()
479 } else {
480 if (!conf.info.meta) conf.info.meta = {}
481 Object.keys(this.linkSetting).forEach(key => {
482 this.$set(conf.info.meta, key, this.linkSetting[key])
483 })
484 this.$refs.linkSetting.resetFields()
485 }
486 conf.visible = false
487 },
488 docMousemove ({ clientX, clientY }) {
489 const conf = this.dragConf
490 if (conf.isMove) {
491 conf.ele.style.top = clientY - conf.offsetTop + 'px'
492 conf.ele.style.left = clientX - conf.offsetLeft + 'px'
493 } else if (conf.isDown) {
494 // 鼠标移动量大于 5 时 移动状态生效
495 conf.isMove = Math.abs(clientX - conf.clientX) > 5 || Math.abs(clientY - conf.clientY) > 5
496 }
497 },
498 docMouseup ({ clientX, clientY }) {
499 const conf = this.dragConf
500 conf.isDown = false
501
502 if (conf.isMove) {
503 const {
504 top,
505 right,
506 bottom,
507 left
508 } = this.$refs.flowContainer.getBoundingClientRect()
509
510 // 判断鼠标是否进入 flow container
511 if (
512 clientX > left && clientX < right && clientY > top && clientY < bottom
513 ) {
514 // 获取拖动元素左上角相对 super flow 区域原点坐标
515 const coordinate = this.$refs.superFlow.getMouseCoordinate(
516 clientX - conf.offsetLeft,
517 clientY - conf.offsetTop
518 )
519 // 添加节点
520 this.$refs.superFlow.addNode({
521 coordinate,
522 ...conf.info
523 })
524 }
525 conf.isMove = false
526 }
527 if (conf.ele) {
528 conf.ele.remove()
529 conf.ele = null
530 }
531 },
532 nodeItemMouseDown (evt, infoFun) {
533 const {
534 clientX,
535 clientY,
536 currentTarget
537 } = evt
538
539 const {
540 top,
541 left
542 } = evt.currentTarget.getBoundingClientRect()
543
544 const conf = this.dragConf
545 const ele = currentTarget.cloneNode(true)
546
547 Object.assign(this.dragConf, {
548 offsetLeft: clientX - left,
549 offsetTop: clientY - top,
550 clientX: clientX,
551 clientY: clientY,
552 info: infoFun(),
553 ele,
554 isDown: true
555 })
556
557 ele.style.position = 'fixed'
558 ele.style.margin = '0'
559 ele.style.top = clientY - conf.offsetTop + 'px'
560 ele.style.left = clientX - conf.offsetLeft + 'px'
561
562 this.$el.appendChild(this.dragConf.ele)
563 }
564 }
565 }
566 </script>
567
568 <style lang="scss" scoped>
569 .workflow-container {
570 width: calc(100vw - 80px);
571 height: calc(100vh - 128px);
572 box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
573 margin: 32px;
574 padding: 0;
575 background: #fff;
576 overflow: hidden;
577 }
578 .ellipsis {
579 white-space : nowrap;
580 text-overflow : ellipsis;
581 overflow : hidden;
582 word-wrap : break-word;
583 }
584 .super-flow-demo {
585 position: relative;
586 margin: 20px;
587 background: #f5f5f5;
588 height: calc(100vh - 168px);
589
590 .node-container {
591 width: 100%;
592 height: 50px;
593 background-color: #FFFFFF;
594
595 .node-item {
596 display: inline-block;
597 font-size: 14px;
598 height: 30px;
599 width: 120px;
600 margin: 0 20px 0 0;
601 background: #FFFFFF;
602 line-height: 30px;
603 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
604 cursor: pointer;
605 user-select: none; // 防止鼠标左键拖动选中页面的文字
606 text-align: center;
607 &:hover {
608 box-shadow : 1px 1px 8px rgba(0, 0, 0, 0.4);
609 }
610 }
611 }
612 .flow-container {
613 width: 100%;
614 height: calc(100% - 50px);
615
616 .super-flow {
617 overflow: auto;
618 }
619 }
620 .saveIcon {
621 position: absolute;
622 right: 0px;
623 top: 0px;
624 }
625 .super-flow__node {
626 .flow-node {
627 box-sizing: border-box;
628 width: 100%;
629 height: 100%;
630 line-height: 40px;
631 padding: 0 6px;
632 font-size: 16px;
633 color: #fff;
634 font-weight: bold;
635 .node-content {
636 text-align: center;
637 overflow: hidden;
638 text-overflow: ellipsis;
639 white-space: nowrap;
640 }
641 }
642 }
643 /*开始节点样式*/
644 .ellipsis.flow-node-start {
645 background: #55ABFC;
646 border-radius: 10px;
647 border: 1px solid #b4b4b4;
648 }
649 /*流程节点样式*/
650 .ellipsis.flow-node-process {
651 position: relative;
652 background: #30B95C;
653 border: 1px solid #b4b4b4;
654 }
655 /*条件节点样式*/
656 .ellipsis.flow-node-if {
657 width: 120px;
658 height: 120px;
659 position: relative;
660 top: 24px;
661 left: 24px;
662 background: #BC1D16;
663 border: 1px solid #b4b4b4;
664 transform: rotateZ(45deg); //倾斜
665 .node-content {
666 position: absolute;
667 top: 50%;
668 left: 20px;
669 width: 100%;
670 transform: rotateZ(-45deg) translateY(-75%);
671 }
672 }
673 /*结束节点样式*/
674 .ellipsis.flow-node-end {
675 background: #000;
676 border-radius: 10px;
677 border: 1px solid #b4b4b4;
678 }
679 }
680 </style>
681 <style>
682 .super-flow-demo .super-flow__node {
683 border: none;
684 background: none;
685 box-shadow: none;
686 }
687 </style>
