测试：前台任务设计雏形
parent
eef98ad1c2
commit
48abacbb12
|
|
@ -77,5 +77,15 @@ export function findByNodeId(nodeId) {
|
|||
})
|
||||
}
|
||||
|
||||
//联查记录添加
|
||||
export function addTaskJoin(data) {
|
||||
return request({
|
||||
url: "/task/taskJoin/addTaskJoin/",
|
||||
method: "POST",
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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="表别名"
|
||||
width="100">
|
||||
label="字段别名"
|
||||
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,
|
||||
"tableAsField":this.tableInfo.tableAsField,
|
||||
"tableField": this.tableInfo.tableField.substring(1),
|
||||
"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;
|
||||
console.log(this.tableInfo.columnList );
|
||||
this.tableInfo.tableField = "";
|
||||
this.tableInfo.tableAsField = "";
|
||||
val.forEach(item=>{
|
||||
this.tableInfo.tableField +=','+ item.columnName;
|
||||
this.tableInfo.tableAsField +=','+ item.tableAsField;
|
||||
})
|
||||
|
||||
console.log(this.tableInfo.tableField);
|
||||
},
|
||||
|
||||
//根据树状下拉的选择赋值字段信息
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
|
||||
import { selectEngineList } from '@/api/engine/engine'
|
||||
import { findByNodeId } from '@/api/task/task'
|
||||
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:{
|
||||
|
||||
},
|
||||
taskAddReq:{},
|
||||
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,
|
||||
//连再联查的节点id
|
||||
neighbors:[],
|
||||
//记录表信息
|
||||
tableInfo:{},
|
||||
//画布节点选项
|
||||
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;
|
||||
this.nodeId = data.id;
|
||||
this.nodeName = thisData;
|
||||
if(thisData == "表"){
|
||||
this.nodeId = data.id;
|
||||
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,8 +161,34 @@ 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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}});
|
||||
},
|
||||
|
||||
//选择数据表改变数据
|
||||
|
|
|
|||
Loading…
Reference in New Issue