完成表结构节点的配置更改

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

@@ -19,7 +19,6 @@
     <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
     <div align="center">
       <DispFind :data="data" :node="node" :disp="disp" />
-      <DispUpd :data="data" :node="node" :disp="disp" />
     </div>
   </div>
 </template>
@@ -30,14 +29,12 @@ import Home from '../Home.vue'
 import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
 import {listDisposition} from "@/api/quest/disposition";
 import DispFind from "./node/dispFind.vue";
-import DispUpd from "./node/dispUpd.vue";
 
 
 export default {
   name: "nodeItem",
   components: {
     DispFind,
-    DispUpd,
   },
   props: {
     data: {},
@@ -92,13 +89,6 @@ export default {
             onClick: () => {
               this.toUpdName();
             }
-          },{
-            label: '设置配置',
-            disabled: false,
-            icon: "",
-            onClick: () => {
-              this.disp.type.findFlag = true;
-            }
           },{
             label: '删除节点',
             disabled: false,

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

@@ -5,7 +5,7 @@
       <div style="padding-left: 20px;padding-right: 20px;">
 
         <span v-if="node.type === 'table'">
-          <TableFind :disp="disp" />
+          <TableFind :disp="disp" :node="node"  />
         </span>
         <span v-else-if="node.type === 'exportation'">
           <ExporFind :disp="disp" :data="data" :node="node" />

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

@@ -1,59 +0,0 @@
-<template>
-  <!-- 修改节点配置-->
-  <div>
-    <!-- 自定义表单对话框 -->
-    <el-drawer :modal="false" :visible.sync="disp.updFlag" direction="rtl" title="节点配置" append-to-body size="60%">
-      <div>
-
-        <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>
-
-
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
-// 例如：import 《组件名称》 from '《组件路径》,
-import TableUpd from './type/tableUpd.vue'
-
-export default {
-  // import引入的组件需要注入到对象中才能使用"
-  name: 'type-table',
-  components: {TableUpd},
-  props: {
-    data: {},
-    node: {},
-    disp: {
-      nodeCode: undefined,
-      nodeType: undefined,
-      findFlag: false,
-      updFlag: false,
-      formData: {
-        db: {},
-        fields: []
-      }
-    },
-
-  },
-  data() {
-    // 这里存放数据"
-    return {}
-  },
-  // 计算属性 类似于data概念",
-  computed: {},
-  // 方法集合",
-  methods: {
-
-  }
-}
-</script>
-<style scoped>
-
-</style>

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

@@ -1,11 +1,16 @@
 <template>
   <div>
-    <span v-if="disp.formData.db.dbName && disp.formData.db.tableName">配置表信息:
+    <el-form label-position="right" label-width="120px" :model="disp.formData.db" :inline="true">
-        {{ disp.formData.db.dbName }}.
+      <el-form-item label="数据库" style="width: 30%;">
-        {{ disp.formData.db.tableName }}
+        <el-input v-model="disp.formData.db.dbName" placeholder="未配置" disabled />
-        ({{ disp.formData.db.tableComment }})
+      </el-form-item>
-      </span>
+      <el-form-item label="数据表" style="width: 30%;">
-    <span v-else>无配置表</span>
+        <el-input v-model="disp.formData.db.tableName" placeholder="未配置" disabled />
+      </el-form-item>
+      <el-form-item label="数据表备注" style="width: 30%;">
+        <el-input v-model="disp.formData.db.tableComment" placeholder="无备注" disabled />
+      </el-form-item>
+    </el-form>
     <span>
           <el-table ref="table" :data="disp.formData.fields" height="300px">
             <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
@@ -16,18 +21,54 @@
     <br><br>
     <div align="center">
       <el-button @click="disp.findFlag = false">确认</el-button>
-      <el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
+      <el-button type="primary" @click="toTableUpdFlag">修改配置</el-button>
     </div>
+    <el-dialog title="修改配置" :visible.sync="tableUpdFlag" width="80%">
+      <div>
+        <el-form v-model="checkTable">
+          <el-form-item label="数据源" prop="dbTable">
+            <el-cascader :options="treeList" :props="props" @change="checkDbTable">
+              <template slot-scope="{ node, data }">
+                <span v-if="data.tableRemark">{{ data.tableName + '[' + data.tableRemark + ']' }}</span>
+                <span v-else>{{ data.tableName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="字段" prop="fields">
+            <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>
+          </el-form-item>
+          <el-form-item>
+            <div align="center">
+              <el-button @click="tableUpdFlag = false">取消</el-button>
+              <el-button type="primary" @click="save">保存修改</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
+import {findTableInfoList} from "@/api/tableData/data";
+import {listSource} from "@/api/source/source";
+import {selectDbTableColumnsByName} from "@/api/tool/gen";
+import {batchAddUpd} from "@/api/quest/disposition";
+
 export default {
   // import引入的组件需要注入到对象中才能使用"
   name: 'tableFind',
   props: {
+    node: {},
     disp: {
       nodeCode: undefined,
       nodeType: undefined,
@@ -42,7 +83,34 @@ export default {
   data() {
     // 这里存放数据"
     return {
-
+      loading: false,
+      // 修改窗口显示状态
+      tableUpdFlag: false,
+      // 数据库+表 树形列表
+      treeList: [],
+      // 数据源列表
+      sourceList: [],
+      // 级联选择器配置
+      props: {
+        value: 'tableName',
+        label: 'tableName',
+        children: 'children'
+      },
+      // 数据库与表与字段
+      checkTable: {
+        source: {},
+        db: {
+          dbName: '',
+          dbComment: '',
+        },
+        table: {
+          tableName: '',
+          tableComment: ''
+        },
+        fields: []
+      },
+      // 全部字段列表
+      fieldsOptions: [],
     }
   },
   // 计算属性 类似于data概念",
@@ -53,9 +121,135 @@ export default {
   },
   // 方法集合",
   methods: {
-    toUpd() {
+    /** 点击修改配置按钮 */
-      this.disp.updFlag = true
+    toTableUpdFlag() {
-    }
+      this.selDataSourceTreeListAll()
+      this.tableUpdFlag = true
+    },
+    // 查询所有已同步的数据源的数据库+表 树形列表
+    selDataSourceTreeListAll(){
+      listSource({pageNum: 1, pageSize: 100,}).then(response => {
+        this.treeList = []
+        response.data.rows.forEach(item => {
+          this.treeList.push({
+            id: item.id,
+            basicId: item.id,
+            tableName: item.name,
+            tableRemark: item.systemName,
+            dataNum: item.initTotal,
+            isCenter: 'Y',
+            children: []
+          })
+        })
+        console.log(this.treeList)
+        findTableInfoList().then(res=>{
+          const trees = res.data
+          this.treeList.forEach(treeMaste => {
+            trees.forEach(tree => {
+              if (treeMaste.id === tree.basicId){
+                  treeMaste.children.push(tree)
+              }
+            })
+          })
+        })
+      });
+    },
+    // 选中数据库与表
+    checkDbTable(value) {
+      this.checkTable.source = this.treeList.filter(item => item.tableName === value[0])[0]
+      const db = this.checkTable.source.children.filter(item => item.tableName === value[1])[0]
+      this.checkTable.db = {
+        dbName: db.tableName,
+        dbComment: db.tableRemark,
+      }
+      const table = db.children.filter(item => item.tableName === value[2])[0]
+      this.checkTable.table = {
+        tableName: table.tableName,
+        tableComment: table.tableRemark
+      }
+      this.selectTable(this.checkTable.db.dbName, this.checkTable.table.tableName);
+    },
+    // 表字段查询
+    selectTable(dbName, tableName) {
+      selectDbTableColumnsByName(dbName, tableName).then(res => {
+        this.fieldsOptions = res.data
+      })
+    },
+    // 多选框选中数据
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.checkTable.fields = selection.map(item => {
+        return {
+          tableName: this.checkTable.tableName,
+          fieldName: item.columnName,
+          fieldType: item.columnType,
+          fieldComment: item.columnComment
+        };
+      });
+    },
+    /** 保存修改按钮 */
+    save() {
+      const dispList = this.getMysqlDisp(
+        this.checkTable.source,
+        this.checkTable.db,
+        this.checkTable.table,
+        this.checkTable.fields
+      )
+      this.disp.formData = {
+        db: {
+          dbName: this.checkTable.db.dbName,
+          tableName: this.checkTable.table.tableName,
+          tableComment: this.checkTable.table.tableComment
+        },
+        fields: this.checkTable.fields,
+      }
+      batchAddUpd(dispList, this.node.id).then(res => {
+        this.$message.success(res.msg)
+        this.tableUpdFlag = false
+      })
+      console.log(dispList)
+    },
+    /** 类型转换 vue -> mysql*/
+    getMysqlDisp(source, db, table, fields) {
+      const dispList = []
+      dispList.push({
+        nodeCode: this.node.id,
+        dispKey: 'source',
+        dispLabel: source.tableRemark,
+        dispValue: source.tableName,
+        dispType: 'string',
+        dispDesc: source.id
+      },{
+        nodeCode: this.node.id,
+        dispKey: 'db',
+        dispLabel: db.dbComment,
+        dispValue: db.dbName,
+        dispType: 'string',
+        dispDesc: source.tableName
+      },{
+        nodeCode: this.node.id,
+        dispKey: 'table',
+        dispLabel: table.tableComment,
+        dispValue: table.tableName,
+        dispType: 'string',
+        dispDesc: db.dbName
+      })
+      fields.forEach(field => {
+        dispList.push({
+          nodeCode: this.node.id,
+          dispKey: 'fields',
+          dispLabel: field.fieldComment,
+          dispValue: field.fieldName,
+          dispType: field.fieldType,
+          dispDesc: db.dbName+"."+table.tableName
+        })
+      })
+      return dispList;
+    },
+
   }
 }
 </script>

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

@@ -1,195 +0,0 @@
-<template>
-  <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">
-          <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() {
-    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.disp.formData.fields = []
-      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>