TreeData
/
cloud-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

前台流程设计页面初版完毕

master
陈思豪 2024-09-05 01:10:59 +08:00
parent 55cbd8ffb5
commit 9ddcbb51bd
6 changed files with 196 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/api/task/task.js
View File

@ -36,12 +36,12 @@ export function deleteByTaskId(id) {
}
//获得所有数据结构信息
export function tableInfoList() {
return request({
url: "/task/tableInfo/list",
method: "GET",
})
}
// export function tableInfoList() {
// return request({
// url: "/task/tableInfo/list",
// method: "GET",
// })
// }
//获得所有数据结构信息
export function findByTableId(id) {
@ -80,12 +80,31 @@ export function findByNodeId(nodeId) {
//联查记录添加
export function addTaskJoin(data) {
return request({
url: "/task/taskJoin/addTaskJoin/",
url: "/task/taskJoin/addTaskJoin",
method: "POST",
data:data
})
}
//添加数据输出节点
export function addTaskOutPut(data) {
return request({
url: "/task/taskOutPut/addTaskOutPut",
method: "POST",
data:data
})
}
//执行任务
export function executeTask(id) {
return request({
url: "/task/executeTask/"+id,
method: "POST"
})
}

22
src/views/components/task/formData.vue
View File

@ -30,6 +30,7 @@
<div slot="footer" class="dialog-footer">
<el-button @click="taskInputAdd = false">取 消</el-button>
<el-button type="primary" @click="addTaskInput()">下一步</el-button>
<el-button @click="nb()">测试</el-button>
</div>
</span>
@ -123,6 +124,7 @@
<div slot="footer" class="dialog-footer">
<el-button @click="cancelColumn()">上一步</el-button>
<el-button type="primary" @click="columnAddGood()">确 定</el-button>
<el-button @click="nb()">测试</el-button>
</div>
</span>
</div>
@ -137,7 +139,7 @@ import { selectEngineList } from '@/api/engine/engine'
export default {
//import引入的组件需要注入到对象中才能使用"
components: {},
props:['graph','nodeId','taskInputForm','tableInfo','nodeName'],
props:['graph','nodeId','taskInputForm','tableInfo','nodeName','columnList'],
data() {
//这里存放数据"
@ -156,6 +158,7 @@ export default {
joinSelect:{},
taskAddReq:{},
taskInputReq:{},
nbList:[],
engineReq:{
pageNum: 1,
pageSize: 100
@ -165,6 +168,7 @@ export default {
value:[],
engineList:[],
columnList:[],
//树状图
data:[],
@ -174,8 +178,6 @@ export default {
},
tableList:[],
columnList:[],
structureList:[],
itemId:0,
};
@ -217,9 +219,9 @@ export default {
"tableAsField":this.tableInfo.tableAsField.substring(1),
"fieldAsEngineId":this.tableInfo.fieldAsEngineId
}).then(res=>{
alert(res.msg);
})
//添加记录
},
//选择完下拉框的表后点击下一步
@ -235,8 +237,10 @@ export default {
val = this.tableInfo.columnList;
return;
}
this.columnList = val;
this.tableInfo.tableField = "";
this.tableInfo.tableAsField = "";
val.forEach(item=>{
this.tableInfo.tableField +=','+ item.columnName;
this.tableInfo.tableAsField +=','+ item.tableAsField;
@ -248,12 +252,16 @@ export default {
//根据树状下拉的选择赋值字段信息
handleNodeClick(data) {
this.tableInfo = data;
findStructureByTableId(data.id).then((res)=>{
console.log(data)
this.tableInfo.structureList = [];
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);
},
nb(){
console.log(this.tableInfo.structureList)
},
//弹出选择表界面给树状下拉框赋值

145
src/views/components/task/formDataOut.vue
View File

@ -2,13 +2,60 @@
<div>
<!-- 数据输出表单-->
<span v-if="taskDataOutPut">
<el-select v-model="tableInfo.tableName" placeholder="请选择数据库">
<el-option style="height: 100%" :value="tableInfo.tableName">
<el-button @click="nb"></el-button><br>
<span v-for="(outPut,index) in dataOutPut.tableField.split(',')">
<el-checkbox :label=outPut :value=outPut v-model="twoInputList">字段名： {{ outPut }} 字段别名：{{dataOutPut.tableField.split(',')[index]}}</el-checkbox><br>
</span>
<el-select v-model="dataOutPut.tableName" placeholder="请选择数据库">
<el-aside width="100%">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<el-option style="height: 100%" :value="dataOutPut.tableName">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-option>
</el-aside>
</el-option>
</el-select>
<div slot="footer" class="dialog-footer">
<el-button @click="taskDataOutPut = false">取消</el-button>
<el-button type="primary" @click="toSelectField()">确 定</el-button>
</div>
</span>
<!-- 选择目标字段-->
<span v-if="selectField">
<span v-for="(two,index) in twoInputList">
{{two}}
<el-select v-model="target[index]" placeholder="请选择">
<el-option v-for="item in columnList" :label="item.columnName" :value="item.columnName"></el-option>
</el-select>
<br>
</span>
<!-- <el-table-->
<!-- :data="twoInputList" style="width: 100%" max-height="250">-->
<!-- <el-table-column label="输入字段" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <span style="margin-left: 10px">{{ scope.row}}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="目标字段" width="100">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<div slot="footer" class="dialog-footer">
<el-button @click="back()">上一步</el-button>
<el-button type="primary" @click="addOutput()">确 定</el-button>
</div>
</span>
</div>
</template>
@ -16,10 +63,15 @@
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
import { addTaskOutPut, findByNodeId } from '@/api/task/task'
import item from '@/layout/components/Sidebar/Item.vue'
import fa from 'element-ui/src/locale/lang/fa'
export default {
//import引入的组件需要注入到对象中才能使用"
components: {},
props:['graph','nodeId','nodeName','taskId','taskDataOutPut'],
props:['graph','nodeId','nodeName','taskId','taskDataOutPut','columnList','neighbors'],
data() {
//这里存放数据"
@ -27,28 +79,103 @@ export default {
//树状图
data:[],
selectField:false,
defaultProps:{
children:"children",
label:'tableName'
},
dataOutPut:{},
oneInputList:{},
tableAsField:'',
tableField:'',
basicId:'',
tableId:'',
twoInputList:[],
target:[],
columnList:[],
oneNode:{},
twoNode:{},
};
},
//计算属性 类似于data概念",
computed: {},
computed: {
fa() {
return fa
}
},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {
//字段多选框选择赋值
handleSelectionChange(val) {
//
addOutput(){
addTaskOutPut({
"taskId":this.taskId,
"newFileName":this.target.toString(),
"lastFileName":this.twoInputList.toString(),
"tableId":this.tableId,
"basicId":this.basicId,
}).then(res=>{
alert(res.msg)
});
},
//选择需要的字段后去选择对应数据库的表
toSelectField(){
this.taskDataOutPut = false;
this.selectField = true;
},
nb(){
this.findTAbleInfoList();
},
//弹出选择表界面给树状下拉框赋值
findTAbleInfoList(){
findTableInfoList().then(res=>{
this.data=res.data;
})
this.tableAsField="";
findByNodeId(this.neighbors[0]).then(res=>{
this.oneNode = res.data;
console.log(this.oneNode)
})
findByNodeId(this.neighbors[1]).then(res=>{
this.twoNode = res.data;
console.log(this.twoNode)
})
this.dataOutPut.tableField = this.oneNode.tableField + ',' + this.twoNode.tableField
this.dataOutPut.tableAsField = this.oneNode.tableAsField + ',' + this.twoNode.tableAsField
},
//返回上一步
back(){
this.taskDataOutPut = true;
this.selectField = false;
},
//选择要将数据存入的表中
handleNodeClick(data) {
this.tableId = data.id
this.basicId = data.basicId
findStructureByTableId(data.id).then((res)=>{
this.columnList=res.data;
})
},
},
//生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.findAllTable();
this.findTAbleInfoList();
},
//生命周期 - 挂载完成（可以访问DOM元素）",
mounted() {

15
src/views/components/task/formJoin.vue
View File

@ -5,9 +5,9 @@
<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-option style="height: 100%" label="左联查" value="left join"/>
<el-option style="height: 100%" label="右联查" value="right join"/>
<el-option style="height: 100%" label="内联查" value="inner join"/>
</el-select>
</el-form-item>
<br>
@ -63,6 +63,8 @@ export default {
return {
taskInputJoin: true,
formJoin: {},
leftId:null,
rightId:null,
oneFieldList:'',
twoFieldList:'',
};
@ -82,24 +84,27 @@ export default {
"nodeId":this.nodeId,
"nodeName":this.nodeName,
"taskId":this.taskId,
"leftId":this.leftId,
"joinType":this.formJoin.joinType,
"rightId":this.rightId,
"leftJoinField":this.formJoin.leftJoinField,
"rightJoinField":this.formJoin.rightJoinField
}
).then(res=>{
alert(res.msg);
})
},
//拿到连线节点的数据
findAllTable(){
alert(this.neighbors)
findByNodeId(this.neighbors[0]).then(res=>{
this.oneFieldList = res.data.tableAsField;
this.leftId = res.data.id;
console.log(this.oneFieldList)
})
findByNodeId(this.neighbors[1]).then(res=>{
this.twoFieldList = res.data.tableAsField;
this.rightId = res.data.id;
console.log(this.twoFieldList)
})
},

4
src/views/task/task/antvX6.vue
View File

@ -33,7 +33,8 @@
<!-- 数据输出弹窗-->
<el-dialog title="数据输出" :visible.sync="taskDataOutPut" width="70%">
<dataOutInput v-if="formOut" taskDataOutPut:taskDataOutPut></dataOutInput>
<dataOutInput v-if="formOut" :taskDataOutPut="taskDataOutPut" :neighbors="neighbors"
:taskId="taskId"></dataOutInput>
</el-dialog>
@ -67,6 +68,7 @@ export default {
taskInputFieldAdd:false,
//连再联查的节点id
neighbors:[],
columnList:[],
//记录表信息
tableInfo:{},
//画布节点选项

49
src/views/task/task/index.vue
View File

@ -41,39 +41,12 @@
</el-button>
</el-col>
<!-- <el-dialog title="添加数据源接入" :visible.sync="dialogFormVisible">-->
<!-- <el-form :model="sourceAddReq">-->
<!-- <el-form-item label="id">-->
<!-- <el-input v-model="sourceAddReq.id"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="任务名称">-->
<!-- <el-input v-model="sourceAddReq.name"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="任务执行状态">-->
<!-- <el-input v-model="sourceAddReq.weigh"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="任务完成度">-->
<!-- <el-input v-model="sourceAddReq.status"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-dialog>-->
<el-table
:data="taskList"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
@ -356,15 +329,10 @@
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {selectSourceList} from "@/api/etl/switch";
import {selectSourceExport} from "@/api/etl/switch";
import {connectionTest} from "@/api/etl/switch";
import {insertAdd} from "@/api/etl/switch";
import {getInfo} from "@/api/etl/switch";
import {
addTask,
deleteByTaskId, findByTableId, findStructureList,
selectTaskList, tableInfoList
deleteByTaskId, executeTask, findByTableId, findStructureList,
selectTaskList
} from '@/api/task/task'
export default {
@ -417,17 +385,12 @@ export default {
},
//数据结构列表
tableInfoList(){
tableInfoList().then(res=>{
this.tableList = res.data;
});
},
executeTask(){
executeTask(row){
this.taskInputAdd = true;
this.tableInfoList();
executeTask(row.id).then(res=>{
});
},