src/api/etl/etl.js

@@ -45,81 +45,4 @@ export function selectByTableName(tableName) {
   })
 }
 
-export function addTaskInfo(data) {
-  return request({
-    url: `/integration/taskInfo/addTaskInfo`,
-    method: 'post',
-    data
-  })
-}
-
-export function selectByNodeId(data) {
-  return request({
-    url: `/integration/taskInfo/selectByNodeId`,
-    method: 'post',
-    data
-  })
-}
-
-export function selectByOne(nodeId) {
-  return request({
-    url: `/integration/taskInfo/selectByOne?nodeId=`+nodeId,
-    method: 'post',
-  })
-}
-
-export function addSelect(data) {
-  return request({
-    url: `/integration/sqlSelect/addSelectNode`,
-    method: 'post',
-    data
-  })
-}
-
-export function addTableField(data) {
-  return request({
-    url: `/integration/taskFields/addField`,
-    method: 'post',
-    data
-  })
-}
-
-export function seeTableField(data) {
-  return request({
-    url: `/integration/taskFields/showFieldList`,
-    method: 'post',
-    data
-  })
-}
-
-export function selectByAsField(data) {
-  return request({
-    url: `/integration/taskFields/selectByAsField`,
-    method: 'post',
-    data
-  })
-}
-
-export function addOutPut(data) {
-  return request({
-    url: `/integration/output/addOutput`,
-    method: 'post',
-    data
-  })
-}
-
-export function findBySelectId(nodeId) {
-  return request({
-    url: `/integration/sqlSelect/findBySelectId?nodeId=`+nodeId,
-    method: 'post',
-  })
-}
-
-export function todoTask(id) {
-  return request({
-    url: `/integration/task/todoTask?id=`+id,
-    method: 'GET',
-  })
-}
-
 

src/views/components/task/index.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <div>
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="30%"
+      >
       <span>
           <el-radio-group v-model="labelPosition" size="small">
           <el-radio-button label="left">左对齐</el-radio-button>
@@ -9,7 +15,7 @@
         <div style="margin: 20px;"></div>
         <el-form :label-position="labelPosition" label-width="80px" :model="tableMsg">
           <el-form-item label="任务id">
-            <el-input v-model="tableMsg.taskId" :disabled="true"></el-input>
+            <el-input v-model="tableMsg.id" :disabled="true"></el-input>
           </el-form-item>
           <el-form-item label="数据库id">
             <el-input v-model="tableMsg.databaseId" :disabled="true"></el-input>
@@ -18,104 +24,41 @@
                   <el-cascader
                     v-model="tableMsg.tableName"
                     :options="tables"
-                    :props="{ expandTrigger: 'hover',value:'name',label:'name',children:'tableNames' }"
+                    :props="{ expandTrigger: 'hover',value:'id',label:'name',children:'tableNames' }"
                     @change="handleChange"></el-cascader>
           </el-form-item>
           <el-form-item label="表别名">
-            <el-input v-model="tableMsg.tableAsName"></el-input>
+            <el-input v-model="tableMsg.tableAsField"></el-input>
           </el-form-item>
         </el-form>
       </span>
         <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="nextOne()">下一步</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-  </span>
-
-    <el-dialog
-      title="提示"
-      :visible.sync="dialogVisible1"
-      width="65%"
-    >
-      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55"></el-table-column>
-        <el-table-column label="ID" width="120">
-          <template slot-scope="scope">{{ scope.row.id }}</template>
-        </el-table-column>
-        <el-table-column prop="field" label="字段名称" width="120"/>
-        <el-table-column prop="type" label="字段类型" width="120"/>
-        <el-table-column prop="collation" label="编码格式" width="120"/>
-        <el-table-column prop="nullable" label="是否为空" width="120"/>
-        <el-table-column prop="primarys" label="主键" width="120"/>
-        <el-table-column prop="annotation" label="注释" width="120"/>
-        <el-table-column label="表别名" width="120">
-          <template slot-scope="scope">{{ scope.row.dataField }}</template>
-        </el-table-column>
-        <el-table-column label="规则" width="120">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.fieldEngineId" placeholder="无规则">
-              <el-option label="无规则" value="1"></el-option>
-              <el-option label="区域二" value="beijing"></el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-      </el-table>
-      <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogVisible1 = false">取 消</el-button>
-    <el-button type="primary" @click="doSure()">确 定</el-button>
   </span>
       </el-dialog>
     </div>
+  </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {addTableField, addTaskInfo, extractDataName, selectByTableName} from "../../../api/etl/etl";
+import {extractDataName} from "../../../api/etl/etl";
-import node from "../../../components/ef/node.vue";
 
 export default {
   name: "task",
   //import引入的组件需要注入到对象中才能使用"
   components: {},
-  props: ['nodesIds'],
+  props: {},
   data() {
     //这里存放数据"
 
     return {
-      allFields:{
-        taskId: this.$route.query.id,
-        nodeId: this.nodesIds,
-        field:"",
-        asField:"",
-        isNull:"",
-        comment:""
-      },
-      tableData:[],
-      dataForm:true,
-      dialogVisible1: false,
-      tables:{},
-      tableMsg:{
-        //nodeId
-        nodeId: this.nodesIds,
-        //任务ID
-        taskId: this.$route.query.id,
-        //数据库ID
-        databaseId:"",
-        //表名
-        tableName:"",
-        //字段名
-        tableField:"",
-        //表别名
-        tableAsName:"",
-        //表别名字段
-        tableAsField:"",
-        //规则
-        fieldEngineId:""
-      },
       labelPosition: 'right',
       dialogVisible:false,
-      multipleSelection: [],
+      tableMsg:{},
-      fields:[]
+      tables:{}
     };
   },
   //计算属性 类似于data概念",
@@ -124,66 +67,19 @@ export default {
   watch: {},
   //方法集合",
   methods: {
-    doSure(){
-      this.dialogVisible1 = false
-      this.$emit('taskInputForm', false);
-      this.tableMsg.taskId = this.$route.query.id
-      let detailData = [...new Set(this.multipleSelection)]
-      this.tableMsg.tableAsField = detailData.join(',');
-
-      this.fields.forEach(item => {
-          this.allFields.asField = item.dataField
-          this.allFields.field = item.field
-          this.allFields.isNull = item.nullable
-          this.allFields.comment = item.annotation
-          addTableField(this.allFields).then(res => {
-            console.log(res);
-          })
-      })
-      addTaskInfo(this.tableMsg).then(res =>{
-        if (res.code == 200){
-          this.$message.success("节点安置成功")
-        }
-      })
-
-    },
-    handleSelectionChange(val) {
-      this.fields = val
-      val.forEach(res =>{
-        this.multipleSelection.push(res.dataField);
-      })
-      console.log(this.fields);
-    },
-
-    nextOne(){
-      let tableName = this.tableMsg.tableName.toString();
-      selectByTableName(tableName).then(res => {
-        this.dialogVisible1 = true
-        this.tableData = res.data
-        this.tableData.forEach(item => {
-          this.tableMsg.tableField += ","+item.field
-        })
-        this.tableMsg.tableField = this.tableMsg.tableField.substring(1)
-        res.data.forEach(response => {
-          response.dataField = this.tableMsg.tableAsName+"_"+response.field
-        })
-
-      })
-    },
     handleChange(value) {
-      this.tableMsg.databaseId = value[0]
+      console.log(value);
-      this.tableMsg.tableName = value[1]
     },
     getDatabaseMessage(){
       this.dialogVisible = true
       extractDataName().then(res => {
+        console.log(res);
         this.tables = res.data
       })
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
-    this.getDatabaseMessage()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",
   mounted() {

src/views/etl/task/index.vue

@@ -80,9 +80,13 @@
 
       <el-table-column label="操作" width="300">
         <template slot-scope="scope">
-          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑节点</el-button>
+          <el-button
-          <el-button size="mini" @click="todoTask(scope.$index, scope.row)">执行任务</el-button>
+              size="mini"
-          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              @click="handleEdit(scope.$index, scope.row)">编辑节点</el-button>
+          <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,7 +121,7 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {addTask, delTask, showTask, todoTask} from "../../../api/etl/etl";
+import {addTask, delTask, showTask} from "../../../api/etl/etl";
 
 export default {
   name: "Task",
@@ -145,15 +149,6 @@ export default {
   watch: {},
   //方法集合",
   methods: {
-    todoTask(index,row){
-      todoTask(row.id).then(res => {
-        if (res.code == 200){
-          this.$message.success("操作成功")
-        }else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
     onSubmit(){
        this.getData()
     },
@@ -177,7 +172,8 @@ export default {
        })
     },
     handleEdit(index, row) {
-       this.$router.push({path:"/etl/active",query:{"id":row.id}})
+        let url = `http://21.12.0.10/easyFlow`
+       window.open(url,"_blank")
     },
     handleDelete(index, row) {
       console.log(index, row);

src/views/etl/task/taskInfo.vue

@@ -15,98 +15,77 @@
         <div id="container" />
       </div>
     </div>
-    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+    <el-dialog
-      <task v-if="taskOpen" @taskInputForm="findFormValue" :nodes-ids="nodesIds"/>
+      title="提示"
-    </el-dialog>
+      :visible.sync="dialogVisible"
-
+      width="30%"
-    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
+      >
-      <el-table :data="nodeList" style="width: 100%">
+      <span>
-        <el-table-column prop="databaseId" label="数据库" width="180"></el-table-column>
+          <el-radio-group v-model="labelPosition" size="small">
-        <el-table-column prop="tableAsName" label="表别名" width="180"></el-table-column>
+          <el-radio-button label="left">左对齐</el-radio-button>
-      </el-table>
+          <el-radio-button label="right">右对齐</el-radio-button>
+          <el-radio-button label="top">顶部对齐</el-radio-button>
+        </el-radio-group>
         <div style="margin: 20px;"></div>
-      <el-form label-width="80px" :model="joinCheck">
+        <el-form :label-position="labelPosition" label-width="80px" :model="tableMsg">
-        <el-form-item label="联查方式">
+          <el-form-item label="任务id">
-          <el-select v-model="joinCheck.joinId" placeholder="联查方式">
+            <el-input v-model="tableMsg.id" :disabled="true"></el-input>
-            <el-option label="左联查" value="1"></el-option>
-            <el-option label="右联查" value="2"></el-option>
-            <el-option label="内联查" value="3"></el-option>
-          </el-select>
           </el-form-item>
-        <el-form-item>
+          <el-form-item label="数据库id">
-            <el-select v-model="joinCheck.firstCloumn" placeholder="请选择关联字段">
+            <el-input v-model="tableMsg.databaseId" :disabled="true"></el-input>
-              <el-option
-                v-for="item in options1"
-                :key="item.nodeMsg"
-                :label="item.nodeMsg"
-                :value="item.nodeMsg">
-              </el-option>
-            </el-select>
           </el-form-item>
-        <el-form-item>
+          <el-form-item label="数据表">
-          <el-select v-model="joinCheck.secondCloumn" placeholder="请选择关联字段">
+                  <el-cascader
-            <el-option
+                    v-model="tableMsg.tableName"
-              v-for="item in options2"
+                    :options="tables"
-              :key="item.nodeMsg"
+                    :props="{ expandTrigger: 'hover',value:'name',label:'name',children:'tableNames' }"
-              :label="item.nodeMsg"
+                    @change="handleChange"></el-cascader>
-              :value="item.nodeMsg">
+          </el-form-item>
-            </el-option>
+          <el-form-item label="表别名">
-          </el-select>
+            <el-input v-model="tableMsg.tableAsField"></el-input>
           </el-form-item>
         </el-form>
+      </span>
       <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogVisible1 = false">取 消</el-button>
+    <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="todoSelect">确 定</el-button>
+    <el-button type="primary" @click="nextOne()">下一步</el-button>
   </span>
     </el-dialog>
 
     <el-dialog
       title="提示"
-      :visible.sync="dialogVisible2"
+      :visible.sync="dialogVisible1"
-      width="40%"
+      width="30%"
       >
-      <el-table ref="multipleTable" :data="fields" tooltip-effect="dark" style="width: 100%"
+      <el-table
-        @selection-change="SelectionChange">
+        ref="multipleTable"
-        <el-table-column type="selection" width="55"/>
+        :data="tableData"
-        <el-table-column label="字段" width="120"><template slot-scope="scope">{{ scope.row.field }}</template></el-table-column>
+        tooltip-effect="dark"
-        <el-table-column label="别名" width="120"><template slot-scope="scope">{{ scope.row.asField }}</template></el-table-column>
+        style="width: 100%"
-        <el-table-column label="非空" width="120"><template slot-scope="scope">{{ scope.row.isNull }}</template></el-table-column>
+        @selection-change="handleSelectionChange">
-        <el-table-column label="注释" width="120"><template slot-scope="scope">{{ scope.row.comment }}</template></el-table-column>
+        <el-table-column
-      </el-table>
+          type="selection"
-      <br>
+          width="55">
-      <el-cascader
-        v-model="toTable"
-        :options="tt"
-        :props="{ expandTrigger: 'hover',value:'name',label:'name',children:'tableNames' }"
-        @change="handleChange"></el-cascader>
-      <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogVisible2 = false">取 消</el-button>
-    <el-button type="primary" @click="showTableFields">确 定</el-button>
-  </span>
-    </el-dialog>
-
-    <el-dialog title="提示" :visible.sync="finalVisible" width="30%">
-      <el-table ref="multipleTable" :data="sqlList" tooltip-effect="dark" style="width: 100%"
-                @selection-change="SelectionChange">
-        <el-table-column label="输入字段" width="120">
-          <template slot-scope="scope">
-            {{ scope.row.asField }}
-          </template>
         </el-table-column>
-        <el-table-column label="输出字段" width="120">
+        <el-table-column
-          <el-select v-model="cloumns" placeholder="请选择">
+          label="日期"
-            <el-option
+          width="120">
-              v-for="item in options"
+          <template slot-scope="scope">{{ scope.row.date }}</template>
-              :key="item.id"
+        </el-table-column>
-              :label="item.field"
+        <el-table-column
-              :value="item.field">
+          prop="name"
-            </el-option>
+          label="姓名"
-          </el-select>
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+          show-overflow-tooltip>
         </el-table-column>
       </el-table>
       <span slot="footer" class="dialog-footer">
-          <el-button @click="finalVisible = false">取 消</el-button>
+    <el-button @click="dialogVisible1 = false">取 消</el-button>
-          <el-button type="primary" @click="addSql">确 定</el-button>
+    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
   </span>
     </el-dialog>
   </div>
@@ -114,53 +93,12 @@
 
 <script>
 import { Graph } from "@antv/x6";
-import {
+import {extractDataName, selectByTableName} from "../../../api/etl/etl";
-  addOutPut,
+
-  addSelect,
-  extractDataName, findBySelectId,
-  seeTableField, selectByAsField,
-  selectByNodeId,
-  selectByOne, selectByTableName,
-} from "../../../api/etl/etl";
-import task from "/src/views/components/task/index.vue"
 export default {
   name: "antvX6",
-  components:{
-    task
-  },
   data() {
     return {
-      sourceField:[],
-      outPuter:{
-        nodeId:"",
-        taskId:"",
-        tableFields:"",
-        tableAsFields:"",
-        targetDatabase:"",
-        targetTableName:""
-      },
-      options:{},
-      sqlList:[],
-      toTable:"",
-      tt:{},
-      fields:[],
-      finalVisible:false,
-      dialogVisible2:false,
-      options1:{},
-      options2:{},
-      nodeList:[],
-      neighbors:[],
-      nodesIds:"",
-      taskOpen:false,
-      joinCheck:{
-         nodeId:"",
-         joinId:"",
-         leftNodeId:"",
-         rightNodeId:"",
-         firstCloumn:"",
-         secondCloumn:""
-      },
-      asFields:[],
       tableData:[],
       dialogVisible1: false,
       tables:{},
@@ -168,21 +106,18 @@ export default {
         tableName:"",
         tableAsField:""
       },
-      cloumns:'',
       labelPosition: 'right',
       dialogVisible:false,
       curSelectNode: "",
-      tableFields:[],
-      tableDataNodeId:[],
       moduleList: [
         {
           id: 1,
-          name: "开始",
+          name: "表1",
           image: require("@/assets/img/1.png"),
         },
         {
           id: 8,
-          name: "表",
+          name: "表2",
           image: require("@/assets/img/2.png"),
         },
         {
@@ -192,130 +127,37 @@ export default {
         },
         {
           id: 3,
-          name: "导出",
+          name: "节点4",
           image: require("@/assets/img/4.png"),
         },
       ],
       graph: null
     };
   },
-  created() {
-    this.getDatabaseMessage()
-  },
   methods: {
-    showTableFields(){
+    handleSelectionChange(val) {
-      this.finalVisible = true
+      this.multipleSelection = val;
-      let fieldsList = [...new Set(this.tableFields)]
-      selectByAsField(fieldsList).then(res => {
-          this.sqlList = res.data
-      })
-
-      selectByTableName(this.toTable).then(res => {
-        this.options = res.data
-      })
-
     },
-    addSql(){
+    nextOne(){
-      this.outPuter.taskId = this.$route.query.id
+      let tableAsField = this.tableMsg.tableAsField;
-      let fieldsList = [...new Set(this.tableFields)]
+      let tableName = this.tableMsg.tableName.toString();
-      let tableAsFieldList = [...new Set(this.sourceField)]
+      selectByTableName(tableName).then(res => {
-      this.outPuter.tableFields = fieldsList.toString()
+        this.dialogVisible1 = true
-      this.outPuter.tableAsFields = tableAsFieldList.toString()
+        this.tableData = res.data
-      this.outPuter.targetTableName = this.toTable
+        console.log(res);
-      addOutPut(this.outPuter).then(res => {
-        if (res.code == 200){
-          this.$message.success("输出节点放置成功")
-        }else {
-          this.$message.error("发生异常请联系管理员")
-        }
       })
-      this.dialogVisible2 = false
+      this.dialogVisible = false
-      this.finalVisible = false
     },
     handleChange(value) {
-        this.outPuter.targetDatabase = value[0]
+
-        this.toTable = value[1]
+      this.tableMsg.tableName = value[1]
     },
     getDatabaseMessage(){
+        this.dialogVisible = true
       extractDataName().then(res => {
-        this.tt = res.data
+        this.tables = res.data
       })
     },
-    SelectionChange(val){
-      val.forEach(res => {
-         this.tableFields.push(res.asField)
-         this.sourceField.push(res.field)
-      })
-    },
-    todoSelect(){
-      addSelect(this.joinCheck).then(res => {
-          if (res.code == 200){
-            this.$message.success("操作成功")
-          }else {
-            this.$message.error(res.msg)
-          }
-      })
-      this.dialogVisible1 = false
-    },
-    findFormValue(){
-      this.dialogVisible = false
-      this.taskOpen = false
-    },
-    openForm(data){
-      let textWrap = data.attrs.label.textWrap;
-      if (textWrap.text == "表"){
-        console.log("表节点ID=>"+data.id);
-        this.tableDataNodeId.push(data.id)
-        this.dialogVisible = true;
-        this.taskOpen=true;
-      }
-      if (textWrap.text == "联查"){
-        this.dialogVisible1 = true;
-        this.joinCheck.nodeId = data.id
-        console.log("联查节点ID=>"+data.id);
-        const edges = this.graph.getEdges().filter(edge => {
-          return edge.getSourceNode().id === data.id || edge.getTargetNode().id === data.id;
-        });
-
-        const neighbors = [];
-        edges.forEach(edge => {
-          const otherNodeId = edge.getSourceNode().id === data.id ? edge.getTargetNode().id : edge.getSourceNode().id;
-          if (!neighbors.includes(otherNodeId)) {
-            neighbors.push(otherNodeId);
-          }
-        });
-        this.neighbors = neighbors;
-        this.joinCheck.leftNodeId = neighbors[0]
-        this.joinCheck.rightNodeId = neighbors[1]
-        selectByOne(neighbors[0]).then(res =>{
-          this.options1 = res.data
-        })
-        selectByOne(neighbors[1]).then(res =>{
-          this.options2 = res.data
-        })
-        selectByNodeId(JSON.stringify(this.neighbors)).then(res => {
-            this.nodeList = res.data
-        })
-      }
-
-      if (textWrap.text == "导出"){
-        this.outPuter.nodeId = data.id
-        console.log("导出节点ID=>"+data.id);
-        this.dialogVisible2 = true
-        findBySelectId(this.neighbors[0]).then(res => {
-          if (res.data == null){
-             seeTableField(this.tableDataNodeId).then(res => {
-               this.fields = res.data
-             })
-          }else{
-            seeTableField(this.neighbors).then(res => {
-              this.fields = res.data
-            })
-          }
-        })
-      }
-
-    },
     //todo 鼠标划过节点在显示连接桩
     nodeAddEvent() {
       const { graph } = this;
@@ -332,10 +174,8 @@ export default {
       this.graph.on("node:mouseleave", () => {
         changePortsVisible(false);
       });
-      this.graph.on("node:dblclick",(evt) =>{
+      this.graph.on("node:dblclick",() =>{
-          let data = evt.node.store.data;
+          this.getDatabaseMessage()
-          this.nodesIds = data.id;
-          this.openForm(data)
       })
       //todo 节点绑定点击事件
       this.graph.on("node:click", ({ e, x, y, node, view }) => {
@@ -439,7 +279,7 @@ export default {
         }
       });
     },
-    // todo 拖动后松开鼠标触发事件
+    // 拖动后松开鼠标触发事件
     handleDragEnd(e, item) {
       // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
       this.addHandleNode(