优化效果

src/api/quest/node.js

@@ -37,17 +37,25 @@ export function updateNode(data) {
 }
 
 // 删除节点管理
-export function delNode(id, taskCode) {
+export function delNodeByIds(ids) {
   return request({
-    url: '/quest/node/' + id + '/' + taskCode,
+    url: '/quest/node/' + ids,
+    method: 'delete'
+  })
+}
+
+// 删除节点管理
+export function delNodeByTaskCodeAndNodeCodes(taskCode,nodeCodes) {
+  return request({
+    url: '/quest/node/' + taskCode + '/' + nodeCodes,
     method: 'delete'
   })
 }
 
 // 批量删除新增节点管理
-export function batch(data) {
+export function batch(data,taskCode) {
   return request({
-    url: '/quest/node/batch',
+    url: '/quest/node/batch/'+taskCode,
     method: 'post',
     data: data
   })

src/views/quest/node/Home.vue

@@ -6,7 +6,7 @@
         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>
+        @click="returnBack">返回</el-button>
       <hr>
       <div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
         <div class="log">
@@ -53,6 +53,10 @@ export default {
         nodeList:[],
         lineList:[]
       },
+      checkData: {
+        nodeList:[],
+        lineList:[]
+      },
       selectedList: [],
       jsplumbSetting: jsplumbSetting,
       jsplumbConnectOptions: jsplumbConnectOptions,
@@ -70,7 +74,8 @@ export default {
         height: 0,
         width: 0
       },
-      taskCode: this.$route.query.taskCode
+      taskCode: this.$route.query.taskCode,
+      flag: true
     };
   },
   mounted() {
@@ -120,9 +125,8 @@ export default {
             }
           })
         })
-        // console.log(data)
-        console.log(this.data)
       })
+      this.flag = true
     },
     // 保存修改按钮
     save() {
@@ -147,16 +151,42 @@ export default {
             preLine = line.from
           }
         })
-        let newNode = flowNode.methods.toMysqlNode(node,preLine,nextLine)
+        nodeData.push(flowNode.methods.toMysqlNode(node,preLine,nextLine,this.taskCode))
-        newNode.taskCode = this.$route.query.taskCode
+      })
-        nodeData.push(newNode)
+      // 3. 激活接口将参数传递到后端
+      batch(nodeData,this.$route.query.taskCode).then(res => {
+        this.$message.success(res.msg)
+        this.flag = true
       })
       console.log(nodeData)
-      // 3. 激活接口将参数传递到后端
-      batch(nodeData).then(res => {
-        alert(res.msg)
-      })
     },
+    returnBack() {
+      if (this.flag){
+        this.$router.push({path: '/quest/task'})
+      }else{
+        this.checkReturn()
+      }
+
+    },
+    checkReturn() {
+      this.$confirm('更改未保存,是否保存?', '未保存提示', {
+        confirmButtonText: '保存',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.save()
+      }).catch(() => {
+        this.$message({
+          type: 'success',
+          message: '返回成功'
+        });
+      });
+      this.$router.push({path: '/quest/task'})
+    },
+    // 修改状态更新
+    checkFlag(){
+      this.flag = false
+    }
   }
 };
 </script>
@@ -209,12 +239,12 @@ export default {
       .auxiliary-line-x {
         position: absolute;
         border: .5px dashed #2ab1e8;
-        z-index: 1008;
+        z-index: 998;
       }
       .auxiliary-line-y {
         position: absolute;
         border: .5px dashed #2ab1e8;
-        z-index: 1008;
+        z-index: 998;
       }
     }
   }
@@ -223,7 +253,7 @@ export default {
 
 <style lang="less">
 .jtk-connector.active{
-  z-index: 1008;
+  z-index: 998;
   path {
     stroke: #150042;
     stroke-width: 1.5;

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

@@ -19,9 +19,16 @@
     <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
     <!-- 节点配置-->
     <div align="center">
-      <el-dialog :modal="false" title="配置" :visible.sync="disposition.findFlag" width="50%" >
+      <el-drawer
-        <span>数据库:&nbsp;&nbsp;{{ disposition.formData.dbName }}</span>
+        :visible.sync="disposition.findFlag"
-        <span>数据表:&nbsp;&nbsp;{{ disposition.formData.table }}</span>
+        direction="rtl"
+        title="配置信息"
+        append-to-body
+        size="60%">
+        <div style="padding-left: 10px;padding-right: 10px;">
+          <h5>数据库:&nbsp;&nbsp;{{ disposition.formData.dbName }}</h5>
+          <br>
+          <h5>数据表:&nbsp;&nbsp;{{ disposition.formData.table }}</h5>
           <span>
           <el-table ref="table" :data="disposition.formData.fields" height="300px">
             <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
@@ -29,21 +36,25 @@
             <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
           </el-table>
         </span>
+          <br><br>
+          <div align="center">
             <el-button @click="disposition.findFlag = false">确认</el-button>
             <el-button type="primary" @click="editDisposition">修改配置</el-button>
-      </el-dialog>
+          </div>
+        </div>
+      </el-drawer>
       <!-- 自定义表单对话框 -->
       <el-drawer
-        style="padding-left: 20px; padding-right: 20px;"
         :modal="false"
         :visible.sync="disposition.updFlag"
         direction="rtl"
         title="节点配置"
         append-to-body
         size="60%">
+        <div style="padding-left: 10px;padding-right: 10px;">
           <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
             <el-form-item label="数据库名称" prop="dbName">
-            <el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable>
+              <el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable @change="handleQuery">
                 <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
               </el-select>
             </el-form-item>
@@ -51,12 +62,14 @@
               <el-input
                 v-model="queryParams.tableName"
                 clearable
+                @change="handleQuery"
                 placeholder="请输入表名称" />
             </el-form-item>
             <el-form-item label="表描述" prop="tableComment">
               <el-input
                 v-model="queryParams.tableComment"
                 clearable
+                @change="handleQuery"
                 placeholder="请输入表描述" />
             </el-form-item>
             <el-form-item>
@@ -67,13 +80,14 @@
           <el-table ref="table" :data="tableOptions" height="300px">
             <el-table-column :show-overflow-tooltip="true" label="表名称" prop="tableName" />
             <el-table-column :show-overflow-tooltip="true" label="表描述" prop="tableComment" />
-          <el-table-column label="操作">
+            <el-table-column label="操作" width="50px">
               <template slot-scope="scope">
                 <el-button type="text" @click="selectTable(scope.row)">选择</el-button>
               </template>
             </el-table-column>
           </el-table>
-        <el-divider />
+        </div>
+        <el-divider content-position="left">选择字段 v</el-divider>
         <el-table ref="table" v-show="fieldsOptions" :data="fieldsOptions" height="300px"
                   @row-click="clickRow" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" />
@@ -93,6 +107,7 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
+import Home from '../Home.vue'
 import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "../../../../api/tool/gen";
 export default {
   name: "nodeItem",
@@ -164,7 +179,7 @@ export default {
               this.toUpdName();
             }
           },{
-            label: '修改配置',
+            label: '设置配置',
             disabled: false,
             icon: "",
             onClick: () => {
@@ -217,6 +232,7 @@ export default {
           type: 'success',
           message: '修改成功'
         });
+        this.$emit("checkFlag")
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -244,8 +260,10 @@ export default {
       });
     },
     /** jsPlumb节点类型 --> 数据库节点类型 */
-    toMysqlNode(node,preLine,nextLine){
+    toMysqlNode(node,preLine,nextLine,taskCode){
       return {
+        nodeType: node.type,
+        taskCode: taskCode,
         nodeCode: node.id,
         nodeName: node.nodeName,
         nodePositionTop: node.top,
@@ -312,45 +330,52 @@ export default {
     },
     // 保存配置按钮
     saveDisposition() {
-      console.log(this.disposition.formData)
       const dispositionData = this.disposition.formData
       const addData = []
       /**
        * {
-       *   node_info_code: '',
+       *   key: '',
-       *   node_type: '',
+       *   name: '',
-       *   node_value: ''
+       *   type: ''
+       *   value: ''
        * }
        */
-      // 处理数据库信息
+      // // 处理数据库信息
-      addData.push({
+      // addData.push({
-        nodeInfoCode: dispositionData.nodeId,
+      //   nodeCode: dispositionData.nodeId,
-        nodeType: 'dbName',
+      //   atom: {
-        nodeValue: dispositionData.dbName
+      //     key: 'dbName',
-      })
+      //     name: '数据库名称',
-      // 处理数据表信息
+      //     type: 'String',
-      addData.push({
+      //     value: dispositionData.dbName
-        nodeInfoCode: dispositionData.nodeId,
+      //   }
-        nodeType: 'table',
+      // })
-        nodeValue: dispositionData.table
+      // // 处理数据表信息
-      })
+      // addData.push({
-      // 处理数据字段信息
+      //   nodeCode: dispositionData.nodeId,
-      addData.push({
+      //   atom: {
-        nodeInfoCode: dispositionData.nodeId,
+      //     key: 'typeName',
-        nodeType: 'fields',
+      //     name: '数据表名称',
-        nodeValue: dispositionData.fields.toString()
+      //     type: 'String',
-      })
+      //     value: dispositionData.dbName
-      console.log(addData)
+      //   }
+      // })
+      // addData.push({
+      //   key: dispositionData.nodeId,
+      //   name: '数据表名称',
+      //   type: 'String',
+      //   value: dispositionData.table
+      // })
+      // // 处理数据字段信息
+      //   addData.push({
+      //     nodeInfoCode: dispositionData.nodeId,
+      //     nodeType: 'fields',
+      //     nodeValue: dispositionData.fields
+      // })
+      // console.log(addData)
       this.disposition.updFlag = false
       this.disposition.findFlag = false
-    },
+
-    // 重置配置信息
-    resetDisposition() {
-      this.disposition.formData = {
-        dbName: undefined,
-        table: {},
-        fields: []
-      }
     },
     getListAll() {
       listDbTableAll().then(res => {
@@ -373,7 +398,6 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      this.resetDisposition()
       this.handleQuery();
     },
     /** 选择表信息*/
@@ -418,9 +442,9 @@ export default {
   border-radius: 4px;
   cursor: move;
   box-sizing: content-box;
-  z-index: 1006;
+  z-index: 996;
   &:hover {
-    z-index: 1007;
+    z-index: 997;
     .delete-btn{
       display: block;
     }
@@ -446,7 +470,7 @@ export default {
     justify-content: center;
     border-radius: 10px;
     cursor: crosshair;
-    z-index: 1008;
+    z-index: 998;
     background: -webkit-radial-gradient(sandybrown 10%, white 30%, #9a54ff 60%);
   }
   .anchor-top{

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

@@ -1,6 +1,7 @@
 import panzoom from "panzoom";
 import { GenNonDuplicateID } from "@/common/until";
 import item from "../components/node-item"
+import Home from "../Home.vue"
 
 const methods = {
   init() {
@@ -106,8 +107,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('节点 '+nodeId+' 位置变更: top->['+v.top+'],left->['+v.left+']')
-        console.log(this.data.nodeList)
+
         return true
       }else {
         return false
@@ -143,6 +144,7 @@ const methods = {
       id: GenNonDuplicateID(8),
       Remark: ""
     });
+
   },
   // 确认删除连线
   confirmDelLine(line) {
@@ -169,6 +171,7 @@ const methods = {
       if(item.from === line.sourceId && item.to === line.targetId) {
         console.log('删线: ' + item.from + ' -/- ' + item.to)
         this.data.lineList.splice(index, 1)
+
       }
     })
   },
@@ -190,8 +193,6 @@ const methods = {
   },
   // 添加新的节点
   addNode(temp) {
-    console.log('新增节点: ')
-    console.log(temp)
     this.data.nodeList.push(temp);
     this.$nextTick(() => {
       this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions);
@@ -199,7 +200,9 @@ const methods = {
       this.draggableNode(temp.id)
     });
     var node = item.methods.toMysqlNode(temp,null,null)
+    console.log('新增节点: ')
     console.log(node)
+
   },
 
   initPanZoom() {
@@ -262,6 +265,7 @@ const methods = {
     this.data.nodeList.some((v) => {
       if(v.id === nodeId) {
         v.nodeName = name
+
         return true
       }else {
         return false
@@ -276,6 +280,7 @@ const methods = {
       if(v.id === node.id) {
         this.data.nodeList.splice(index, 1)
         this.jsPlumb.remove(v.id)
+
         return true
       }else {
         return false

src/views/quest/task/index.vue

@@ -81,7 +81,7 @@
       <el-table-column label="任务内容" align="center" prop="taskData" />
       <el-table-column label="启用状态" align="center" prop="state">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_enable_status" :value="scope.row.state"/>
+          <el-tag :type="scope.row.state == '启用' ? 'success' : 'info'">{{ scope.row.state }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">