Compare commits
No commits in common. "eef98ad1c287ce5e33670931589aca1fcf0a7f01" and "8c8cbde6927f127b58dde3c4c55ca68c07e47673" have entirely different histories.
eef98ad1c2
...
8c8cbde692
|
|
@ -69,13 +69,5 @@ export function addTaskInput(data) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//根据节点id查询信息
|
|
||||||
export function findByNodeId(nodeId) {
|
|
||||||
return request({
|
|
||||||
url: "/task/taskInput/findByNodeId/"+nodeId,
|
|
||||||
method: "get",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{fill:#d8f4e9;}.cls-2{fill:#3ec791;}.cls-3{opacity:0;}.cls-4,.cls-5{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-5{stroke-width:0.83px;}</style></defs><title>1.开始</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="44.97" y="55.64" width="111.13" height="91.88" rx="0.87" ry="0.87"/><polygon class="cls-2" points="85.38 78 85.38 125.16 125.79 101.58 85.38 78"/><g class="cls-3"><path class="cls-4" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-4" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-5" x="44.93" y="44.93" width="111.13" height="111.13"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 820 B |
|
|
@ -1,317 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- 添加任务详情设计-->
|
|
||||||
<span v-if="taskInputForm">
|
|
||||||
<el-form label-width="80px" :model="tableInfo" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
|
||||||
<el-form-item label="任务id">
|
|
||||||
<el-input v-model="tableInfo.taskId" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="数据库id">
|
|
||||||
<el-input v-model="tableInfo.databaseId" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<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>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="表别名">
|
|
||||||
<el-input v-model="tableInfo.tableAsName"></el-input>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- 所选表内的字段信息-->
|
|
||||||
<span v-if="taskInputTable">
|
|
||||||
<el-table
|
|
||||||
ref="multipleTable"
|
|
||||||
:data="tableInfo.structureList"
|
|
||||||
style="width: 100%"
|
|
||||||
@selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="100%"></el-table-column>
|
|
||||||
|
|
||||||
|
|
||||||
<el-table-column label="字段" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.columnName }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="注释" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="是否主键" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="字段类型" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.columnType }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="字段长度" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="小数" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="非空" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.isNull }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="默认值" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="是否字典" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="处理规则" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-select v-model="taskInputReq.fieldAsEngineId" multiple placeholder="请选择">
|
|
||||||
<el-option value="">请选择</el-option>
|
|
||||||
<el-option
|
|
||||||
v-for="engine in engineList"
|
|
||||||
:key="engine.id"
|
|
||||||
:label="engine.name"
|
|
||||||
:value="engine.id">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column
|
|
||||||
label="表别名"
|
|
||||||
width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-input v-model="scope.row.fieldAsEngineId"></el-input>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="cancelColumn()">上一步</el-button>
|
|
||||||
<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 { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
|
|
||||||
import { selectEngineList } from '@/api/engine/engine'
|
|
||||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
|
||||||
//例如：import 《组件名称》 from '《组件路径》,
|
|
||||||
export default {
|
|
||||||
//import引入的组件需要注入到对象中才能使用"
|
|
||||||
components: {},
|
|
||||||
props:['graph','nodeId','taskInputForm','tableInfo'],
|
|
||||||
data() {
|
|
||||||
//这里存放数据"
|
|
||||||
|
|
||||||
return {
|
|
||||||
|
|
||||||
taskInputJoin:false,
|
|
||||||
dialogFormVisible:true,
|
|
||||||
//任务设计添加表弹窗
|
|
||||||
taskInputAdd:false,
|
|
||||||
taskInputForm:true,
|
|
||||||
//选择字段弹窗
|
|
||||||
taskInputFieldAdd:false,
|
|
||||||
taskInputTable:false,
|
|
||||||
taskReq:{
|
|
||||||
|
|
||||||
},
|
|
||||||
joinSelect:{},
|
|
||||||
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,
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
//计算属性 类似于data概念",
|
|
||||||
computed: {},
|
|
||||||
//监控data中的数据变化",
|
|
||||||
watch: {},
|
|
||||||
//方法集合",
|
|
||||||
methods: {
|
|
||||||
//规则引擎下拉框
|
|
||||||
selectEngineList(){
|
|
||||||
selectEngineList(this.engineReq).then(res=>{
|
|
||||||
this.engineList = res.data.list;
|
|
||||||
console.log(this.engineList);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
//关闭字段信息
|
|
||||||
cancelColumn(){
|
|
||||||
this.taskInputTable = false;
|
|
||||||
this.taskInputForm = true;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
//确定选择的字段
|
|
||||||
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({
|
|
||||||
"nodeId":this.nodeId,
|
|
||||||
"nodeName":this.nodeName,
|
|
||||||
"taskId":this.tableInfo.taskId,
|
|
||||||
"databaseId":this.tableInfo.parentId,
|
|
||||||
"tableName":this.tableInfo.tableName,
|
|
||||||
"tableAsName":this.tableInfo.tableAsName,
|
|
||||||
"tableField":this.tableInfo.tableField,
|
|
||||||
"tableAsField":this.tableInfo.tableAsField,
|
|
||||||
"fieldAsEngineId":this.tableInfo.fieldAsEngineId
|
|
||||||
}).then(res=>{
|
|
||||||
alert(res.msg);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
//选择完下拉框的表后点击下一步
|
|
||||||
addTaskInput(){
|
|
||||||
this.taskInputForm = false;
|
|
||||||
this.selectEngineList();
|
|
||||||
this.taskInputTable = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
//选中需要的字段后将需要的值赋在tableInfo中
|
|
||||||
handleSelectionChange(val) {
|
|
||||||
if(val.length<=0){
|
|
||||||
val = this.tableInfo.columnList;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.tableInfo.columnList = val;
|
|
||||||
console.log(this.tableInfo.columnList );
|
|
||||||
},
|
|
||||||
|
|
||||||
//根据树状下拉的选择赋值字段信息
|
|
||||||
handleNodeClick(data) {
|
|
||||||
this.tableInfo = data;
|
|
||||||
findStructureByTableId(data.id).then((res)=>{
|
|
||||||
this.tableInfo.structureList=res.data;
|
|
||||||
})
|
|
||||||
this.tableInfo.taskId = this.$route.params.id;
|
|
||||||
const cellById = this.graph.getCellById(this.nodeId)
|
|
||||||
cellById.setData(this.tableInfo);
|
|
||||||
},
|
|
||||||
|
|
||||||
//弹出选择表界面给树状下拉框赋值
|
|
||||||
findTAbleInfoList(){
|
|
||||||
findTableInfoList().then(res=>{
|
|
||||||
this.data=res.data;
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
|
||||||
created() {
|
|
||||||
this.findTAbleInfoList();
|
|
||||||
this.tableInfo.taskId = this.$route.params.id;
|
|
||||||
},
|
|
||||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
beforeCreate() {
|
|
||||||
}, //生命周期 - 创建之前",
|
|
||||||
beforeMount() {
|
|
||||||
}, //生命周期 - 挂载之前",
|
|
||||||
beforeUpdate() {
|
|
||||||
}, //生命周期 - 更新之前",
|
|
||||||
updated() {
|
|
||||||
}, //生命周期 - 更新之后",
|
|
||||||
beforeDestroy() {
|
|
||||||
}, //生命周期 - 销毁之前",
|
|
||||||
destroyed() {
|
|
||||||
}, //生命周期 - 销毁完成",
|
|
||||||
activated() {
|
|
||||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<div v-for="item in moduleList"
|
<div v-for="item in moduleList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
|
@click="pop(item)"
|
||||||
@dragend="handleDragEnd($event, item)">
|
@dragend="handleDragEnd($event, item)">
|
||||||
<img :src="item.image" alt="" />
|
<img :src="item.image" alt="" />
|
||||||
<p>{{ item.name }}</p>
|
<p>{{ item.name }}</p>
|
||||||
|
|
@ -18,9 +19,171 @@
|
||||||
<el-button @click="save()">提交</el-button>
|
<el-button @click="save()">提交</el-button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 添加任务详情设计-->
|
<!-- 添加任务详情设计-->
|
||||||
<el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
|
<el-dialog title="添加表" :visible.sync="taskInputAdd">
|
||||||
<formData v-if="this.formData" :group="graph" :node-id="nodeId" :taskInputForm="taskInputForm" :tableInfo="tableInfo" @taskInputForm="findFormValue"></formData>
|
|
||||||
|
<el-form label-width="80px" :model="tableInfo" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
||||||
|
<el-form-item label="任务id">
|
||||||
|
<el-input v-model="tableInfo.id"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据库id">
|
||||||
|
<el-input v-model="tableInfo.databaseId"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="数据表">-->
|
||||||
|
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration">选择数据表</span>
|
||||||
|
<el-cascader
|
||||||
|
v-model="value"
|
||||||
|
:options="tableList"
|
||||||
|
@change="handleChange(value)"></el-cascader>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <el-select @change="changeTableName(tableInfo.tableName)" v-model="tableInfo.tableName" placeholder="请选择等级">-->
|
||||||
|
<!-- <el-option label="请选择" value="0"></el-option>-->
|
||||||
|
<!-- <span v-for="table in tableList">-->
|
||||||
|
<!-- <el-option :label=table.tableName :value=table.id :key=table.id></el-option>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- </el-select>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<el-form-item label="表别名">
|
||||||
|
<el-input v-model="tableInfo.tableRemark"></el-input>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 字段选择列表-->
|
||||||
|
<el-dialog title="添加表" :visible.sync="taskInputFieldAdd">
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="structureList"
|
||||||
|
style="width: 100%"
|
||||||
|
|
||||||
|
@selection-change="handleSelectionChange">
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="55">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="字段"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.columnName }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="注释"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="是否主键"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="字段类型"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.columnType }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="字段长度"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="小数"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="非空"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.isNull }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="默认值"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="是否字典"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="处理规则"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>
|
||||||
|
<span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>
|
||||||
|
<span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>
|
||||||
|
<span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="表别名"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-input v-model="scope.row.fieldAsEngineId"></el-input>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="cancelColumn()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="columnAddGood()">确 定</el-button>
|
||||||
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -30,18 +193,13 @@
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import { Graph } from "@antv/x6";
|
import { Graph } from "@antv/x6";
|
||||||
import { addTaskInput, findByNodeId, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
|
import { findByTableId, findStructureList, tableInfoList } 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'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "antvX6",
|
name: "antvX6",
|
||||||
components:{
|
|
||||||
formData
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
taskId:this.$route.params.id,
|
||||||
dialogFormVisible:false,
|
dialogFormVisible:false,
|
||||||
//任务设计添加表弹窗
|
//任务设计添加表弹窗
|
||||||
taskInputAdd:false,
|
taskInputAdd:false,
|
||||||
|
|
@ -52,65 +210,37 @@ export default {
|
||||||
},
|
},
|
||||||
taskAddReq:{},
|
taskAddReq:{},
|
||||||
taskInputReq:{},
|
taskInputReq:{},
|
||||||
engineReq:{
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 100
|
|
||||||
},
|
|
||||||
taskList:[],
|
taskList:[],
|
||||||
//级联选择器
|
//级联选择器
|
||||||
value:[],
|
value:[],
|
||||||
|
|
||||||
engineList:[],
|
|
||||||
|
|
||||||
//树状图
|
|
||||||
data:[],
|
|
||||||
defaultProps:{
|
|
||||||
children:"children",
|
|
||||||
label:'tableName'
|
|
||||||
},
|
|
||||||
|
|
||||||
tableList:[],
|
tableList:[],
|
||||||
columnList:[],
|
|
||||||
structureList:[],
|
structureList:[],
|
||||||
tableInfo:{
|
tableInfo:{},
|
||||||
taskId:this.$route.params.id,
|
|
||||||
},
|
|
||||||
itemId:0,
|
|
||||||
moduleList: [
|
moduleList: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: "开始",
|
name: "开始",
|
||||||
image: require("@/assets/img/1.png"),
|
image: require("@/assets/img/1.png"),
|
||||||
data:{}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: "表",
|
name: "表",
|
||||||
image: require("@/assets/img/2.png"),
|
image: require("@/assets/img/2.png"),
|
||||||
data:{
|
|
||||||
databaseId:null,
|
|
||||||
tableName:null,
|
|
||||||
zd:null,
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: "联查",
|
name: "联查",
|
||||||
image: require("@/assets/img/3.png"),
|
image: require("@/assets/img/3.png"),
|
||||||
data:{}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
name: "结束",
|
name: "结束",
|
||||||
image: require("@/assets/img/4.png"),
|
image: require("@/assets/img/4.png"),
|
||||||
data:{}
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
graph:null,
|
graph:null,
|
||||||
nodeId:null,
|
columnList:[],
|
||||||
nodeName:null,
|
nodeId:0,
|
||||||
taskInputForm:false,
|
|
||||||
formData:false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
//初始化
|
//初始化
|
||||||
|
|
@ -118,11 +248,82 @@ export default {
|
||||||
this.initGraph();
|
this.initGraph();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
findFormValue(){
|
//确定选择的字段
|
||||||
this.formData=false;
|
columnAddGood(){
|
||||||
this.taskInputForm=false;
|
this.taskInputFieldAdd = false;
|
||||||
|
console.log(this.structureList)
|
||||||
|
const cellById = this.graph.getCellById(this.nodeId)
|
||||||
|
console.log(this.columnList)
|
||||||
|
cellById.setData(this.columnList);
|
||||||
|
console.log(cellById);
|
||||||
|
this.columnList=[];
|
||||||
|
this.structureList=[];
|
||||||
|
this.tableList=[];
|
||||||
},
|
},
|
||||||
|
|
||||||
|
//级联选择器改变事件
|
||||||
|
handleChange(value) {
|
||||||
|
console.log(value)
|
||||||
|
findStructureList(value[1]).then(res=>{
|
||||||
|
this.structureList = res.data;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//关闭字段信息
|
||||||
|
cancelColumn(){
|
||||||
|
this.taskInputFieldAdd = false;
|
||||||
|
this.columnList=[];
|
||||||
|
},
|
||||||
|
|
||||||
|
//选中字段
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.columnList = val;
|
||||||
|
},
|
||||||
|
//弹窗
|
||||||
|
pop(item){
|
||||||
|
console.log(item)
|
||||||
|
if(item.id == 1){
|
||||||
|
this.taskInputAdd = true;
|
||||||
|
this.tableInfoList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//跳转到任务设计界面
|
||||||
|
toDesign(row){
|
||||||
|
this.$router.push({path:'/easyFlow'});
|
||||||
|
},
|
||||||
|
|
||||||
|
//选择数据表改变数据
|
||||||
|
changeTableName(row){
|
||||||
|
findByTableId(row).then(res=>{
|
||||||
|
this.tableInfo = res.data;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
//数据结构列表
|
||||||
|
tableInfoList(){
|
||||||
|
tableInfoList().then(res=>{
|
||||||
|
this.tableList = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
executeTask(){
|
||||||
|
this.taskInputAdd = true;
|
||||||
|
this.tableInfoList();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
addTaskInput(){
|
||||||
|
this.taskInputAdd = false;
|
||||||
|
if(this.structureList == null){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.taskInputFieldAdd = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
//保存画布，并提交
|
//保存画布，并提交
|
||||||
save() {
|
save() {
|
||||||
console.log(this.graph.toJSON(), "graph");
|
console.log(this.graph.toJSON(), "graph");
|
||||||
|
|
@ -130,6 +331,18 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 拖动后松开鼠标触发事件
|
||||||
|
handleDragEnd(e, item) {
|
||||||
|
console.log(e, item); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
|
||||||
|
this.addHandleNode(
|
||||||
|
e.pageX - 500,
|
||||||
|
e.pageY - 200,
|
||||||
|
new Date().getTime(),
|
||||||
|
item.image,
|
||||||
|
item.name
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
nodeAddEvent() {
|
nodeAddEvent() {
|
||||||
const { graph } = this;
|
const { graph } = this;
|
||||||
const container = document.getElementById("container");
|
const container = document.getElementById("container");
|
||||||
|
|
@ -139,24 +352,6 @@ export default {
|
||||||
ports[i].style.visibility = visible ? "visible" : "hidden";
|
ports[i].style.visibility = visible ? "visible" : "hidden";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
//左键单击事件
|
|
||||||
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;
|
|
||||||
findByNodeId(this.nodeId).then(res=>{
|
|
||||||
if(res.code == 200){
|
|
||||||
this.tableInfo = res.data;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
//TODO man
|
|
||||||
this.taskInputForm = true;
|
|
||||||
this.formData = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.graph.on("node:mouseenter", () => {
|
this.graph.on("node:mouseenter", () => {
|
||||||
changePortsVisible(true);
|
changePortsVisible(true);
|
||||||
});
|
});
|
||||||
|
|
@ -164,8 +359,8 @@ export default {
|
||||||
changePortsVisible(false);
|
changePortsVisible(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 节点绑定右键点击事件
|
// 节点绑定点击事件
|
||||||
this.graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
|
this.graph.on("node:click", ({ e, x, y, node, view }) => {
|
||||||
console.log("点击！！！", node);
|
console.log("点击！！！", node);
|
||||||
// 判断是否有选中过节点
|
// 判断是否有选中过节点
|
||||||
if (this.curSelectNode) {
|
if (this.curSelectNode) {
|
||||||
|
|
@ -230,11 +425,15 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//双击事件
|
//右击事件
|
||||||
this.graph.on('node:dblclick', (evt) => {
|
this.graph.on("node:contextmenu",(evt)=>{
|
||||||
const data = evt.node.store.data;
|
const data = evt.node.store.data;
|
||||||
console.log(data);
|
if (data.name=="表"){
|
||||||
// this.showNodeForm(data);
|
alert("a")
|
||||||
|
}
|
||||||
|
alert("b")
|
||||||
|
this.executeTask();
|
||||||
|
// var id = node.id;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 连线绑定悬浮事件
|
// 连线绑定悬浮事件
|
||||||
|
|
@ -274,22 +473,8 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// 拖动后松开鼠标触发事件
|
|
||||||
handleDragEnd(e, item) {
|
|
||||||
// console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
|
|
||||||
this.addHandleNode(
|
|
||||||
e.pageX - 500,
|
|
||||||
e.pageY - 200,
|
|
||||||
new Date().getTime(),
|
|
||||||
item.image,
|
|
||||||
item.name,
|
|
||||||
item.data
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
//添加节点到画布
|
//添加节点到画布
|
||||||
addHandleNode(x, y, id, image, name ,data) {
|
addHandleNode(x, y, id, image, name ) {
|
||||||
this.graph.addNode({
|
this.graph.addNode({
|
||||||
id: id,
|
id: id,
|
||||||
shape: "image", // 指定使用何种图形，默认值为 'rect'
|
shape: "image", // 指定使用何种图形，默认值为 'rect'
|
||||||
|
|
@ -340,7 +525,7 @@ export default {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
zIndex: 10,
|
zIndex: 10,
|
||||||
data:data,
|
data:null,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,733 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dashboard-container">
|
|
||||||
<p>选择节点</p>
|
|
||||||
<div class="antvBox">
|
|
||||||
<div class="menu-list">
|
|
||||||
<div v-for="item in moduleList"
|
|
||||||
:key="item.id"
|
|
||||||
draggable="true"
|
|
||||||
@dragend="handleDragEnd($event, item)">
|
|
||||||
<img :src="item.image" alt="" />
|
|
||||||
<p>{{ item.name }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="canvas-card">
|
|
||||||
<div id="container" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-button @click="save()">提交</el-button>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 添加任务详情设计-->
|
|
||||||
<el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
|
|
||||||
<formData v-if="this.formData" :group="graph" :node-id="nodeId" :formData="taskInputForm" @taskInputAdd="taskInputAdd"></formData>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<!-- <el-form label-width="80px" :model="tableInfo" ref="queryForm" :inline="true" class="demo-form-inline" size="small">-->
|
|
||||||
<!-- <el-form-item label="任务id">-->
|
|
||||||
<!-- <el-input v-model="tableInfo.taskId"></el-input>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
|
|
||||||
<!-- <el-form-item label="数据库id">-->
|
|
||||||
<!-- <el-input v-model="tableInfo.basicId"></el-input>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!--<!– <el-form-item label="数据表">–>-->
|
|
||||||
|
|
||||||
<!--<!– <div class="block">–>-->
|
|
||||||
<!--<!– <span class="demonstration">选择数据表</span>–>-->
|
|
||||||
<!--<!– <el-cascader–>-->
|
|
||||||
<!--<!– v-model="value"–>-->
|
|
||||||
<!--<!– :options="tableList"–>-->
|
|
||||||
<!--<!– @change="handleChange(value)"></el-cascader>–>-->
|
|
||||||
<!--<!– </div>–>-->
|
|
||||||
|
|
||||||
<!--<!– <el-aside width="30%">-->
|
|
||||||
<!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
|
|
||||||
<!-- </el-aside>–>-->
|
|
||||||
<!-- <el-form-item>-->
|
|
||||||
<!-- <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-option label="请选择" value="0"></el-option>–>-->
|
|
||||||
<!--<!– <span v-for="table in tableList">–>-->
|
|
||||||
<!--<!– <el-option :label=table.tableName :value=table.id :key=table.id></el-option>–>-->
|
|
||||||
<!--<!– </span>–>-->
|
|
||||||
<!-- </el-select>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="表别名">-->
|
|
||||||
<!-- <el-input v-model="tableInfo.tableAsName"></el-input>-->
|
|
||||||
<!-- </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>-->
|
|
||||||
|
|
||||||
<!-- </el-dialog>-->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <!– 字段选择列表–>-->
|
|
||||||
<!-- <el-dialog title="添加表" :visible.sync="taskInputFieldAdd">-->
|
|
||||||
|
|
||||||
<!-- <el-table-->
|
|
||||||
<!-- :data="tableInfo.structureList"-->
|
|
||||||
<!-- style="width: 100%"-->
|
|
||||||
|
|
||||||
<!-- @selection-change="handleSelectionChange">-->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- type="selection"-->
|
|
||||||
<!-- width="100%">-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="字段"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.columnName }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="注释"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="是否主键"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="字段类型"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.columnType }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="字段长度"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="小数"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="非空"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.isNull }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="默认值"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="是否字典"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <i class="el-icon-time"></i>-->
|
|
||||||
<!-- <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="处理规则"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
|
|
||||||
<!-- <el-select v-model="tableInfo.fieldAsEngineId" multiple placeholder="请选择">-->
|
|
||||||
<!-- <el-option value="">请选择</el-option>-->
|
|
||||||
<!-- <el-option-->
|
|
||||||
<!-- v-for="engine in engineList"-->
|
|
||||||
<!-- :key="engine.id"-->
|
|
||||||
<!-- :label="engine.name"-->
|
|
||||||
<!-- :value="engine.id">-->
|
|
||||||
<!-- </el-option>-->
|
|
||||||
<!-- </el-select>-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--<!– <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>–>-->
|
|
||||||
<!--<!– <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>–>-->
|
|
||||||
<!--<!– <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>–>-->
|
|
||||||
<!--<!– <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>–>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="表别名"-->
|
|
||||||
<!-- width="100">-->
|
|
||||||
<!-- <template slot-scope="scope">-->
|
|
||||||
<!-- <el-input v-model="scope.row.fieldAsEngineId"></el-input>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
<!-- </el-table>-->
|
|
||||||
|
|
||||||
<!-- <div slot="footer" class="dialog-footer">-->
|
|
||||||
<!-- <el-button @click="cancelColumn()">取 消</el-button>-->
|
|
||||||
<!-- <el-button type="primary" @click="columnAddGood()">确 定</el-button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </el-dialog>-->
|
|
||||||
<!-- <formData>-->
|
|
||||||
|
|
||||||
<!-- </formData>-->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { Graph } from "@antv/x6";
|
|
||||||
import { addTaskInput, findByTableId, findStructureList, tableInfoList } 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'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "antvX6",
|
|
||||||
components:{
|
|
||||||
formData
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogFormVisible:false,
|
|
||||||
//任务设计添加表弹窗
|
|
||||||
taskInputAdd:false,
|
|
||||||
formData:null,
|
|
||||||
//选择字段弹窗
|
|
||||||
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.taskId,
|
|
||||||
},
|
|
||||||
itemId:0,
|
|
||||||
moduleList: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "开始",
|
|
||||||
image: require("@/assets/img/1.png"),
|
|
||||||
data:{}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "表",
|
|
||||||
image: require("@/assets/img/2.png"),
|
|
||||||
data:{
|
|
||||||
databaseId:null,
|
|
||||||
tableName:null,
|
|
||||||
zd:null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "联查",
|
|
||||||
image: require("@/assets/img/3.png"),
|
|
||||||
data:{}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: "结束",
|
|
||||||
image: require("@/assets/img/4.png"),
|
|
||||||
data:{}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
graph:null,
|
|
||||||
nodeId:null,
|
|
||||||
nodeName:null,
|
|
||||||
taskInputForm:false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
//初始化
|
|
||||||
created() {
|
|
||||||
alert(this.$route.params.taskId);
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initGraph();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
taskInputForm(data){
|
|
||||||
this.formData=data;
|
|
||||||
this.taskInputForm=data;
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// //规则引擎下拉框
|
|
||||||
// selectEngineList(){
|
|
||||||
// selectEngineList(this.engineReq).then(res=>{
|
|
||||||
// this.engineList = res.data.list;
|
|
||||||
// console.log(this.engineList);
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //根据树状下拉的选择赋值字段信息
|
|
||||||
// handleNodeClick(data) {
|
|
||||||
// this.tableInfo = data;
|
|
||||||
// findStructureByTableId(data.id).then((res)=>{
|
|
||||||
// this.tableInfo.structureList=res.data;
|
|
||||||
// })
|
|
||||||
// const cellById = this.graph.getCellById(this.nodeId)
|
|
||||||
// cellById.setData(this.tableInfo);
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //弹出选择表界面给树状下拉框赋值
|
|
||||||
// findTAbleInfoList(){
|
|
||||||
// findTableInfoList().then(res=>{
|
|
||||||
// this.data=res.data;
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //确定选择的字段
|
|
||||||
// columnAddGood(){
|
|
||||||
// this.taskInputFieldAdd = false;
|
|
||||||
// const cellById = this.graph.getCellById(this.nodeId);
|
|
||||||
// this.tableInfo.tableField = JSON.stringify(this.tableInfo.columnList);
|
|
||||||
// console.log(this.tableInfo.tableField);
|
|
||||||
// this.tableInfo.fieldAsEngineId = "1,2,3";
|
|
||||||
// this.tableInfo.nodeId = this.nodeId;
|
|
||||||
// cellById.setData(this.tableInfo);
|
|
||||||
// addTaskInput(this.tableInfo).then(res=>{
|
|
||||||
// alert("11")
|
|
||||||
// alert(res.msg);
|
|
||||||
// // console.log(this.tableInfo.fieldAsEngineId)
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //关闭字段信息
|
|
||||||
// cancelColumn(){
|
|
||||||
// this.taskInputFieldAdd = false;
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //选中字段
|
|
||||||
// handleSelectionChange(val) {
|
|
||||||
// if(val.length<=0){
|
|
||||||
// val = this.tableInfo.columnList;
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// this.tableInfo.columnList = val;
|
|
||||||
// console.log(this.tableInfo.columnList );
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //跳转到任务设计界面
|
|
||||||
// toDesign(row){
|
|
||||||
// this.$router.push({path:'/easyFlow'});
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// //打开选择数据表弹窗
|
|
||||||
// executeTask(){
|
|
||||||
// this.findTAbleInfoList();
|
|
||||||
// this.taskInputAdd = true;
|
|
||||||
// },
|
|
||||||
//
|
|
||||||
// //选择完下拉框的表后的下一步
|
|
||||||
// addTaskInput(){
|
|
||||||
// this.taskInputAdd = false;
|
|
||||||
// this.selectEngineList();
|
|
||||||
// this.taskInputFieldAdd = true;
|
|
||||||
// },
|
|
||||||
|
|
||||||
//保存画布，并提交
|
|
||||||
save() {
|
|
||||||
console.log(this.graph.toJSON(), "graph");
|
|
||||||
console.log(this.graph.getNodes(), "node");
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// 拖动后松开鼠标触发事件
|
|
||||||
handleDragEnd(e, item) {
|
|
||||||
// console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
|
|
||||||
this.addHandleNode(
|
|
||||||
e.pageX - 500,
|
|
||||||
e.pageY - 200,
|
|
||||||
new Date().getTime(),
|
|
||||||
item.image,
|
|
||||||
item.name,
|
|
||||||
item.data
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
nodeAddEvent() {
|
|
||||||
const { graph } = this;
|
|
||||||
const container = document.getElementById("container");
|
|
||||||
const changePortsVisible = (visible) => {
|
|
||||||
const ports = container.querySelectorAll(".x6-port-body");
|
|
||||||
for (let i = 0, len = ports.length; i < len; i = i + 1) {
|
|
||||||
ports[i].style.visibility = visible ? "visible" : "hidden";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.graph.on("node:mouseenter", () => {
|
|
||||||
changePortsVisible(true);
|
|
||||||
});
|
|
||||||
this.graph.on("node:mouseleave", () => {
|
|
||||||
changePortsVisible(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 节点绑定右键点击事件
|
|
||||||
this.graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
|
|
||||||
console.log("点击！！！", node);
|
|
||||||
// 判断是否有选中过节点
|
|
||||||
if (this.curSelectNode) {
|
|
||||||
// 移除选中状态
|
|
||||||
this.curSelectNode.removeTools();
|
|
||||||
// 判断两次选中节点是否相同
|
|
||||||
if (this.curSelectNode !== node) {
|
|
||||||
node.addTools([
|
|
||||||
{
|
|
||||||
name: "boundary",
|
|
||||||
args: {
|
|
||||||
attrs: {
|
|
||||||
fill: "#16B8AA",
|
|
||||||
stroke: "#2F80EB",
|
|
||||||
strokeWidth: 1,
|
|
||||||
fillOpacity: 0.1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "button-remove",
|
|
||||||
args: {
|
|
||||||
x: "100%",
|
|
||||||
y: 0,
|
|
||||||
offset: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
this.curSelectNode = node;
|
|
||||||
} else {
|
|
||||||
this.curSelectNode = null;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.curSelectNode = node;
|
|
||||||
node.addTools([
|
|
||||||
{
|
|
||||||
name: "boundary",
|
|
||||||
args: {
|
|
||||||
attrs: {
|
|
||||||
fill: "#16B8AA",
|
|
||||||
stroke: "#2F80EB",
|
|
||||||
strokeWidth: 1,
|
|
||||||
fillOpacity: 0.1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "button-remove",
|
|
||||||
args: {
|
|
||||||
x: "100%",
|
|
||||||
y: 0,
|
|
||||||
offset: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//左键单击事件
|
|
||||||
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;
|
|
||||||
const node = this.graph.getCellById(this.nodeId);
|
|
||||||
var data1 = node.getData();
|
|
||||||
this.tableInfo = data1;
|
|
||||||
console.log(this.tableInfo);
|
|
||||||
this.taskInputForm = true;
|
|
||||||
this.executeTask();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//双击事件
|
|
||||||
this.graph.on('node:dblclick', (evt) => {
|
|
||||||
const data = evt.node.store.data;
|
|
||||||
console.log(data);
|
|
||||||
// this.showNodeForm(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 连线绑定悬浮事件
|
|
||||||
this.graph.on("cell:mouseenter", ({ cell }) => {
|
|
||||||
if (cell.shape == "edge") {
|
|
||||||
cell.addTools([
|
|
||||||
{
|
|
||||||
name: "button-remove",
|
|
||||||
args: {
|
|
||||||
x: "100%",
|
|
||||||
y: 0,
|
|
||||||
offset: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
cell.setAttrs({
|
|
||||||
line: {
|
|
||||||
stroke: "#409EFF",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
cell.zIndex = 99; // 保证当前悬停的线在最上层，不会被遮挡
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.graph.on("cell:mouseleave", ({ cell }) => {
|
|
||||||
if (cell.shape === "edge") {
|
|
||||||
cell.removeTools();
|
|
||||||
cell.setAttrs({
|
|
||||||
line: {
|
|
||||||
stroke: "black",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
cell.zIndex = 1; // 保证未悬停的线在下层，不会遮挡悬停的线
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
//添加节点到画布
|
|
||||||
addHandleNode(x, y, id, image, name ,data) {
|
|
||||||
this.graph.addNode({
|
|
||||||
id: id,
|
|
||||||
shape: "image", // 指定使用何种图形，默认值为 'rect'
|
|
||||||
x: x,
|
|
||||||
y: y,
|
|
||||||
width: 60,
|
|
||||||
height: 60,
|
|
||||||
imageUrl: image,
|
|
||||||
attrs: {
|
|
||||||
body: {
|
|
||||||
stroke: "#ffa940",
|
|
||||||
fill: "#ffd591",
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
textWrap: {
|
|
||||||
width: 90,
|
|
||||||
text: name,
|
|
||||||
},
|
|
||||||
fill: "black",
|
|
||||||
fontSize: 12,
|
|
||||||
refX: 0.5,
|
|
||||||
refY: "100%",
|
|
||||||
refY2: 4,
|
|
||||||
textAnchor: "middle",
|
|
||||||
textVerticalAnchor: "top",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
ports: {
|
|
||||||
groups: {
|
|
||||||
group1: {
|
|
||||||
position: [30, 30],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
group: "group1",
|
|
||||||
id: "port1",
|
|
||||||
attrs: {
|
|
||||||
circle: {
|
|
||||||
r: 6,
|
|
||||||
magnet: true,
|
|
||||||
stroke: "#ffffff",
|
|
||||||
strokeWidth: 2,
|
|
||||||
fill: "#5F95FF",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
zIndex: 10,
|
|
||||||
data:data,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
//初始化
|
|
||||||
initGraph() {
|
|
||||||
const container = document.getElementById("container");
|
|
||||||
this.graph = new Graph({
|
|
||||||
container: container, // 画布容器
|
|
||||||
width: container.offsetWidth, // 画布宽
|
|
||||||
height: container.offsetHeight, // 画布高
|
|
||||||
background: false, // 背景（透明）
|
|
||||||
snapline: true, // 对齐线
|
|
||||||
// 配置连线规则
|
|
||||||
connecting: {
|
|
||||||
snap: true, // 自动吸附
|
|
||||||
allowBlank: false, // 是否允许连接到画布空白位置的点
|
|
||||||
allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
|
|
||||||
allowLoop: true, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
|
|
||||||
highlight: true, // 拖动边时，是否高亮显示所有可用的节点
|
|
||||||
highlighting: {
|
|
||||||
magnetAdsorbed: {
|
|
||||||
name: "stroke",
|
|
||||||
args: {
|
|
||||||
attrs: {
|
|
||||||
fill: "#5F95FF",
|
|
||||||
stroke: "#5F95FF",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
router: {
|
|
||||||
// 对路径添加额外的点
|
|
||||||
name: "orth",
|
|
||||||
},
|
|
||||||
connector: {
|
|
||||||
// 边渲染到画布后的样式
|
|
||||||
name: "rounded",
|
|
||||||
args: {
|
|
||||||
radius: 8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
panning: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
mousewheel: {
|
|
||||||
enabled: true, // 支持滚动放大缩小
|
|
||||||
zoomAtMousePosition: true,
|
|
||||||
modifiers: "ctrl",
|
|
||||||
minScale: 0.5,
|
|
||||||
maxScale: 3,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
type: "dot",
|
|
||||||
size: 20, // 网格大小 10px
|
|
||||||
visible: true, // 渲染网格背景
|
|
||||||
args: {
|
|
||||||
color: "#a0a0a0", // 网格线/点颜色
|
|
||||||
thickness: 2, // 网格线宽度/网格点大小
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
this.nodeAddEvent();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dashboard-container {
|
|
||||||
.antvBox {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: black;
|
|
||||||
padding-top: 20px;
|
|
||||||
.menu-list {
|
|
||||||
height: 100%;
|
|
||||||
width: 300px;
|
|
||||||
padding: 0 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
> div {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: pointer;
|
|
||||||
color: black;
|
|
||||||
width: 105px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
img {
|
|
||||||
height: 50px;
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
P {
|
|
||||||
width: 90px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.canvas-card {
|
|
||||||
width: 1700px;
|
|
||||||
height: 750px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
> div {
|
|
||||||
width: 1400px;
|
|
||||||
height: 750px;
|
|
||||||
border: 2px dashed #2149ce;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue