Skip to content

E
ETL-admin
Commit 31fb4075 by 莫晓莉
Options

作业通用组件的保存回显

parent 9b343e11
Showing with 2744 additions and 26 deletions
src/api/kettle/file.js
......@@ -294,6 +294,23 @@ export function getValueFormatStore(data) {
method: 'post'
})
}
// 获取日志级别列表
export function getLogLevelList(data) {
return request({
url: 'etlweb/system/logLevel',
data,
method: 'post'
})
}
// 获取变量有效范围
export function getVariableType(data) {
return request({
url: 'etlweb/system/variableType',
data,
method: 'post'
})
}
......
src/api/kettle/link.js
......@@ -148,7 +148,14 @@ export function steps(data){
method: 'post'
})
}
//etl工具列表--通用
export function jobentrys(data){
return request({
url: 'etlweb/system/jobentrys',
data,
method: 'post'
})
}
//表格类型
......@@ -290,7 +297,7 @@ export function compressionProviderNames(data){
//保存
//保存转换流程图
export function save(data){
return request({
url: 'etlweb/trans/save',
......@@ -298,6 +305,16 @@ export function save(data){
method: 'post'
})
}
// 保存作业流程图
export function saveJob(data){
return request({
url: 'etlweb/job/save',
data,
method: 'post'
})
}
//文件绝对路径
......@@ -327,6 +344,16 @@ export function newStep(data){
method: 'post'
})
}
//获取弹框作业xml
export function newJobEntry(data){
return request({
url: 'etlweb/job/newJobEntry',
data,
method: 'post'
})
}
......
src/main.js
......@@ -77,6 +77,7 @@ Vue.prototype.R = R
Vue.config.productionTip = false
const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
Vue.prototype.etlWeb = "http://147.1.3.180:9888/ETLWEB-SERVER/etlweb/"
// Vue.prototype.etlWeb = "http://192.168.0.44:9888/ETLWEB-SERVER/etlweb/"
new Vue({
router,
......
src/views/dashboard-kettle/components/designer/modules/node_menu2.vue
......@@ -22,12 +22,13 @@
</div>
</template>
<script>
import { steps } from "@/api/kettle/link";
import { steps,jobentrys } from "@/api/kettle/link";
export default {
name: "nodeMenu2",
data() {
return {
curNodeType:"",
defaultProps: {
children: "children",
label: "text",
......@@ -40,24 +41,33 @@ export default {
},
components: {},
created() {
this.stepsFun()
this.stepsFun();
console.log(this.etlWeb,"yghjhkjhsakjhgkjashgkjsh");
},
mounted() {
},
beforeUpdate(){
this.$emit('shooStatus',true)
},
// beforeUpdate(){
// this.$emit('shooStatus',true)
// },
methods: {
stepsFun() {
let pamer = new FormData(); // 创建form对象
pamer.append("node", "xnode-12");
this.$forceUpdate();
// this.$forceUpdate();
steps(pamer).then((res) => {
this.data = res;
});
},
jobentrysFun(){
let pamer = new FormData(); // 创建form对象
pamer.append("node", "xnode-13");
// this.$forceUpdate();
jobentrys(pamer).then((res) => {
this.data = res;
});
}
},
};
</script>
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -891,9 +891,16 @@
:fileVisible.sync="fileVisible"
:getXmlVal="getXmlVal" :saveOutputDialog="saveOutputDialog" :textFileForm="outPutFormData8" :doubleClickCell="doubleClickCell"></textFileDialog>
<microDialog ref="mic" :microVisible.sync="microVisible" :saveOutputDialog="saveOutputDialog" :microForm="outPutFormData9" :doubleClickCell="doubleClickCell"></microDialog>
<!-- 输出弹窗end================== -->
<!-- 作业弹窗组件start----------------------------------->
<trans ref="mytrans" :jobTransVisible.sync="myjobTransVisible" :saveOutputDialog="saveOutputDialog" :jobTransFormSend="outPutFormData13" :doubleClickCell="doubleClickCell"></trans>
<homeworkDialog ref="myhomework" :jobHomeworkVisible.sync="jobHomeworkVisible" :saveOutputDialog="saveOutputDialog" :jobWorkFormSend="outPutFormData11" :doubleClickCell="doubleClickCell"></homeworkDialog>
<setvalue ref="mySet" :jobSetVisible.sync="jobSetVisible" :saveOutputDialog="saveOutputDialog" :setFormSend="outPutFormData12" :doubleClickCell="doubleClickCell"></setvalue>
<startDialog ref="myStart" :jobStartVisible.sync="jobStartVisible" :saveOutputDialog="saveOutputDialog" :startFormSend="outPutFormData10" :doubleClickCell="doubleClickCell"></startDialog>
<successDialog ref="myStart" :jobSuccessVisible.sync="jobSuccessVisible" :saveOutputDialog="saveOutputDialog" :setFormSend="outPutFormData6" :doubleClickCell="doubleClickCell"></successDialog>
<!-- 输出弹窗end================== -->
<!-- 作业弹窗组件end------------------------------------->
<trans-graph
ref="transRef"
:transGraphVisible.sync="transGraphVisible"
......@@ -939,8 +946,10 @@ import {
availableCharsets,
valueFormat,
valueMeta,
save,
save,//保存转换的流程图
saveJob,//保存作业的流程图
newStep,
newJobEntry,
previewData
} from "@/api/kettle/link";
// 输入弹窗
......@@ -964,6 +973,15 @@ import textFileDialog from "../../../output-dialog/text-file-output";
import microDialog from "../../../output-dialog/micro-excel";
// 输出弹窗end********************************************
// 作业弹窗组件开始---------------------------------------
import trans from "../../../job-dialog/trans";
import setvalue from "../../../job-dialog/set-value";
import startDialog from "../../../job-dialog/start";
import successDialog from "../../../job-dialog/success";
import homeworkDialog from "../../../job-dialog/homework";
// 作业弹窗组件结束---------------------------------------
import mxgraph from "@/utils/mxgraph";
const {
......@@ -993,13 +1011,11 @@ export default {
data() {
return {
curFileType:"transformation",//当前点击的文件的类型，默认是转换文件--mxl
nodeData:[],
dataBrowsing:[],
dataField:[],
dataFlow:false,
dataFlow:false,
myoutPutFormData:{},
outPutFormData1:{},
outPutFormData2:{},
......@@ -1010,6 +1026,10 @@ dataFlow:false,
outPutFormData7:{},
outPutFormData8:{},
outPutFormData9:{},
outPutFormData10:{},//作业---start
outPutFormData11:{},//作业---作业
outPutFormData12:{},//作业---设置变量
outPutFormData13:{},//作业---转换
outPutFormData:{},//输出弹窗组件的表单值
doubleClickCell:{},
getField:[],
......@@ -1037,6 +1057,14 @@ dataFlow:false,
fileVisible: false,
microVisible: false,
// mxl=================================
// 作业弹窗组件数据start-------
jobStartVisible:false,
jobDummyVisible:false,
jobHomeworkVisible:false,
jobSetVisible:false,
myjobTransVisible:false,
jobSuccessVisible:false,
// 作业弹窗组件数据end----------
// 输入模块
file: [],
......@@ -1120,6 +1148,13 @@ dataFlow:false,
textFileDialog,
microDialog,
// 弹窗组件end***********************
// 作业弹窗组件start-------------------
trans,
setvalue,
startDialog,
successDialog,
homeworkDialog
// 作业弹簧组件end----------------------
},
//自定义指令 https://www.jb51.net/article/108047.htm
directives: {
......@@ -1159,6 +1194,7 @@ dataFlow:false,
watch: {
blankCanvas(n, o) {
this.monitorCanvas = n;
// this.setShowXml();
this.setXml();
this.getXml();
},
......@@ -1195,7 +1231,27 @@ dataFlow:false,
methods: {
// setShowXml() {
// this.graph.getModel().beginUpdate();
// try {
// var doc = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
// var codec = new mxCodec(doc);
// var style = new Object();
// style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
// style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
// style[mxConstants.STYLE_IMAGE] = 'editors/images/bigicon/start_event_empty.png';
// style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
// style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
// style[mxConstants.STYLE_FONTCOLOR] = '#000000';
// style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_CENTER;
// this.graph.getStylesheet().putCellStyle('start-s', style);
// codec.decode(doc.documentElement, this.graph.getModel());
// } finally {
// this.graph.getModel().endUpdate();
// }
// },
getTheField(){
this.form.file = JSON.stringify(this.file)
......@@ -1471,6 +1527,14 @@ dataFlow:false,
this.createGraph();
this.initToolbar();
},
// 回显重新实现拖拽左边工具栏到右边
initGraphClick(type){
let domArr = document.querySelectorAll('[key-id="123"]');
this.curFileType=type;
// this.createGraph();
this.initToolbar();
// this.initGraph();
},
handleNodeClick(e, node, i) {
this.$forceUpdate();
},
......@@ -1540,6 +1604,15 @@ previousField(){
return;
}
// var node = mxUtils.load(this.etlWeb+'mxgraph2/style/default-style.xml?_dc='+new Date().getTime()).getDocumentElement();
// var dec = new mxCodec(node.ownerDocument);
// dec.decode(node, graph.getStylesheet());
// var node = mxUtils.load('http://localhost:8088/web/mxgraph2/style/default-style.xml?_dc=1618968809382').getDocumentElement();
// var dec = new mxCodec(node.ownerDocument);
// dec.decode(node, this.graph.getStylesheet());
// new mxRubberband(this.graph);
this.graph.setConnectable(true); // 允许连线
this.graph.setCellsEditable(false); // 不可修改
......@@ -1550,12 +1623,35 @@ previousField(){
this.graph.setDisconnectOnMove(false);
this.graph.setMultigraph(false);
this.graph.convertValueToString = (cell) => {
var label = cell.getAttribute("label");
// var icon = cell.getAttribute(cell.style.split("image="))
if(label) {
if(cell.isEdge() && cell.value.nodeName == 'TransHop') {
return '<img src="' + label + '" width="16" height="16" />';
} else if(cell.isEdge() && cell.value.nodeName == 'JobHop') {
console.log(label,'label');
var jsonArray = JSON.parse(label), label = '';
jsonArray.forEach(img=>{
label += '<img src="' + img + '" width="16" height="16" />';
})
return label;
} else {
return decodeURIComponent(label);
}
}
return label;
// console.log(cell.value.attributes,99999999999999);
// if (!cell.title && cell.value) {
// console.log("======11=",cell.value);
......@@ -1597,8 +1693,23 @@ previousField(){
// return this.R.prop("title", cell);
};
//监听连线
this.graph.addListener(mxEvent.CELLS_ADDED,(graph,evt)=>{
var cells = evt.getProperty('cells');
console.log(cells,'cells');
cells.forEach(item=>{
if(item.isEdge() && !item.value) {
this.newHop(item);
}
})
})
this.graph.addListener(mxEvent.DOUBLE_CLICK, (graph, evt) => {
console.log(evt);
console.log("当前点击的文件类型****************",this.curFileType);
// this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
this.graphXml = this.encode(this.graph);
......@@ -1701,7 +1812,7 @@ previousField(){
return;
} else if (
cell.ids == "step5" ||
(this.curFileType=="transformation" && cell.ids == "step5") ||
cell.value.attributes.ctype.value == "DataGrid"
) {
this.ConstantDialog = !this.ConstantDialog;
......@@ -1717,7 +1828,7 @@ previousField(){
this.form = q;
return;
} else if (
cell.ids == "step4" ||
(this.curFileType=="transformation" && cell.ids == "step4") ||
cell.value.attributes.ctype.value == "RandomValue"
) {
this.RandomValueDialog = !this.RandomValueDialog;
......@@ -1747,7 +1858,8 @@ previousField(){
this.form = q;
return;
} else if (
cell.ids == "step2" ||
(this.curFileType=="transformation" &&
cell.ids == "step2") ||
cell.value.attributes.ctype.value == "TextFileInput"
) {
this.TextFileInputDialog = !this.TextFileInputDialog;
......@@ -1775,14 +1887,19 @@ previousField(){
//表输出
this.tableOutPutVisible = !this.tableOutPutVisible;
this.outPutFormData1 = this.showDataFunc();
setTimeout(() => {
this.$refs.tableOutPut.clickFun(this.graph);
}, 500);
// this.$refs.tableOutPut.clickFun(this.graph);
return;
} else if (cell.ids == "step16" || cell.value.attributes.ctype.value == "Update" ) {
//更新
this.updateVisible = !this.updateVisible;
this.outPutFormData4 = this.showDataFunc();
// this.$refs.update.clickFun(this.graph);//向子组件传递画布
setTimeout(() => {
this.$refs.update.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
} else if (cell.ids == "step15" || cell.value.attributes.ctype.value == "TextFileOutput" ) {
//文本文件输出
......@@ -1806,7 +1923,10 @@ previousField(){
//删除
this.deleteVisible = !this.deleteVisible;
this.outPutFormData6 = this.showDataFunc();
setTimeout(() => {
this.$refs.del.clickFun(this.graph);//向子组件传递画布
}, 500);
// this.$refs.del.clickFun(this.graph);//向子组件传递画布
return;
} else if (cell.ids == "step11" || cell.value.attributes.ctype.value == "SQLFileOutput" ) {
//SQL文件输出
......@@ -1830,6 +1950,48 @@ previousField(){
this.$refs.excelOut.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}else if(( this.curFileType=="job" && cell.ids == "SPECIAL" ) || cell.value.attributes.ctype.value == "SPECIAL"){
// 通用--start
this.jobStartVisible = !this.jobStartVisible;
this.outPutFormData10 = this.showDataFunc();
setTimeout(() => {
this.$refs.myStart.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}else if(this.curFileType=="job" && cell.ids == "step1"){
// cell.value.attributes.ctype.value == "SPECIAL"
// 通用--DUMMY
setTimeout(() => {
this.jobDummyVisible = !this.jobDummyVisible;
}, 500);
return;
}else if((this.curFileType=="job" && cell.ids == "step2") || cell.value.attributes.ctype.value == "JOB"){
// 通用--作业
this.jobHomeworkVisible = !this.jobHomeworkVisible;
this.outPutFormData11 = this.showDataFunc();
setTimeout(() => {
this.$refs.myhomework.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}else if( (this.curFileType=="job" && cell.ids == "step4") || cell.value.attributes.ctype.value == "SET_VARIABLES" ){
// 通用--设置变量
this.jobSetVisible = !this.jobSetVisible;
this.outPutFormData12 = this.showDataFunc();
setTimeout(() => {
this.$refs.mySet.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}else if( (this.curFileType=="job" && cell.ids == "step5") || cell.value.attributes.ctype.value == "TRANS" ){
//作业--通用--转换
this.myjobTransVisible = !this.myjobTransVisible;
this.outPutFormData13 = this.showDataFunc();
setTimeout(() => {
this.$refs.mytrans.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}
});
......@@ -1842,6 +2004,43 @@ previousField(){
});
},
//添加自定义节点
newHop(cell) {
var doc = mxUtils.createXmlDocument();
var hop = doc.createElement('JobHop');
hop.setAttribute('from', cell.source.getAttribute('label'));
hop.setAttribute('to', cell.target.getAttribute('label'));
hop.setAttribute('from_nr', cell.source.getAttribute('nr'));
hop.setAttribute('to_nr', cell.target.getAttribute('nr'));
cell.setValue(hop);
console.log('cell',cell);
var graph = this.graph;
graph.getModel().beginUpdate();
try
{
var edit = new mxCellAttributeChange(cell, 'enabled', 'Y');
graph.getModel().execute(edit);
edit = new mxCellAttributeChange(cell, 'evaluation', 'Y');
graph.getModel().execute(edit);
if(cell.source.getAttribute('ctype') == 'SPECIAL' && cell.source.getAttribute('start') == 'Y') {
edit = new mxCellAttributeChange(cell, 'unconditional', 'Y');
graph.getModel().execute(edit);
} else {
edit = new mxCellAttributeChange(cell, 'unconditional', 'N');
graph.getModel().execute(edit);
}
} finally
{
graph.getModel().endUpdate();
}
},
// 回显数据封装的方法
showDataFunc() {
let q = {};
......@@ -1882,6 +2081,7 @@ previousField(){
pameStep.append("graphXml", this.getXmlVal);
pameStep.append("pluginId", toolItem.pluginId);
pameStep.append("name", toolItem.title);
if(this.curFileType=="transformation"){
newStep(pameStep).then((res) => {
this.boxInformation = res;
var doc = mxUtils.parseXml(res);
......@@ -1910,6 +2110,39 @@ previousField(){
}
this.getXml();
});
}else if(this.curFileType=="job"){
// pameStep.append("name", encodeURIComponent(toolItem.title));
newJobEntry(pameStep).then((res) => {
this.boxInformation = res;
var doc = mxUtils.parseXml(res);
this.graph.getModel().beginUpdate();
try {
var cell = this.graph.insertVertex(
this.graph.getDefaultParent(),
null,
doc.documentElement,
x,
y,
width,
height,
style
);
console.log(cell, 4564564564);
console.log(toolItem, 111111111111111111);
cell.title = toolItem["title"];
cell.ids = toolItem["id"];
// cell.pluginId = toolItem["pluginId"];
// cell.icon = toolItem["icon"];
this.graph.setSelectionCells([cell]);
} finally {
this.graph.getModel().endUpdate();
}
this.getXml();
});
}
} finally {
this.graph.getModel().endUpdate();
}
......@@ -2171,16 +2404,27 @@ previousField(){
// 保存
let pamers = new FormData(); // 创建form对象
pamers.append("graphXml", encodeURIComponent(this.graphXml));
// 判断是报错作业的流程图还是保存转换的流程图
if(this.curFileType=="transformation"){
save(pamers).then((res) => {
console.log(res);
if (res.success) {
this.$message.success("保存流程成功！暂时请查先看控制台。");
} else {
}
});
}else if(this.curFileType=="job"){
saveJob(pamers).then((res) => {
console.log(res);
if (res.success) {
this.$message.success("保存流程成功！暂时请查先看控制台。");
} else {
}
});
}
},
// 执行转换
......
src/views/dialogs-components/global/export-tree-choose/index.js 0 → 100644
import main from './main.vue'
export default main
\ No newline at end of file
src/views/dialogs-components/global/export-tree-choose/main.vue 0 → 100644
<template>
<div>
<!-- 浏览 -->
<el-dialog
title="资源库导出"
:visible.sync="exportDialogVisible"
width="650px"
top="15%"
:close-on-click-modal="false"
:before-close="handleCloseScan"
>
<!-- 文件夹存放区域start-->
<el-tree
:data="exTreeList"
:auto-expand-parent="true"
:default-expand-all="false"
node-key="id"
ref="tree"
:props="defaultProps"
:highlight-current="true"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span style="display: flex; align: center">
<div
:class="data.iconCls"
style="
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
"
width=""
alt=""
></div>
{{ node.label }}
</span>
</span>
</el-tree>
<!-- 文件夹存放区域end -->
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="handleClose">取 消</el-button> -->
<el-button type="primary" @click="confirmChoose()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { exptree,expRespository,download } from "@/api/kettle/file";
export default {
name: "export-tree-choose",
data() {
return {
exTreeList:[],
defaultProps: {
label: "text",
children: "children",
},
checkedArr:[],
curChooseNode:null,//当前选择的节点
}
},
props:["exportDialogVisible","path","formName","directoryPath","myForm"],
created() {
this.exptree();
},
methods: {
//获取导出资源库树
exptree() {
let data = new FormData();
data.append("loadElement", 3);
data.append("node", "root");
exptree(data).then((res) => {
if (res) {
console.log("导出资源库树列表：", res);
this.exTreeList = res;
} else {
this.$message.error(res.errMsg);
}
});
},
// getCheckedNodes() {
// console.log('当前勾选的所有数据',this.$refs.tree.getCheckedNodes());
// var allCheckedsNodes=this.$refs.tree.getCheckedNodes();
// var checkedNodes=allCheckedsNodes.filter((item)=>{
// return item.children==null
// });
// var checkArr=[];
// checkedNodes.forEach(element => {
// var myObj={};
// myObj.path=element.path;
// myObj.type=element.type;
// checkArr.push(myObj);
// });
// this.checkedArr=checkArr;
// console.log('当前选择文件====',this.checkedArr);
// },
// //导出资源库
// expRespository() {
// if(this.checkedArr.length==0){
// this.$message.error('请先选择要导出文件');
// }
// let data = new FormData();
// data.append("data",JSON.stringify(this.checkedArr) );
// expRespository(data).then((res) => {
// if (res) {
// console.log("导出资源库：", res);
// // var link = document.createElement("a");
// // link.style.display = "none";
// // link.href = url;
// // link.setAttribute("download", "下载名称");
// // document.body.appendChild(link);
// // link.click();
// var url=this.etlWeb+`attachment/download?filePath=${res.message}&remove=true`
// window.open(url);
// } else {
// this.$message.error(res.errMsg);
// }
// });
// },
handleCloseScan() {
this.$emit("update:exportDialogVisible", false);
},
// 点击选择当前节点
handleNodeClick(data,node){
console.log('点击当前节点node===',node);
console.log('点击当前节点data===',data);
// var arr=[{node:node}]
this.curChooseNode=node;
// this.$emit("getSonValue", this.curChooseNode); //组件要传回父组件的值,关闭弹窗
},
confirmChoose() {
if(this.curChooseNode.isLeaf){
console.log(this.formName,1);
var curName=this.formName;
this.myForm[curName]=this.curChooseNode.data.text;
var myname=this.curChooseNode.data.text;
var mypath=this.curChooseNode.data.path;
console.log(mypath,2);
console.log(mypath.length,3);
console.log(myname.length,4);
this.myForm[this.directoryPath]=mypath.substring(0,mypath.length-myname.length );
console.log(mypath.substring(0,mypath.lenth-myname.length ));
console.log(this.myForm);
this.$emit("myForm",this.myForm);
// this.$emit("update:fileDialogVisible", false);
this.handleCloseScan();
}else{
this.$message.error("请选择文件下的节点!");
}
},
},
};
</script>
<style>
.type-checked {
background-color: #8888ff;
color: #fff;
}
</style>
src/views/job-dialog/homework.vue 0 → 100644
<template>
<div>
<el-dialog
title="作业"
:visible.sync="jobHomeworkVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="refForm" :model="myForm" label-width="200px">
<el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="作业设置" name="first">
<el-radio-group v-model="myForm.specification_method" style="width:100%;">
<!-- <el-radio-group v-model="myForm.specification_method" style="width:100%;" @change="radioChoose"> -->
<div style="position:relative;border:1px solid #b5b8c8;">
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="filename" >作业文件名</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="myForm.filename" :disabled="myForm.specification_method=='filename'? false:true"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button :disabled="myForm.specification_method=='filename'? false:true" size="mini" @click="chooseFile('filename')">选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;margin:10px auto;">
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="rep_name" >通过目录与名称指定转换</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10" label-width="100px">
<el-col :span="22">
<el-input :disabled="myForm.specification_method=='rep_name'? false:true" v-model="myForm.directory"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="20">
<el-input :disabled="myForm.specification_method=='rep_name'? false:true" v-model="myForm.jobname"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button :disabled="myForm.specification_method=='rep_name'? false:true" size="mini" @click="chooseExportTreeDialog('directory','jobname')">选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;">
<el-form-item label-width="100px" >
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="rep_ref" >通过引用指定作业</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px" >
<el-row :gutter="10">
<el-col :span="20">
<el-input :disabled="myForm.specification_method=='rep_ref'? false:true" v-model="myForm.referenceName"></el-input>
</el-col>
<!-- <el-col class="line" :span="3">
<el-button :disabled="myForm.specification_method=='rep_ref'? false:true" size="mini" @click="chooseFile('template_filename')">选择</el-button></el-col> -->
</el-row>
</el-form-item>
</div>
<el-button size="mini" style="margin-top:10px;">新建转换</el-button>
</el-radio-group>
</el-tab-pane>
<el-tab-pane label="高级" name="second">
<el-form-item label="复制上一步结果到位置参数:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.arg_from_previous" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="复制上一步结果到命名参数:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.params_from_previous" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="执行每一个输入行:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.exec_per_row" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="远程从服务器:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.slave_server_name" style="width: 100%">
<el-option v-for="(item,index) in codeList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="等待远程作业执行结束:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.wait_until_finished" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Expand child jobs and transformations on the:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.expandingRemoteJob" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="将作业执行结果发送到从服务器上:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.passingExport" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="本地作业终止时远程作业也通知终止:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.follow_abort_remote" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="日志设置" name="third">
<el-form-item label="指定日志文件:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.set_logfile" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="添加到日志文件尾:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox :disabled="myForm.set_logfile=='Y'? false:true" v-model="myForm.set_append_logfile" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志文件名:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="myForm.logfile" :disabled="myForm.set_logfile=='Y'? false:true"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini" @click="chooseFile('logfile')" :disabled="myForm.set_logfile=='Y'? false:true">浏览</el-button></el-col
>
</el-row>
</el-form-item>
<el-form-item label="创建父文件夹:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox :disabled="myForm.set_logfile=='Y'? false:true" v-model="myForm.create_parent_folder" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志文件后缀名:">
<el-row :gutter="10">
<el-col :span="23">
<el-input :disabled="myForm.set_logfile=='Y'? false:true" v-model="myForm.logext"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志级别:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.loglevel" style="width: 100%">
<el-option v-for="(item,index) in logLevelList" :key="index" :label="item.desc" :value="item.code"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="位置参数" name="fourth ">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClick(true)">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除全部</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form1" :model="fieldForm" label-width="80px">
<el-form-item label="位置参数:">
<el-input v-model="fieldForm.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<el-tab-pane label="命名" name="fifth">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickUpdate">新增字段</el-button>
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsUpdate">删除全部</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields('update')">获取字段</el-button> -->
</div>
<table-list :tableHead="tableHeadUpdate" :tableData="tableDataUpdate" :field.sync="editDiaUpdate" :fieldClick="fieldClickUpdate"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="fieldUpdate"
width="500px"
:before-close="handleCloseEditUpdate"
append-to-body>
<el-form ref="form" :model="fieldFormUpdate" label-width="80px">
<el-form-item label="命名参数:">
<el-input v-model="fieldFormUpdate.name"></el-input>
</el-form-item>
<el-form-item label="流列名:">
<el-input v-model="fieldFormUpdate.stream_name"></el-input>
</el-form-item>
<el-form-item label="值:">
<el-input v-model="fieldFormUpdate.value"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Update = false">取 消</el-button>
<el-button type="primary" @click="addFieldUpdate">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
</el-tabs>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="jobHomeworkVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
<!-- 浏览选择文件 -->
<file-tree :fileDialogVisible.sync="fileDialogVisible" :excelForm="myForm" :formName="formName"></file-tree>
<!-- 数据库浏览 -->
<export-tree-choose ref="exDialog" :exportDialogVisible.sync="exportDialogVisible" :myForm="myForm" :formName="formName" :directoryPath="choosePath"></export-tree-choose>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
formatFunc,//获取已经创建的数据库列表
getCodeList,//获取编码列表
getFontname,//表头字体
getFontunderline,//表头字体下划线
getFontoriention,//表头字体方向
getFontcolor,//表头字体颜色
getFontalignment,//表头对齐方式
// getFontname,//数据字体
getValueMetaStore,
getValueFormatStore,
inputOutputFields,
getLogLevelList,//获取日志级别列表
} from "@/api/kettle/file";
export default ({
data(){
return{
logLevelList:[],//日志级别列表
exportDialogVisible:false,//导出资源库
radioTreaty:'0',
myForm:this.jobWorkFormSend,//自定义
newGraph:{},
metaStoreList:[],//类型
formatStoreList:[],//字段格式
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
fieldUpdate:false,//更新弹窗
editDiaUpdate:false,//更新字段
fieldFormUpdate:{},//更新弹窗
fileDialogVisible:false,//选择文件夹弹窗
formName:'',
choosePath:'',
stepName:{
name:"Excel输出"
},
activeName:'first',
// 表头数据
tableHead:[
{
column_name: "name",column_comment:"位置参数"
},
// {
// column_name: "type",column_comment:"类型"
// },
// {
// column_name: "format",column_comment:"格式"
// }
],
// 表格数据
tableData: [
// {
// name: '31',
// type: '鞠婧祎',
// format: '女'
// },
// {
// name: '32',
// type: '鞠婧祎',
// format: '女'
// },
// {
// name: '33',
// type: '鞠婧祎',
// format: '女'
// },
],
formatTimeList:[],//时间日期格式
codeList:[],//编码
headFontList:[],//表头字体
headFontUnderlineList:[],//表头字体下划线
entionList:[],//表头字体方向
colorList:[],//表头字体颜色
alignList:[],//表头对齐方式
// fontNameList:[]//数据字体
// 更新字段start------------
// 表头数据
tableHeadUpdate:[
{
column_name: "name",column_comment:"命名参数"
},
{
column_name: "stream_name",column_comment:"流列名"
},
{
column_name: "value",column_comment:"值"
},
],
// 表格数据
tableDataUpdate: [
],
// 更新字段end-------------------
}
},
props:["jobHomeworkVisible","jobWorkFormSend","excelOutPutVisible","saveOutputDialog","doubleClickCell"],
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
jobWorkFormSend(val){
console.log("回显的表单数据===",val);
this.myForm=val;
if(val.arguments){
var ny=JSON.parse(val.arguments);
this.tableData=ny;
}
if(val.parameters){
var na=JSON.parse(val.parameters);
this.tableDataUpdate=na;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
created(){
// this.formatFunc();//获取时间日期格式
// this.getCodeList();//获取编码列表
// this.getFontname();//表头字体
// this.getFontunderline();//表头字体下划线
// this.getFontoriention();//表头字体方向
// this.getFontcolor();//表头字体颜色
// this.getFontalignment();//表头对齐方式
// this.getFontname();//数据字体
this.getLogLevelList();//获取日志级别
},
methods:{
// 获取日志级别
getLogLevelList(){
var formData = new FormData();
formData.append('query', '');
getLogLevelList(formData).then(res=>{
if (res) {
console.log('获取日志级别==',res);
this.logLevelList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// radioChoose(val){
// let that = this
// switch(val){
// case 0:
// this.myForm.specification_method="filename";
// break;
// case 1:
// this.myForm.specification_method="rep_name";
// break;
// case 2:
// this.myForm.specification_method="rep_ref";
// break;
// }
// },
clickFun(graph){
console.log(graph,1)
this.newGraph = graph
},
handleClose(){
this.$emit("update:jobHomeworkVisible", false);
},
// clickFunc(){
// this.formatFunc();
// },
//时间日期格式
// formatFunc(){
// var formData = new FormData();
// formData.append('query', '');
// formatFunc(formData).then(res=>{
// if (res) {
// console.log('时间日期格式==',res);
// this.formatTimeList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 获取编码列表
// getCodeList(){
// var formData = new FormData();
// formData.append('query', '');
// getCodeList(formData).then(res=>{
// if (res) {
// console.log('编码列表==',res);
// this.codeList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 获取表头字体
// getFontname(){
// var formData = new FormData();
// formData.append('query', '');
// getFontname(formData).then(res=>{
// if (res) {
// console.log('表头字体==',res);
// this.headFontList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 表头字体下划线
// getFontunderline(){
// var formData = new FormData();
// formData.append('query', '');
// getFontunderline(formData).then(res=>{
// if (res) {
// console.log('表头字体下划线==',res);
// this.headFontUnderlineList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 表头字体方向
// getFontoriention(){
// var formData = new FormData();
// formData.append('query', '');
// getFontoriention(formData).then(res=>{
// if (res) {
// console.log('表头字体方向==',res);
// this.entionList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 表头字体颜色
// getFontcolor(){
// var formData = new FormData();
// formData.append('query', '');
// getFontcolor(formData).then(res=>{
// if (res) {
// console.log('表头字体方向==',res);
// this.colorList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 表头对齐方式
// getFontalignment(){
// var formData = new FormData();
// formData.append('query', '');
// getFontalignment(formData).then(res=>{
// if (res) {
// console.log('表头对齐方式==',res);
// this.alignList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
//选择文件夹
chooseFile(name){
console.log("选择文件浏览----",name);
this.formName=name;//当前哪个属性需要选择文件夹
this.fileDialogVisible=true;
},
confirm(){
// console.log('步骤名称==：',this.stepName);
// this.excelForm.label=this.stepName.name;
this.myForm.arguments=JSON.stringify(this.tableData);//更新字段
this.myForm.parameters=JSON.stringify(this.tableDataUpdate);//更新字段
console.log('弹窗数据:',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
// 获取字段类型
// getValueMetaStore(){
// var formData = new FormData();
// formData.append('query', '');
// getValueMetaStore(formData).then(res=>{
// if (res) {
// console.log('字段类型==',res);
// this.metaStoreList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 获取格式
// getValueFormatStore(){
// var formData = new FormData();
// formData.append('valueType', 'all');
// getValueFormatStore(formData).then(res=>{
// if (res) {
// console.log('字段格式==',res);
// this.formatStoreList=res;
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 获取字段
inputOutputFields(){
if(this.doubleClickCell){
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
// this.fieldsList2=res;
this.tableData=res;
})
},
//删除全部
deleteFields(){
this.tableData=[];
},
//删除全部
deleteFieldsUpdate(){
this.tableDataUpdate=[];
},
//新增或者编辑弹窗-----更新start------------------
fieldClickUpdate(state, val) {
this.fieldUpdate = !this.fieldUpdate;
this.dataState = state;
if (state) {
this.fieldFormUpdate = {};
} else {
this.fieldFormUpdate = val;
}
},
//关闭编辑的弹窗
handleCloseEditUpdate(){
this.fieldUpdate = !this.fieldUpdate;
},
// 字段
addFieldUpdate() {
this.fieldUpdate = !this.fieldUpdate;
console.log('添加的字段===',this.fieldFormUpdate);
if (this.dataState) {
this.tableDataUpdate.push(this.fieldFormUpdate);
}
},
// -----更新end------------------
// 作业start--------------------------------
chooseExportTreeDialog(path,name){
this.choosePath=path;
this.formName=name;//当前哪个属性需要选择文件夹
console.log('导出资源库====');
this.exportDialogVisible=true;
}
// 作业end----------------------------------
}
})
</script>
<style >
.el-form-item--small.el-form-item{
margin-bottom:5px !important;
}
</style>
\ No newline at end of file
src/views/job-dialog/set-value.vue 0 → 100644
<template>
<div>
<el-dialog
title="设置变量"
:visible.sync="jobSetVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="delForm" :model="myForm" label-width="200px">
<el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item>
<div style="position:relative;border:1px solid #b5b8c8;margin-top:15px;padding:15px 0;">
<div style="position:absolute;top:-15px;left:20px;color:#15428b;background-color:#fff;padding:5px 10px;">属性文件</div>
<el-form-item label="属性文件名:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.filename"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="变量有效范围:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.fileVariableType" style="width: 100%">
<el-option v-for="(item,index) in fileVariableTypeList" :key="index" :label="item.desc" :value="item.code"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;margin-top:15px;padding:15px 0;margin-bottom:15px;">
<div style="position:absolute;top:-15px;left:20px;color:#15428b;background-color:#fff;padding:5px 10px;">设置</div>
<el-form-item label="变量替换:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.replaceVars" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>变量</span>
<el-button style="padding: 3px 0;margin-left:50px;" type="text" @click="fieldClick(true)">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields('get')">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除全部</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form1" :model="fieldForm" label-width="80px">
<el-form-item label="变量名:">
<el-input v-model="fieldForm.variableName"></el-input>
</el-form-item>
<el-form-item label="值:">
<el-input v-model="fieldForm.variableValue"></el-input>
</el-form-item>
<el-form-item label="变量活动类型:">
<el-select v-model="fieldForm.variableType" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fileVariableTypeList" :key="index" :label="item.desc" :value="item.code"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
tableFields,
inputOutputFields,//获取表输出
getVariableType,//获取变量有效范围
} from "@/api/kettle/file";
export default ({
data(){
return{
fileVariableTypeList:[],//获取变量有效范围
myForm:{},//解决子组件改变父组件传递props属性报错
newGraph:{},
fieldsList1:[],
fieldsList2:[],
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
stepName:{name:'删除'},
activeName:'content',
// deleteForm:{
// commit: "100",
// connection: "",
// key:"[]",
// label:"删除",
// schema: "",
// table: "",
// },
// 查询字段--start------------
fieldsList:[],//字段获取
keyConditionList:[{value: '=', text: '='},
{value: '<>', text: '<>'},
{value: '<', text: '<'},
{value: '<=', text: '<='},
{value: '>', text: '>'},
{value: '>=', text: '>='},
{value: 'LIKE', text: 'LIKE'},
{value: 'BETWEEN', text: 'BETWEEN'},
{value: 'IS NULL', text: 'IS NULL'},
{value: 'IS NOT NULL', text: 'IS NOT NULL'}],
// 表头数据
tableHead:[
{
column_name: "variableName",column_comment:"变量名"
},
{
column_name: "variableValue",column_comment:"值"
},
{
column_name: "variableType",column_comment:"变量活动类型"
},
// {
// column_name: "name2",column_comment:"流里的字段2"
// }
],
// 表格数据
tableData: [
// {
// field: '3',
// condition: '鞠婧祎',
// name: '女',
// name2:'1',
// },
// {
// field: '31',
// condition: '鞠婧祎',
// name: '女',
// name2:'1',
// },
// {
// field: '32',
// condition: '鞠婧祎',
// name: '女',
// name2:'1',
// },
],
// 查询字段--end------------
}
},
// watch:{
// deleteForm(n,o){
// console.log("回显的表单数据===",n);
// if(n){
// var ny=JSON.parse(n.key);
// this.tableData=ny;
// }
// }
// },
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
setFormSend(val){
console.log("回显的表单数据===",val);
this.myForm=val;
if(this.myForm.fields){
var ny=JSON.parse(this.myForm.fields);
this.tableData=ny;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
props:["title","nodePath","jobSetVisible","doubleClickCell","saveOutputDialog","setFormSend","getXmlVal"],
mounted(){
},
created(){
this.getVariableType();
},
methods:{
// 获取变量有效范围
getVariableType(){
var formData = new FormData();
formData.append('query', '');
getVariableType(formData).then(res=>{
if (res) {
console.log('获取变量有效范围==',res);
this.fileVariableTypeList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph;
},
handleClose(){
this.$emit("update:jobSetVisible", false);
},
confirm(){
// this.deleteForm.label=this.doubleClickCell.title;
this.myForm.fields=JSON.stringify(this.tableData);//字段复值
console.log('弹窗数据：===',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
tableFields(){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
// pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// pamer.append("before", true);
// pamer.append("query", '');
pamer.append("databaseName", this.deleteForm.connection);
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("schema", this.deleteForm.schema);
pamer.append("table", this.deleteForm.table);
pamer.append("query", '');
tableFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList1=res;
})
},
//获取表输出
inputOutputFields(par){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
if(par=="get"){
var newArray=[];
res.forEach(item => {
var newObj={};
newObj.field=item.name;
newObj.condition="=";
newObj.name=item.name;
newObj.name2="";
newArray.push(newObj);
});
this.tableData=newArray;
}else{
this.fieldsList2=res;
}
})
},
//删除全部
deleteFields(){
this.tableData=[];
},
}
})
</script>
\ No newline at end of file
src/views/job-dialog/start.vue 0 → 100644
<template>
<div>
<el-dialog
title="作业定时调度"
:visible.sync="jobStartVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="delForm" :model="myForm" label-width="200px">
<el-form-item label="重复:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.repeat" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="类型:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.schedulerType" style="width: 100%">
<el-option v-for="(item,index) in typeList" :key="index" :label="item.text" :value="item.value"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="以秒计算的间隔:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.intervalSeconds"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="以分钟计算的间隔:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.intervalMinutes"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="每天:">
<el-row :gutter="10">
<el-col :span="12">
<el-input v-model="myForm.hour"></el-input>
</el-col>
<el-col :span="11">
<el-input v-model="myForm.minutes"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="每周:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.weekDay"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="每周:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.dayOfMonth"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="jobStartVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
tableFields,
inputOutputFields,//获取表输出
} from "@/api/kettle/file";
export default ({
data(){
return{
myForm:{},//解决子组件改变父组件传递props属性报错
typeList:[{value: '0', text: '不需要定时'},
{value: '1', text: '时间间隔'},
{value: '2', text: '天'},
{value: '3', text: '周'},
{value: '4', text: '月'}],//类型写死
newGraph:{},
}
},
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
startFormSend(val){
console.log("回显的表单数据===",val);
this.myForm=val;
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
props:["jobStartVisible","doubleClickCell","saveOutputDialog","startFormSend"],
mounted(){
},
methods:{
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph;
},
handleClose(){
this.$emit("update:jobStartVisible", false);
},
confirm(){
// this.deleteForm.key=JSON.stringify(this.tableData);//字段复值
console.log('弹窗数据：===',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
}
})
</script>
\ No newline at end of file
src/views/job-dialog/success.vue 0 → 100644
<template>
<div>
<el-dialog
title="成功"
:visible.sync="jobSuccessVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="delForm" :model="deleteForm" label-width="150px">
<el-form-item label="步骤名称:">
<el-input v-model="deleteForm.label"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
tableFields,
inputOutputFields,//获取表输出
} from "@/api/kettle/file";
export default ({
data(){
return{
deleteForm:{},//解决子组件改变父组件传递props属性报错
newGraph:{},
fieldsList1:[],
fieldsList2:[],
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
stepName:{name:'删除'},
activeName:'content',
// deleteForm:{
// commit: "100",
// connection: "",
// key:"[]",
// label:"删除",
// schema: "",
// table: "",
// },
// 查询字段--start------------
fieldsList:[],//字段获取
keyConditionList:[{value: '=', text: '='},
{value: '<>', text: '<>'},
{value: '<', text: '<'},
{value: '<=', text: '<='},
{value: '>', text: '>'},
{value: '>=', text: '>='},
{value: 'LIKE', text: 'LIKE'},
{value: 'BETWEEN', text: 'BETWEEN'},
{value: 'IS NULL', text: 'IS NULL'},
{value: 'IS NOT NULL', text: 'IS NOT NULL'}],
// 表头数据
tableHead:[
{
column_name: "field",column_comment:"变量名"
},
{
column_name: "condition",column_comment:"值"
},
{
column_name: "name",column_comment:"变量活动类型"
},
// {
// column_name: "name2",column_comment:"流里的字段2"
// }
],
// 表格数据
tableData: [
// {
// field: '3',
// condition: '鞠婧祎',
// name: '女',
// name2:'1',
// },
// {
// field: '31',
// condition: '鞠婧祎',
// name: '女',
// name2:'1',
// },
// {
// field: '32',
// condition: '鞠婧祎',
// name: '女',
// name2:'1',
// },
],
// 查询字段--end------------
}
},
// watch:{
// deleteForm(n,o){
// console.log("回显的表单数据===",n);
// if(n){
// var ny=JSON.parse(n.key);
// this.tableData=ny;
// }
// }
// },
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
deleteFormSend(val){
console.log("回显的表单数据===",val);
this.deleteForm=val;
if(this.deleteForm.key){
var ny=JSON.parse(this.deleteForm.key);
this.tableData=ny;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
props:["title","nodePath","jobSuccessVisible","doubleClickCell","saveOutputDialog","setFormSend","getXmlVal"],
// props:{
// title:{
// type:String,
// default:''
// },
// nodePath:{
// type:String,
// default:''
// },
// deleteVisible:{
// type: Boolean,
// default:false
// },
// },
mounted(){
},
// created(){
// // 深拷贝解决第一次不执行
// this.newform=JSON.parse(JSON.stringify(this.form));
// },
methods:{
// 数据库重置
fatherFun(param){
console.log("触发了父组件的方法=----",param);
//数据库
if(param.connection == this.deleteFormSend.connection){
console.log(2)
this.deleteForm = this.deleteFormSend
if(param.table == this.deleteFormSend.table){
console.log(4)
this.tableData = JSON.parse(this.deleteFormSend.fields)
}else{
console.log(6)
this.tableData = []
}
}else{
console.log(3)
this.deleteForm = param
this.tableData = []
console.log(5)
}
// 判断返回来有没有改变连接和表有就重置数据库start-------
// if(param.changeConnection ==true || param.changeConnection==="true"){
// this.tableData=[];
// console.log('触发了父组件的方法改变连接=----',this.tableData)
// }else{
// if(param.changeSchema){
// }else{
// var ny=JSON.parse(param.key);
// this.tableData=ny;
// }
// if(param.changeTable ==true || param.changeConnection==="true"){
// this.tableData=[];
// console.log('触发了父组件的方法改变表=----',this.tableData)
// }else{
// var ny=JSON.parse(param.key);
// this.tableData=ny;
// }
// }
// 判断返回来有没有改变连接和表有就重置数据库end-------
},
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph;
// setTimeout(() => {
// this.$refs.databaseChoose.clickFun(this.newGraph);
// }, 500);
},
handleClose(){
this.$emit("update:jobSetVisible", false);
},
confirm(){
// this.deleteForm.label=this.doubleClickCell.title;
this.deleteForm.key=JSON.stringify(this.tableData);//字段复值
console.log('弹窗数据：===',this.deleteForm);
this.saveOutputDialog(this.deleteForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
tableFields(){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
// pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// pamer.append("before", true);
// pamer.append("query", '');
pamer.append("databaseName", this.deleteForm.connection);
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("schema", this.deleteForm.schema);
pamer.append("table", this.deleteForm.table);
pamer.append("query", '');
tableFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList1=res;
})
},
//获取表输出
inputOutputFields(par){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
if(par=="get"){
var newArray=[];
res.forEach(item => {
var newObj={};
newObj.field=item.name;
newObj.condition="=";
newObj.name=item.name;
newObj.name2="";
newArray.push(newObj);
});
this.tableData=newArray;
}else{
this.fieldsList2=res;
}
})
},
//删除全部
deleteFields(){
this.tableData=[];
},
}
})
</script>
\ No newline at end of file
src/views/job-dialog/trans.vue 0 → 100644
<template>
<div>
<el-dialog
title="转换"
:visible.sync="jobTransVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="refForm" :model="myForm" label-width="200px">
<el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="转换设置" name="first">
<el-radio-group v-model="myForm.specification_method" style="width:100%;" >
<div style="position:relative;border:1px solid #b5b8c8;">
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="filename" >转换文件名</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="myForm.filename" :disabled="myForm.specification_method=='filename'? false:true"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini" :disabled="myForm.specification_method=='filename'? false:true" @click="chooseFile('filename')">选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;margin:10px auto;">
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="rep_name" >通过目录与名称指定转换</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10" label-width="100px">
<el-col :span="22">
<el-input :disabled="myForm.specification_method=='rep_name'? false:true" v-model="myForm.directory"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="20">
<el-input :disabled="myForm.specification_method=='rep_name'? false:true" v-model="myForm.jobname"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button :disabled="myForm.specification_method=='rep_name'? false:true" size="mini" @click="chooseExportTreeDialog('directory','jobname')">选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;">
<el-form-item label-width="100px" >
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="rep_ref">通过引用指定转换</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px" >
<el-row :gutter="10">
<el-col :span="20">
<el-input :disabled="myForm.specification_method=='rep_ref'? false:true" v-model="myForm.referenceName"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini" :disabled="myForm.specification_method=='rep_ref'? false:true" v-model="myForm.referenceName" >选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<el-button size="mini" style="margin-top:10px;">新建转换</el-button>
</el-radio-group>
</el-tab-pane>
<el-tab-pane label="高级" name="second">
<el-form-item label="复制上一步结果到位置参数:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.arg_from_previous" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="复制上一步结果到命名参数:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.params_from_previous" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="在执行前清除结果文件列表:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.clear_files" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="在集群模式下运行这个转换:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.cluster" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="执行每一个输入行:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.exec_per_row" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Log remote execution locally:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.logging_remote_work" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="远程从服务器:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.slave_server_name" style="width: 100%">
<el-option v-for="(item,index) in codeList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="等待远程转换执行结束:" label-width="250px">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.wait_until_finished" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="本地转换终止时远程转换也通知终止:" label-width="250px">
<!-- <el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.follow_abort_remote"></el-input>
</el-col>
</el-row> -->
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.follow_abort_remote" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="日志设置" name="third">
<el-form-item label="指定日志文件:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.set_logfile" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="添加到日志文件尾:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox :disabled="myForm.set_logfile=='Y'? false:true" v-model="myForm.set_append_logfile" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志文件名:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="myForm.logfile" :disabled="myForm.set_logfile=='Y'? false:true"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini" @click="chooseFile('logfile')" :disabled="myForm.set_logfile=='Y'? false:true">浏览</el-button></el-col
>
</el-row>
</el-form-item>
<el-form-item label="创建父文件夹:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox :disabled="myForm.set_logfile=='Y'? false:true" v-model="myForm.create_parent_folder" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志文件后缀名:">
<el-row :gutter="10">
<el-col :span="23">
<el-input :disabled="myForm.set_logfile=='Y'? false:true" v-model="myForm.logext"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志级别:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.loglevel" style="width: 100%">
<el-option v-for="(item,index) in logLevelList" :key="index" :label="item.desc" :value="item.code"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="位置参数" name="fourth ">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClick(true)">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除全部</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form1" :model="fieldForm" label-width="80px">
<el-form-item label="位置参数:">
<el-input v-model="fieldForm.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<el-tab-pane label="命名" name="fifth">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickUpdate">新增字段</el-button>
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsUpdate">删除全部</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields('update')">获取字段</el-button> -->
</div>
<table-list :tableHead="tableHeadUpdate" :tableData="tableDataUpdate" :field.sync="editDiaUpdate" :fieldClick="fieldClickUpdate"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="fieldUpdate"
width="500px"
:before-close="handleCloseEditUpdate"
append-to-body>
<el-form ref="form" :model="fieldFormUpdate" label-width="80px">
<el-form-item label="命名参数:">
<el-input v-model="fieldFormUpdate.name"></el-input>
</el-form-item>
<el-form-item label="流列名:">
<el-input v-model="fieldFormUpdate.stream_name"></el-input>
</el-form-item>
<el-form-item label="值:">
<el-input v-model="fieldFormUpdate.value"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Update = false">取 消</el-button>
<el-button type="primary" @click="addFieldUpdate">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
</el-tabs>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="excelOutPutVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
<!-- 浏览选择文件 -->
<file-tree :fileDialogVisible.sync="fileDialogVisible" :excelForm="myForm" :formName="formName"></file-tree>
<!-- 数据库浏览 -->
<export-tree-choose ref="exDialog" :exportDialogVisible.sync="exportDialogVisible" :myForm="myForm" :formName="formName" :directoryPath="choosePath"></export-tree-choose>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
formatFunc,//获取已经创建的数据库列表
getCodeList,//获取编码列表
getFontname,//表头字体
getFontunderline,//表头字体下划线
getFontoriention,//表头字体方向
getFontcolor,//表头字体颜色
getFontalignment,//表头对齐方式
// getFontname,//数据字体
getValueMetaStore,
getValueFormatStore,
inputOutputFields,
getLogLevelList
} from "@/api/kettle/file";
export default ({
data(){
return{
logLevelList:[],//日志级别列表
exportDialogVisible:false,//导出资源库
radioTreaty:'0',
myForm:this.jobTransFormSend,//自定义
newGraph:{},
metaStoreList:[],//类型
formatStoreList:[],//字段格式
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
fieldUpdate:false,//更新弹窗
editDiaUpdate:false,//更新字段
fieldFormUpdate:{},//更新弹窗
fileDialogVisible:false,//选择文件夹弹窗
formName:'',
choosePath:'',
stepName:{
name:"Excel输出"
},
activeName:'first',
// 表头数据
tableHead:[
{
column_name: "name",column_comment:"位置参数"
},
// {
// column_name: "type",column_comment:"类型"
// },
// {
// column_name: "format",column_comment:"格式"
// }
],
// 表格数据
tableData: [
// {
// name: '31',
// type: '鞠婧祎',
// format: '女'
// },
// {
// name: '32',
// type: '鞠婧祎',
// format: '女'
// },
// {
// name: '33',
// type: '鞠婧祎',
// format: '女'
// },
],
formatTimeList:[],//时间日期格式
codeList:[],//编码
headFontList:[],//表头字体
headFontUnderlineList:[],//表头字体下划线
entionList:[],//表头字体方向
colorList:[],//表头字体颜色
alignList:[],//表头对齐方式
// fontNameList:[]//数据字体
// 更新字段start------------
// 表头数据
tableHeadUpdate:[
{
column_name: "name",column_comment:"命名参数"
},
{
column_name: "stream_name",column_comment:"流列名"
},
{
column_name: "value",column_comment:"值"
},
],
// 表格数据
tableDataUpdate: [
],
// 更新字段end-------------------
}
},
props:["jobTransVisible","jobTransFormSend","title","excelOutPutVisible","saveOutputDialog","doubleClickCell"],
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
jobTransFormSend(val){
console.log("回显的表单数据===",val);
this.myForm=val;
if(val.arguments){
var ny=JSON.parse(val.arguments);
this.tableData=ny;
}
if(val.parameters){
var na=JSON.parse(val.parameters);
this.tableDataUpdate=na;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
created(){
this.getLogLevelList();//获取日志级别
// this.formatFunc();//获取时间日期格式
// this.getCodeList();//获取编码列表
// this.getFontname();//表头字体
// this.getFontunderline();//表头字体下划线
// this.getFontoriention();//表头字体方向
// this.getFontcolor();//表头字体颜色
// this.getFontalignment();//表头对齐方式
// this.getFontname();//数据字体
},
methods:{
// 获取日志级别
getLogLevelList(){
var formData = new FormData();
formData.append('query', '');
getLogLevelList(formData).then(res=>{
if (res) {
console.log('获取日志级别==',res);
this.logLevelList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
clickFun(graph){
console.log(graph,1)
this.newGraph = graph
},
handleClose(){
this.$emit("update:jobTransVisible", false);
},
// clickFunc(){
// this.formatFunc();
// },
//时间日期格式
formatFunc(){
var formData = new FormData();
formData.append('query', '');
formatFunc(formData).then(res=>{
if (res) {
console.log('时间日期格式==',res);
this.formatTimeList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 获取编码列表
getCodeList(){
var formData = new FormData();
formData.append('query', '');
getCodeList(formData).then(res=>{
if (res) {
console.log('编码列表==',res);
this.codeList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 获取表头字体
getFontname(){
var formData = new FormData();
formData.append('query', '');
getFontname(formData).then(res=>{
if (res) {
console.log('表头字体==',res);
this.headFontList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 表头字体下划线
getFontunderline(){
var formData = new FormData();
formData.append('query', '');
getFontunderline(formData).then(res=>{
if (res) {
console.log('表头字体下划线==',res);
this.headFontUnderlineList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 表头字体方向
getFontoriention(){
var formData = new FormData();
formData.append('query', '');
getFontoriention(formData).then(res=>{
if (res) {
console.log('表头字体方向==',res);
this.entionList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 表头字体颜色
getFontcolor(){
var formData = new FormData();
formData.append('query', '');
getFontcolor(formData).then(res=>{
if (res) {
console.log('表头字体方向==',res);
this.colorList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 表头对齐方式
getFontalignment(){
var formData = new FormData();
formData.append('query', '');
getFontalignment(formData).then(res=>{
if (res) {
console.log('表头对齐方式==',res);
this.alignList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
//选择文件夹
chooseFile(name){
this.formName=name;//当前哪个属性需要选择文件夹
this.fileDialogVisible=true;
},
confirm(){
this.myForm.arguments=JSON.stringify(this.tableData);//更新字段
this.myForm.parameters=JSON.stringify(this.tableDataUpdate);//更新字段
console.log('弹窗数据:',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
// 获取字段类型
getValueMetaStore(){
var formData = new FormData();
formData.append('query', '');
getValueMetaStore(formData).then(res=>{
if (res) {
console.log('字段类型==',res);
this.metaStoreList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 获取格式
getValueFormatStore(){
var formData = new FormData();
formData.append('valueType', 'all');
getValueFormatStore(formData).then(res=>{
if (res) {
console.log('字段格式==',res);
this.formatStoreList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 获取字段
inputOutputFields(){
if(this.doubleClickCell){
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
// this.fieldsList2=res;
this.tableData=res;
})
},
//删除全部
deleteFields(){
this.tableData=[];
},
//删除全部
deleteFieldsUpdate(){
this.tableDataUpdate=[];
},
//新增或者编辑弹窗-----更新start------------------
fieldClickUpdate(state, val) {
this.fieldUpdate = !this.fieldUpdate;
this.dataState = state;
if (state) {
this.fieldFormUpdate = {};
} else {
this.fieldFormUpdate = val;
}
},
//关闭编辑的弹窗
handleCloseEditUpdate(){
this.fieldUpdate = !this.fieldUpdate;
},
// 字段
addFieldUpdate() {
this.fieldUpdate = !this.fieldUpdate;
console.log('添加的字段===',this.fieldFormUpdate);
if (this.dataState) {
this.tableDataUpdate.push(this.fieldFormUpdate);
}
},
// -----更新end------------------
// 作业start--------------------------------
chooseExportTreeDialog(path,name){
this.choosePath=path;
this.formName=name;//当前哪个属性需要选择文件夹
console.log('导出资源库====');
this.exportDialogVisible=true;
}
// 作业end----------------------------------
}
})
</script>
<style >
.el-form-item--small.el-form-item{
margin-bottom:5px !important;
}
</style>
\ No newline at end of file
src/views/kettle/home2.vue
......@@ -86,7 +86,8 @@
<el-tab-pane label="核心对象" name="second" v-if="tabShowFlag">
<div class="sel-content">
<!-- 核心对象 -->
<nodeMenu2 @shooStatus="shooStatus"></nodeMenu2>
<!-- <nodeMenu2 ref="nodeMenu2" @shooStatus="shooStatus"></nodeMenu2> -->
<nodeMenu2 ref="nodeMenu2" ></nodeMenu2>
</div>
</el-tab-pane>
</el-tabs>
......@@ -96,7 +97,8 @@
<el-tabs v-if="tabShowFlag" style="margin-top:-5vh;margin-bottom:0;" v-model="picName" type="card" closable @tab-remove="removeTab">
<!-- <el-tab-pane label="数据库名称" > -->
<el-tab-pane :label="curNodeText" >
<mxgraph-designer ref="pic" v-if="mxGraphShow" :blankCanvas="blankCanvas"></mxgraph-designer>
<!-- <mxgraph-designer ref="pic" v-if="mxGraphShow" :blankCanvas="blankCanvas"></mxgraph-designer> -->
<mxgraph-designer ref="graphContainer" :blankCanvas="blankCanvas"></mxgraph-designer>
</el-tab-pane>
</el-tabs>
......@@ -1240,6 +1242,7 @@ props: ["dragItem"],
this.$message.success('删除成功');
// 刷新
this.explorer('');
this.$refs.graphContainer.createGraph();//刷新画布
}
})
......@@ -1256,11 +1259,28 @@ props: ["dragItem"],
this.curNodeText=node.data.text;//当前节点
let pamer = new FormData(); // 创建form对象
pamer.append("path", this.nodePath);
pamer.append("type", "transformation");
// pamer.append("type", "transformation");
pamer.append("type", node.data.type);
open(pamer).then(res=>{
// console.log(res,'返回空白画布xml');
this.blankCanvas = res;
// this.tabShowFlag=true;//核心对象显项卡显示
//mxl判断作业和转换----------------------
if(node.data.type=="transformation"){
this.$refs.nodeMenu2.stepsFun();
let that=this;
setTimeout(function(){
that.$refs.graphContainer.initGraphClick("transformation");
},500)
}else if(node.data.type=="job"){
this.$refs.nodeMenu2.jobentrysFun();
let that=this;
setTimeout(function(){
that.$refs.graphContainer.initGraphClick("job");
},500)
}
// mxl判断作业和转换---------------------------
this.activeName="second";
// var xmlDocument = mxUtils.parseXml(res);
......
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