|
|
@@ -8,14 +8,9 @@
|
|
|
</a-space>
|
|
|
</div>
|
|
|
<div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
|
|
|
- <Node
|
|
|
- v-for="(item, index) in details"
|
|
|
- :key="index"
|
|
|
- :detail="item"
|
|
|
- :ref="item.name"
|
|
|
- @add="add"
|
|
|
- @delete="handleDelete" />
|
|
|
+ <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.id" @add="add" @edit="edit" @delete="handleDelete" />
|
|
|
</div>
|
|
|
+ <BaseForm ref="baseModal" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -23,69 +18,66 @@
|
|
|
// import jsPlumb from 'jsplumb'
|
|
|
import Node from './modules/Node.vue'
|
|
|
import { newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
|
|
|
+import BaseForm from './modules/BaseForm.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
- Node
|
|
|
+ Node,
|
|
|
+ BaseForm,
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
jsPlumb: null,
|
|
|
instance: null,
|
|
|
scale: 100,
|
|
|
details: [
|
|
|
{
|
|
|
- name: 'node1',
|
|
|
+ name: '发起人',
|
|
|
+ id: '1',
|
|
|
type: 1,
|
|
|
- x: 100,
|
|
|
- y: 400,
|
|
|
- children: [
|
|
|
- {
|
|
|
- name: 'node2'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- x: 400,
|
|
|
- y: 400,
|
|
|
- type: 2,
|
|
|
- name: 'node2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- name: 'node3'
|
|
|
- }
|
|
|
- ]
|
|
|
+ y: 100,
|
|
|
+ x: 500,
|
|
|
+ children: [],
|
|
|
},
|
|
|
- {
|
|
|
- x: 700,
|
|
|
- y: 400,
|
|
|
- type: 3,
|
|
|
- name: 'node3',
|
|
|
- children: []
|
|
|
- }
|
|
|
- ]
|
|
|
+ // {
|
|
|
+ // y: 350,
|
|
|
+ // x: 500,
|
|
|
+ // id: '2',
|
|
|
+ // type: 2,
|
|
|
+ // name: 'node2',
|
|
|
+ // children: ['3'],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // y: 600,
|
|
|
+ // x: 500,
|
|
|
+ // id: '3',
|
|
|
+ // type: 3,
|
|
|
+ // name: 'node3',
|
|
|
+ // children: [],
|
|
|
+ // },
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
this.init()
|
|
|
},
|
|
|
- created () {},
|
|
|
+ created() {},
|
|
|
methods: {
|
|
|
- init () {
|
|
|
+ init() {
|
|
|
const that = this
|
|
|
// 初始化节点
|
|
|
this.instance = newInstance({
|
|
|
container: this.$refs.container,
|
|
|
dragOptions: {
|
|
|
containmentPadding: 10,
|
|
|
- grid: { w: 20, h: 20 }
|
|
|
- }
|
|
|
+ grid: { w: 20, h: 20 },
|
|
|
+ },
|
|
|
})
|
|
|
this.instance.importDefaults({
|
|
|
anchor: 'Continuous',
|
|
|
connectionsDetachable: false,
|
|
|
// 连接器类型，这里设置为Flowchart
|
|
|
connector: {
|
|
|
- type: 'Flowchart'
|
|
|
+ type: 'Flowchart',
|
|
|
},
|
|
|
paintStyle: { stroke: '#666', strokeWidth: 1 },
|
|
|
hoverPaintStyle: { stroke: '#1890ff', strokeWidth: 2 },
|
|
|
@@ -95,9 +87,9 @@ export default {
|
|
|
options: {
|
|
|
width: 13,
|
|
|
length: 13,
|
|
|
- location: 1
|
|
|
- }
|
|
|
- }
|
|
|
+ location: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
// {
|
|
|
// type: 'Custom',
|
|
|
// options: {
|
|
|
@@ -116,23 +108,23 @@ export default {
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
- ]
|
|
|
+ ],
|
|
|
// 添加两个标签和箭头
|
|
|
})
|
|
|
this.instance.addSourceSelector('.bottom')
|
|
|
this.instance.addTargetSelector('.top')
|
|
|
- this.details.forEach(item => {
|
|
|
+ this.details.forEach((item) => {
|
|
|
if (item.children.length) {
|
|
|
- item.children.forEach(children => {
|
|
|
+ item.children.forEach((children) => {
|
|
|
that.instance.connect({
|
|
|
// 获取节点1和节点2的引用
|
|
|
- source: this.$refs[item.name][0].$el,
|
|
|
- target: this.$refs[children.name][0].$el,
|
|
|
+ source: this.$refs[item.id][0].$el,
|
|
|
+ target: this.$refs[children][0].$el,
|
|
|
// 连接方式，这里设置为连续
|
|
|
// paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
|
|
|
anchor: 'AutoDefault',
|
|
|
// 连接器类型，这里设置为Flowchart
|
|
|
- connector: 'Flowchart'
|
|
|
+ connector: 'Flowchart',
|
|
|
// 添加两个标签和箭头
|
|
|
})
|
|
|
})
|
|
|
@@ -169,6 +161,7 @@ export default {
|
|
|
// { type: 'Arrow', options: { location: 1 } },
|
|
|
// ],
|
|
|
// })
|
|
|
+ //拖拽
|
|
|
this.instance.bind(EVENT_DRAG_STOP, (val) => {
|
|
|
console.log(val.el.__vue__)
|
|
|
console.log(3)
|
|
|
@@ -179,64 +172,90 @@ export default {
|
|
|
console.log(val)
|
|
|
console.log(2)
|
|
|
})
|
|
|
+ // 删除连接
|
|
|
this.instance.bind(EVENT_CONNECTION_DBL_CLICK, (conn) => {
|
|
|
- // 删除连接
|
|
|
this.$confirm({
|
|
|
title: '确定删除所点击的链接吗？',
|
|
|
- onOk () {
|
|
|
+ onOk() {
|
|
|
that.instance.deleteConnection(conn)
|
|
|
- }
|
|
|
+ },
|
|
|
})
|
|
|
})
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
- minus () {
|
|
|
+ minus() {
|
|
|
if (this.scale > 50) {
|
|
|
this.scale -= 10
|
|
|
}
|
|
|
this.instance.setZoom(this.scale / 100)
|
|
|
},
|
|
|
- plus () {
|
|
|
+ plus() {
|
|
|
if (this.scale < 150) {
|
|
|
this.scale += 10
|
|
|
}
|
|
|
this.instance.setZoom(this.scale / 100)
|
|
|
},
|
|
|
- add (record, type) {
|
|
|
- console.log(record, type)
|
|
|
- record.children.push({
|
|
|
- name: 'node4'
|
|
|
- })
|
|
|
- this.details.push({
|
|
|
- x: record.x,
|
|
|
- y: record.y + 200,
|
|
|
- type,
|
|
|
- name: 'node4',
|
|
|
- children: []
|
|
|
- })
|
|
|
- console.log(this.$refs)
|
|
|
+ add(record, type) {
|
|
|
+ const newVal = {
|
|
|
+ name: type === 2 ? '条件分支' : '审核人',
|
|
|
+ id: +new Date(),
|
|
|
+ }
|
|
|
+ if (record.children.length > 0) {
|
|
|
+ const children = this.details
|
|
|
+ .filter((detail) => {
|
|
|
+ return record.children.includes(detail.id)
|
|
|
+ })
|
|
|
+ .reduce((pre, item) => {
|
|
|
+ if (item.x > pre.x) {
|
|
|
+ pre = item
|
|
|
+ }
|
|
|
+ return pre
|
|
|
+ })
|
|
|
+ record.children.push(newVal.id)
|
|
|
+ this.details.push({
|
|
|
+ x: children.x + 240,
|
|
|
+ y: children.y,
|
|
|
+ type,
|
|
|
+ children: [],
|
|
|
+ ...newVal,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ record.children.push(newVal.id)
|
|
|
+ this.details.push({
|
|
|
+ x: record.x,
|
|
|
+ y: record.y + 250,
|
|
|
+ type,
|
|
|
+ children: [],
|
|
|
+ ...newVal,
|
|
|
+ })
|
|
|
+ }
|
|
|
this.$nextTick(() => {
|
|
|
this.instance.connect({
|
|
|
- // 获取节点1和节点2的引用
|
|
|
- source: this.$refs[record.name][0].$el,
|
|
|
- target: this.$refs['node4'][0].$el,
|
|
|
+ // 获取节点1和节点2的引用
|
|
|
+ source: this.$refs[record.id][0].$el,
|
|
|
+ target: this.$refs[newVal.id][0].$el,
|
|
|
// 连接方式，这里设置为连续
|
|
|
// paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
|
|
|
anchor: 'AutoDefault',
|
|
|
// 连接器类型，这里设置为Flowchart
|
|
|
- connector: 'Flowchart'
|
|
|
- // 添加两个标签和箭头
|
|
|
+ connector: 'Flowchart',
|
|
|
+ // 添加两个标签和箭头
|
|
|
})
|
|
|
})
|
|
|
// this.details.push()
|
|
|
},
|
|
|
- handleDelete (record) {
|
|
|
- this.instance.unmanage(this.$refs[record.name][0].$el, true)
|
|
|
- this.details = this.details.filter(item => {
|
|
|
- return item.name !== record.name
|
|
|
+ //删除节点
|
|
|
+
|
|
|
+ handleDelete(record) {
|
|
|
+ this.instance.unmanage(this.$refs[record.id][0].$el, true)
|
|
|
+ this.details = this.details.filter((item) => {
|
|
|
+ return item.id !== record.id
|
|
|
})
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ edit(record) {
|
|
|
+ this.$refs.baseModal.base(record)
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -246,7 +265,7 @@ export default {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- transform-origin:0 0;
|
|
|
+ transform-origin: 0 0;
|
|
|
// transform: scale(0.5);
|
|
|
}
|
|
|
/deep/ .plus_btn {
|
|
|
@@ -264,21 +283,21 @@ export default {
|
|
|
font-size: 24px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-/deep/.jtk-overlay{
|
|
|
-color: #1890ff;
|
|
|
-font-size: 18px;
|
|
|
-z-index: 9;
|
|
|
+/deep/.jtk-overlay {
|
|
|
+ color: #1890ff;
|
|
|
+ font-size: 18px;
|
|
|
+ z-index: 9;
|
|
|
}
|
|
|
-.main{
|
|
|
+.main {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
min-height: calc(100vh - 100px);
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.scale{
|
|
|
+.scale {
|
|
|
position: absolute;
|
|
|
- bottom:20px;
|
|
|
+ bottom: 20px;
|
|
|
right: 30px;
|
|
|
z-index: 9999;
|
|
|
}
|
