|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div v-show="visible">
|
|
|
|
|
|
+ <div v-if="visible">
|
|
<div class="title">
|
|
<div class="title">
|
|
<h3>{{modalTitle}}</h3>
|
|
<h3>{{modalTitle}}</h3>
|
|
<a-space>
|
|
<a-space>
|
|
@@ -19,7 +19,7 @@
|
|
</a-space>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
<div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
|
|
<div ref="container" class="container" :style="{transform: `scale(${scale / 100})`}">
|
|
- <Node v-for="(item, index) in details" :key="index" :detail="item" :ref="item.id" @add="add" @edit="edit" @delete="handleDelete" />
|
|
|
|
|
|
+ <Node v-for="(item, index) in details" :key="index" :detail="item" :id="item.id" @add="add" @edit="edit" @delete="handleDelete" />
|
|
</div>
|
|
</div>
|
|
<BaseForm ref="baseModal" />
|
|
<BaseForm ref="baseModal" />
|
|
</div>
|
|
</div>
|
|
@@ -61,20 +61,24 @@ export default {
|
|
},
|
|
},
|
|
mounted() {},
|
|
mounted() {},
|
|
created() {},
|
|
created() {},
|
|
|
|
+ destroyed() {
|
|
|
|
+ console.log('de')
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
base(record) {
|
|
base(record) {
|
|
this.visible = true
|
|
this.visible = true
|
|
// 如果是空标识添加
|
|
// 如果是空标识添加
|
|
if (this.BaseTool.Object.isBlank(record)) {
|
|
if (this.BaseTool.Object.isBlank(record)) {
|
|
this.modalTitle = '添加'
|
|
this.modalTitle = '添加'
|
|
- this.init()
|
|
|
|
- return
|
|
|
|
|
|
+ } else {
|
|
|
|
+ this.record = record
|
|
|
|
+ this.name = record.name
|
|
|
|
+ this.modalTitle = '编辑'
|
|
|
|
+ this.details = JSON.parse(record.json)
|
|
}
|
|
}
|
|
- this.record = record
|
|
|
|
- this.name = record.name
|
|
|
|
- this.modalTitle = '编辑'
|
|
|
|
- this.details = JSON.parse(record.json)
|
|
|
|
- this.init()
|
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.init()
|
|
|
|
+ })
|
|
},
|
|
},
|
|
init() {
|
|
init() {
|
|
const that = this
|
|
const that = this
|
|
@@ -134,8 +138,8 @@ export default {
|
|
item.children.forEach((children) => {
|
|
item.children.forEach((children) => {
|
|
that.instance.connect({
|
|
that.instance.connect({
|
|
// 获取节点1和节点2的引用
|
|
// 获取节点1和节点2的引用
|
|
- source: this.$refs[item.id][0].$el,
|
|
|
|
- target: this.$refs[children][0].$el,
|
|
|
|
|
|
+ source: document.getElementById(item.id),
|
|
|
|
+ target: document.getElementById(children),
|
|
// 连接方式,这里设置为连续
|
|
// 连接方式,这里设置为连续
|
|
// paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
|
|
// paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
|
|
// 连接器类型,这里设置为Flowchart
|
|
// 连接器类型,这里设置为Flowchart
|
|
@@ -217,7 +221,7 @@ export default {
|
|
add(record, type) {
|
|
add(record, type) {
|
|
const newVal = {
|
|
const newVal = {
|
|
name: type === 2 ? '条件分支' : '审核人',
|
|
name: type === 2 ? '条件分支' : '审核人',
|
|
- id: +new Date(),
|
|
|
|
|
|
+ id: String(+new Date()),
|
|
verifier: '',
|
|
verifier: '',
|
|
userName: '',
|
|
userName: '',
|
|
reflect: '',
|
|
reflect: '',
|
|
@@ -249,7 +253,7 @@ export default {
|
|
record.children.push(newVal.id)
|
|
record.children.push(newVal.id)
|
|
this.details.push({
|
|
this.details.push({
|
|
x: record.x,
|
|
x: record.x,
|
|
- y: record.y + 250,
|
|
|
|
|
|
+ y: record.y + 240,
|
|
type,
|
|
type,
|
|
children: [],
|
|
children: [],
|
|
...newVal,
|
|
...newVal,
|
|
@@ -258,8 +262,8 @@ export default {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.instance.connect({
|
|
this.instance.connect({
|
|
// 获取节点1和节点2的引用
|
|
// 获取节点1和节点2的引用
|
|
- source: this.$refs[record.id][0].$el,
|
|
|
|
- target: this.$refs[newVal.id][0].$el,
|
|
|
|
|
|
+ source: document.getElementById(record.id),
|
|
|
|
+ target: document.getElementById(newVal.id),
|
|
// 连接方式,这里设置为连续
|
|
// 连接方式,这里设置为连续
|
|
// paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
|
|
// paintStyle: { stroke: children.label == '同意' ? '#345' : 'red', strokeWidth: 3 },
|
|
// 连接器类型,这里设置为Flowchart
|
|
// 连接器类型,这里设置为Flowchart
|
|
@@ -271,8 +275,9 @@ export default {
|
|
},
|
|
},
|
|
//删除节点
|
|
//删除节点
|
|
handleDelete(record) {
|
|
handleDelete(record) {
|
|
- this.instance.unmanage(this.$refs[record.id][0].$el, true)
|
|
|
|
|
|
+ this.instance.unmanage(document.getElementById(record.id), true)
|
|
this.details = this.details.filter((item) => {
|
|
this.details = this.details.filter((item) => {
|
|
|
|
+ item.children = item.children.filter((child) => child !== record.id)
|
|
return item.id !== record.id
|
|
return item.id !== record.id
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -316,6 +321,7 @@ export default {
|
|
children: [],
|
|
children: [],
|
|
},
|
|
},
|
|
]
|
|
]
|
|
|
|
+
|
|
this.$emit('ok')
|
|
this.$emit('ok')
|
|
},
|
|
},
|
|
},
|
|
},
|