优化

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

@@ -10,12 +10,11 @@
         <span v-else-if="node.type === 'exportation'">
           <ExporFind :disp="disp" :data="data" :node="node" />
         </span>
+        <span v-else-if="node.type === 'unite'">
+          <UniteFind :disp="disp" :data="data" :node="node" />
+        </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>
@@ -26,12 +25,13 @@
 // 例如：import 《组件名称》 from '《组件路径》,
 import TableFind from './type/tableFind.vue'
 import ExporFind from "./type/exporFind.vue";
+import UniteFind from "./type/uniteFind.vue";
 
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
   name: 'type-table',
-  components: {ExporFind, TableFind},
+  components: {ExporFind, TableFind, UniteFind},
   props: {
     data: {},
     node: {},
@@ -49,7 +49,6 @@ export default {
   data() {
     // 这里存放数据"
     return {
-      xx: ''
     }
   },
   // 计算属性 类似于data概念",
@@ -60,9 +59,7 @@ export default {
   },
   // 方法集合",
   methods: {
-    editDisposition() {
+
-      this.disp.updFlag = true
-    },
   }
 }
 </script>

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

@@ -22,7 +22,10 @@
         <el-table-column label="输出字段" prop="toFields" />
       </el-table>
     </div>
-
+    <div align="center">
+      <el-button @click="disp.findFlag = false">确认</el-button>
+      <el-button type="primary" @click="this.disp.updFlag = true">修改配置</el-button>
+    </div>
   </div>
 </template>
 

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

@@ -1,26 +1,64 @@
 <template>
   <div>
-    <el-row :gutter="10" class="mb8">
+    <div style="padding-left: 10px;padding-right: 10px;">
-      <el-col :span="1.5">
+      <h3>选择输出数据库</h3>
-        <span v-if="reqDispData && reqDispData.dbTableName">输入表信息:
+      <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
-          <span v-for="item in reqDispData.dbTableName">{{ item }} &nbsp; &nbsp; </span>
+        <el-form-item label="数据库名称" prop="dbName">
-        </span>
+          <el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable @change="handleQuery">
-        <span v-else>无输入表</span>
+            <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
-      </el-col>
+          </el-select>
-    </el-row>
+        </el-form-item>
-    <span>
+        <el-form-item label="表名称" prop="tableName">
-          <el-table ref="table" :data="reqDispData.fields" height="300px"
+          <el-input
-                    @row-click="clickRow" @selection-change="handleSelectionChange">
+            v-model="queryParams.tableName"
-            <el-table-column type="selection" width="55" />
+            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>
+      <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>
+      <br><br>
+      <div align="center">
+        <el-button type="primary" @click="checkFields">确 定</el-button>
+        <el-button @click="disp.updFlag = false">取 消</el-button>
+      </div>
+    </div>
+    <div>
+      <el-dialog title="字段选择" :visible.sync="fieldsFlag" width="60%" append-to-body>
+        <el-table ref="table" :data="reqDispData.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">
+              <el-select v-model="scope.row.toName" placeholder="请选择输出字段">
+                <el-option v-for="item in respDispData.fields"
+                           :key="item.columnName"
+                           :label="item.columnName+'('+item.columnComment+')'"
+                           :value="item.columnName"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
         </el-table>
-    </span>
         <br><br>
-    <div align="center">
+        <el-button type="primary" @click="saveDisposition">确 定</el-button>
-      <el-button type="primary" @click="toSelectResp">确 定</el-button>
+      </el-dialog>
-      <el-button @click="disp.updFlag = false">取 消</el-button>
     </div>
   </div>
 </template>
@@ -28,11 +66,13 @@
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
-import {listDisposition} from "@/api/quest/disposition";
+import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
+import {batchAddUpd} from "@/api/quest/disposition";
+import {listDisposition} from "../../../../../../api/quest/disposition";
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
-  name: 'exporUpd',
+  name: 'tableUpd',
   props: {
     data: {},
     node: {},
@@ -45,12 +85,20 @@ export default {
         db: {},
         fields: []
       }
-    },
+    }
-
   },
   data() {
     // 这里存放数据"
     return {
+      // 数据库列表
+      dbNameOptions: [],
+      // 展示数据表列表
+      tableOptions: [],
+      // 字段列表
+      fieldsOptions: [],
+      // 所有数据库列表
+      tableList: [],
+      queryParams: {},
       // 上一级节点编码
       preNodeId: [],
       // 上一级节点配置信息
@@ -65,17 +113,118 @@ export default {
       respDispData: {
         dbTableName: [],
         fields: []
-      }
+      },
+      fieldsFlag: false,
     }
   },
   // 计算属性 类似于data概念",
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
-    this.init()
+    this.csh()
   },
   // 方法集合",
   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.respDispData.dbTableName = row.dbName+'.'+row.tableName+'('+row.tableComment+')'
+      selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
+        this.respDispData.fields = 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()
+      this.init()
+    },
+    // 启动按钮
+    checkFields() {
+      this.fieldsFlag = true
+      this.saveDisposition()
+    },
+    // 保存配置按钮
+    saveDisposition() {
+      console.log('dbNameOptions',this.dbNameOptions)
+      console.log('tableOptions',this.tableOptions)
+      console.log('fieldsOptions',this.fieldsOptions)
+      console.log('tableList',this.tableList)
+      console.log('queryParams',this.queryParams)
+      console.log('preNodeId',this.preNodeId)
+      console.log('preNodeDisp',this.preNodeDisp)
+      console.log('selectDisp',this.selectDisp)
+      console.log('reqDispData',this.reqDispData)
+      console.log('respDispData',this.respDispData)
+    },
+    /** 类型转换 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;
+    },
     init() {
       /** 1.查询该节点的上一级节点*/
       this.data.lineList.forEach(line => {
@@ -96,13 +245,17 @@ export default {
       },1000)
     },
     init2() {
+      let i = 1
       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))
+        nodeDisp.fields.forEach(field => {
+          field.id = i++
+          this.reqDispData.fields.push(field)
+        })
       })
       console.log(4, this.reqDispData)
     },
@@ -111,20 +264,6 @@ export default {
         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)

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

@@ -13,6 +13,11 @@
             <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
           </el-table>
       </span>
+    <br><br>
+    <div align="center">
+      <el-button @click="disp.findFlag = false">确认</el-button>
+      <el-button type="primary" @click="this.disp.updFlag = true">修改配置</el-button>
+    </div>
   </div>
 </template>
 
@@ -44,9 +49,11 @@ export default {
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
+
   },
   // 方法集合",
-  methods: {}
+  methods: {
+  }
 }
 </script>
 <style scoped>

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

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div>
+      <el-form :model="formData" label-width="100px" label-position="left" style="width: 80%">
+        <el-form-item label="一号表">
+          <el-input v-model="reqDispData.db[0].dbTable" placeholder="请选择表" disabled />
+        </el-form-item>
+        <el-form-item label="二号表">
+          <el-input v-model="reqDispData.db[1].dbTable" placeholder="请选择表" disabled />
+        </el-form-item>
+        <el-form-item label="连接方式">
+          <el-select v-model="respDispData.join" placeholder="请选择连接方式">
+            <el-option label="左连接" value="LEFT JOIN" />
+            <el-option label="右连接" value="RIGHT JOIN" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="连接条件">
+          <el-select v-model="respDispData.joinData.form" placeholder="请选择一号表字段">
+            <el-option v-for="item in reqDispData.fieldList[0]" :label="item.columnName+'('+item.columnComment+')'" :value="item.columnName" />
+          </el-select>
+          &nbsp;&nbsp;
+          <el-select v-model="respDispData.joinData.to" placeholder="请选择二号表字段">
+            <el-option v-for="item in reqDispData.fieldList[1]" :label="item.columnName+'('+item.columnComment+')'" :value="item.columnName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+            <el-button @click="disp.findFlag = false">返回</el-button>
+            <el-button type="primary" @click="checkFieldsFlag = true">下一步</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+import {listDisposition} from "@/api/quest/disposition";
+import {selectDbTableColumnsByName} from "../../../../../../api/tool/gen";
+
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  name: 'uniteFind',
+  props: {
+    data: {},
+    node: {},
+    disp: {
+      nodeCode: undefined,
+      nodeType: undefined,
+      findFlag: false,
+      updFlag: false,
+      formData: {
+        db: {},
+        fields: []
+      }
+    }
+  },
+  data() {
+    // 这里存放数据"
+    return {
+      reqDispData: {
+        db: [],
+        fields: [],
+        fieldList: []
+      },
+      respDispData: {
+        db: [],
+        fields: [],
+        join: '',
+        joinData: {
+          form: '',
+          to: ''
+        }
+      },
+      formData: {},
+      checkFieldsFlag: false,
+      i: 0
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.init()
+  },
+  // 方法集合",
+  methods: {
+    init() {
+      // 查询上级的所有节点
+      /** 1.查询该节点的上一级节点*/
+      let preNodeId = []
+      this.data.lineList.forEach(line => {
+        if (line.to === this.node.id){
+          preNodeId.push(line.from)
+        }
+      })
+      // 去重
+      preNodeId = [...new Set(preNodeId)]
+      preNodeId.push(this.node.id)
+      /** 2.获取节点的配置参数*/
+      if (preNodeId){
+        preNodeId.forEach(id => {
+          this.findDisp(id)
+        })
+      }
+      /** 3.查询表字段 */
+      console.log('reqDispData',this.reqDispData)
+      console.log('respDispData',this.respDispData)
+
+    },
+    // 根据节点编码查询节点的配置参数
+    findDisp(nodeCode) {
+      listDisposition({nodeCode: nodeCode}).then(res => {
+        if (!res.data.rows){
+          return
+        }
+        let data = this.getVueDisp(res.data.rows);
+        if (this.node.id === nodeCode){
+          this.respDispData.db.push(data.db)
+          this.respDispData.fields.push(data.fields)
+          this.respDispData.join = data.join
+        }else{
+          this.reqDispData.db.push(data.db)
+          this.respDispData.fields.push(data.fields)
+          selectDbTableColumnsByName(data.db.dbName,data.db.tableName).then(res => {
+            this.reqDispData.fieldList.push(res.data)
+          })
+        }
+      })
+    },
+    /** 节点配置 类型转换 mysql -> vue */
+    getVueDisp(dispList) {
+      const db = {}
+      const fields = []
+      let join = ''
+      let joinData = {
+        form: '',
+        to: ''
+      }
+      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
+          })
+        }
+        db.dbTable = db.dbName+'.'+db.tableName+'('+db.tableComment +')'
+        if (disp.dispKey === 'joinDataForm') {
+          joinData.form = disp.dispValue
+        }
+        if (disp.dispKey === 'joinDataTo') {
+          joinData.to = disp.dispValue
+        }
+        if (disp.dispKey === 'join') {
+          join = disp.dispValue
+          return {db, fields, join, joinData}
+        }
+      })
+      return {db, fields}
+    },
+
+  }
+}
+</script>
+<style scoped>
+
+</style>