完成任务流程工具插件的实现

src/views/quest/node/Home.vue

@@ -11,11 +11,12 @@
     <div id="flowWrap" ref="flowWrap" class="flow-wrap" @drop="drop($event)" @dragover="allowDrop($event)"
     style="width: 98%;height: 790px;margin-left: 10px;margin-right: 10px;">
       <div id="flow">
-        <div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}"></div>
+        <div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}" />
-        <div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}"></div>
+        <div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}" />
-        <flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState"></flowNode>
+        <flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState" />
       </div>
     </div>
+
   </div>
 </template>
 

src/views/quest/node/components/node-item.vue

@@ -17,6 +17,16 @@
       <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
       <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
       <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
+<!--    <el-dialog :visible.sync="updNameFlag" width="30%">-->
+<!--      <el-form v-model="node">-->
+<!--        <el-form-item label="节点名称">-->
+<!--          <el-input v-model="newNodeName" placeholder="请输入内容" />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item>-->
+<!--          <el-button type="primary" @click="doUpdName">确 定</el-button>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+<!--    </el-dialog>-->
   </div>
 </template>
 
@@ -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.newNodeName = prompt("请输入新名称：");
-      this.$Modal.confirm({
+      if (this.newNodeName !== null) {
-        render: (h) => {
+        this.$emit('setNodeName', this.node.id, this.newNodeName)
-          return h('Input', {
+      } else {
-            props: {
+        alert("操作取消!");
-              value: this.newNodeName,
+      }
-              autofocus: true
-            },
-            on: {
-              input: (val) => {
-                this.newNodeName = val;
-              }
-            }
-          })
-        },
-        onOk: () => {
-          console.log(this.newNodeName)
-          this.$emit('setNodeName', this.node.id, this.newNodeName)
-        }
-      })
     },
     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: ''
+      }
+    }
   }
 };
 </script>

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({
+    if (confirm("确认删除该连线？")) {
-      title: '删除连线',
+      this.jsPlumb.deleteConnection(line)
-      content: "<p>确认删除该连线？</p>",
+    } else {
-      onOk: () => {
+      // 用户点击了取消
-        this.jsPlumb.deleteConnection(line)
+      alert("操作已取消！");
-      }
+    }
-    })
+    // this.$Modal.confirm({
+    //   title: '删除连线',
+    //   content: "<p>确认删除该连线？</p>",
+    //   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)