优化节点配置效果

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

@@ -1,9 +1,9 @@
 <template>
   <!-- 修改节点配置-->
-  <div align="center">
+  <div>
     <!-- 自定义表单对话框 -->
     <el-drawer :modal="false" :visible.sync="disp.updFlag" direction="rtl" title="节点配置" append-to-body size="60%">
-      <div align="center">
+      <div>
 
         <span v-if="node.type === 'table'">
           <TableUpd :disp="disp" />
@@ -12,9 +12,7 @@
           <ExporUpd :disp="disp" :data="data" :node="node" />
         </span>
 
-        <br><br>
+
-        <el-button type="primary" @click="saveDisposition">确 定</el-button>
-        <el-button @click="disp.updFlag = false">取 消</el-button>
       </div>
     </el-drawer>
   </div>
@@ -54,44 +52,6 @@ export default {
   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;
-    },
 
   }
 }

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

@@ -61,12 +61,6 @@ export default {
     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) {

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

@@ -1,12 +1,35 @@
 <template>
   <div>
-
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <span v-if="reqDispData && reqDispData.dbTableName">输入表信息:
+          <span v-for="item in reqDispData.dbTableName">{{ item }} &nbsp; &nbsp; </span>
+        </span>
+        <span v-else>无输入表</span>
+      </el-col>
+    </el-row>
+    <span>
+          <el-table ref="table" :data="reqDispData.fields" height="300px"
+                    @row-click="clickRow" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" />
+            <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>
+    <br><br>
+    <div align="center">
+      <el-button type="primary" @click="toSelectResp">确 定</el-button>
+      <el-button @click="disp.updFlag = false">取 消</el-button>
+    </div>
   </div>
 </template>
 
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
+import {listDisposition} from "@/api/quest/disposition";
+
 export default {
   // import引入的组件需要注入到对象中才能使用"
   name: 'exporUpd',
@@ -22,19 +45,113 @@ export default {
         db: {},
         fields: []
       }
-    }
+    },
+
   },
   data() {
     // 这里存放数据"
-    return {}
+    return {
+      // 上一级节点编码
+      preNodeId: [],
+      // 上一级节点配置信息
+      preNodeDisp: [],
+      // 最终选择的配置
+      selectDisp: [],
+      // 上一级节点配置信息整合
+      reqDispData: {
+        dbTableName: [],
+        fields: []
+      },
+      respDispData: {
+        dbTableName: [],
+        fields: []
+      }
+    }
   },
   // 计算属性 类似于data概念",
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
+    this.init()
   },
   // 方法集合",
-  methods: {}
+  methods: {
+    init() {
+      /** 1.查询该节点的上一级节点*/
+      this.data.lineList.forEach(line => {
+        if (line.to === this.node.id){
+          this.preNodeId.push(line.from)
+        }
+      })
+      this.preNodeId = [...new Set(this.preNodeId)]
+      console.log(1,this.preNodeId)
+      /** 2.获取上一级节点的配置参数*/
+      if (this.preNodeId){
+        this.preNodeId.forEach(id => {
+          this.findDisp(id)
+        })
+      }
+      setTimeout(() => {
+        this.init2()
+      },1000)
+    },
+    init2() {
+      console.log(2,this.preNodeDisp)
+      this.preNodeDisp.forEach(nodeDisp => {
+        console.log(3, nodeDisp)
+        let dbTableName = nodeDisp.db.dbName + '.' +
+          nodeDisp.db.tableName + '(' + nodeDisp.db.tableComment + ')';
+        this.reqDispData.dbTableName.push(dbTableName)
+        nodeDisp.fields.forEach(field => this.reqDispData.fields.push(field))
+      })
+      console.log(4, this.reqDispData)
+    },
+    findDisp(nodeCode) {
+      listDisposition({nodeCode: nodeCode}).then(res => {
+        this.preNodeDisp.push(this.getVueDisp(res.data.rows))
+      })
+    },
+    // 选择多选
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 输入表多选框选中数据
+    handleSelectionChange(selection) {
+      this.selectDisp.formFields = selection.map(item => {
+        return {
+          fieldName: item.fieldName,
+          fieldType: item.fieldComment,
+          fieldComment: item.fieldType
+        };
+      });
+    },
+    // 选择完成输入表字段
+    toSelectResp() {
+      console.log(this.selectDisp)
+    },
+    /** 类型转换 mysql -> vue */
+    getVueDisp(dispList) {
+      const db = {}
+      const fields = []
+      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,
+            fieldType: disp.dispType,
+            fieldComment: disp.dispLabel
+          })
+        }
+      })
+      return {db, fields}
+    }
+  }
 }
 </script>
 <style scoped>

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

@@ -0,0 +1,194 @@
+<template>
+  <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">
+          <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>
+      <br><br>
+      <div align="center">
+        <el-button type="primary" @click="saveDisposition">确 定</el-button>
+        <el-button @click="disp.updFlag = false">取 消</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
+import {batchAddUpd} from "@/api/quest/disposition";
+
+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() {
+
+  },
+  // 方法集合",
+  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;
+      });
+    },
+    // csh() {
+    //   this.selDbNameList()
+    //   this.getListAll()
+    // },
+    // 保存配置按钮
+    saveDisposition() {
+      const dispData = this.disp.formData
+      const dispList = this.getMysqlDisp(dispData.db,dispData.fields)
+      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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div @click="csh">
+  <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">
@@ -43,6 +43,11 @@
         <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
         <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
       </el-table>
+      <br><br>
+      <div align="center">
+        <el-button type="primary" @click="saveDisposition">确 定</el-button>
+        <el-button @click="disp.updFlag = false">取 消</el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -51,6 +56,7 @@
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
+import {batchAddUpd} from "@/api/quest/disposition";
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
@@ -85,7 +91,7 @@ export default {
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
-
+    this.csh()
   },
   // 方法集合",
   methods: {
@@ -142,7 +148,44 @@ export default {
     csh() {
       this.selDbNameList()
       this.getListAll()
-    }
+    },
+    // 保存配置按钮
+    saveDisposition() {
+      const dispData = this.disp.formData
+      const dispList = this.getMysqlDisp(dispData.db,dispData.fields)
+      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>