完成表结构和联合查询的配置

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

@@ -24,7 +24,7 @@
     </div>
     <div align="center">
       <el-button @click="disp.findFlag = false">确认</el-button>
-      <el-button type="primary" @click="this.disp.updFlag = true">修改配置</el-button>
+      <el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
     </div>
   </div>
 </template>
@@ -57,11 +57,12 @@ export default {
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
+    this.init()
   },
   // 方法集合",
   methods: {
-    // 根据节点编码获取节点的所有信息,包括参数配置
+    // 初始化
-    getInfo() {
+    info() {
       console.log(this.data)
       console.log(this.node)
     },

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

@@ -1,53 +1,26 @@
 <template>
-  <div @click="csh">
+  <div>
-    <div style="padding-left: 10px;padding-right: 10px;">
+    <el-row :gutter="10" class="mb8">
-      <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-col :span="1.5">
-        <el-form-item label="数据库名称" prop="dbName">
+        <span v-if="reqDispData && reqDispData.dbTableName">输入表信息:
-          <el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable @change="handleQuery">
+          <span v-for="item in reqDispData.dbTableName">{{ item }} &nbsp; &nbsp; </span>
-            <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
+        </span>
-          </el-select>
+        <span v-else>无输入表</span>
-        </el-form-item>
+      </el-col>
-        <el-form-item label="表名称" prop="tableName">
+    </el-row>
-          <el-input
+    <span>
-            v-model="queryParams.tableName"
+          <el-table ref="table" :data="reqDispData.fields" height="300px"
-            clearable
+                    @row-click="clickRow" @selection-change="handleSelectionChange">
-            @change="handleQuery"
+            <el-table-column type="selection" width="55" />
-            placeholder="请输入表名称" />
+            <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
-        </el-form-item>
+            <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
-        <el-form-item label="表描述" prop="tableComment">
+            <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
-          <el-input
+          </el-table>
-            v-model="queryParams.tableComment"
+    </span>
-            clearable
+    <br><br>
-            @change="handleQuery"
+    <div align="center">
-            placeholder="请输入表描述" />
+      <el-button type="primary" @click="toSelectResp">确 定</el-button>
-        </el-form-item>
+      <el-button @click="disp.updFlag = false">取 消</el-button>
-        <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>
@@ -55,13 +28,14 @@
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
-import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
+import {listDisposition} from "@/api/quest/disposition";
-import {batchAddUpd} from "@/api/quest/disposition";
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
-  name: 'tableUpd',
+  name: 'exporUpd',
   props: {
+    data: {},
+    node: {},
     disp: {
       nodeCode: undefined,
       nodeType: undefined,
@@ -71,120 +45,37 @@ export default {
         db: {},
         fields: []
       }
-    }
+    },
+
   },
   data() {
     // 这里存放数据"
     return {
-      // 数据库列表
+      // 上一级节点编码
-      dbNameOptions: [],
+      preNodeId: [],
-      // 展示数据表列表
+      // 上一级节点配置信息
-      tableOptions: [],
+      preNodeDisp: [],
-      // 字段列表
+      // 最终选择的配置
-      fieldsOptions: [],
+      selectDisp: [],
-      // 所有数据库列表
+      // 上一级节点配置信息整合
-      tableList: [],
+      reqDispData: {
-      queryParams: {}
+        dbTableName: [],
+        fields: []
+      },
+      respDispData: {
+        dbTableName: [],
+        fields: []
+      }
     }
   },
   // 计算属性 类似于data概念",
   computed: {},
   // 生命周期 - 创建完成（可以访问当前this实例）",
   created() {
-
+    this.init()
   },
   // 方法集合",
   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;
-    },
 
   }
 }

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

@@ -16,7 +16,7 @@
     <br><br>
     <div align="center">
       <el-button @click="disp.findFlag = false">确认</el-button>
-      <el-button type="primary" @click="this.disp.updFlag = true">修改配置</el-button>
+      <el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
     </div>
   </div>
 </template>
@@ -53,6 +53,9 @@ export default {
   },
   // 方法集合",
   methods: {
+    toUpd() {
+      this.disp.updFlag = true
+    }
   }
 }
 </script>

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

@@ -114,6 +114,7 @@ export default {
     },
     /** 表字段查询*/
     selectTable(row) {
+      this.disp.formData.fields = []
       this.disp.formData.db = row
       selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
         this.fieldsOptions = res.data

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

@@ -15,27 +15,28 @@
           </el-select>
         </el-form-item>
         <el-form-item label="连接条件">
-          <el-select v-model="respDispData.joinData.form" placeholder="请选择一号表字段">
+          <el-select v-model="respDispData.joinData.form.fieldName" placeholder="请选择一号表字段">
-            <el-option v-for="item in reqDispData.fieldList[0]" :label="item.columnName+'('+item.columnComment+')'" :value="item.columnName" />
+            <el-option v-for="item in reqDispData.fields[0]" :label="item.tableName+'.'+item.fieldName+'('+item.fieldComment+')'" :value="item.fieldName" />
           </el-select>
           &nbsp;&nbsp;
-          <el-select v-model="respDispData.joinData.to" placeholder="请选择二号表字段">
+          <el-select v-model="respDispData.joinData.to.fieldName" placeholder="请选择二号表字段">
-            <el-option v-for="item in reqDispData.fieldList[1]" :label="item.columnName+'('+item.columnComment+')'" :value="item.columnName" />
+            <el-option v-for="item in reqDispData.fields[1]" :label="item.tableName+'.'+item.fieldName+'('+item.fieldComment+')'" :value="item.fieldName" />
           </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-button type="primary" @click="checkFields">下一步</el-button>
         </el-form-item>
       </el-form>
     </div>
-    <el-dialog title="选择字段" :visible.sync="checkFieldsFlag" width="60%" append-to-body>
+    <el-dialog title="选择字段" :visible.sync="checkFieldsFlag" width="70%" append-to-body>
-      <el-table ref="table" :data="reqDispData.fields" height="300px"
+      <el-table ref="table" :data="reqDispData.fieldList" height="450px"
                 @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="fieldName" />
-        <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
+        <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
-        <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
+        <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
+        <el-table-column :show-overflow-tooltip="true" label="字段所属表" prop="tableName" />
       </el-table>
       <br><br>
       <div align="center">
@@ -51,6 +52,7 @@
 // 例如：import 《组件名称》 from '《组件路径》,
 import {listDisposition} from "@/api/quest/disposition";
 import {selectDbTableColumnsByName} from "@/api/tool/gen";
+import {batchAddUpd} from "@/api/quest/disposition";
 
 export default {
   // import引入的组件需要注入到对象中才能使用"
@@ -82,8 +84,8 @@ export default {
         fields: [],
         join: '',
         joinData: {
-          form: '',
+          form: {},
-          to: ''
+          to: {}
         }
       },
       formData: {},
@@ -135,19 +137,39 @@ export default {
           this.respDispData.join = data.join
         }else{
           this.reqDispData.db.push(data.db)
-          this.respDispData.fields.push(data.fields)
+          this.reqDispData.fields.push(data.fields)
-          selectDbTableColumnsByName(data.db.dbName,data.db.tableName).then(res => {
-            this.reqDispData.fieldList.push(res.data)
-          })
         }
       })
     },
+    // 下一步按钮
+    checkFields() {
+      this.respDispData.db = this.reqDispData.db
+      this.reqDispData.fieldList = []
+      this.reqDispData.fieldList.push(...this.reqDispData.fields[0])
+      this.reqDispData.fieldList.push(...this.reqDispData.fields[1])
+      // 查询表字段
+      this.reqDispData.fields[0].forEach(field => {
+        if (this.respDispData.joinData.form.fieldName === field.fieldName){
+          this.respDispData.joinData.form = field
+        }
+      })
+      this.reqDispData.fields[1].forEach(field => {
+        if (this.respDispData.joinData.to.fieldName === field.fieldName){
+          this.respDispData.joinData.to = field
+        }
+      })
+      this.checkFieldsFlag = true
+    },
     // 保存选择
     save() {
       console.log('reqDispData',this.reqDispData)
       console.log('respDispData',this.respDispData)
-      this.checkFieldsFlag = false
+      const dispList = this.getMysqlDisp(this.respDispData)
-      this.disp.findFlag = false
+      batchAddUpd(dispList, this.disp.nodeCode).then(res => {
+        this.$message.success(res.msg)
+        this.checkFieldsFlag = false
+      })
+      // this.disp.findFlag = false
     },
     clickRow(row) {
       this.$refs.table.toggleRowSelection(row);
@@ -156,9 +178,11 @@ export default {
     handleSelectionChange(selection) {
       this.respDispData.fields = selection.map(item => {
         return {
-          fieldName: item.columnName,
+          tableName: item.tableName,
-          fieldType: item.columnType,
+          fieldName: item.fieldName,
-          fieldComment: item.columnComment
+          fieldType: item.fieldType,
+          fieldComment: item.fieldComment,
+          fieldDesc: item.fieldDesc
         };
       });
     },
@@ -166,6 +190,7 @@ export default {
     getVueDisp(dispList) {
       const db = {}
       const fields = []
+      let tableName = ''
       let join = ''
       let joinData = {
         form: '',
@@ -179,27 +204,105 @@ export default {
           db.tableName = disp.dispValue
           db.tableComment = disp.dispLabel
         }
+        tableName = db.dbName+'.'+db.tableName
+        db.dbTable = db.dbName+'.'+db.tableName+'('+db.tableComment +')'
         if (disp.dispKey === 'fields') {
           fields.push({
+            tableName: tableName,
             fieldName: disp.dispValue,
             fieldType: disp.dispType,
-            fieldComment: disp.dispLabel
+            fieldComment: disp.dispLabel,
+            fieldDesc: disp.fieldDesc
           })
         }
-        db.dbTable = db.dbName+'.'+db.tableName+'('+db.tableComment +')'
         if (disp.dispKey === 'joinDataForm') {
-          joinData.form = disp.dispValue
+          joinData.form.push({
+            tableName: tableName,
+            fieldName: disp.dispValue,
+            fieldType: disp.dispType,
+            fieldComment: disp.dispLabel,
+            fieldDesc: disp.fieldDesc
+          })
         }
         if (disp.dispKey === 'joinDataTo') {
-          joinData.to = disp.dispValue
+          joinData.to.push({
+            tableName: tableName,
+            fieldName: disp.dispValue,
+            fieldType: disp.dispType,
+            fieldComment: disp.dispLabel,
+            fieldDesc: disp.fieldDesc
+          })
         }
         if (disp.dispKey === 'join') {
           join = disp.dispValue
-          return {db, fields, join, joinData}
         }
       })
+      if (join !== '') {
+        return {db, fields, join, joinData}
+      }
       return {db, fields}
     },
+    /** 节点配置--unite 类型转换 vue -> mysql*/
+    getMysqlDisp(resp) {
+      const db = resp.db
+      const fields = resp.fields
+      const join = resp.join
+      const form = resp.joinData.form
+      const to = resp.joinData.to
+      // 处理数据库
+      const dispList = []
+      // 数据库
+      db.forEach(item => {
+        dispList.push({
+          nodeCode: this.node.id, // 节点编码
+          dispKey: 'db',  // 存储编码
+          dispLabel: item.tableComment, // 显示名称
+          dispValue: item.dbName, // 存储值
+          dispType: 'string',  // 存储类型
+          dispDesc: item.dbTable // 备注信息
+        })
+      })
+      // 表结构
+      fields.forEach(field => {
+        dispList.push({
+          nodeCode: this.node.id,
+          dispKey: 'fields',
+          dispLabel: field.fieldComment,
+          dispValue: field.fieldName,
+          dispType: field.fieldType,
+          dispDesc: field.tableName
+        })
+      })
+      // 连接方式
+      dispList.push({
+        nodeCode: this.node.id,
+        dispKey: 'join',
+        dispLabel: join,
+        dispValue: join,
+        dispType: 'String',
+        dispDesc: ''
+      })
+      // 连接字段1
+      dispList.push({
+        nodeCode: this.node.id,
+        dispKey: 'joinDataForm',
+        dispLabel: form.fieldComment,
+        dispValue: form.fieldName,
+        dispType: form.fieldType,
+        dispDesc: form.tableName
+      })
+      // 连接字段2
+      dispList.push({
+        nodeCode: this.node.id,
+        dispKey: 'joinDataTo',
+        dispLabel: to.fieldComment,
+        dispValue: to.fieldName,
+        dispType: to.fieldType,
+        dispDesc: to.tableName
+      })
+
+      return dispList
+    }
 
   }
 }