From beca5cc501644041ca2a80a8fed351a62e7f5bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=91=E5=B9=B4=E6=A2=A6=E4=B8=8E=E7=A0=96?=
 <2847127106@qq.com>
Date: Fri, 30 Aug 2024 09:43:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E8=8A=82=E7=82=B9=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=9F=E8=83=BD,=E6=96=B0=E5=A2=9E=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/quest/disposition.js                  |  53 ++++
 src/api/quest/param.js                        |  53 ----
 src/views/quest/node/components/node-item.vue | 266 +++---------------
 .../node/components/node/type-exportation.vue |  59 ++++
 .../node/components/node/type-table-upd.vue   |  99 +++++++
 .../quest/node/components/node/type-table.vue |  68 +++++
 .../node/components/node/type/tableFind.vue   |  51 ++++
 .../node/components/node/type/tableUpd.vue    | 148 ++++++++++
 src/views/quest/node/config/methods.js        |   9 +-
 9 files changed, 529 insertions(+), 277 deletions(-)
 create mode 100644 src/api/quest/disposition.js
 delete mode 100644 src/api/quest/param.js
 create mode 100644 src/views/quest/node/components/node/type-exportation.vue
 create mode 100644 src/views/quest/node/components/node/type-table-upd.vue
 create mode 100644 src/views/quest/node/components/node/type-table.vue
 create mode 100644 src/views/quest/node/components/node/type/tableFind.vue
 create mode 100644 src/views/quest/node/components/node/type/tableUpd.vue

diff --git a/src/api/quest/disposition.js b/src/api/quest/disposition.js
new file mode 100644
index 0000000..d26092a
--- /dev/null
+++ b/src/api/quest/disposition.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询节点配置列表
+export function listDisposition(query) {
+  return request({
+    url: '/quest/disposition/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询节点配置详细
+export function getDisposition(id) {
+  return request({
+    url: '/quest/disposition/' + id,
+    method: 'get'
+  })
+}
+
+
+// 新增节点配置
+export function addDisposition(data) {
+  return request({
+    url: '/quest/disposition',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改节点配置
+export function updateDisposition(data) {
+  return request({
+    url: '/quest/disposition',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除节点配置
+export function delDisposition(id) {
+  return request({
+    url: '/quest/disposition/' + id,
+    method: 'delete'
+  })
+}
+// 批量操作节点配置
+export function batchAddUpd(data,nodeCode) {
+  return request({
+    url: '/quest/disposition/batch/'+nodeCode,
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/api/quest/param.js b/src/api/quest/param.js
deleted file mode 100644
index 2dfe3a1..0000000
--- a/src/api/quest/param.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import request from '@/utils/request'
-
-// 查询节点参数列表
-export function listParam(query) {
-  return request({
-    url: '/quest/param/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询节点参数详细
-export function getParam(id) {
-  return request({
-    url: '/quest/param/' + id,
-    method: 'get'
-  })
-}
-
-// 新增节点参数
-export function addParam(data) {
-  return request({
-    url: '/quest/param',
-    method: 'post',
-    data: data
-  })
-}
-
-// 批量新增
-export function batchAdd(data) {
-  return request({
-    url: '/quest/param/batchAdd',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改节点参数
-export function updateParam(data) {
-  return request({
-    url: '/quest/param',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除节点参数
-export function delParam(id) {
-  return request({
-    url: '/quest/param/' + id,
-    method: 'delete'
-  })
-}
diff --git a/src/views/quest/node/components/node-item.vue b/src/views/quest/node/components/node-item.vue
index 653cd87..7cc65ea 100644
--- a/src/views/quest/node/components/node-item.vue
+++ b/src/views/quest/node/components/node-item.vue
@@ -17,90 +17,9 @@
     <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>
-    <!-- 节点配置-->
     <div align="center">
-      <el-drawer
-        :visible.sync="disposition.findFlag"
-        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" />
-            <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
-            <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>
-          </div>
-        </div>
-      </el-drawer>
-      <!-- 自定义表单对话框 -->
-      <el-drawer
-        :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 @change="handleQuery">
-                <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="表名称" prop="tableName">
-              <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>
-              <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查找</el-button>
-              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <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="操作" width="50px">
-              <template slot-scope="scope">
-                <el-button type="text" @click="selectTable(scope.row)">选择</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </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" />
-          <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
-          <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
-          <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
-        </el-table>
-        <el-divider />
-        <div align="center">
-          <el-button type="primary" @click="saveDisposition">确 定</el-button>
-          <el-button @click="disposition.updFlag = false">取 消</el-button>
-        </div>
-      </el-drawer>
+      <TypeTable :node="node" :disp="disp" />
+      <TypeTableUpd :node="node" :disp="disp" />
     </div>
   </div>
 </template>
@@ -108,9 +27,18 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import Home from '../Home.vue'
-import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "../../../../api/tool/gen";
+import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
+import {listDisposition} from "@/api/quest/disposition";
+import TypeTable from "./node/type-table.vue";
+import TypeTableUpd from "./node/type-table-upd.vue";
+
+
 export default {
   name: "nodeItem",
+  components: {
+    TypeTable,
+    TypeTableUpd,
+  },
   props: {
     node: Object
   },
@@ -133,32 +61,16 @@ export default {
       mouseEnter: false,
       isActive: false,
       isSelected: false,
-      disposition: {
+      disp: {
+        nodeCode: undefined,
+        nodeType: undefined,
         findFlag: false,
         updFlag: false,
         formData: {
-          nodeId: undefined,
-          dbName: undefined,
-          table: {},
+          db: {},
           fields: []
         }
-      },
-      total: 0,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dbName: undefined,
-        tableName: undefined,
-        tableComment: undefined
-      },
-      // 数据库列表
-      dbNameOptions: [],
-      // 展示数据表列表
-      tableOptions: [],
-      // 所有数据库列表
-      tableList: [],
-      // 字段列表
-      fieldsOptions: []
+      }
     };
   },
   methods: {
@@ -168,6 +80,7 @@ export default {
     hideAnchor() {
       this.mouseEnter = false
     },
+    // 右击菜单
     onContextmenu() {
       this.$contextmenu({
         items: [
@@ -183,7 +96,7 @@ export default {
             disabled: false,
             icon: "",
             onClick: () => {
-              this.disposition.updFlag = true;
+              this.disp.type.findFlag = true;
             }
           },{
             label: '删除节点',
@@ -259,6 +172,15 @@ export default {
         });
       });
     },
+    // 双击触发-查看配置
+    findDisposition() {
+      // 查询节点配置信息
+      this.disp.nodeCode = this.node.id
+      this.disp.findFlag = true
+      listDisposition({nodeCode: this.node.id}).then(res => {
+        this.disp.formData = this.getVueDisp(res.data.rows)
+      })
+    },
     /** jsPlumb节点类型 --> 数据库节点类型 */
     toMysqlNode(node,preLine,nextLine,taskCode){
       return {
@@ -304,122 +226,26 @@ export default {
         line: line
       }
     },
-    // 双击触发-查看配置
-    findDisposition() {
-      // 查询节点配置信息
-      this.disposition.formData.nodeId = this.node.id
-      this.disposition.findFlag = true
-    },
-    // 编辑配置
-    editDisposition() {
-      this.selDbNameList()
-      this.getListAll()
-      this.disposition.updFlag = true
-    },
-    // 查询所有数据库名称
-    selDbNameList() {
-      selDbNameAll().then(res => {
-        this.dbNameOptions = res.data
-      })
-    },
-    // 查询表字段
-    getFields(dbName, tableName) {
-      selectDbTableColumnsByName(dbName, tableName).then(res => {
-        this.fieldsOptions = res.data
-      })
-    },
-    // 保存配置按钮
-    saveDisposition() {
-      const dispositionData = this.disposition.formData
-      const addData = []
-      /**
-       * {
-       *   key: '',
-       *   name: '',
-       *   type: ''
-       *   value: ''
-       * }
-       */
-      // // 处理数据库信息
-      // addData.push({
-      //   nodeCode: dispositionData.nodeId,
-      //   atom: {
-      //     key: 'dbName',
-      //     name: '数据库名称',
-      //     type: 'String',
-      //     value: dispositionData.dbName
-      //   }
-      // })
-      // // 处理数据表信息
-      // addData.push({
-      //   nodeCode: dispositionData.nodeId,
-      //   atom: {
-      //     key: 'typeName',
-      //     name: '数据表名称',
-      //     type: 'String',
-      //     value: dispositionData.dbName
-      //   }
-      // })
-      // 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
-
-    },
-    getListAll() {
-      listDbTableAll().then(res => {
-        this.tableList = res.data;
-        this.tableOptions = res.data;
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.tableOptions = []
-      this.tableList.forEach(table => {
-        const params = this.queryParams
-        if ((table.dbName === params.dbName || !params.dbName) &&
-          (table.tableName.includes(params.tableName) || !params.tableName) &&
-          (table.tableComment.includes(params.tableComment) || !params.tableComment)){
-          this.tableOptions.push(table)
+    /** 类型转换 mysql -> vue */
+    getVueDisp(dispList) {
+      const db = {
+        dbName: dispList.find(disp => disp.dispKey === 'db').dispValue,
+        tableName: dispList.find(disp => disp.dispKey === 'table').dispValue,
+        tableComment: dispList.find(disp => disp.dispKey === 'table').dispLabel
+      }
+      const fields = []
+      dispList.forEach(disp => {
+        if (disp.dispKey === 'fields'){
+          fields.push({
+            fieldName: disp.dispValue,
+            fieldType: disp.dispType,
+            fieldComment: disp.dispLabel
+          })
         }
       })
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 选择表信息*/
-    selectTable(row) {
-      this.disposition.formData.table = row.tableName
-      this.disposition.formData.dbName = row.dbName
-      this.getFields(row.dbName, row.tableName)
-    },
-    clickRow(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.disposition.formData.fields = selection.map(item => {
-        return {
-          fieldName: item.columnName,
-          fieldType: item.columnType,
-          fieldComment: item.columnComment
-        };
-      });
-    },
-  }
+      return {db, fields}
+    }
+  },
 };
 </script>
 
diff --git a/src/views/quest/node/components/node/type-exportation.vue b/src/views/quest/node/components/node/type-exportation.vue
new file mode 100644
index 0000000..1361888
--- /dev/null
+++ b/src/views/quest/node/components/node/type-exportation.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <el-drawer title="节点配置" :visible.sync="disp.type.findFlag" direction="rtl" size="50%">
+      <el-table ref="table" :data="disp.formData.fields" height="300px">
+        <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
+        <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
+        <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
+        <el-table-column :show-overflow-tooltip="true" label="所属数据表">
+          <template slot-scope="scope">
+
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" label="所属数据库">
+          <template slot-scope="scope">
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'type-exportation',
+  props: {
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      type:{
+        typeName: '',
+        findFlag: false,
+        updFlag: false,
+      },
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {}
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  // 方法集合",
+  methods: {}
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/quest/node/components/node/type-table-upd.vue b/src/views/quest/node/components/node/type-table-upd.vue
new file mode 100644
index 0000000..daec97a
--- /dev/null
+++ b/src/views/quest/node/components/node/type-table-upd.vue
@@ -0,0 +1,99 @@
+<template>
+  <!-- 修改节点配置-->
+  <div align="center">
+    <!-- 自定义表单对话框 -->
+    <el-drawer :modal="false" :visible.sync="disp.updFlag" direction="rtl" title="节点配置" append-to-body size="60%">
+      <div align="center">
+
+        <span v-if="node.type === 'table'">
+          <TableUpd :disp="disp" />
+        </span>
+
+        <br><br>
+        <el-button type="primary" @click="saveDisposition">确 定</el-button>
+        <el-button @click="disp.updFlag = false">取 消</el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+import TableUpd from './type/tableUpd.vue'
+import {selectDbTableColumnsByName, listDbTableAll, selDbNameAll} from "@/api/tool/gen";
+import {batchAddUpd} from "@/api/quest/disposition";
+
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'type-table',
+  components: {TableUpd},
+  props: {
+    node: {},
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    },
+
+  },
+  data() {
+    // 这里存放数据"
+    return {
+
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 方法集合",
+  methods: {
+    // 保存配置按钮
+    saveDisposition() {
+      const dispData = this.disp.formData
+      const dispList = this.getMysqlDisp(dispData.db,dispData.fields)
+      console.log(dispData)
+      console.log(dispList)
+      batchAddUpd(dispList, this.disp.nodeCode).then(res => {
+        this.$message.success(res.msg)
+        this.disp.updFlag = false
+      })
+    },
+    /** 类型转换 vue -> mysql*/
+    getMysqlDisp(db, fields) {
+      const dispList = []
+      dispList.push({
+        nodeCode: this.disp.nodeCode,
+        dispKey: 'db',
+        dispLabel: '数据库',
+        dispValue: db.dbName,
+        dispType: 'string'
+      },{
+        nodeCode: this.disp.nodeCode,
+        dispKey: 'table',
+        dispLabel: db.tableComment,
+        dispValue: db.tableName,
+        dispType: 'string'
+      })
+      fields.forEach(field => {
+        dispList.push({
+          nodeCode: this.disp.nodeCode,
+          dispKey: 'fields',
+          dispLabel: field.fieldComment,
+          dispValue: field.fieldName,
+          dispType: field.fieldType
+        })
+      })
+      return dispList;
+    },
+
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/quest/node/components/node/type-table.vue b/src/views/quest/node/components/node/type-table.vue
new file mode 100644
index 0000000..7581e24
--- /dev/null
+++ b/src/views/quest/node/components/node/type-table.vue
@@ -0,0 +1,68 @@
+<template>
+  <!-- 节点配置-->
+  <div align="center">
+    <el-drawer :visible.sync="disp.findFlag" direction="rtl" title="配置信息" append-to-body size="60%">
+      {{ node }}
+      <div style="padding-left: 20px;padding-right: 20px;">
+
+        <span v-if="node.type === 'table'">
+          <TableFind :disp="disp" />
+        </span>
+
+        <br><br>
+        <div align="center">
+          <el-button @click="disp.findFlag = false">确认</el-button>
+          <el-button type="primary" @click="editDisposition">修改配置</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+import TableFind from './type/tableFind.vue'
+import TableUpd from "./type/tableUpd.vue";
+
+
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'type-table',
+  components: {TableUpd, TableFind},
+  props: {
+    node: {},
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {
+      xx: ''
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+
+  },
+  // 方法集合",
+  methods: {
+    editDisposition() {
+      this.disp.updFlag = true
+    },
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/quest/node/components/node/type/tableFind.vue b/src/views/quest/node/components/node/type/tableFind.vue
new file mode 100644
index 0000000..e66b296
--- /dev/null
+++ b/src/views/quest/node/components/node/type/tableFind.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h5>数据库:&nbsp;&nbsp;{{ disp.formData.db.dbName }}</h5>
+    <br>
+    <h5>数据表:&nbsp;&nbsp;{{ disp.formData.db.tableName }}</h5>
+    <span>
+          <el-table ref="table" :data="disp.formData.fields" height="300px">
+            <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
+            <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
+            <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
+          </el-table>
+      </span>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'tableFind',
+  props: {
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {
+
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  // 方法集合",
+  methods: {}
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/quest/node/components/node/type/tableUpd.vue b/src/views/quest/node/components/node/type/tableUpd.vue
new file mode 100644
index 0000000..5c3b9d5
--- /dev/null
+++ b/src/views/quest/node/components/node/type/tableUpd.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <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 @change="handleQuery">
+            <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="表名称" prop="tableName">
+          <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>
+          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查找</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <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="操作" width="50px">
+          <template slot-scope="scope">
+            <el-button type="text" @click="selectTable(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-divider content-position="left">选择字段 v</el-divider>
+      <el-table ref="table" :data="fieldsOptions" height="300px"
+                @row-click="clickRow" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
+        <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
+        <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
+
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'tableUpd',
+  props: {
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {
+      // 数据库列表
+      dbNameOptions: [],
+      // 展示数据表列表
+      tableOptions: [],
+      // 字段列表
+      fieldsOptions: [],
+      // 所有数据库列表
+      tableList: [],
+      queryParams: {}
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.selDbNameList()
+    this.getListAll()
+  },
+  // 方法集合",
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.tableOptions = []
+      this.tableList.forEach(table => {
+        const params = this.queryParams
+        if ((table.dbName === params.dbName || !params.dbName) &&
+          (table.tableName.includes(params.tableName) || !params.tableName) &&
+          (table.tableComment.includes(params.tableComment) || !params.tableComment)){
+          this.tableOptions.push(table)
+        }
+      })
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 表字段查询*/
+    selectTable(row) {
+      this.disp.formData.db = row
+      selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
+        this.fieldsOptions = res.data
+      })
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.disp.formData.fields = selection.map(item => {
+        return {
+          fieldName: item.columnName,
+          fieldType: item.columnType,
+          fieldComment: item.columnComment
+        };
+      });
+    },
+    // 查询所有数据库名称
+    selDbNameList() {
+      selDbNameAll().then(res => {
+        this.dbNameOptions = res.data
+      })
+    },
+    // 查询所有表名称信息
+    getListAll() {
+      listDbTableAll().then(res => {
+        this.tableList = res.data;
+        this.tableOptions = res.data;
+      });
+    },
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/quest/node/config/methods.js b/src/views/quest/node/config/methods.js
index 1390fa9..3f6454b 100644
--- a/src/views/quest/node/config/methods.js
+++ b/src/views/quest/node/config/methods.js
@@ -1,7 +1,6 @@
 import panzoom from "panzoom";
-import { GenNonDuplicateID } from "@/common/until";
+import {GenNonDuplicateID} from "@/common/until";
 import item from "../components/node-item"
-import Home from "../Home.vue"
 
 const methods = {
   init() {
@@ -10,8 +9,10 @@ const methods = {
       this.jsPlumb.importDefaults(this.jsplumbSetting);
       //完成连线前的校验
       this.jsPlumb.bind("beforeDrop", evt => {
-        let res = () => { } //此处可以添加是否创建连接的校验， 返回 false 则不添加；
-        return res
+         //此处可以添加是否创建连接的校验， 返回 false 则不添加；
+        return () => {
+          console.log(evt)
+        }
       })
       //断开连线后，维护本地数据
       this.jsPlumb.bind("connectionDetached", evt => {