Merge pull request 'dev' (#7) from dev into master

Reviewed-on: #7

src/api/etl/etl.js

@@ -45,4 +45,81 @@ 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,12 +1,6 @@
 <template>
   <div>
-    <div>
+     <span>
-      <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>
           <el-radio-button label="right">右对齐</el-radio-button>
@@ -15,7 +9,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.id" :disabled="true"></el-input>
+            <el-input v-model="tableMsg.taskId" :disabled="true"></el-input>
           </el-form-item>
           <el-form-item label="数据库id">
             <el-input v-model="tableMsg.databaseId" :disabled="true"></el-input>
@@ -24,41 +18,104 @@
                   <el-cascader
                     v-model="tableMsg.tableName"
                     :options="tables"
-                    :props="{ expandTrigger: 'hover',value:'id',label:'name',children:'tableNames' }"
+                    :props="{ expandTrigger: 'hover',value:'name',label:'name',children:'tableNames' }"
                     @change="handleChange"></el-cascader>
           </el-form-item>
           <el-form-item label="表别名">
-            <el-input v-model="tableMsg.tableAsField"></el-input>
+            <el-input v-model="tableMsg.tableAsName"></el-input>
           </el-form-item>
         </el-form>
       </span>
-        <span slot="footer" class="dialog-footer">
+    <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    <el-button type="primary" @click="nextOne()">下一步</el-button>
   </span>
-      </el-dialog>
+
-    </div>
+    <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>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {extractDataName} from "../../../api/etl/etl";
+import {addTableField, addTaskInfo, extractDataName, selectByTableName} from "../../../api/etl/etl";
+import node from "../../../components/ef/node.vue";
 
 export default {
   name: "task",
   //import引入的组件需要注入到对象中才能使用"
   components: {},
-  props: {},
+  props: ['nodesIds'],
   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,
-      tableMsg:{},
+      multipleSelection: [],
-      tables:{}
+      fields:[]
     };
   },
   //计算属性 类似于data概念",
@@ -67,19 +124,66 @@ 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) {
-      console.log(value);
+      this.tableMsg.databaseId = value[0]
+      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,13 +80,9 @@
 
       <el-table-column label="操作" width="300">
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑节点</el-button>
-              size="mini"
+          <el-button size="mini" @click="todoTask(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>
-          <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -121,7 +117,7 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {addTask, delTask, showTask} from "../../../api/etl/etl";
+import {addTask, delTask, showTask, todoTask} from "../../../api/etl/etl";
 
 export default {
   name: "Task",
@@ -149,6 +145,15 @@ 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()
     },
@@ -172,8 +177,7 @@ export default {
        })
     },
     handleEdit(index, row) {
-        let url = `http://21.12.0.10/easyFlow`
+       this.$router.push({path:"/etl/active",query:{"id":row.id}})
-       window.open(url,"_blank")
     },
     handleDelete(index, row) {
       console.log(index, row);

src/views/etl/task/taskInfo.vue

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