301 lines
9.0 KiB
Vue
301 lines
9.0 KiB
Vue
<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>
|
||
<el-button @click="nb()">测试</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="200">
|
||
<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="200">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.tableAsField = tableInfo.tableAsName+'_'+scope.row.columnName"></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>
|
||
<el-button @click="nb()">测试</el-button>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { addTaskInput} 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','nodeName','columnList'],
|
||
data() {
|
||
//这里存放数据"
|
||
|
||
return {
|
||
|
||
taskInputJoin:false,
|
||
dialogFormVisible:true,
|
||
//任务设计添加表弹窗
|
||
taskInputAdd:false,
|
||
//选择字段弹窗
|
||
taskInputFieldAdd:false,
|
||
taskInputTable:false,
|
||
taskReq:{
|
||
|
||
},
|
||
joinSelect:{},
|
||
taskAddReq:{},
|
||
taskInputReq:{},
|
||
nbList:[],
|
||
engineReq:{
|
||
pageNum: 1,
|
||
pageSize: 100
|
||
},
|
||
taskList:[],
|
||
//级联选择器
|
||
value:[],
|
||
|
||
engineList:[],
|
||
columnList:[],
|
||
|
||
//树状图
|
||
data:[],
|
||
defaultProps:{
|
||
children:"children",
|
||
label:'tableName'
|
||
},
|
||
|
||
tableList:[],
|
||
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.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.basicId,
|
||
"tableName":this.tableInfo.tableName,
|
||
"tableAsName":this.tableInfo.tableAsName,
|
||
"tableField": this.tableInfo.tableField.substring(1),
|
||
"tableAsField":this.tableInfo.tableAsField.substring(1),
|
||
"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.columnList = val;
|
||
this.tableInfo.tableField = "";
|
||
this.tableInfo.tableAsField = "";
|
||
|
||
val.forEach(item=>{
|
||
this.tableInfo.tableField +=','+ item.columnName;
|
||
this.tableInfo.tableAsField +=','+ item.tableAsField;
|
||
})
|
||
|
||
console.log(this.tableInfo.tableField);
|
||
},
|
||
|
||
//根据树状下拉的选择赋值字段信息
|
||
handleNodeClick(data) {
|
||
this.tableInfo = data;
|
||
console.log(data)
|
||
this.tableInfo.structureList = [];
|
||
findStructureByTableId(data.id).then(res=>{
|
||
this.tableInfo.structureList=res.data;
|
||
})
|
||
this.tableInfo.taskId = this.$route.params.id;
|
||
},
|
||
|
||
nb(){
|
||
console.log(this.tableInfo.structureList)
|
||
},
|
||
|
||
//弹出选择表界面给树状下拉框赋值
|
||
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>
|