|
@@ -1,20 +1,19 @@
|
|
|
<template>
|
|
|
|
|
|
<div ref="container" class="container">
|
|
|
- <Node v-for="(item, index) in details" :key="index" :detail="item" ref="node" />
|
|
|
+ <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.name" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import jsPlumb from 'jsplumb'
|
|
|
-import Vue from 'vue'
|
|
|
import Node from './modules/Node.vue'
|
|
|
-import { ready, newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
|
|
|
+import { newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
|
|
|
export default {
|
|
|
components: {
|
|
|
- Node,
|
|
|
+ Node
|
|
|
},
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
jsPlumb: null,
|
|
|
instance: null,
|
|
@@ -25,34 +24,34 @@ export default {
|
|
|
y: 40,
|
|
|
children: [
|
|
|
{
|
|
|
- name: 'node2',
|
|
|
+ name: 'node2'
|
|
|
},
|
|
|
{
|
|
|
- name: 'node3',
|
|
|
- },
|
|
|
- ],
|
|
|
+ name: 'node3'
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
{
|
|
|
x: 100,
|
|
|
y: 320,
|
|
|
name: 'node2',
|
|
|
- children: [],
|
|
|
+ children: []
|
|
|
},
|
|
|
{
|
|
|
x: 660,
|
|
|
y: 320,
|
|
|
name: 'node3',
|
|
|
- children: [],
|
|
|
- },
|
|
|
- ],
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ mounted () {
|
|
|
this.init()
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created () {},
|
|
|
methods: {
|
|
|
- init() {
|
|
|
+ init () {
|
|
|
let { instance } = this
|
|
|
// 初始化节点
|
|
|
instance = newInstance({
|
|
@@ -60,15 +59,15 @@ export default {
|
|
|
dragOptions: {
|
|
|
containment: 'parent',
|
|
|
containmentPadding: 10,
|
|
|
- grid: { w: 20, h: 20 },
|
|
|
- },
|
|
|
+ grid: { w: 20, h: 20 }
|
|
|
+ }
|
|
|
})
|
|
|
instance.importDefaults({
|
|
|
anchor: 'Continuous',
|
|
|
connectionsDetachable: false,
|
|
|
// 连接器类型,这里设置为Flowchart
|
|
|
connector: {
|
|
|
- type: 'Flowchart',
|
|
|
+ type: 'Flowchart'
|
|
|
},
|
|
|
paintStyle: { stroke: '#456', strokeWidth: 3 },
|
|
|
hoverPaintStyle: { stroke: 'red', strokeWidth: 4 },
|
|
@@ -76,35 +75,57 @@ export default {
|
|
|
{
|
|
|
type: 'Arrow',
|
|
|
options: {
|
|
|
- location: 1,
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'Custom',
|
|
|
- options: {
|
|
|
- create: (component) => {
|
|
|
- const d = document.createElement('button')
|
|
|
- d.innerHTML = '+'
|
|
|
- d.className = 'plus_btn'
|
|
|
- console.log(d)
|
|
|
- return d
|
|
|
- },
|
|
|
- location: [5, 0],
|
|
|
- events: {
|
|
|
- tap: (e, o) => {
|
|
|
- console.log('tap', e, o)
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ location: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // type: 'Custom',
|
|
|
+ // options: {
|
|
|
+ // create: (component) => {
|
|
|
+ // const d = document.createElement('button')
|
|
|
+ // d.innerHTML = '+'
|
|
|
+ // d.className = 'plus_btn'
|
|
|
+ // console.log(d)
|
|
|
+ // return d
|
|
|
+ // },
|
|
|
+ // location: [5, 0],
|
|
|
+ // events: {
|
|
|
+ // tap: (e, o) => {
|
|
|
+ // console.log('tap', e, o)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ]
|
|
|
// 添加两个标签和箭头
|
|
|
})
|
|
|
instance.addSourceSelector('.bottom')
|
|
|
instance.addTargetSelector('.top')
|
|
|
- this.$refs.node.forEach((item) => {
|
|
|
- instance.addEndpoint(item.$el, { target: true, source: true })
|
|
|
+ this.details.forEach(item => {
|
|
|
+ if (item.children.length) {
|
|
|
+ item.children.forEach(children => {
|
|
|
+ instance.connect({
|
|
|
+ // 获取节点1和节点2的引用
|
|
|
+ source: this.$refs[item.name][0].$el,
|
|
|
+ target: this.$refs[children.name][0].$el,
|
|
|
+ // 连接方式,这里设置为连续
|
|
|
+ anchor: 'AutoDefault',
|
|
|
+ // 连接器类型,这里设置为Flowchart
|
|
|
+ connector: 'Flowchart',
|
|
|
+ // 添加两个标签和箭头
|
|
|
+ overlays: [
|
|
|
+ { type: 'Label', options: { label: 'Connection 1', location: 0.5 } },
|
|
|
+ { type: 'Arrow', options: { location: 1 } }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // instance.addEndpoint(this.$refs[item.name][0].$el, { target: false, source: false })
|
|
|
+ }
|
|
|
})
|
|
|
+ // this.$refs.node.forEach((item) => {
|
|
|
+ // console.log(item)
|
|
|
+ // })
|
|
|
|
|
|
// 连接三个端点
|
|
|
// instance.connect({
|
|
@@ -145,13 +166,14 @@ export default {
|
|
|
// 删除连接
|
|
|
this.$confirm({
|
|
|
title: '确定删除所点击的链接吗?',
|
|
|
- onOk() {
|
|
|
+ onOk () {
|
|
|
instance.deleteConnection(conn)
|
|
|
- },
|
|
|
+ }
|
|
|
})
|
|
|
})
|
|
|
- },
|
|
|
- },
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|