src/api/quest/node.js

@@ -5,7 +5,6 @@ export function listNode(query) {
   return request({
     url: '/quest/node/list',
     method: 'get',
-    async: false,
     params: query
   })
 }
@@ -43,12 +42,3 @@ 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,13 +1,6 @@
 <template>
   <div class="flow_region">
-    <div class="nodes-wrap" align="center">
+    <div class="nodes-wrap">
-      <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="">
@@ -30,14 +23,10 @@
 <script>
 import { jsPlumb } from "jsplumb"
 import { nodeTypeList } from './config/init'
-import {jsplumbConnectOptions, jsplumbSetting, jsplumbSourceOptions, jsplumbTargetOptions} from './config/commonConfig'
+import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from './config/commonConfig'
-// import data from "./config/data.json"
+import methods from "./config/methods"
+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: {
@@ -69,98 +58,42 @@ 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(() => {
-      setTimeout(() => {
+      this.init();
-        this.init()
-      },1000)
     });
   },
   methods: {
     ...methods,
-    // 查询数据库节点信息并整合成jsPlumb格式
+    initNodeTypeObj() {
+      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() {
-      listNode({taskCode: this.taskCode}).then(res => {
+      console.log(data)
-        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,46 +136,15 @@ export default {
     //   this.updNameFlag = false
     // },
     /** jsPlumb节点类型 --> 数据库节点类型 */
-    toMysqlNode(node,preLine,nextLine){
+    toMysqlNode(node){
       return {
-        nodeCode: node.id,
+        nodeCode: '',
-        nodeName: node.nodeName,
+        nodeName: '',
-        nodePositionTop: node.top,
+        nodeReq: '',
-        nodePositionLeft: node.left,
+        nodeResp: '',
-        nodePreCode: preLine,
+        nodePreCode: '',
-        nodeNextCode: nextLine,
+        nodeNextCode: '',
-        state: 'Y'
+        state: ''
-      }
-    },
-    /** 数据库节点类型 --> 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,18 +1,4 @@
 {
-  "nodeList": [
+  "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"}],
-    {"type":"start","typeName":"开始","nodeName":"开始","id":"34v56ha2l9c000","top":"160px","left":"100px"},
+  "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":"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,6 +1,5 @@
 import panzoom from "panzoom";
 import { GenNonDuplicateID } from "@/common/until";
-import item from "../components/node-item"
 
 const methods = {
   init() {
@@ -106,8 +105,6 @@ 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
@@ -195,8 +192,6 @@ 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,36 +79,30 @@
 
     <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>
@@ -124,6 +118,9 @@
     <!-- 添加或修改任务对话框 -->
     <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>
@@ -139,6 +136,9 @@
         <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,10 +296,6 @@ 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}})
     }
   }
 };