Skip to content

E
ETL-admin
Commit 0dee7892 by 莫晓莉
Options

数据库保存到画布xml

parent 6d1adaba
Showing with 273 additions and 99 deletions
src/api/kettle/link.js
......@@ -63,13 +63,37 @@ export function listNames(data) {
})
}
// 根据数据库名查询已经建立的数据库详情即编辑数据库
export function database(data) {
// export function database(data) {
// return request({
// url: 'etlweb/repository/database',
// data,
// method: 'post'
// })
// }
// 新建资源库数据库详情
export function getRepositoryDatabase(data) {
return request({
url: 'etlweb/repository/database',
data,
method: 'post'
})
}
// 转换资源库数据库详情
export function getTransDatabase(data) {
return request({
url: 'etlweb/trans/database',
data,
method: 'post'
})
}
// 作业资源库数据库详情
export function getJobDatabase(data) {
return request({
url: 'etlweb/job/database',
data,
method: 'post'
})
}
//连接资源库
export function loginRepository(data){
return request({
......
src/store/getters.js
......@@ -19,6 +19,7 @@ const getters = {
updateAvatarApi: state => state.api.updateAvatarApi,
qiNiuUploadApi: state => state.api.qiNiuUploadApi,
sqlApi: state => state.api.sqlApi,
swaggerApi: state => state.api.swaggerApi
swaggerApi: state => state.api.swaggerApi,
graph:state =>state.graph.graph
}
export default getters
src/views/dashboard-kettle/components/appBulletFrame/customConstant.vue
......@@ -205,7 +205,7 @@ export default {
// props: [""],
data() {
return {
form: {},
// form: {},
metadataForm: {
},
......@@ -246,7 +246,7 @@ export default {
}
},
},
props:["ConstantDialog","saveOutputDialog","doubleClickCell","myForm"],
props:["ConstantDialog","saveOutputDialog","doubleClickCell","myForm","form"],
created() {
this.valueFormatFun();
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -745,7 +745,7 @@
</el-dialog> -->
<!-- 自定义常量数据弹窗 -->
<customConstant :ConstantDialog.sync="ConstantDialog" :saveOutputDialog="saveOutputDialog" :doubleClickCell="doubleClickCell" :myForm="myoutPutFormData" > </customConstant>
<customConstant :ConstantDialog.sync="ConstantDialog" :saveOutputDialog="saveOutputDialog" :doubleClickCell="doubleClickCell" :myForm="myoutPutFormData" :form="form"> </customConstant>
<!-- 生成随机数-->
<el-dialog
......@@ -1147,6 +1147,7 @@ export default {
// },
methods: {
setXml() {
this.graph.getModel().beginUpdate();
try {
......@@ -1157,6 +1158,7 @@ export default {
} finally {
this.graph.getModel().endUpdate();
}
},
TextFileInputDialogFun(){
......@@ -1566,52 +1568,51 @@ export default {
// let key = obj[vel];
// q[key.name] = key.value;
// }
this.outPutFormData1 = this.showDataFunc();
this.$refs.tableOutPut.clickFun(this.graph)
return;
} else if (cell.ids == "step16" || cell.value.attributes.ctype.value == "Update" ) {
//更新
this.updateVisible = !this.updateVisible;
this.outPutFormData = this.showDataFunc();
return;
} else if (cell.ids == "step15" || cell.value.attributes.ctype.value == "TextFileOutput" ) {
//文本文件输出
this.fileVisible = !this.fileVisible;
this.outPutFormData3 = this.showDataFunc();
return;
} else if (cell.ids == "step14" || cell.value.attributes.ctype.value == "SynchronizeAfterMerge" ) {
//数据同步
this.synVisible = !this.synVisible;
this.outPutFormData4 = this.showDataFunc();
return;
} else if (cell.ids == "step13" || cell.value.attributes.ctype.value == "InsertUpdate" ) {
//插入、更新
this.InsertOrUpdateVisible = !this.InsertOrUpdateVisible;
this.outPutFormData5 = this.showDataFunc();
return;
} else if (cell.ids == "step12" || cell.value.attributes.ctype.value == "Delete" ) {
//删除
this.deleteVisible = !this.deleteVisible;
this.outPutFormData6 = this.showDataFunc();
return;
} else if (cell.ids == "step11" || cell.value.attributes.ctype.value == "SQLFileOutput" ) {
//SQL文件输出
this.sqlVisible = !this.sqlVisible;
this.outPutFormData7 = this.showDataFunc();
return;
}else if (cell.ids == "step10" || cell.value.attributes.ctype.value == "TypeExitExcelWriterStep" ) {
//mico-Excel输出
this.microVisible = !this.microVisible;
this.outPutFormData9 = this.showDataFunc();
return;
} else if (cell.ids == "step9" || cell.value.attributes.ctype.value == "ExcelOutput" ) {
//Excel输出
this.excelOutPutVisible = !this.excelOutPutVisible;
this.outPutFormData8 = this.showDataFunc();
return;
}
});
this.graph.addListener(mxEvent.CLICK, (graph, evt) => {
......
src/views/dialogs-components/global/database-choose/main.vue
......@@ -42,7 +42,7 @@
</el-row>
</el-form-item>
<estab-dialog ref="establishDia" :form="newForm" :dialogVisibleFourth.sync='dialogVisibleFourth' @getSonValue="getSonValue" :listNames="listNames" :chooseFlag.sync="chooseFlag" :chooseType="chooseType"></estab-dialog>
<estab-dialog ref="establishDia" :noneRespository="noneRespository" :graph.sync="newGraph" :getXmlVal="getXmlVal" :form="newForm" :dialogVisibleFourth.sync='dialogVisibleFourth' @getSonValue="getSonValue" :listNames="listNames" :chooseFlag.sync="chooseFlag" :chooseType="chooseType"></estab-dialog>
</div>
</template>
......@@ -58,6 +58,7 @@ export default {
name: "database-choose",
data() {
return {
noneRespository:1,//判断是保存画布还是传后台
dialogVisibleFourth:false,
namesList:[],
selectName:'',//当前选中的下拉框的数据
......@@ -65,19 +66,30 @@ export default {
curNode:[],
chooseFlag:false,//选择模式
newForm:{},
chooseType:''
chooseType:'',
newGraph:{}
}
},
props: {
form:Object
watch:{
graph(n,o){
console.log("表输出拿到的画布2222===",n);
}
},
props:["form","getXmlVal","graph"],
created() {
this.listNames();
this.newForm = this.form
console.log(this.graph,'============');
},
methods: {
clickFun(graph){
console.log(graph,'数据库编辑=====')
this.newGraph = graph
},
//获取新建弹窗返回来的值
getSonValue(res){
if(typeof(res)=='string'){
......@@ -124,9 +136,13 @@ export default {
// 新增数据库
newAdd(){
this.dialogVisibleFourth=true;
this.$refs.establishDia.database();
this.$refs.establishDia.accessMethod();//获取连接方式
// this.$refs.establishDia.database();
this.$refs.establishDia.getTransDatabase();
this.$refs.establishDia.accessMethod();//获取连接方式
this.$refs.establishDia.clickFun(this.newGraph)
},
//选择数据库编辑
selectNameFunc(e){
console.log('当前选中的数',e);
......@@ -139,17 +155,20 @@ export default {
},
// 编辑
editDataBaseModal(){
this.$refs.establishDia.clickFun(this.newGraph)
if(this.selectName){
this.dialogVisibleFourth=true;
}
this.$refs.establishDia.database(this.selectName);
// this.$refs.establishDia.database(this.selectName);
this.$refs.establishDia.getTransDatabase(this.selectName);
this.$refs.establishDia.accessMethod();//获取连接方式
},
//浏览
scanTree(type){
this.chooseType=type;
if(this.selectName){
this.$refs.establishDia.database(this.selectName);
// this.$refs.establishDia.database(this.selectName);
this.$refs.establishDia.getTransDatabase(this.selectName);
console.log('当前选中数据库***************',this.dataBaseName);
if(this.dataBaseName){
this.$refs.establishDia.scanDialogOpen();
......
src/views/dialogs-components/global/establish/main.vue
......@@ -6,6 +6,7 @@
width="800px"
top="5%"
:before-close="handleCloseFourth"
@open="getNoneRespository"
append-to-body>
<div style="display: flex">
<div class="left-container mybox">
......@@ -349,7 +350,10 @@
import {
accessMethod, //获取连接方式列表
accessData, //获取连接类型
database,
// database,
getRepositoryDatabase,//资源库
getTransDatabase,//转换数据库
getJobDatabase,//作业数据库
test,
check, //编辑数据库
create,
......@@ -422,41 +426,106 @@ export default {
text: "root",
node: "xnode-4528",
scanFlag: false, //浏览弹窗
newGraph:{}
};
},
props: {
dialogVisibleFourth: Boolean,
listNames: Function, //父传过来的方法
chooseFlag:Boolean,//选择判断
form:Object,
chooseType:String,
watch:{
graph(n,o){
console.log("表输出拿到的画布333333===",n);
}
},
props:["noneRespository","dialogVisibleFourth","listNames","chooseFlag","form","chooseType","getXmlVal","graph"],
// props: {
// dialogVisibleFourth: Boolean,
// listNames: Function, //父传过来的方法
// chooseFlag:Boolean,//选择判断
// form:Object,
// chooseType:String,
// getXmlVal:
// },
watch:{
form(n,o){
console.log('值变化',n,o)
},
graph(n,o){
console.log('画布对象',n,o)
}
},
created() {
this.accessData();
// console.log(this.noneRespository,"000000000000000000");
},
methods: {
getNoneRespository(){
console.log(this.noneRespository,"000000000000000000");
},
//获取数据库详情
database(name) {
// database(name) {
// let data = new FormData();
// data.append("name", name);
// database(data).then((res) => {
// if (res) {
// console.log("数据库详情：", res);
// this.dataBaseDetail = res;
// this.chooseParams(this.dataBaseDetail);
// } else {
// this.$message.error(res.errMsg);
// }
// });
// },
clickFun(graph){
console.log(graph,'最内层')
this.newGraph = graph
},
// 资源库数据库详情
getRepositoryDatabase(name) {
let data = new FormData();
data.append("name", name);
database(data).then((res) => {
getRepositoryDatabase(data).then((res) => {
if (res) {
console.log("数据库详情：", res);
this.dataBaseDetail = res;
// this.createModel=res;
// 选出需要传到后台的参数集合
this.chooseParams(this.dataBaseDetail);
} else {
this.$message.error(res.errMsg);
}
});
},
// 转换数据库详情
getTransDatabase(name) {
let data = new FormData();
data.append("graphXml", this.getXmlVal);
data.append("name", name);
getTransDatabase(data).then((res) => {
if (res) {
console.log("数据库详情：", res);
this.dataBaseDetail = res;
this.chooseParams(this.dataBaseDetail);
} else {
this.$message.error(res.errMsg);
}
});
},
//作业数据库详情
getJobDatabase(name) {
let data = new FormData();
data.append("graphXml", this.getXmlVal);
data.append("name", name);
getJobDatabase(data).then((res) => {
if (res) {
console.log("数据库详情：", res);
this.dataBaseDetail = res;
this.chooseParams(this.dataBaseDetail);
} else {
this.$message.error(res.errMsg);
}
});
},
//选出要传给后台的参数集合便于编辑方法 check
chooseParams(objParams) {
var newObject = {};
......@@ -578,6 +647,13 @@ export default {
}
});
},
// 转换和作业确定把参数保存到画布没有调用后台方法
paramsSavetoGraph(){
},
// 资源库确定的时候传参数到后台
comfirmCreate(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
......@@ -594,38 +670,89 @@ export default {
params.partitioned = "N";
params.partitionInfo = [];
var formData = new FormData();
formData.append("databaseInfo", JSON.stringify(params));
console.log("表单提交参数==", params);
// 判断新增还是编辑start===============
console.log("编辑表单提交参数==", formData);
check(formData).then((res) => {
console.log("提交数据：", res);
if (res.success) {
// this.$message.success('成功!');
// this.dialogVisibleFourth=false;//关闭弹窗
// this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择的数据
// this.listNames();//刷新已经创建的数据库列表
// this.addFlag=true;//更改新增或者编辑变量
create(formData).then((res) => {
// 保存参数到画布不触发后台方法start=============
if(this.noneRespository==1){
console.log(this.newGraph,'最内层接收画布99999999999999')
var root = this.newGraph.getDefaultParent();
var databases = root.getAttribute('databases');
console.log(databases,'55555555555555555559')
var jsonArray = JSON.parse(databases);
if(jsonArray.length == 0) {
jsonArray.push(params);
} else {
jsonArray.forEach((item,index)=>{
if(item.name == params.name) {
jsonArray.splice(index, 1, params);
} else {
if(index == jsonArray.length - 1)
jsonArray.push(params);
}
})
}
// return
this.newGraph.getModel().beginUpdate();
try{
// var edit = new mxCellAttributeChange(root, 'databases', Ext.encode(jsonArray));
var edit = new mxCellAttributeChange(root, 'databases', JSON.stringify(jsonArray));
this.newGraph.getModel().execute(edit);
}
finally{
this.newGraph.getModel().endUpdate();
}
console.log();
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
console.log(encodedModel, 8888888888888);
// return
}
// 保存参数到画布不触发后台方法end=============
if(this.noneRespository==0){
var formData = new FormData();
formData.append("databaseInfo", JSON.stringify(params));
console.log("表单提交参数==", params);
// 判断新增还是编辑start===============
console.log("编辑表单提交参数==", formData);
check(formData).then((res) => {
console.log("提交数据：", res);
if (res.success) {
this.$message.success("成功!");
// this.$message.success('成功!');
// this.dialogVisibleFourth=false;//关闭弹窗
this.$emit("getSonValue", false); //组件要传回父组件的值,关闭弹窗
this.linkCheckedIdx = this.initlinkTypeIdx; //关闭弹窗后初始化选择的数据
this.listNames(); //刷新已经创建的数据库列表
// this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择的数据
// this.listNames();//刷新已经创建的数据库列表
// this.addFlag=true;//更改新增或者编辑变量
create(formData).then((res) => {
console.log("提交数据：", res);
if (res.success) {
this.$message.success("成功!");
// this.dialogVisibleFourth=false;//关闭弹窗
this.$emit("getSonValue", false); //组件要传回父组件的值,关闭弹窗
this.linkCheckedIdx = this.initlinkTypeIdx; //关闭弹窗后初始化选择的数据
this.listNames(); //刷新已经创建的数据库列表
} else {
this.$message.error(res.message);
}
});
} else {
this.$message.error(res.message);
}
});
} else {
this.$message.error(res.message);
}
});
// 判断新增还是编辑end===============
}
// 判断新增还是编辑end===============
});
},
testDialogueOpen() {
......
src/views/kettle/home2.vue
......@@ -215,7 +215,7 @@
<!-- 弹窗4start -->
<estab-dialog ref="establishDia" :dialogVisibleFourth.sync='dialogVisibleFourth' @getSonValue="getSonValue" :listNames="listNames"></estab-dialog>
<estab-dialog ref="establishDia" :noneRespository="noneRespository" :dialogVisibleFourth.sync='dialogVisibleFourth' @getSonValue="getSonValue" :listNames="listNames"></estab-dialog>
......@@ -382,6 +382,7 @@ export default {
props: ["dragItem"],
data() {
return {
noneRespository:0,
curNodeText:'数据库名称',//当前点击选中的资源库节点
blankCanvas:"",//空白画布xml
graph:null,
......@@ -845,7 +846,8 @@ props: ["dragItem"],
// 新增数据库
showModalFourth(){
this.dialogVisibleFourth=true;
this.$refs.establishDia.database();
// this.$refs.establishDia.database();
this.$refs.establishDia.getRepositoryDatabase("");
// this.accessData();//获取连接类型
this.$refs.establishDia.accessMethod();//获取连接方式
// console.log('this.methodHoverIdx==',this.methodHoverIdx);
......@@ -978,7 +980,8 @@ props: ["dragItem"],
this.dialogVisibleFourth=true;
// this.addFlag=false;//增减变量改为编辑变量
}
this.$refs.establishDia.database(this.selectName);
// this.$refs.establishDia.database(this.selectName);
this.$refs.establishDia.getRepositoryDatabase(this.selectName);
this.$refs.establishDia.accessMethod();//获取连接方式
// console.log('this.methodHoverIdx==',this.methodHoverIdx);
// console.log('this.methodCheckedIdx==',this.methodCheckedIdx);
......@@ -1246,6 +1249,7 @@ props: ["dragItem"],
console.log('点击当前节点===',node);
this.curNode=node;//当前选中节点
this.nodePath=data.path;//当前选择数
this.curNodeIconCls=node.data.iconCls;
console.log('当前节点的文件夹路径:',this.nodePath);
if(node.data.leaf){
......
src/views/output-dialog/table-out.vue
......@@ -16,7 +16,7 @@
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="基本配置" name="content">
<database-choose ref="databaseChoose" :form="tableOutForm"></database-choose>
<database-choose ref="databaseChoose" :form="tableOutForm" :getXmlVal="getXmlVal" :graph="newGraph"></database-choose>
<el-form-item label="提交记录数量:">
<el-row :gutter="10">
<el-col :span="23">
......@@ -140,11 +140,6 @@
<el-button style="padding: 3px 0" type="text">获取字段</el-button>
<el-button style="padding: 3px 0" type="text">输入字段映射</el-button> -->
</div>
<!-- <el-table style="width: 100%" border :data="tableData2">
<template v-for="(item,index) in tableHead2">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
</template>
</el-table> -->
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- <table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list> -->
......@@ -156,32 +151,16 @@
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form" :model="fieldForm" label-width="80px">
<!-- <el-checkbox-group v-model="checkedCities" style="width:100%;">
<el-checkbox > -->
<el-form-item label="表字段:">
<el-select v-model="fieldForm.column_name" style="width: 100%" @focus="tableFields">
<el-option v-for="(item,index) in fieldsList1" :key="index" :label="item.name" :value="item.name"></el-option>
<!-- <el-option label="不去掉空格" value="none"></el-option>
<el-option label="去掉左空格" value="left"></el-option>
<el-option label="去掉右空格" value="right"></el-option>
<el-option label="去掉左右两端空格" value="both"></el-option> -->
<el-option v-for="(item,index) in fieldsList1" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<!-- </el-checkbox> -->
<!-- <el-checkbox > -->
<el-form-item label="流字段:">
<el-select v-model="fieldForm.stream_name" style="width: 100%" @focus="inputOutputFields">
<el-select v-model="fieldForm.stream_name" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
<!-- <el-option label="不去掉空格" value="none"></el-option>
<el-option label="去掉左空格" value="left"></el-option>
<el-option label="去掉右空格" value="right"></el-option>
<el-option label="去掉左右两端空格" value="both"></el-option> -->
</el-select>
</el-form-item>
<!-- </el-checkbox>
</el-checkbox-group> -->
</el-form>
<span slot="footer" class="dialog-footer">
......@@ -291,6 +270,7 @@ export default ({
column_name: '关晓彤',
}
],
newGraph:{} //获取的画布对象
// 表头数据
// tableHead2:[
......@@ -323,8 +303,10 @@ export default ({
},
created(){
// this.dialogOpen();
console.log(this.graph,'=========');
},
watch:{
tableOutForm:{
// deep:true,
......@@ -338,9 +320,17 @@ export default ({
}
},
graph(n,o){
console.log("表输出拿到的画布1111===",n);
}
},
methods:{
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph
this.$refs.databaseChoose.clickFun(graph)
},
confirm(){
this.tableOutForm.label=this.doubleClickCell.title;
this.tableOutForm.fields=JSON.stringify(this.tableData);//字段复值
......
src/views/output-dialog/text-file-output.vue
......@@ -147,11 +147,12 @@
<el-form-item label="分隔符:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="textFileForm.separator"></el-input>
<!-- <el-input v-model="textFileForm.separator" value="textFileForm.separator"></el-input> -->
<el-input v-model="textFileForm.separator" :value="textFileForm.separator"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">插入TAB</el-button></el-col
<el-button size="mini" @click="setTAB">插入TAB</el-button></el-col
>
</el-row>
</el-form-item>
......@@ -706,7 +707,14 @@ export default ({
}
})
},
// 插入TAB
setTAB(){
var tab=this.textFileForm.separator;
tab='\t'+tab;
this.textFileForm.separator=tab;
console.log('分隔符============',this.textFileForm.separator);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment