diff --git a/src/views/quest/node/Home.vue b/src/views/quest/node/Home.vue
index 0fae5e9..6a26270 100644
--- a/src/views/quest/node/Home.vue
+++ b/src/views/quest/node/Home.vue
@@ -11,11 +11,12 @@
+
diff --git a/src/views/quest/node/components/node-item.vue b/src/views/quest/node/components/node-item.vue
index 4f283b2..1d1e2b6 100644
--- a/src/views/quest/node/components/node-item.vue
+++ b/src/views/quest/node/components/node-item.vue
@@ -17,6 +17,16 @@
+
+
+
+
+
+
+
+
+
+
@@ -43,6 +53,8 @@ export default {
},
data() {
return {
+ // updNameFlag: false,
+ // newNodeName: '',
mouseEnter: false,
isActive: false,
isSelected: false
@@ -58,7 +70,20 @@ export default {
onContextmenu() {
this.$contextmenu({
items: [{
- label: '删除',
+ label: '修改名称',
+ disabled: false,
+ icon: "",
+ onClick: () => {
+ // this.toUpdName();
+ this.newNodeName = prompt("请输入新名称：");
+ if (this.newNodeName !== null) {
+ this.$emit('setNodeName', this.node.id, this.newNodeName)
+ } else {
+ alert("操作取消!");
+ }
+ }
+ },{
+ label: '删除节点',
disabled: false,
icon: "",
onClick: () => {
@@ -93,30 +118,35 @@ export default {
this.isActive = false
},
editNode() {
- this.newNodeName = this.node.nodeName
- this.$Modal.confirm({
- render: (h) => {
- return h('Input', {
- props: {
- value: this.newNodeName,
- autofocus: true
- },
- on: {
- input: (val) => {
- this.newNodeName = val;
- }
- }
- })
- },
- onOk: () => {
- console.log(this.newNodeName)
- this.$emit('setNodeName', this.node.id, this.newNodeName)
- }
- })
+ this.newNodeName = prompt("请输入新名称：");
+ if (this.newNodeName !== null) {
+ this.$emit('setNodeName', this.node.id, this.newNodeName)
+ } else {
+ alert("操作取消!");
+ }
},
deleteNode() {
this.$emit("deleteNode", this.node)
},
+ // toUpdName() {
+ // this.updNameFlag = true
+ // },
+ // doUpdName() {
+ // this.$emit('setNodeName', this.node.id, this.newNodeName)
+ // this.updNameFlag = false
+ // },
+ /** jsPlumb节点类型 --> 数据库节点类型 */
+ toMysqlNode(node){
+ return {
+ nodeCode: '',
+ nodeName: '',
+ nodeReq: '',
+ nodeResp: '',
+ nodePreCode: '',
+ nodeNextCode: '',
+ state: ''
+ }
+ }
}
};
diff --git a/src/views/quest/node/config/methods.js b/src/views/quest/node/config/methods.js
index 786c0a9..1fc4b23 100644
--- a/src/views/quest/node/config/methods.js
+++ b/src/views/quest/node/config/methods.js
@@ -11,14 +11,6 @@ const methods = {
let res = () => { } //此处可以添加是否创建连接的校验， 返回 false 则不添加；
return res
})
- // 连线创建成功后，维护本地数据
- this.jsPlumb.bind("connection", evt => {
- this.addLine(evt)
- });
- //连线双击删除事件
- this.jsPlumb.bind("dblclick",(conn, originalEvent) => {
- this.confirmDelLine(conn)
- })
//断开连线后，维护本地数据
this.jsPlumb.bind("connectionDetached", evt => {
this.deleLine(evt)
@@ -26,6 +18,10 @@ const methods = {
this.loadEasyFlow();
// 会使整个jsPlumb立即重绘。
this.jsPlumb.setSuspendDrawing(false, true);
+ // 连线创建成功后，维护本地数据
+ this.jsPlumb.bind("connection", evt => {
+ this.addLine(evt)
+ });
});
this.initPanZoom();
},
@@ -65,7 +61,12 @@ const methods = {
Remark: ""
});
});
+ //连线双击删除事件
+ this.jsPlumb.bind("dblclick",(conn, originalEvent) => {
+ this.confirmDelLine(conn)
+ })
},
+ // 拖动节点
draggableNode(nodeId) {
this.jsPlumb.draggable(nodeId, {
grid: this.commonGrid,
@@ -98,6 +99,7 @@ const methods = {
this.auxiliaryLine.isShowYLine = showYLine
this.auxiliaryLine.isShowXLine = showXLine
},
+ // 检查节点位置
changeNodePosition(nodeId, pos) {
this.data.nodeList.some(v => {
if(nodeId == v.id) {
@@ -126,9 +128,11 @@ const methods = {
};
this.addNode(temp);
},
+ // 连线
addLine(line) {
let from = line.source.id;
let to = line.target.id;
+ console.log('连线: ' + from + ' --> ' + to)
this.data.lineList.push({
from: from,
to: to,
@@ -137,18 +141,27 @@ const methods = {
Remark: ""
});
},
+ // 确认删除连线
confirmDelLine(line) {
- this.$Modal.confirm({
- title: '删除连线',
- content: "确认删除该连线？
",
- onOk: () => {
- this.jsPlumb.deleteConnection(line)
- }
- })
+ if (confirm("确认删除该连线？")) {
+ this.jsPlumb.deleteConnection(line)
+ } else {
+ // 用户点击了取消
+ alert("操作已取消！");
+ }
+ // this.$Modal.confirm({
+ // title: '删除连线',
+ // content: "确认删除该连线？
",
+ // onOk: () => {
+ // this.jsPlumb.deleteConnection(line)
+ // }
+ // })
},
+ // 删除连线
deleLine(line) {
this.data.lineList.forEach((item, index) => {
if(item.from === line.sourceId && item.to === line.targetId) {
+ console.log('删线: ' + item.from + ' -/- ' + item.to)
this.data.lineList.splice(index, 1)
}
})
@@ -171,6 +184,8 @@ const methods = {
},
// 添加新的节点
addNode(temp) {
+ console.log('新增节点: ')
+ console.log(temp)
this.data.nodeList.push(temp);
this.$nextTick(() => {
this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions);
@@ -233,8 +248,9 @@ const methods = {
this.style.cursor = "grab";
});
},
-
+ // 设置节点名称
setNodeName(nodeId, name) {
+ console.log('设置节点 '+nodeId+' 名称为: ' + name)
this.data.nodeList.some((v) => {
if(v.id === nodeId) {
v.nodeName = name
@@ -244,9 +260,10 @@ const methods = {
}
})
},
-
//删除节点
deleteNode(node) {
+ console.log('删除节点: ')
+ console.log(node)
this.data.nodeList.some((v,index) => {
if(v.id === node.id) {
this.data.nodeList.splice(index, 1)
@@ -257,7 +274,6 @@ const methods = {
}
})
},
-
//更改连线状态
changeLineState(nodeId, val) {
console.log(val)