完成任务流程工具插件与数据库数据的连接,并实现了修改任务图表的功能

src/api/quest/node.js

@@ -5,6 +5,7 @@ export function listNode(query) {
   return request({
     url: '/quest/node/list',
     method: 'get',
+    async: false,
     params: query
   })
 }
@@ -42,3 +43,12 @@ export function delNode(id, taskCode) {
     method: 'delete'
   })
 }
+
+// 批量删除新增节点管理
+export function batch(data) {
+  return request({
+    url: '/quest/node/batch',
+    method: 'post',
+    data: data
+  })
+}

src/views/quest/node/Home.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="flow_region">
-    <div class="nodes-wrap">
+    <div class="nodes-wrap" align="center">
+      <el-button
+        style="width: 75%;margin-top: 5px;margin-bottom: 5px;"
+        type="primary" @click="save">保存修改</el-button>
+      <el-button
+        style="width: 75%;margin-left: 0;margin-bottom: 5px;"
+        @click="$router.push({path: '/quest/task'})">返回</el-button>
+      <hr>
       <div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
         <div class="log">
           <img :src="item.logImg" alt="">
@@ -23,10 +30,14 @@
 <script>
 import {jsPlumb} from "jsplumb"
 import {nodeTypeList} from './config/init'
-import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from './config/commonConfig'
+import {jsplumbConnectOptions, jsplumbSetting, jsplumbSourceOptions, jsplumbTargetOptions} from './config/commonConfig'
-import methods from "./config/methods"
+// import data from "./config/data.json"
-import data from './config/data.json'
 import flowNode from "./components/node-item"
+import {batch, listNode} from "../../../api/quest/node";
+import {GenNonDuplicateID} from "../../../common/until";
+import panzoom from "panzoom";
+import methods from "./config/methods";
+
 export default {
   name: "FlowEdit",
   components: {
@@ -58,42 +69,98 @@ export default {
         top: 0,
         height: 0,
         width: 0
-      }
+      },
+      taskCode: this.$route.query.taskCode
     };
   },
   mounted() {
+    this.getList();
     this.jsPlumb = jsPlumb.getInstance();
-    this.initNodeTypeObj()
-    this.initNode()
     this.fixNodesPosition()
     this.$nextTick(() => {
-      this.init();
+      setTimeout(() => {
+        this.init()
+      },1000)
     });
   },
   methods: {
     ...methods,
-    initNodeTypeObj() {
+    // 查询数据库节点信息并整合成jsPlumb格式
-      nodeTypeList.map(v => {
-        this.nodeTypeObj[v.type] = v
-      })
-    },
-    initNode() {
-      this.data.lineList = data.lineList
-      data.nodeList.map(v => {
-        v.logImg = this.nodeTypeObj[v.type].logImg
-        v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
-        this.data.nodeList.push(v)
-      })
-    },
     getList() {
-      console.log(data)
+      listNode({taskCode: this.taskCode}).then(res => {
+        const rows = res.data.rows
+        for (let i = 0; i < rows.length; i++) {
+          const r = flowNode.methods.toJsPlumbNode(rows[i])
+          this.data.nodeList.push({
+            id: r.node.id,
+            type: r.node.type,
+            typeName: r.node.typeName,
+            nodeName: r.node.nodeName,
+            top: r.node.top,
+            left: r.node.left
+          })
+          if (r.line) {
+            r.line.forEach(v => {
+              this.data.lineList.push({
+                from: v.from,
+                to: v.to,
+                label: "连线名称",
+                id: GenNonDuplicateID(8),
+                Remark: ""
+              });
+            })
           }
+        }
+        this.data.nodeList.forEach(node => {
+          nodeTypeList.forEach(v => {
+            if (node.type === v.type) {
+              node.typeName = v.typeName
+              node.logImg = v.logImg
+              node.log_bg_color = v.log_bg_color
+            }
+          })
+        })
+        // console.log(data)
+        console.log(this.data)
+      })
+    },
+    // 保存修改按钮
+    save() {
+      // 1. 获取所有节点与连线信息
+      const nodeList = this.data.nodeList
+      const lineList = this.data.lineList
+      console.log(this.data)
+      // 2. 处理所有信息,将jsPlumb类型 ==> 数据表类型
+      const nodeData = []
+      nodeList.forEach(node => {
+        let preLine = ''
+        let nextLine = ''
+        lineList.forEach(line => {
+          // 如果节点的id是起点
+          if (node.id === line.from){
+            // 给下一节点标识赋值
+            nextLine = line.to
+          }
+          // 如果节点id是终点
+          if (node.id === line.to){
+            // 给上一节点标识赋值
+            preLine = line.from
+          }
+        })
+        let newNode = flowNode.methods.toMysqlNode(node,preLine,nextLine)
+        newNode.taskCode = this.$route.query.taskCode
+        nodeData.push(newNode)
+      })
+      console.log(nodeData)
+      // 3. 激活接口将参数传递到后端
+      batch(nodeData).then(res => {
+        alert(res.msg)
+      })
     },
-  created() {
-    this.getList();
   }
 };
 </script>
+
 <style lang="less" scoped>
 .flow_region {
   display: flex;

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

@@ -136,15 +136,46 @@ export default {
     //   this.updNameFlag = false
     // },
     /** jsPlumb节点类型 --> 数据库节点类型 */
-    toMysqlNode(node){
+    toMysqlNode(node,preLine,nextLine){
       return {
-        nodeCode: '',
+        nodeCode: node.id,
-        nodeName: '',
+        nodeName: node.nodeName,
-        nodeReq: '',
+        nodePositionTop: node.top,
-        nodeResp: '',
+        nodePositionLeft: node.left,
-        nodePreCode: '',
+        nodePreCode: preLine,
-        nodeNextCode: '',
+        nodeNextCode: nextLine,
-        state: ''
+        state: 'Y'
+      }
+    },
+    /** 数据库节点类型 --> jsPlumb节点类型 */
+    toJsPlumbNode(nodeInfo){
+      const node = {
+        id: nodeInfo.nodeCode,
+        type: nodeInfo.nodeType,
+        nodeName: nodeInfo.nodeName,
+        top: nodeInfo.nodePositionTop,
+        left: nodeInfo.nodePositionLeft
+      }
+      const line = []
+      // 节点有后继节点
+      if (nodeInfo.nodeNextCode){
+        const nextLine = {
+          from: nodeInfo.nodeCode,
+          to: nodeInfo.nodeNextCode
+        }
+        line.push(nextLine)
+      }
+      // 节点有前驱节点
+      if (nodeInfo.nodePreCode){
+        const perLine = {
+          from: nodeInfo.nodePreCode,
+          to: nodeInfo.nodeCode
+        }
+        line.push(perLine)
+      }
+      return {
+        node: node,
+        line: line
       }
     }
   }

src/views/quest/node/config/data.json

@@ -1,4 +1,18 @@
 {
-  "nodeList": [{"type":"start","typeName":"开始","nodeName":"开始","id":"34v56ha2l9c000","top":"160px","left":"100px"},{"type":"dataSet","typeName":"文件","nodeName":"文件","id":"5sdjugrcqhc000","top":"160px","left":"315px"},{"type":"encode","typeName":"加密","nodeName":"加密","id":"3atqi5p6oa4000","top":"80px","left":"600px"},{"type":"personService","typeName":"个人服务","nodeName":"个人服务","id":"49vcu89p5q0000","top":"245px","left":"600px"},{"type":"arrange","typeName":"清洗","nodeName":"清洗","id":"1jhiilb0t2tc00","top":"180px","left":"880px"},{"type":"end","typeName":"结束","nodeName":"结束","id":"1ogr3wzy6zhc00","top":"180px","left":"1160px"}],
+  "nodeList": [
-  "lineList": [{"from":"34v56ha2l9c000","to":"5sdjugrcqhc000","label":"连线名称","id":"5n6pp5xqd6s000","Remark":""},{"from":"5sdjugrcqhc000","to":"3atqi5p6oa4000","label":"连线名称","id":"2a0ya9j1kev400","Remark":""},{"from":"5sdjugrcqhc000","to":"49vcu89p5q0000","label":"连线名称","id":"zoisvo5gpvk00","Remark":""},{"from":"3atqi5p6oa4000","to":"1jhiilb0t2tc00","label":"连线名称","id":"4xkb3dju1g0000","Remark":""},{"from":"49vcu89p5q0000","to":"1jhiilb0t2tc00","label":"连线名称","id":"ldc917l47w000","Remark":""},{"from":"1jhiilb0t2tc00","to":"1ogr3wzy6zhc00","label":"连线名称","id":"478galw3u34000","Remark":""}]
+    {"type":"start","typeName":"开始","nodeName":"开始","id":"34v56ha2l9c000","top":"160px","left":"100px"},
+    {"type":"dataSet","typeName":"文件","nodeName":"文件","id":"5sdjugrcqhc000","top":"160px","left":"315px"},
+    {"type":"encode","typeName":"加密","nodeName":"加密","id":"3atqi5p6oa4000","top":"80px","left":"600px"},
+    {"type":"personService","typeName":"个人服务","nodeName":"个人服务","id":"49vcu89p5q0000","top":"245px","left":"600px"},
+    {"type":"arrange","typeName":"清洗","nodeName":"清洗","id":"1jhiilb0t2tc00","top":"180px","left":"880px"},
+    {"type":"end","typeName":"结束","nodeName":"结束","id":"1ogr3wzy6zhc00","top":"180px","left":"1160px"}
+  ],
+  "lineList": [
+    {"from":"34v56ha2l9c000","to":"5sdjugrcqhc000","label":"连线名称","id":"5n6pp5xqd6s000","Remark":""},
+    {"from":"5sdjugrcqhc000","to":"3atqi5p6oa4000","label":"连线名称","id":"2a0ya9j1kev400","Remark":""},
+    {"from":"5sdjugrcqhc000","to":"49vcu89p5q0000","label":"连线名称","id":"zoisvo5gpvk00","Remark":""},
+    {"from":"3atqi5p6oa4000","to":"1jhiilb0t2tc00","label":"连线名称","id":"4xkb3dju1g0000","Remark":""},
+    {"from":"49vcu89p5q0000","to":"1jhiilb0t2tc00","label":"连线名称","id":"ldc917l47w000","Remark":""},
+    {"from":"1jhiilb0t2tc00","to":"1ogr3wzy6zhc00","label":"连线名称","id":"478galw3u34000","Remark":""}
+  ]
 }

src/views/quest/node/config/methods.js

@@ -1,5 +1,6 @@
 import panzoom from "panzoom";
 import { GenNonDuplicateID } from "@/common/until";
+import item from "../components/node-item"
 
 const methods = {
   init() {
@@ -105,6 +106,8 @@ const methods = {
       if(nodeId == v.id) {
         v.left = pos[0] +'px'
         v.top = pos[1] + 'px'
+        console.log('位置变更: top->['+v.top+'],left->['+v.left+']')
+        console.log(this.data.nodeList)
         return true
       }else {
         return false
@@ -192,6 +195,8 @@ const methods = {
       this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions);
       this.draggableNode(temp.id)
     });
+    var node = item.methods.toMysqlNode(temp,null,null)
+    console.log(node)
   },
 
   initPanZoom() {

src/views/quest/task/index.vue

@@ -79,30 +79,36 @@
 
     <el-table v-loading="loading" :data="questList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增主键" align="center" prop="id" />
+      <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="任务编码" align="center" prop="taskCode" />
       <el-table-column label="任务名称" align="center" prop="taskName" />
       <el-table-column label="任务触发器" align="center" prop="taskWebhook" />
       <el-table-column label="规则编码" align="center" prop="ruleCode" />
       <el-table-column label="任务类型" align="center" prop="taskType" />
       <el-table-column label="启用状态" align="center" prop="state" />
-      <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="toUpdateTaskNode(scope.row.taskCode)"
+            v-hasPermi="['quest:quest:edit']"
+          >管理任务</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['quest:quest:edit']"
-          >修改</el-button>
+          >修改任务</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['quest:quest:remove']"
-          >删除</el-button>
+          >删除任务</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -118,9 +124,6 @@
     <!-- 添加或修改任务对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="任务编码" prop="taskCode">
-          <el-input v-model="form.taskCode" placeholder="请输入任务编码" />
-        </el-form-item>
         <el-form-item label="任务名称" prop="taskName">
           <el-input v-model="form.taskName" placeholder="请输入任务名称" />
         </el-form-item>
@@ -136,9 +139,6 @@
         <el-form-item label="启用状态" prop="state">
           <el-input v-model="form.state" placeholder="请输入启用状态" />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -296,6 +296,10 @@ export default {
       this.download('quest/quest/export', {
         ...this.queryParams
       }, `quest_${new Date().getTime()}.xlsx`)
+    },
+    // 跳转节点管理页面
+    toUpdateTaskNode(taskCode){
+      this.$router.push({path: '/quest/node', query: {taskCode: taskCode}})
     }
   }
 };