优化

2024-08-30 11:03:18 +08:00 · 2024-08-30 11:03:18 +08:00 · fcfa05f98a
parent 1ddc02252b
commit fcfa05f98a
7 changed files with 240 additions and 25 deletions
--- a/src/views/quest/node/Home.vue
+++ b/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: {
--- a/src/views/quest/node/components/node-item.vue
+++ b/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" />
-      <DispUpd :node="node" :disp="disp" />
+      <DispFind :data="data" :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,13 +229,18 @@ export default {
    },
    /** 类型转换 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
-      }
+      let type = this.node.type
+      const db = {}
      const fields = []
+      if (type === 'table'){
        dispList.forEach(disp => {
+          if (disp.dispKey === 'db'){
+            db.dbName = disp.dispValue
+          }
+          if (disp.dispKey === 'table'){
+            db.tableName = disp.dispValue
+            db.tableComment = disp.dispLabel
+          }
          if (disp.dispKey === 'fields'){
            fields.push({
              fieldName: disp.dispValue,
@ -243,6 +249,43 @@ export default {
            })
          }
        })
+      }
+      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}
    }
  },
--- a/src/views/quest/node/components/node/dispFind.vue
+++ b/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,
--- a/src/views/quest/node/components/node/dispUpd.vue
+++ b/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,
--- a/src/views/quest/node/components/node/type/exporFind.vue
+++ b/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>
--- a/src/views/quest/node/components/node/type/exporUpd.vue
+++ b/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>
--- a/src/views/quest/node/components/node/type/tableUpd.vue
+++ b/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>