Skip to content

E
ETL-admin
Commit 4fab0b48 by 李耀锟
Options

完成输入工具模块

parent 5230c886
Showing with 305 additions and 131 deletions
src/api/kettle/link.js
...@@ -342,5 +342,14 @@ export function logout(data){ ...@@ -342,5 +342,14 @@ export function logout(data){
}) })
} }
// 获取数据库字段
export function previewData(data){
return request({
url:'etlweb/trans/previewData',
data,
method: 'post'
})
}
src/views/dashboard-kettle/components/appBulletFrame/customConstant.vue
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
</el-form-item> </el-form-item>
<el-form-item label="类型:"> <el-form-item label="类型:">
<el-select v-model="metadataForm.type" style="width: 100%"> <el-select v-model="metadataForm.type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldType" v-for="item in fieldType"
:key="item.index" :key="item.index"
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
</el-form-item> </el-form-item>
<el-form-item label="格式:"> <el-form-item label="格式:">
<el-select v-model="metadataForm.format" style="width: 100%"> <el-select v-model="metadataForm.format" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldFormat" v-for="item in fieldFormat"
:key="item.index" :key="item.index"
......
src/views/dashboard-kettle/components/appBulletFrame/generatingRecords.vue
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
</el-form-item> </el-form-item>
<el-form-item label="类型:"> <el-form-item label="类型:">
<el-select v-model="metadataForm.type" style="width: 100%"> <el-select v-model="metadataForm.type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldType" v-for="item in fieldType"
:key="item.id" :key="item.id"
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
</el-form-item> </el-form-item>
<el-form-item label="格式:"> <el-form-item label="格式:">
<el-select v-model="metadataForm.format" style="width: 100%"> <el-select v-model="metadataForm.format" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldFormat" v-for="item in fieldFormat"
:key="item.index" :key="item.index"
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
</el-form-item> </el-form-item>
<el-form-item label="设为空？:"> <el-form-item label="设为空？:">
<el-select v-model="metadataForm.nullable" style="width: 100%"> <el-select v-model="metadataForm.nullable" style="width: 100%" clearable>
<el-option label="非空" value="N"></el-option> <el-option label="非空" value="N"></el-option>
<el-option label="空" value="Y"></el-option> <el-option label="空" value="Y"></el-option>
</el-select> </el-select>
......
src/views/dashboard-kettle/components/appBulletFrame/getSystemInformation.vue
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</el-form-item> </el-form-item>
<el-form-item label="类型:"> <el-form-item label="类型:">
<el-select v-model="fiel.type" style="width: 100%"> <el-select v-model="fiel.type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in type" v-for="item in type"
:key="item.code" :key="item.code"
......
src/views/dashboard-kettle/components/appBulletFrame/randomNumber.vue
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</el-form-item> </el-form-item>
<el-form-item label="类型:"> <el-form-item label="类型:">
<el-select v-model="fiel.type" style="width: 100%"> <el-select v-model="fiel.type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in random" v-for="item in random"
:key="item.type" :key="item.type"
......
src/views/dashboard-kettle/components/appBulletFrame/tableInput.vue
...@@ -15,9 +15,13 @@ ...@@ -15,9 +15,13 @@
style="width: 100%" style="width: 100%"
@change="getField" @change="getField"
@focus="getGraphDataBases" @focus="getGraphDataBases"
clearable
> >
<el-option <el-option
v-for="(item,index) in namesList" :key="index" :label="item.name" :value="item.name" v-for="(item, index) in namesList"
:key="index"
:label="item.name"
:value="item.name"
/> />
</el-select> </el-select>
<!-- <el-select v-model="form.connection" style="width: 100%" @change="getField()"> <!-- <el-select v-model="form.connection" style="width: 100%" @change="getField()">
...@@ -30,12 +34,12 @@ ...@@ -30,12 +34,12 @@
</el-select> --> </el-select> -->
</el-col> </el-col>
<el-col class="line" :span="2"> <el-col class="line" :span="2">
<el-button size="mini" @click="dialogVisibleFourthFun" <el-button size="mini" @click.native="dialogVisibleFourthFun"
>编辑</el-button >编辑</el-button
></el-col ></el-col
> >
<el-col class="line" :span="2"> <el-col class="line" :span="2">
<el-button size="mini" @click="dialogVisibleFourthNew" <el-button size="mini" @click.native="dialogVisibleFourthNew"
>新建</el-button >新建</el-button
></el-col ></el-col
> >
...@@ -43,7 +47,7 @@ ...@@ -43,7 +47,7 @@
<el-button size="mini">向导</el-button></el-col <el-button size="mini">向导</el-button></el-col
> >
<el-col class="line" :span="5"> <el-col class="line" :span="5">
<el-button size="mini" @click="SQLPopup" <el-button size="mini" @click.native="SQLPopup"
>获取SQL查询语句</el-button >获取SQL查询语句</el-button
></el-col ></el-col
> >
...@@ -72,7 +76,12 @@ ...@@ -72,7 +76,12 @@
</el-form-item> </el-form-item>
<el-form-item label="从步骤插入数据:"> <el-form-item label="从步骤插入数据:">
<el-select v-model="form.lookup" style="width: 100%"> <el-select
v-model="form.lookup"
style="width: 100%"
clearable
@click.native="lastStep"
>
<el-option <el-option
v-for="item in connectionNode" v-for="item in connectionNode"
:key="item.id" :key="item.id"
...@@ -101,6 +110,7 @@ ...@@ -101,6 +110,7 @@
width="500px" width="500px"
:before-close="handleClose" :before-close="handleClose"
:modal="false" :modal="false"
v-if="browsing"
> >
<el-tree <el-tree
:data="browsingData" :data="browsingData"
...@@ -135,6 +145,8 @@ ...@@ -135,6 +145,8 @@
</span> </span>
</el-dialog> </el-dialog>
<estab-dialog <estab-dialog
ref="establishDia" ref="establishDia"
:dialogVisibleFourth.sync="dialogVisibleFourth" :dialogVisibleFourth.sync="dialogVisibleFourth"
...@@ -143,9 +155,10 @@ ...@@ -143,9 +155,10 @@
:scanDialogVisible.sync="scanDialogVisible" :scanDialogVisible.sync="scanDialogVisible"
:chooseType="chooseType" :chooseType="chooseType"
:chooseFlag.sync="chooseFlag" :chooseFlag.sync="chooseFlag"
:form.sync="form" :form.sync="form"
:getXmlVal="getXmlVal" :getXmlVal="getXmlVal"
:graph="graph" :noneRespository="noneRespository"
:graph.sync="newGraph"
></estab-dialog> ></estab-dialog>
<!-- <database-choose ref="databaseChoose" :form.sync="tableOutForm" :getXmlVal="getXmlVal" :graph="newGraph"></database-choose> --> <!-- <database-choose ref="databaseChoose" :form.sync="tableOutForm" :getXmlVal="getXmlVal" :graph="newGraph"></database-choose> -->
...@@ -153,29 +166,48 @@ ...@@ -153,29 +166,48 @@
</template> </template>
<script> <script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph;
import main from "../../../mykettle/main"; import main from "../../../mykettle/main";
import { import {
tableFields, tableFields,
explorer2, explorer2,
listDatabases, listDatabases,
listNames, listNames,
previousSteps,
} from "@/api/kettle/link"; } from "@/api/kettle/link";
export default { export default {
props: ["connectionNode", "stepName", "form", "graphXml","getXmlVal","graph"], //从父组件传过来的值 props: [ "stepName", "form", "graphXml", "getXmlVal","nodeData","graph"], //从父组件传过来的值
components: { components: {
main, main,
}, },
data() { data() {
return { return {
tableDetails:{}, connectionNode:[],
dataFlow: false,
tableDetails: {},
connectionName: "", connectionName: "",
browsing: false, browsing: false,
dialogVisibleFourth: false, dialogVisibleFourth: false,
scanDialogVisible: false, scanDialogVisible: false,
newForm: {}, newForm: {},
namesList:[], namesList: [],
noneRespository: 1, //判断是保存画布还是传后台
newGraph: {},
ComboBox: [], ComboBox: [],
library: [], library: [],
PopupFrom: {}, PopupFrom: {},
...@@ -186,7 +218,7 @@ export default { ...@@ -186,7 +218,7 @@ export default {
label: "text", label: "text",
}, },
dataBaseName: "", formDataBaseName: "",
curNode: {}, curNode: {},
chooseType: "表", chooseType: "表",
chooseFlag: false, chooseFlag: false,
...@@ -196,28 +228,26 @@ export default { ...@@ -196,28 +228,26 @@ export default {
created() { created() {
this.listDatabasesFun(); this.listDatabasesFun();
}, // 监听编号好后获取选择的数据库的树形里列表 }, // 监听编号好后获取选择的数据库的树形里列表
watch: { // watch: {
dataBaseName: { // formDataBaseName: {
handler(newValue, oldValue) { // handler(newValue, oldValue) {
console.log("obj changed"); // console.log("obj changed");
if (newValue) { // if (newValue) {
this.$refs.establishDia.scanDialogOpen(); // this.$refs.establishDia.scanDialogOpen();
this.chooseFlag = true; // this.chooseFlag = true;
} // }
}, // },
deep: true, // deep: true,
}, // form(newValue, oldValue){ //   this.form=newValue; // } // }, // form(newValue, oldValue){ //   this.form=newValue; // }
}, // },
methods: { methods: {
clickFun(graph) {
console.log(graph, 1);
clickFun(graph){ this.newGraph = graph;
console.log(graph,1) setTimeout(() => {
this.graph = graph this.$refs.establishDia.clickFun(graph, 121331);
setTimeout(() => { }, 500);
this.$refs.establishDia.clickFun(graph,121331); },
}, 500);
},
tableInputName() { tableInputName() {
this.stepName; this.stepName;
...@@ -226,8 +256,8 @@ export default { ...@@ -226,8 +256,8 @@ export default {
//  //获取新建弹窗返回来的值 //  //获取新建弹窗返回来的值
getSonValue(res) { getSonValue(res) {
if (typeof res == "string") { if (typeof res == "string") {
this.dataBaseName = res; this.formDataBaseName = res;
console.log("接收子组件的值1111111----", this.dataBaseName); console.log("接收子组件的值1111111----", this.formDataBaseName);
} else if (typeof res == "object") { } else if (typeof res == "object") {
console.log("接收子组件的值55555----", res); console.log("接收子组件的值55555----", res);
this.curNode = res; // DOM 更新后 // this.$nextTick(() => { //   this.form.text=this.curNode.data.text; //   // this.$refs.goal.values=this.curNode.data.text; //   // this.$refs.goal.refreshData(this.from) // }) // this.form.text=this.curNode.data.text; this.curNode = res; // DOM 更新后 // this.$nextTick(() => { //   this.form.text=this.curNode.data.text; //   // this.$refs.goal.values=this.curNode.data.text; //   // this.$refs.goal.refreshData(this.from) // }) // this.form.text=this.curNode.data.text;
...@@ -266,14 +296,14 @@ export default { ...@@ -266,14 +296,14 @@ export default {
// }, // },
//获取新建弹窗返回来的值 //获取新建弹窗返回来的值
getGraphDataBases(){ getGraphDataBases() {
// var graph = this.getGraph(); // var graph = this.getGraph();
var root = this.graph.getDefaultParent(), data = []; var root = this.newGraph.getDefaultParent(),
if(root.getAttribute('databases') != null) data = [];
data=JSON.parse(root.getAttribute('databases')); if (root.getAttribute("databases") != null)
console.log('获取到画布上的databases====',data); data = JSON.parse(root.getAttribute("databases"));
this.namesList=data; console.log("获取到画布上的databases====", data);
this.namesList = data;
}, },
// 查询已经建立的所有数据库列表 // 查询已经建立的所有数据库列表
listNames() { listNames() {
...@@ -286,44 +316,83 @@ export default { ...@@ -286,44 +316,83 @@ export default {
} }
}); });
}, },
dialogVisibleFourthNew() { dialogVisibleFourthNew() {
this.dialogVisibleFourth = true; this.dialogVisibleFourth = true;
// this.$refs.establishDia.database(); // this.$refs.establishDia.database();
// this.$refs.establishDia.accessMethod(); //获取连接方式 // this.$refs.establishDia.accessMethod(); //获取连接方式
this.$refs.establishDia.clickFun(this.graph);//先把画布传过去 this.$refs.establishDia.clickFun(this.newGraph); //先把画布传过去
this.$refs.establishDia.getTransDatabase(); this.$refs.establishDia.getTransDatabase();
this.$refs.establishDia.accessMethod();//获取连接方式 this.$refs.establishDia.accessMethod(); //获取连接方式
}, },
dialogVisibleFourthFun() { dialogVisibleFourthFun() {
this.dialogVisibleFourth = true; this.dialogVisibleFourth = true;
// this.$refs.establishDia.database(this.connectionName); // this.$refs.establishDia.database(this.connectionName);
this.$refs.establishDia.clickFun(this.graph);//先把画布传过去 this.$refs.establishDia.clickFun(this.newGraph); //先把画布传过去
if(this.selectName){ if (this.form.connection) {
this.dialogVisibleFourth=true; this.dialogVisibleFourth = true;
this.$refs.establishDia.getTransDatabase(this.form.connection);
this.$refs.establishDia.accessMethod(); //获取连接方式
} }
// this.$refs.establishDia.database(this.selectName); // this.$refs.establishDia.database(this.selectName);
this.$refs.establishDia.getTransDatabase(this.selectName);
this.$refs.establishDia.accessMethod();//获取连接方式 },
lastStep() {
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.newGraph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerSteps = new FormData(); // 创建form对象
pamerSteps.append("stepName", this.nodeData.value.attributes.label.value);
pamerSteps.append("graphXml", this.graphXml);
pamerSteps.append("query", "");
previousSteps(pamerSteps).then((res) => {
this.connectionNode = res;
});
}, },
getField(val) { getField(val) {
this.library = this.ComboBox.find((e) => { this.library = this.namesList.find((e) => {
return e.name == val; return e.name == val;
}); });
console.log(this.library); console.log(this.library, "////////////////////////");
this.connectionName = val; this.connectionName = val;
}, },
addBrowsing() { addBrowsing() {
this.browsing = false; this.browsing = false;
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.newGraph.getModel());
var grXml = mxUtils.getPrettyXml(node);
let mps = new FormData(); // 创建form对象 let mps = new FormData(); // 创建form对象
mps.append("graphXml", this.graphXml); mps.append("graphXml", grXml);
mps.append("databaseName", this.library.name); mps.append("databaseName", this.library.name);
mps.append("schema", "test"); mps.append("schema", this.tableDetails.nodeId);
mps.append("table", this.tableDetails.text); mps.append("table", this.tableDetails.text);
tableFields(mps).then((res) => { tableFields(mps).then((res) => {
console.log(res); // console.log(res);
for (let i = 0; i < res.length; i++) {
const element = res[i].name;
// this.fieldName = this.fieldName + element + ","
if (!i == 0) {
this.fieldName = this.fieldName + "," + element;
} else {
this.fieldName = element;
}
console.log(this.fieldName, 464564564);
}
this.form.sql = `select ${this.fieldName} from ${this.tableDetails.nodeId}.${this.tableDetails.text}`;
}); });
}, },
...@@ -331,38 +400,6 @@ export default { ...@@ -331,38 +400,6 @@ export default {
if (this.form.connection) { if (this.form.connection) {
this.browsing = !this.browsing; this.browsing = !this.browsing;
this.scanFlag = true; this.scanFlag = true;
// let pamq = new FormData(); // 创建form对象
// pamq.append("databaseInfo", JSON.stringify(this.library));
// pamq.append("nodeId", "");
// pamq.append("text", "");
// pamq.append("includeElement", "15");
// pamq.append("node","");
// explorer2(pamq).then((res) => {
// console.log(res,'------------');
// this.PopupFrom = res
// // this.browsingData = res
// let pam = new FormData(); // 创建form对象
// pam.append("databaseInfo", JSON.stringify(this.library));
// pam.append("nodeId", JSON.stringify(this.PopupFrom[0].nodeId).replace("\"", "").replace("\"",""));
// pam.append("text", JSON.stringify(this.library.name).replace("\"", "").replace("\"",""));
// pam.append("includeElement", "15");
// explorer2(pam).then((res) => {
// console.log(res,'++++++++++++++++++');
// this.browsingData = this.PopupFrom
// this.browsingData[0].children = res
// let itemData = this.browsingData[0]
// console.log('======',itemData,res)
// itemData.children = res
// this.$set(this.browsingData,0,itemData)
// // this.browsingData = this.PopupFrom
// // this.browsingData[0].children = res
// });
// });
} else { } else {
this.$message.error("请选择数据库"); this.$message.error("请选择数据库");
console.log(this.stepName); console.log(this.stepName);
...@@ -370,6 +407,7 @@ export default { ...@@ -370,6 +407,7 @@ export default {
}, },
loadDataTree(node, resolve) { loadDataTree(node, resolve) {
setTimeout(() => {
if (node.level === 0) { if (node.level === 0) {
let pamq = new FormData(); // 创建form对象 let pamq = new FormData(); // 创建form对象
pamq.append("databaseInfo", JSON.stringify(this.library)); pamq.append("databaseInfo", JSON.stringify(this.library));
...@@ -402,6 +440,7 @@ export default { ...@@ -402,6 +440,7 @@ export default {
} }
}); });
} }
},500);
// if (node.level > this.PopupFrom.length) return resolve([]); // if (node.level > this.PopupFrom.length) return resolve([]);
}, },
...@@ -409,9 +448,7 @@ export default { ...@@ -409,9 +448,7 @@ export default {
handleNodeClick(data, node) { handleNodeClick(data, node) {
console.log("点击当前节点node===", node); console.log("点击当前节点node===", node);
console.log("点击当前节点data===", data); console.log("点击当前节点data===", data);
this.tableDetails = data this.tableDetails = data;
}, },
handleClose(done) { handleClose(done) {
......
src/views/dashboard-kettle/components/appBulletFrame/textFileInput.vue
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
</el-form-item> </el-form-item>
<el-form-item label="步骤读取的文件名来自:"> <el-form-item label="步骤读取的文件名来自:">
<el-select v-model="form.acceptingField" style="width: 100%" :disabled="form.acceptingFilenames == 'N' || !form.acceptingFilenames"> <el-select v-model="form.acceptingField" style="width: 100%" :disabled="form.acceptingFilenames == 'N' || !form.acceptingFilenames" clearable>
<el-option <el-option
v-for="item in connectionNode" v-for="item in connectionNode"
:key="item.id" :key="item.id"
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
<el-tab-pane label="内容"> <el-tab-pane label="内容">
<el-form ref="form" :model="form" label-width="200px"> <el-form ref="form" :model="form" label-width="200px">
<el-form-item label="文件类型:"> <el-form-item label="文件类型:">
<el-select v-model="form.fileType" style="width: 100%"> <el-select v-model="form.fileType" style="width: 100%" clearable>
<el-option label="CSV" value="CSV"></el-option> <el-option label="CSV" value="CSV"></el-option>
<el-option label="Fixed" value="Fixed"></el-option> <el-option label="Fixed" value="Fixed"></el-option>
</el-select> </el-select>
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
<el-form-item label="压缩:"> <el-form-item label="压缩:">
<el-select v-model="form.fileCompression" style="width: 100%"> <el-select v-model="form.fileCompression" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldCompress" v-for="item in fieldCompress"
:key="item.index" :key="item.index"
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
</el-form-item> </el-form-item>
<el-form-item label="格式:"> <el-form-item label="格式:">
<el-select v-model="form.fileFormat" style="width: 100%"> <el-select v-model="form.fileFormat" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fileType" v-for="item in fileType"
:key="item.index" :key="item.index"
...@@ -278,7 +278,7 @@ ...@@ -278,7 +278,7 @@
<el-form-item label="编码:"> <el-form-item label="编码:">
<el-select v-model="form.encoding" filterable style="width: 100%"> <el-select v-model="form.encoding" filterable style="width: 100%" clearable>
<el-option <el-option
v-for="item in codingType" v-for="item in codingType"
:key="item.index" :key="item.index"
...@@ -471,9 +471,10 @@ ...@@ -471,9 +471,10 @@
<el-tab-pane label="字段"> <el-tab-pane label="字段">
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button> <el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-table :data="inputFields" style="width: 100%"> <el-table :data="inputFields" style="width: 100%">
<el-table-column prop="name" label="名称"> </el-table-column> <el-table-column prop="name" label="名称"> </el-table-column>g
<el-table-column prop="type" label="类型"> </el-table-column> <el-table-column prop="type" label="类型"> </el-table-column>
...@@ -611,7 +612,7 @@ ...@@ -611,7 +612,7 @@
</el-form-item> </el-form-item>
<el-form-item label="类型:"> <el-form-item label="类型:">
<el-select v-model="metadataForm.type" style="width: 100%"> <el-select v-model="metadataForm.type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldType" v-for="item in fieldType"
:key="item.id" :key="item.id"
...@@ -622,7 +623,7 @@ ...@@ -622,7 +623,7 @@
</el-form-item> </el-form-item>
<el-form-item label="格式:"> <el-form-item label="格式:">
<el-select v-model="metadataForm.format" style="width: 100%"> <el-select v-model="metadataForm.format" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldFormat" v-for="item in fieldFormat"
:key="item.index" :key="item.index"
...@@ -668,7 +669,7 @@ ...@@ -668,7 +669,7 @@
</el-form-item> </el-form-item>
<el-form-item label="去除空格类型:"> <el-form-item label="去除空格类型:">
<el-select v-model="metadataForm.trim_type" style="width: 100%"> <el-select v-model="metadataForm.trim_type" style="width: 100%" clearable>
<el-option label="不去掉空格" value="none"></el-option> <el-option label="不去掉空格" value="none"></el-option>
<el-option label="去掉左空格" value="left"></el-option> <el-option label="去掉左空格" value="left"></el-option>
<el-option label="去掉右空格" value="right"></el-option> <el-option label="去掉右空格" value="right"></el-option>
...@@ -700,7 +701,7 @@ ...@@ -700,7 +701,7 @@
</el-form-item> </el-form-item>
<el-form-item label="过滤器位置:"> <el-form-item label="过滤器位置:">
<el-select v-model="filterForm.filterPosition" style="width: 100%"> <el-select v-model="filterForm.filterPosition" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldFormat" v-for="item in fieldFormat"
:key="item.index" :key="item.index"
...@@ -752,15 +753,31 @@ ...@@ -752,15 +753,31 @@
<script> <script>
import browseFiles from "../appBulletFrame/browseFiles"; import browseFiles from "../appBulletFrame/browseFiles";
import { valueFormat, valueMeta,formatMapperLineTerminator,availableCharsets,compressionProviderNames } from "@/api/kettle/link"; import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph;
import { valueFormat, valueMeta,formatMapperLineTerminator,availableCharsets,compressionProviderNames,inputOutputFields } from "@/api/kettle/link";
export default { export default {
props: ["connectionNode","form"], //从父组件传过来的值 props: ["connectionNode","form","nodeData"], //从父组件传过来的值
components: { components: {
browseFiles, browseFiles,
}, },
data() { data() {
return { return {
newGraph:[],
fileBox:false, fileBox:false,
filterBox: false, filterBox: false,
fieldBox: false, fieldBox: false,
...@@ -796,6 +813,27 @@ export default { ...@@ -796,6 +813,27 @@ export default {
methods: { methods: {
clickFun(graph) {
console.log(graph, 1);
this.newGraph = graph;
},
getTheField(){
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.newGraph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerFields = new FormData(); // 创建form对象
pamerFields.append("stepName", this.nodeData.value.attributes.label.value)
pamerFields.append("graphXml", this.graphXml);
pamerFields.append("before", true);
pamerFields.append("query", "");
inputOutputFields(pamerFields).then((res) => {
this.inputFields = res
});
},
addFile(){ addFile(){
this.fileNameStore.push(this.fileSelection) this.fileNameStore.push(this.fileSelection)
console.log(this.fileNameStore,789787987987987); console.log(this.fileNameStore,789787987987987);
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
<el-tab-pane label="文件" name="file"> <el-tab-pane label="文件" name="file">
<el-form ref="form" :model="form" label-width="120px"> <el-form ref="form" :model="form" label-width="120px">
<el-form-item label="表格类(引擎):"> <el-form-item label="表格类(引擎):">
<el-select v-model="form.spreadsheet_type" style="width: 100%"> <el-select v-model="form.spreadsheet_type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in engine" v-for="item in engine"
:key="item.code" :key="item.code"
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
style="width: 100%" style="width: 100%"
:disabled=" :disabled="
!form.accept_filenames || form.accept_filenames == 'N'" !form.accept_filenames || form.accept_filenames == 'N'"
@click.native="lastStep" @click.native="lastStep" clearable
> >
<el-option <el-option
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
:disabled=" :disabled="
!form.accept_filenames || form.accept_filenames == 'N' !form.accept_filenames || form.accept_filenames == 'N'
" "
@click.native="previousField" @click.native="previousField" clearable
> >
<el-option v-for="item in getField" <el-option v-for="item in getField"
:key="item.id" :key="item.id"
...@@ -272,7 +272,7 @@ ...@@ -272,7 +272,7 @@
</el-form-item> </el-form-item>
<el-form-item label="编码:"> <el-form-item label="编码:">
<el-select v-model="form.encoding" filterable style="width: 100%"> <el-select v-model="form.encoding" filterable style="width: 100%" clearable>
<el-option <el-option
v-for="item in codingType" v-for="item in codingType"
:key="item.index" :key="item.index"
...@@ -445,9 +445,8 @@ ...@@ -445,9 +445,8 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="字段" name="field"> <el-tab-pane label="字段" name="field">
<el-button type="primary" @click="fieldClick(true)" <el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
>添加字段</el-button <el-button type="primary" @click="getTheField">获取字段</el-button>
>
<el-table :data="fields" style="width: 100%"> <el-table :data="fields" style="width: 100%">
<el-table-column prop="name" label="名称"> </el-table-column> <el-table-column prop="name" label="名称"> </el-table-column>
...@@ -630,7 +629,7 @@ ...@@ -630,7 +629,7 @@
</el-form-item> </el-form-item>
<el-form-item label="类型:"> <el-form-item label="类型:">
<el-select v-model="fieldForm.type" style="width: 100%"> <el-select v-model="fieldForm.type" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldType" v-for="item in fieldType"
:key="item.id" :key="item.id"
...@@ -649,7 +648,7 @@ ...@@ -649,7 +648,7 @@
</el-form-item> </el-form-item>
<el-form-item label="去除空格类型:"> <el-form-item label="去除空格类型:">
<el-select v-model="fieldForm.space" style="width: 100%"> <el-select v-model="fieldForm.space" style="width: 100%" clearable>
<el-option label="不去掉空格" value="none"></el-option> <el-option label="不去掉空格" value="none"></el-option>
<el-option label="去掉左空格" value="left"></el-option> <el-option label="去掉左空格" value="left"></el-option>
<el-option label="去掉右空格" value="right"></el-option> <el-option label="去掉右空格" value="right"></el-option>
...@@ -662,7 +661,7 @@ ...@@ -662,7 +661,7 @@
</el-form-item> </el-form-item>
<el-form-item label="格式:"> <el-form-item label="格式:">
<el-select v-model="fieldForm.format" style="width: 100%"> <el-select v-model="fieldForm.format" style="width: 100%" clearable>
<el-option <el-option
v-for="item in fieldFormat" v-for="item in fieldFormat"
:key="item.index" :key="item.index"
...@@ -699,17 +698,18 @@ ...@@ -699,17 +698,18 @@
> >
<tableInput <tableInput
:disabled="true" :disabled="true"
:connectionNode="connectionNode"
:form="form" :form="form"
:graphXml="graphXml" :graphXml="graphXml"
ref="TableInputDialog2" :nodeData="nodeData"
ref="tableInputDialog"
> >
</tableInput> </tableInput>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="TableInputDialog = false">取 消</el-button> <el-button @click="TableInputDialog = false">取 消</el-button>
<el-button type="primary" @click="TableInputDialog = false" <el-button type="info" @click="dataFlowFun" >浏览</el-button>
<el-button type="primary" @click="TableInputDialogFun"
>确 定</el-button >确 定</el-button
> >
</span> </span>
...@@ -800,6 +800,7 @@ ...@@ -800,6 +800,7 @@
:disabed="true" :disabed="true"
:connectionNode="connectionNode" :connectionNode="connectionNode"
:form="form" :form="form"
:nodeData="nodeData"
></textFileInput> ></textFileInput>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -894,6 +895,32 @@ ...@@ -894,6 +895,32 @@
:transGraphVisible.sync="transGraphVisible" :transGraphVisible.sync="transGraphVisible"
:getXmlVal="getXmlVal" :getXmlVal="getXmlVal"
></trans-graph> ></trans-graph>
<!-- 数据浏览-->
<el-dialog
title="数据浏览"
:visible.sync="dataFlow"
width="500px"
:before-close="handleClose"
>
<el-table :data="dataBrowsing" border style="width: 100%">
<el-table-column
v-for="item in dataField"
:key="item.index"
:label="item.header"
:prop="item.header"
>
</el-table-column>
</el-table>
</el-dialog>
</div> </div>
</template> </template>
...@@ -911,6 +938,7 @@ import { ...@@ -911,6 +938,7 @@ import {
valueMeta, valueMeta,
save, save,
newStep, newStep,
previewData
} from "@/api/kettle/link"; } from "@/api/kettle/link";
// 输入弹窗 // 输入弹窗
import tableInput from "../appBulletFrame/tableInput"; import tableInput from "../appBulletFrame/tableInput";
...@@ -962,7 +990,10 @@ export default { ...@@ -962,7 +990,10 @@ export default {
data() { data() {
return { return {
nodeData:[],
dataBrowsing:[],
dataField:[],
dataFlow:false,
myoutPutFormData:{}, myoutPutFormData:{},
outPutFormData1:{}, outPutFormData1:{},
outPutFormData2:{}, outPutFormData2:{},
...@@ -1156,6 +1187,47 @@ export default { ...@@ -1156,6 +1187,47 @@ export default {
// }, // },
methods: { methods: {
getTheField(){
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerFields = new FormData(); // 创建form对象
pamerFields.append("stepName", this.nodeData.value.attributes.label.value)
pamerFields.append("graphXml", this.graphXml);
pamerFields.append("before", false);
inputOutputFields(pamerFields).then((res) => {
this.fields = res
});
},
dataFlowFun(){
this.dataFlow =!this.dataFlow
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pmer = new FormData(); // 创建form对象
pmer.append("graphXml", this.graphXml);
pmer.append("stepName", this.nodeData.value.attributes.label.value);
pmer.append("rowLimit", this.$refs.tableInputDialog.form.limit);
previewData(pmer).then(res =>{
this.dataField = res.columns
this.dataBrowsing = res.firstRecords
})
},
setXml() { setXml() {
this.graph.getModel().beginUpdate(); this.graph.getModel().beginUpdate();
...@@ -1170,6 +1242,18 @@ export default { ...@@ -1170,6 +1242,18 @@ export default {
}, },
TableInputDialogFun(){
this.TableInputDialog = !this.TableInputDialog
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
ConstantDialogFun(){ ConstantDialogFun(){
this.ConstantDialog = !this.ConstantDialog this.ConstantDialog = !this.ConstantDialog
console.log(this.$refs.ConstantDialog.data,'asghaksghk'); console.log(this.$refs.ConstantDialog.data,'asghaksghk');
...@@ -1400,8 +1484,8 @@ lastStep(){ ...@@ -1400,8 +1484,8 @@ lastStep(){
this.graphXml = mxUtils.getPrettyXml(node); this.graphXml = mxUtils.getPrettyXml(node);
let pamerSteps = new FormData(); // 创建form对象 let pamerSteps = new FormData(); // 创建form对象
pamerSteps.append("stepName", this.nodeData.title); pamerSteps.append("stepName", this.nodeData.value.attributes.label.value);
pamerSteps.append("graphXml", this.getXmlVal); pamerSteps.append("graphXml", this.graphXml);
pamerSteps.append("query", ""); pamerSteps.append("query", "");
previousSteps(pamerSteps).then((res) => { previousSteps(pamerSteps).then((res) => {
this.connectionNode = res this.connectionNode = res
...@@ -1415,8 +1499,8 @@ previousField(){ ...@@ -1415,8 +1499,8 @@ previousField(){
this.graphXml = mxUtils.getPrettyXml(node); this.graphXml = mxUtils.getPrettyXml(node);
let pamerFields = new FormData(); // 创建form对象 let pamerFields = new FormData(); // 创建form对象
pamerFields.append("stepName", this.nodeData.title) pamerFields.append("stepName", this.nodeData.value.attributes.label.value)
pamerFields.append("graphXml", this.getXmlVal); pamerFields.append("graphXml", this.graphXml);
pamerFields.append("before", true); pamerFields.append("before", true);
pamerFields.append("query", ""); pamerFields.append("query", "");
inputOutputFields(pamerFields).then((res) => { inputOutputFields(pamerFields).then((res) => {
...@@ -1505,8 +1589,8 @@ previousField(){ ...@@ -1505,8 +1589,8 @@ previousField(){
// this.setXml(); // this.setXml();
this.doubleClickCell = cell; this.doubleClickCell = cell;
// 获取接口数据
// 获取接口数据
availableCharsets(pamer).then((res) => { availableCharsets(pamer).then((res) => {
this.codingType = res; this.codingType = res;
}); });
...@@ -1570,8 +1654,10 @@ previousField(){ ...@@ -1570,8 +1654,10 @@ previousField(){
this.form = q; this.form = q;
this.form.sql = decodeURIComponent( this.form.sql) this.form.sql = decodeURIComponent( this.form.sql)
console.log(this.form,456465465); setTimeout(() => {
this.$refs.TableInputDialog2.clickFun(this.graph); this.$refs.tableInputDialog.clickFun(this.graph);
}, 500);
return; return;
} else if ( } else if (
...@@ -1654,6 +1740,9 @@ previousField(){ ...@@ -1654,6 +1740,9 @@ previousField(){
q.inputFields = JSON.parse(q.inputFields) q.inputFields = JSON.parse(q.inputFields)
q.filter = JSON.parse(q.filter) q.filter = JSON.parse(q.filter)
this.form = q; this.form = q;
setTimeout(() => {
this.$refs.TextFileInputDialog.clickFun(this.graph)
}, 500);
return; return;
} else if ( } else if (
cell.ids == "step17" || cell.ids == "step17" ||
...@@ -1662,6 +1751,7 @@ previousField(){ ...@@ -1662,6 +1751,7 @@ previousField(){
//表输出 //表输出
this.tableOutPutVisible = !this.tableOutPutVisible; this.tableOutPutVisible = !this.tableOutPutVisible;
this.outPutFormData1 = this.showDataFunc(); this.outPutFormData1 = this.showDataFunc();
this.$refs.tableOutPut.clickFun(this.graph); this.$refs.tableOutPut.clickFun(this.graph);
return; return;
} else if (cell.ids == "step16" || cell.value.attributes.ctype.value == "Update" ) { } else if (cell.ids == "step16" || cell.value.attributes.ctype.value == "Update" ) {
......
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