测试：前台任务设计雏形

src/api/task/task.js

@@ -77,5 +77,15 @@ export function findByNodeId(nodeId) {
   })
 }
 
+//联查记录添加
+export function addTaskJoin(data) {
+  return request({
+    url: "/task/taskJoin/addTaskJoin/",
+    method: "POST",
+    data:data
+  })
+}
+
+
 
 

src/views/components/task/formData.vue

@@ -97,7 +97,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="处理规则" width="100">
+        <el-table-column label="处理规则" width="200">
           <template slot-scope="scope">
             <el-select v-model="taskInputReq.fieldAsEngineId" multiple placeholder="请选择">
               <el-option value="">请选择</el-option>
@@ -112,10 +112,10 @@
         </el-table-column>
 
         <el-table-column
-          label="表别名"
+          label="字段别名"
-          width="100">
+          width="200">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.fieldAsEngineId"></el-input>
+            <el-input v-model="scope.row.tableAsField = tableInfo.tableAsName+'_'+scope.row.columnName"></el-input>
           </template>
         </el-table-column>
       </el-table>
@@ -125,37 +125,11 @@
         <el-button type="primary" @click="columnAddGood()">确 定</el-button>
       </div>
     </span>
-
-<!--    联查模块表单-->
-    <span v-if="taskInputJoin">
-      <el-form  label-width="80px" :model="joinSelect" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
-        <el-form-item label="联查方式">
-           <el-select  v-model="tableInfo.tableName" placeholder="请选择">
-              <el-option style="height: 100%" label="左联查" value="1"/>
-              <el-option style="height: 100%" label="右联查" value="2"/>
-              <el-option style="height: 100%" label="内联查" value="3"/>
-           </el-select>
-        </el-form-item>
-
-        <el-form-item label="关联字段">
-           <el-select  v-model="tableInfo.tableName" placeholder="请选择">
-              <el-option style="height: 100%" label="内联查" value="3"/>
-           </el-select>
-        </el-form-item>
-      </el-form>
-
-
-
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="taskInputAdd = false">取 消</el-button>
-        <el-button type="primary" @click="addTaskInput()">下一步</el-button>
-      </div>
-    </span>
   </div>
 </template>
 
 <script>
-import { addTaskInput, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { addTaskInput} from '@/api/task/task'
 import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
 import { selectEngineList } from '@/api/engine/engine'
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
@@ -163,7 +137,7 @@ import { selectEngineList } from '@/api/engine/engine'
 export default {
   //import引入的组件需要注入到对象中才能使用"
   components: {},
-  props:['graph','nodeId','taskInputForm','tableInfo'],
+  props:['graph','nodeId','taskInputForm','tableInfo','nodeName'],
   data() {
     //这里存放数据"
 
@@ -173,7 +147,6 @@ export default {
       dialogFormVisible:true,
       //任务设计添加表弹窗
       taskInputAdd:false,
-      taskInputForm:true,
       //选择字段弹窗
       taskInputFieldAdd:false,
       taskInputTable:false,
@@ -203,9 +176,6 @@ export default {
       tableList:[],
       columnList:[],
       structureList:[],
-      tableInfo:{
-        taskId:this.$route.params.id,
-      },
       itemId:0,
 
     };
@@ -234,8 +204,6 @@ export default {
     //确定选择的字段
     columnAddGood(){
       this.taskInputTable = false;
-      this.tableInfo.tableField = JSON.stringify(this.tableInfo.columnList)
-      this.tableInfo.tableAsField = "[{name:'aa',sex:'as'}]";
       this.tableInfo.fieldAsEngineId = "[{1,3,4},{1,2,3}]";
       this.$emit('taskInputForm', false);
       addTaskInput({
@@ -245,10 +213,11 @@ export default {
           "databaseId":this.tableInfo.parentId,
           "tableName":this.tableInfo.tableName,
           "tableAsName":this.tableInfo.tableAsName,
-          "tableField":this.tableInfo.tableField,
+          "tableField": this.tableInfo.tableField.substring(1),
-          "tableAsField":this.tableInfo.tableAsField,
+          "tableAsField":this.tableInfo.tableAsField.substring(1),
           "fieldAsEngineId":this.tableInfo.fieldAsEngineId
         }).then(res=>{
+
           alert(res.msg);
       })
     },
@@ -266,8 +235,14 @@ export default {
         val = this.tableInfo.columnList;
         return;
       }
-      this.tableInfo.columnList = val;
+      this.tableInfo.tableField = "";
-      console.log(this.tableInfo.columnList );
+      this.tableInfo.tableAsField = "";
+      val.forEach(item=>{
+        this.tableInfo.tableField +=','+ item.columnName;
+        this.tableInfo.tableAsField +=','+ item.tableAsField;
+      })
+
+      console.log(this.tableInfo.tableField);
     },
 
     //根据树状下拉的选择赋值字段信息

src/views/components/task/formDataOut.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <!--    数据输出表单-->
+    <span v-if="taskDataOutPut">
+      <el-select  v-model="tableInfo.tableName" placeholder="请选择数据库">
+        <el-option style="height: 100%" :value="tableInfo.tableName">
+          <el-aside width="100%">
+            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+          </el-aside>
+        </el-option>
+      </el-select>
+    </span>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props:['graph','nodeId','nodeName','taskId','taskDataOutPut'],
+  data() {
+    //这里存放数据"
+
+    return {
+
+      //树状图
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //字段多选框选择赋值
+    handleSelectionChange(val) {
+
+    },
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findAllTable();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/components/task/formJoin.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <!--    联查模块表单-->
+    <span v-if="taskInputJoin">
+      <el-form  label-width="80px" :model="formJoin" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="联查方式">
+           <el-select  v-model="formJoin.joinType" placeholder="请选择">
+              <el-option style="height: 100%" label="左联查" value="1"/>
+              <el-option style="height: 100%" label="右联查" value="2"/>
+              <el-option style="height: 100%" label="内联查" value="3"/>
+           </el-select>
+        </el-form-item>
+        <br>
+
+        <el-form-item label="关联字段">
+           <el-select  v-model="formJoin.leftJoinField" placeholder="请选择">
+             <span v-for="item in oneFieldList.split(',')">
+               <el-option style="height: 100%"
+                          :label="item"
+                          :value="item"
+                          :key="item"/>
+             </span>
+
+           </el-select>
+
+          <el-select  v-model="formJoin.rightJoinField" placeholder="请选择">
+             <span v-for="item in twoFieldList.split(',')">
+               <el-option style="height: 100%"
+                          :label="item"
+                          :value="item"
+                          :key="item"/>
+             </span>
+
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="taskInputJoin  == false">取消</el-button>
+        <el-button type="primary" @click="saveTaskJoin()">确 定</el-button>
+      </div>
+
+
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="taskInputAdd = false">取 消</el-button>-->
+<!--        <el-button type="primary" @click="addTaskInput()">下一步</el-button>-->
+<!--      </div>-->
+    </span>
+  </div>
+</template>
+
+<script>
+import { addTaskJoin, findByNodeId } from '@/api/task/task'
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props:['graph','nodeId','nodeName','taskId','taskInputJoin','neighbors'],
+  data() {
+    //这里存放数据"
+
+    return {
+      taskInputJoin: true,
+      formJoin: {},
+      oneFieldList:'',
+      twoFieldList:'',
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //添加任务联查方式
+    saveTaskJoin(){
+      this.taskInputJoin = false;
+      this.$emit('saveTaskJoin', false);
+      addTaskJoin(
+        {
+          "nodeId":this.nodeId,
+          "nodeName":this.nodeName,
+          "taskId":this.taskId,
+          "joinType":this.formJoin.joinType,
+          "leftJoinField":this.formJoin.leftJoinField,
+          "rightJoinField":this.formJoin.rightJoinField
+        }
+      ).then(res=>{
+
+      })
+    },
+
+    //拿到连线节点的数据
+    findAllTable(){
+      alert(this.neighbors)
+      findByNodeId(this.neighbors[0]).then(res=>{
+        this.oneFieldList = res.data.tableAsField;
+        console.log(this.oneFieldList)
+      })
+      findByNodeId(this.neighbors[1]).then(res=>{
+        this.twoFieldList = res.data.tableAsField;
+        console.log(this.twoFieldList)
+      })
+    },
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findAllTable();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/task/task/antvX6.vue

@@ -20,7 +20,20 @@
 
     <!--    添加任务详情设计-->
     <el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
-        <formData v-if="this.formData" :group="graph" :node-id="nodeId" :taskInputForm="taskInputForm" :tableInfo="tableInfo" @taskInputForm="findFormValue"></formData>
+        <formData v-if="formData" :group="graph" :node-id="nodeId" :taskInputForm="taskInputForm"
+                  :nodeName="nodeName" :tableInfo="tableInfo" @taskInputForm="findFormValue"></formData>
+    </el-dialog>
+
+    <!--    联查弹窗-->
+    <el-dialog title="联查" :visible.sync="taskInputJoin" width="70%">
+      <formJoin v-if="formJoin" :group="graph" :node-id="nodeId"
+                :nodeName="nodeName" :neighbors="neighbors"
+                :taskId="taskId" :taskInputJoin="taskInputJoin" @saveTaskJoin="findFormValue"></formJoin>
+    </el-dialog>
+
+    <!--    数据输出弹窗-->
+    <el-dialog title="数据输出" :visible.sync="taskDataOutPut" width="70%">
+      <dataOutInput v-if="formOut" taskDataOutPut:taskDataOutPut></dataOutInput>
     </el-dialog>
 
 
@@ -30,52 +43,33 @@
 <script>
 
 import { Graph } from "@antv/x6";
-import { addTaskInput, findByNodeId, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { findByNodeId } from '@/api/task/task'
-import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
-import { selectEngineList } from '@/api/engine/engine'
 import  formData from '/src/views/components/task/formData.vue'
+import  formJoin from '/src/views/components/task/formJoin.vue'
+import  dataOutInput from '/src/views/components/task/formDataOut.vue'
 
 export default {
   name: "antvX6",
   components:{
-    formData
+    formData,
+    formJoin,
+    dataOutInput,
   },
   data() {
     return {
-      dialogFormVisible:false,
+      //数据输出弹窗界面
+      taskDataOutPut:false,
       //任务设计添加表弹窗
       taskInputAdd:false,
+      //联查界面
+      taskInputJoin:false,
       //选择字段弹窗
       taskInputFieldAdd:false,
-      taskReq:{
+      //连再联查的节点id
-
+      neighbors:[],
-      },
+      //记录表信息
-      taskAddReq:{},
+      tableInfo:{},
-      taskInputReq:{},
+      //画布节点选项
-      engineReq:{
-        pageNum: 1,
-        pageSize: 100
-    },
-      taskList:[],
-      //级联选择器
-      value:[],
-
-      engineList:[],
-
-      //树状图
-      data:[],
-      defaultProps:{
-        children:"children",
-        label:'tableName'
-      },
-
-      tableList:[],
-      columnList:[],
-      structureList:[],
-      tableInfo:{
-        taskId:this.$route.params.id,
-      },
-      itemId:0,
       moduleList: [
         {
           id: 1,
@@ -101,16 +95,23 @@ export default {
         },
         {
           id: 4,
-          name: "结束",
+          name: "数据输出",
           image: require("@/assets/img/4.png"),
           data:{}
         },
       ],
+      //画布
       graph:null,
+      //节点id
       nodeId:null,
       nodeName:null,
+
+      //添加表弹窗
       taskInputForm:false,
       formData:false,
+      formJoin:false,
+      formOut:false,
+      taskId:this.$route.params.id,
     };
   },
   //初始化
@@ -121,6 +122,7 @@ export default {
     findFormValue(){
       this.formData=false;
       this.taskInputForm=false;
+      this.taskInputJoin=false;
     },
 
     //保存画布，并提交
@@ -140,14 +142,18 @@ export default {
         }
       };
 
+
       //左键单击事件
       this.graph.on("node:click",(evt)=>{
         const data = evt.node.store.data;
         const thisData = data.attrs.label.textWrap.text;
-        if(thisData == "表"){
         this.nodeId = data.id;
+        this.nodeName = thisData;
+        if(thisData == "表"){
           findByNodeId(this.nodeId).then(res=>{
-            if(res.code == 200){
+            this.tableInfo={};
+            this.tableInfo.taskId = this.taskId;
+            if(res.code == 200 && res.data!=null){
               this.tableInfo = res.data;
             }
           })
@@ -155,7 +161,33 @@ export default {
           this.taskInputForm = true;
           this.formData = true;
         }
+
+        if(thisData == "联查"){
+            // 获取与当前节点相连的所有边
+            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); // 或者你可以推送整个节点对象，而不是仅ID
+              }
+            });
+            // 现在neighbors数组包含了所有与当前节点相连的节点的ID
+            console.log('相连节点的ID:', neighbors);
+            this.neighbors = neighbors;
+            this.taskInputJoin = true;
+            this.formJoin = true;
+        }
+
+        if(thisData == "数据输出"){
+          this.taskDataOutPut = true;
+          this.formOut = true;
+        }
+      });
+
 
       this.graph.on("node:mouseenter", () => {
         changePortsVisible(true);

src/views/task/task/index.vue

@@ -399,7 +399,7 @@ export default {
   methods: {
     //跳转到任务设计界面
     toDesign(row){
-      this.$router.push({path:'/easyFlow/index/:'+row.id});
+      this.$router.push({path:'/easyFlow/index/'+row.id, query:{name:row.name}});
     },
 
     //选择数据表改变数据