优化

src/views/quest/node/Home.vue

@@ -20,7 +20,7 @@
       <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 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 v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" :data="data" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState" />
       </div>
     </div>
 
@@ -85,7 +85,7 @@ export default {
     this.$nextTick(() => {
       setTimeout(() => {
         this.init()
-      },1000)
+      },1500)
     });
   },
   methods: {

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

@@ -18,8 +18,8 @@
     <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
     <div align="center">
-      <DispFind :node="node" :disp="disp" />
+      <DispFind :data="data" :node="node" :disp="disp" />
-      <DispUpd :node="node" :disp="disp" />
+      <DispUpd :data="data" :node="node" :disp="disp" />
     </div>
   </div>
 </template>
@@ -40,6 +40,7 @@ export default {
     DispUpd,
   },
   props: {
+    data: {},
     node: Object
   },
   directives: {
@@ -228,21 +229,63 @@ export default {
     },
     /** 类型转换 mysql -> vue */
     getVueDisp(dispList) {
-      const db = {
+      let type = this.node.type
-        dbName: dispList.find(disp => disp.dispKey === 'db').dispValue,
+      const db = {}
-        tableName: dispList.find(disp => disp.dispKey === 'table').dispValue,
-        tableComment: dispList.find(disp => disp.dispKey === 'table').dispLabel
-      }
       const fields = []
-      dispList.forEach(disp => {
+      if (type === 'table'){
-        if (disp.dispKey === 'fields'){
+        dispList.forEach(disp => {
-          fields.push({
+          if (disp.dispKey === 'db'){
-            fieldName: disp.dispValue,
+            db.dbName = disp.dispValue
-            fieldType: disp.dispType,
+          }
-            fieldComment: disp.dispLabel
+          if (disp.dispKey === 'table'){
-          })
+            db.tableName = disp.dispValue
-        }
+            db.tableComment = disp.dispLabel
-      })
+          }
+          if (disp.dispKey === 'fields'){
+            fields.push({
+              fieldName: disp.dispValue,
+              fieldType: disp.dispType,
+              fieldComment: disp.dispLabel
+            })
+          }
+        })
+      }
+      if (type === 'exportation') {
+        let i = 0
+        let j = 0
+        dispList.forEach(disp => {
+          if (disp.dispKey === 'formDb'){
+            db.formDb = disp.dispValue
+          }
+          if (disp.dispKey === 'formTable'){
+            db.formTable = disp.dispValue
+            db.formTableComment = disp.dispLabel
+          }
+          if (disp.dispKey === 'toDb'){
+            db.toDb = disp.dispValue
+          }
+          if (disp.dispKey === 'toTable'){
+            db.toTable = disp.dispValue
+            db.toTableComment = disp.dispLabel
+          }
+          if (disp.dispKey === 'formFields'){
+            fields.push({
+              id: i++,
+              fieldName: disp.dispValue,
+              fieldType: disp.dispType,
+              fieldComment: disp.dispLabel
+            })
+          }
+          if (disp.dispKey === 'toFields'){
+            fields.push({
+              id: j++,
+              fieldName: disp.dispValue,
+              fieldType: disp.dispType,
+              fieldComment: disp.dispLabel
+            })
+          }
+        })
+      }
       return {db, fields}
     }
   },

src/views/quest/node/components/node/dispFind.vue

@@ -8,6 +8,9 @@
         <span v-if="node.type === 'table'">
           <TableFind :disp="disp" />
         </span>
+        <span v-else-if="node.type === 'exportation'">
+          <ExporFind :disp="disp" :data="data" :node="node" />
+        </span>
 
         <br><br>
         <div align="center">
@@ -23,14 +26,15 @@
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 import TableFind from './type/tableFind.vue'
-import TableUpd from "./type/tableUpd.vue";
+import ExporFind from "./type/exporFind.vue";
 
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
   name: 'type-table',
-  components: {TableUpd, TableFind},
+  components: {ExporFind, TableFind},
   props: {
+    data: {},
     node: {},
     disp: {
       nodeCode: undefined,

src/views/quest/node/components/node/dispUpd.vue

@@ -8,6 +8,9 @@
         <span v-if="node.type === 'table'">
           <TableUpd :disp="disp" />
         </span>
+        <span v-else-if="node.type === 'exportation'">
+          <ExporUpd :disp="disp" :data="data" :node="node" />
+        </span>
 
         <br><br>
         <el-button type="primary" @click="saveDisposition">确 定</el-button>
@@ -21,14 +24,15 @@
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 import TableUpd from './type/tableUpd.vue'
-import {selectDbTableColumnsByName, listDbTableAll, selDbNameAll} from "@/api/tool/gen";
+import ExporUpd from './type/exporUpd.vue'
 import {batchAddUpd} from "@/api/quest/disposition";
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
   name: 'type-table',
-  components: {TableUpd},
+  components: {TableUpd, ExporUpd},
   props: {
+    data: {},
     node: {},
     disp: {
       nodeCode: undefined,

src/views/quest/node/components/node/type/exporFind.vue

@@ -0,0 +1,119 @@
+<template>
+  <div @click="getInfo">
+    <div>
+      <span v-if="disp.formData.db.formDb && disp.formData.db.formTable">输入表信息:
+        {{ disp.formData.db.formDb }}.
+        {{ disp.formData.db.formTable }}
+        ({{ disp.formData.db.formTableComment }})
+      </span>
+      <span v-else>无输入表</span>
+      <br><br>
+      <span v-if="disp.formData.db.toDb && disp.formData.db.toTable">输出表信息:
+        {{ disp.formData.db.toDb }}.
+        {{ disp.formData.db.toTable }}
+        ({{ disp.formData.db.toTableComment }})
+      </span>
+      <span v-else>无输出表</span>
+      <br><br>
+    </div>
+    <div align="center">
+      <el-table v-model="disp.formData.fields">
+        <el-table-column label="输入字段" prop="formFields" />
+        <el-table-column label="输出字段" prop="toFields" />
+      </el-table>
+    </div>
+
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'exporFind',
+  props: {
+    data: {},
+    node: {},
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {}
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  // 方法集合",
+  methods: {
+    // 根据节点编码获取节点的所有信息,包括参数配置
+    getInfo() {
+      console.log(this.data)
+      console.log(this.node)
+      /** 1.查询该结点的上一级节点,并获取其信息*/
+      // this.data.lineList.forEach(line => {
+      //   if (line.to === this.node.id){
+      //
+      //   }
+      // })
+    },
+    /** 类型转换 mysql -> vue */
+    getVueDisp(dispList) {
+      let type = this.node.type
+      const db = {}
+      const fields = []
+      if (type === 'exportation') {
+        let i = 0
+        let j = 0
+        dispList.forEach(disp => {
+          if (disp.dispKey === 'formDb'){
+            db.formDb = disp.dispValue
+          }
+          if (disp.dispKey === 'formTable'){
+            db.formTable = disp.dispValue
+            db.formTableComment = disp.dispLabel
+          }
+          if (disp.dispKey === 'toDb'){
+            db.toDb = disp.dispValue
+          }
+          if (disp.dispKey === 'toTable'){
+            db.toTable = disp.dispValue
+            db.toTableComment = disp.dispLabel
+          }
+          if (disp.dispKey === 'formFields'){
+            fields.push({
+              id: i++,
+              fieldName: disp.dispValue,
+              fieldType: disp.dispType,
+              fieldComment: disp.dispLabel
+            })
+          }
+          if (disp.dispKey === 'toFields'){
+            fields.push({
+              id: j++,
+              fieldName: disp.dispValue,
+              fieldType: disp.dispType,
+              fieldComment: disp.dispLabel
+            })
+          }
+        })
+      }
+      return {db, fields}
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

src/views/quest/node/components/node/type/exporUpd.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'exporUpd',
+  props: {
+    data: {},
+    node: {},
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {}
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  // 方法集合",
+  methods: {}
+}
+</script>
+<style scoped>
+
+</style>

src/views/quest/node/components/node/type/tableUpd.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @click="csh">
     <div style="padding-left: 10px;padding-right: 10px;">
       <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
         <el-form-item label="数据库名称" prop="dbName">
@@ -85,8 +85,7 @@ export default {
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
-    this.selDbNameList()
+
-    this.getListAll()
   },
   // 方法集合",
   methods: {
@@ -140,6 +139,10 @@ export default {
         this.tableOptions = res.data;
       });
     },
+    csh() {
+      this.selDbNameList()
+      this.getListAll()
+    }
   }
 }
 </script>