Skip to content

E
ETL-admin
Commit cb3ef275 by 李耀琨
Options

完成记录集连接、映射、映射输入、输出规范

parent 629a3b65
Showing with 600 additions and 193 deletions
.env.development
...@@ -7,11 +7,16 @@ ENV = 'development' ...@@ -7,11 +7,16 @@ ENV = 'development'
#VUE_APP_BASE_API = 'http://192.168.0.24:9888'
#VUE_APP_WS_API = 'ws://192.168.0.24:9888'
#VUE_APP_FILE_API = 'http://192.168.0.24:9888'
# 接口地址 # 接口地址
VUE_APP_BASE_API = 'http://192.168.0.44:9888' VUE_APP_BASE_API = 'http://192.168.0.25:9889'
VUE_APP_WS_API = 'ws://192.168.0.44:9888' VUE_APP_WS_API = 'ws://192.168.0.25:9889'
VUE_APP_FILE_API = 'http://192.168.0.44:9888' VUE_APP_FILE_API = 'http://192.168.0.25:9889'
......
package.json
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
"nprogress": "0.2.0", "nprogress": "0.2.0",
"path-to-regexp": "2.4.0", "path-to-regexp": "2.4.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"qs": "^6.9.1", "qs": "^6.10.1",
"ramda": "^0.27.1", "ramda": "^0.27.1",
"screenfull": "4.2.0", "screenfull": "4.2.0",
"scss": "^0.2.4", "scss": "^0.2.4",
......
src/api/kettle/link.js
import request from '@/utils/request' import request from '@/utils/request'
import qs from 'qs'
import { Dropdown } from 'element-ui' import { Dropdown } from 'element-ui'
//获取连接类型 //获取连接类型
...@@ -10,6 +11,16 @@ export function types(data) { ...@@ -10,6 +11,16 @@ export function types(data) {
}) })
} }
//记录集连接 连接类型
export function typesss(data) {
return request({
url: 'etlweb/mergejoin/types',
data,
method: 'post'
})
}
//获取历史连接的资源库列表 //获取历史连接的资源库列表
export function getLinkList(data) { export function getLinkList(data) {
return request({ return request({
...@@ -430,3 +441,31 @@ export function datetimeformat(data){ ...@@ -430,3 +441,31 @@ export function datetimeformat(data){
method: 'post' method: 'post'
}) })
} }
// 资源库导出
export function exp(data){
return request({
url:'etlweb/repository/exp',
data,
method: 'post'
})
}
// 获取子转换的步骤
export function getSubTranStep(data){
return request({
url:`etlweb/trans/getSubTranStep?${qs.stringify(data)}`,
data,
method: 'get'
})
}
// 获取下一步骤
export function nextSteps(data){
return request({
url:'etlweb/trans/nextSteps',
data,
method: 'post'
})
}
\ No newline at end of file
src/assets/styles/index.scss
...@@ -582,7 +582,9 @@ aside { ...@@ -582,7 +582,9 @@ aside {
// //
// $svgUrl:'http://147.1.3.180:9888/ETLWEB-SERVER/etlweb'; // $svgUrl:'http://147.1.3.180:9888/ETLWEB-SERVER/etlweb';
$svgUrl:'http://192.168.0.44:9888/ETLWEB-SERVER/etlweb'; // $svgUrl:'http://192.168.0.24:9888/ETLWEB-SERVER/etlweb';
$svgUrl:'http://192.168.0.25:9889/ETLWEB-SERVER/etlweb';
// $svgUrl:'http://192.168.0.44:9882/ETLWEB-SERVER/etlweb'; // $svgUrl:'http://192.168.0.44:9882/ETLWEB-SERVER/etlweb';
// .schema { background-image: url($svgUrl/ui/images/schema.svg?scale=16) !important;} // .schema { background-image: url($svgUrl/ui/images/schema.svg?scale=16) !important;}
......
src/main.js
...@@ -79,7 +79,9 @@ Vue.prototype.R = R ...@@ -79,7 +79,9 @@ Vue.prototype.R = R
Vue.config.productionTip = false Vue.config.productionTip = false
const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API 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://147.1.3.180:9888/ETLWEB-SERVER/etlweb/"
Vue.prototype.etlWeb = "http://192.168.0.44:9888/ETLWEB-SERVER/etlweb/" // Vue.prototype.etlWeb = "http://192.168.0.24:9888/ETLWEB-SERVER/etlweb/"
Vue.prototype.etlWeb = "http://192.168.0.25:9889/ETLWEB-SERVER/etlweb/"
new Vue({ new Vue({
router, router,
......
src/views/dashboard-kettle/components/appBulletFrame/conversionSettings.vue
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
<el-tab-pane label="依赖"> <el-tab-pane label="依赖">
<el-button type="text" @click="relyOn(true)">添加字段</el-button> <el-button type="text" @click="relyOn(true)">添加字段</el-button>
<el-table :data=" dependencies" style="width: 100%"> <el-table :data="dependencies" style="width: 100%">
<el-table-column prop="connection" label="数据库连接"> <el-table-column prop="connection" label="数据库连接">
</el-table-column> </el-table-column>
...@@ -407,7 +407,7 @@ ...@@ -407,7 +407,7 @@
<el-form :model="relyOnFise" label-width="80px"> <el-form :model="relyOnFise" label-width="80px">
<el-form-item label="字段名称"> <el-form-item label="数据库连接">
<el-select <el-select
v-model="relyOnFise.connection" v-model="relyOnFise.connection"
style="width: 100%" style="width: 100%"
...@@ -423,11 +423,11 @@ ...@@ -423,11 +423,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="步骤名称"> <el-form-item label="表">
<el-input v-model="relyOnFise.table"></el-input> <el-input v-model="relyOnFise.table"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字段描述"> <el-form-item label="字段">
<el-input v-model="relyOnFise.field"></el-input> <el-input v-model="relyOnFise.field"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -562,8 +562,12 @@ export default { ...@@ -562,8 +562,12 @@ export default {
); );
} }
console.log(this.form);
if (!this.form.dependencies == undefined) {
this.dependencies = JSON.parse(this.form.dependencies)
}
console.log(this.form, this.form.dependencies);
}, },
//删除 //删除
...@@ -729,7 +733,7 @@ export default { ...@@ -729,7 +733,7 @@ export default {
this.form.dependencies = JSON.stringify(this.dependencies)
this.form.transLogTable = JSON.stringify(this.form.transLogTable) this.form.transLogTable = JSON.stringify(this.form.transLogTable)
this.form.stepLogTable = JSON.stringify(this.form.stepLogTable) this.form.stepLogTable = JSON.stringify(this.form.stepLogTable)
this.form.performanceLogTable = JSON.stringify(this.form.performanceLogTable) this.form.performanceLogTable = JSON.stringify(this.form.performanceLogTable)
......
src/views/dashboard-kettle/components/appBulletFrame/importXmlFile.vue
...@@ -17,14 +17,22 @@ ...@@ -17,14 +17,22 @@
<el-card class="box-card"> <el-card class="box-card">
<el-form :model="form" label-width="160px"> <el-form :model="form" label-width="160px">
<el-form-item label="资源库"> </el-form-item> <el-form-item label="资源库"> </el-form-item>
<el-form-item label="资源库名称"> <el-form-item label="资源库名称">
<el-select <el-select
v-model="form.repositoryname" v-model="form.repositoryname"
style="width: 100%" style="width: 100%"
@focus="getGraphDataBases" @change="getField"
clearable clearable
> >
<!-- <el-form-item label="资源库名称">
<el-select
v-model="form.repositoryname"
style="width: 100%"
@change="getField"
@focus="getGraphDataBases"
clearable
> -->
<el-option <el-option
v-for="(item, index) in namesList" v-for="(item, index) in namesList"
:key="index" :key="index"
...@@ -43,7 +51,7 @@ ...@@ -43,7 +51,7 @@
</el-form-item> </el-form-item>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col class="line" :span="4" :offset="20"> <el-col class="line" :span="4" :offset="20">
<el-button type="primary" @click="metadata(true)" <el-button type="primary" @click="testDialogueOpen()"
>测试连接</el-button >测试连接</el-button
> >
</el-col> </el-col>
...@@ -89,7 +97,7 @@ ...@@ -89,7 +97,7 @@
></el-input> ></el-input>
</el-col> </el-col>
<el-col class="line" :span="2"> <el-col class="line" :span="2">
<el-button type="primary" @click="metadata(true)" <el-button type="primary" @click="expFun()"
:disabled=" :disabled="
form.export_type === 'export_by_folder' || form.export_type === 'export_by_folder' ||
form.export_type === 'export_all' || form.export_type === 'export_all' ||
...@@ -130,7 +138,7 @@ ...@@ -130,7 +138,7 @@
</el-col> </el-col>
<el-col class="line" :span="3"> <el-col class="line" :span="3">
<el-button type="primary" @click="selectFilePath()" <el-button type="primary" @click="selectFilePath()"
>文件</el-button >浏 览</el-button
> >
</el-col> </el-col>
</el-row> </el-row>
...@@ -269,6 +277,28 @@ ...@@ -269,6 +277,28 @@
</span> </span>
</el-dialog> </el-dialog>
<!--数据库连接start -->
<el-dialog
title="数据库连接测试"
encodeURIComponent
:visible.sync="testDialogueFlag"
width="650px"
top="15%"
append-to-body
:close-on-click-modal="false"
:before-close="handleCloseTest"
>
<!-- <div class="table-container table-container-repos" style="height: 42vh">
{{ linkInfo }}
</div> -->
<div style="height:50vh;overflow-y:auto;white-space:pre-line;" v-html="linkInfo"></div>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="handleClose">取 消</el-button> -->
<el-button type="primary" @click="handleCloseTest">确 定</el-button>
</span>
</el-dialog>
<!-- 数据库连接测试end -->
</div> </div>
...@@ -277,7 +307,7 @@ ...@@ -277,7 +307,7 @@
<script> <script>
import main from "../../../mykettle/main"; import main from "../../../mykettle/main";
import browseFiles from "../appBulletFrame/browseFiles"; import browseFiles from "../appBulletFrame/browseFiles";
import { datetimeformat, listNames } from "@/api/kettle/link"; import { datetimeformat, getLinkList,exp,test } from "@/api/kettle/link";
export default { export default {
components: { components: {
main, main,
...@@ -300,12 +330,88 @@ export default { ...@@ -300,12 +330,88 @@ export default {
namesList: [], namesList: [],
filePathSelection:false, filePathSelection:false,
localPath:{}, localPath:{},
connectionName: "",
testDialogueFlag: false, //测试弹弹窗
linkInfo: "",
createModel: {
name: "",
type: "",
access: "",
hostname: "",
databaseName: "",
port: "",
username: "",
password: "",
stramingReasults: "",
supportBooleanDataType: "",
supportTimestampDataType: "",
preserveReservedCaseCheck: "",
extraOptions: [],
usingConnectionPool: "N",
initialPoolSize: "5",
maximumPoolSize: "10",
partitioned: "N",
partitionInfo: [],
}, //创建数据库
}; };
}, },
created() {}, created() {},
methods: { methods: {
listNames() { clickFun(graph, val) {
listNames().then((res) => { this.datetimeformatFun();
this.getLinkList();
this.newGraph = graph;
console.log(val);
},
testDialogueOpen() {
// JSON对象转成formData对象
var params = this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.databaseName = this.library.name
params.type = this.library.type
params.username = this.form.username
params.password = this.form.password
params.supportBooleanDataType = true;
params.supportTimestampDataType = true;
params.preserveReservedCaseCheck = true;
params.extraOptions = [];
params.usingConnectionPool = "N";
params.initialPoolSize = "5";
params.maximumPoolSize = "10";
params.partitioned = "N";
params.partitionInfo = [];
var formData = new FormData();
formData.append("databaseInfo", JSON.stringify(params));
console.log("表单提交参数==", params);
this.test(formData);
this.testDialogueFlag = true;
},
// 测试连接
test(params) {
test(params).then((res) => {
if (res) {
console.log("测试：");
// this.linkInfo=res.message;
// var test2=decodeURI(res.message);
var test2 = decodeURIComponent(res.message);
console.log("解码====：", test2);
this.linkInfo = test2;
} else {
this.$message.error(res.errMsg);
}
});
},
handleCloseTest() {
this.testDialogueFlag = false;
},
getLinkList() {
getLinkList().then((res) => {
if (res) { if (res) {
console.log("获取所有已经创建的数据库列表：", res); console.log("获取所有已经创建的数据库列表：", res);
this.namesList = res; this.namesList = res;
...@@ -320,23 +426,36 @@ export default { ...@@ -320,23 +426,36 @@ export default {
this.dateFormat = res; this.dateFormat = res;
}); });
}, },
clickFun(graph, val) {
this.datetimeformatFun(); expFun(){
this.listNames(); let pamerSteps = new FormData(); // 创建form对象
this.newGraph = graph; pamerSteps.append("data", this.form.repositoryname);
console.log(val); exp(pamerSteps).then(res=>{
console.log(res);
})
}, },
getGraphDataBases() {
// var graph = this.getGraph(); getField(val) {
var root = this.newGraph.getDefaultParent(),
data = []; this.library = this.namesList.find((e) => {
if (root.getAttribute("databases") != null) return e.name == val;
data = JSON.parse(root.getAttribute("databases")); });
console.log("获取到画布上的databases====", data);
this.namesList = data; console.log(this.library, "////////////////////////");
this.connectionName = val;
}, },
// getGraphDataBases() {
// // var graph = this.getGraph();
// var root = this.newGraph.getDefaultParent(),
// data = [];
// if (root.getAttribute("databases") != null)
// data = JSON.parse(root.getAttribute("databases"));
// console.log("获取到画布上的databases====", data);
// // this.namesList = data;
// },
selectFilePath(){ selectFilePath(){
this.filePathSelection = !this.filePathSelection this.filePathSelection = !this.filePathSelection
}, },
......
src/views/dashboard-kettle/components/appBulletFrame/mappingInput.vue
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
<el-table-column label="字段"> <el-table-column label="字段">
<el-table-column prop="name" label="名称"> </el-table-column> <el-table-column prop="name" label="名称"> </el-table-column>
<el-table-column prop="type" label="类型"> </el-table-column> <el-table-column prop="type" label="类型"> </el-table-column>
<el-table-column prop="type" label="长度"> </el-table-column> <el-table-column prop="length" label="长度"> </el-table-column>
<el-table-column prop="type" label="精度"> </el-table-column> <el-table-column prop="precision" label="精度"> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</el-form-item > </el-form-item >
<el-form-item > <el-form-item >
<el-checkbox <el-checkbox
v-model="form.capture_step_performance" v-model="form.select_unspecified"
true-label="Y" true-label="Y"
false-label="N" false-label="N"
></el-checkbox> ></el-checkbox>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
:before-close="handleClose" :before-close="handleClose"
:modal="false" :modal="false"
> >
<el-form ref="form" :model="fiel" label-width="160px"> <el-form ref="form" :model="fiel" label-width="120px">
<el-form-item label="名称:"> <el-form-item label="名称:">
<el-input v-model="fiel.name"></el-input> <el-input v-model="fiel.name"></el-input>
</el-form-item> </el-form-item>
...@@ -79,12 +79,20 @@ ...@@ -79,12 +79,20 @@
<el-select v-model="fiel.type" style="width: 100%" clearable> <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.id"
:label="item.descrp" :label="item.name"
:value="item.code" :value="item.name"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="长度:">
<el-input v-model="fiel.length"></el-input>
</el-form-item>
<el-form-item label="精度:">
<el-input v-model="fiel.precision"></el-input>
</el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -96,7 +104,7 @@ ...@@ -96,7 +104,7 @@
</template> </template>
<script> <script>
import { systemDataTypes } from "@/api/kettle/link"; import { valueMeta } from "@/api/kettle/link";
export default { export default {
props: ["form", "mappingInputDialog", "saveOutputDialog", "nodeData"], props: ["form", "mappingInputDialog", "saveOutputDialog", "nodeData"],
data() { data() {
...@@ -110,7 +118,6 @@ export default { ...@@ -110,7 +118,6 @@ export default {
}, },
created() { created() {
this.systemDataTypesFun();
}, },
methods: { methods: {
...@@ -119,6 +126,8 @@ export default { ...@@ -119,6 +126,8 @@ export default {
this.newGraph = graph; this.newGraph = graph;
console.log(val, "拿到form"); console.log(val, "拿到form");
this.fields = JSON.parse(val.fields); this.fields = JSON.parse(val.fields);
this.valueMetaFun();
}, },
handleCloseFun() { handleCloseFun() {
...@@ -161,8 +170,8 @@ export default { ...@@ -161,8 +170,8 @@ export default {
} }
}, },
systemDataTypesFun() { valueMetaFun() {
systemDataTypes().then((res) => { valueMeta().then((res) => {
this.type = res; this.type = res;
}); });
}, },
......
src/views/dashboard-kettle/components/appBulletFrame/mappingOutput.vue
...@@ -12,9 +12,6 @@ ...@@ -12,9 +12,6 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="handleCloseFun">取 消</el-button> <el-button @click="handleCloseFun">取 消</el-button>
<el-button type="primary" @click="mappingOutputDialogFun" <el-button type="primary" @click="mappingOutputDialogFun"
...@@ -23,35 +20,7 @@ ...@@ -23,35 +20,7 @@
</span> </span>
</el-dialog> </el-dialog>
<el-dialog
title="添加字段"
:visible.sync="addField"
width="500px"
:before-close="handleClose"
:modal="false"
>
<el-form ref="form" :model="fiel" label-width="160px">
<el-form-item label="名称:">
<el-input v-model="fiel.name"></el-input>
</el-form-item>
<el-form-item label="类型:">
<el-select v-model="fiel.type" style="width: 100%" clearable>
<el-option
v-for="item in type"
:key="item.code"
:label="item.descrp"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addField = false">取 消</el-button>
<el-button type="primary" @click="addFieldDetermine">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -61,16 +30,11 @@ export default { ...@@ -61,16 +30,11 @@ export default {
props: ["form", "mappingOutputDialog", "saveOutputDialog", "nodeData"], props: ["form", "mappingOutputDialog", "saveOutputDialog", "nodeData"],
data() { data() {
return { return {
addField: false,
fields: [],
type: {},
dataStatus: false,
fiel: {},
}; };
}, },
created() { created() {
this.systemDataTypesFun();
}, },
methods: { methods: {
...@@ -78,7 +42,6 @@ export default { ...@@ -78,7 +42,6 @@ export default {
console.log(graph, "双击获取值"); console.log(graph, "双击获取值");
this.newGraph = graph; this.newGraph = graph;
console.log(val, "拿到form"); console.log(val, "拿到form");
this.fields = JSON.parse(val.fields);
}, },
handleCloseFun() { handleCloseFun() {
...@@ -87,17 +50,10 @@ export default { ...@@ -87,17 +50,10 @@ export default {
mappingOutputDialogFun() { mappingOutputDialogFun() {
this.handleCloseFun(); this.handleCloseFun();
this.form.fields = JSON.stringify(this.fields);
this.saveOutputDialog(this.form); this.saveOutputDialog(this.form);
}, },
addFieldDetermine() {
this.addField = !this.addField;
if (this.dataStatus) {
this.fields.push(this.fiel);
} else {
}
},
// 关闭弹框 // 关闭弹框
handleClose(done) { handleClose(done) {
this.$confirm("确认关闭？") this.$confirm("确认关闭？")
...@@ -111,21 +67,8 @@ export default { ...@@ -111,21 +67,8 @@ export default {
rows.splice(index, 1); rows.splice(index, 1);
}, },
addSheet(state, val) {
this.addField = !this.addField;
this.dataStatus = state;
if (state) {
this.fiel = {};
} else {
this.fiel = val;
}
},
systemDataTypesFun() {
systemDataTypes().then((res) => {
this.type = res;
});
},
}, },
}; };
</script> </script>
......
src/views/dashboard-kettle/components/appBulletFrame/nullOperation.vue
...@@ -13,11 +13,9 @@ ...@@ -13,11 +13,9 @@
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cd">取 消</el-button> <el-button @click="nullOperationDialog = false">取 消</el-button>
<el-button type="primary" @click="fetch" <el-button type="primary" @click="nullOperationDialogFun"
>确 定</el-button >确 定</el-button
> >
</span> </span>
...@@ -75,69 +73,10 @@ export default { ...@@ -75,69 +73,10 @@ export default {
methods: { methods: {
cd(){
var arr = [0, 1, 1, 6, 0, 3, 1, 2, 5, 2, 8, 0]
var q = []
for (let i = 0; i < arr.length; i++) {
if(q.indexOf(arr[i]) == -1){
q.push(arr[i]);
}
}
return console.log(q);;
},
fetch(){
var list = [{
typeId: 10,
typeName: '大菜',
foodId: 1,
foodName: '鱼香肉丝'
},
{
typeId: 9,
typeName: '小菜',
foodId: 2,
foodName: '手拍黄瓜'
},
{
typeId: 10,
typeName: '大菜',
foodId: 3,
foodName: '红烧排骨'
}
]
var newListq = []
var newList = []
for (let i = 0; i < list.length; i++) {
let newLists = []
if (list[i].typeId== 10 || list[i].typeName=='大菜') {
newLists.typeId = 10
newLists.typeName = "大菜"
newLists.foodList = [{foodId:list[i].foodId,foodName:list[i].foodName}]
newListq.push(newLists)
}else if (list[i].typeId== 9 || list[i].typeName=='小菜') {
newLists.typeId = 9
newLists.typeName = "小菜"
newLists.foodList = [{foodId:list[i].foodId,foodName:list[i].foodName}]
newListq.push(newLists)
}
}
return console.log([]==[]);
},
clickFun(graph, val) { clickFun(graph, val) {
console.log(graph, "双击获取值"); console.log(graph, "双击获取值");
this.newGraph = graph; this.newGraph = graph;
console.log(val, "拿到form"); console.log(val, "拿到form");
this.fields = JSON.parse(val.fields);
}, },
handleCloseFun() { handleCloseFun() {
......
src/views/dashboard-kettle/components/appBulletFrame/recordConnection.vue 0 → 100644
<template>
<div class="customConstant">
<el-dialog
title="记录集连接"
:visible.sync="recordConnectionDialog"
width="800px"
:before-close="handleCloseFun"
>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="步骤名称:">
<el-input v-model="form.label"></el-input>
</el-form-item>
<el-form-item label="第一个步骤:">
<el-select v-model="form.step1" style="width: 100%" @click.native="lastStep">
<el-option
v-for="(item, index) in allSteps"
:key="index"
:value="item.name"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="第二个步骤:">
<el-select v-model="form.step2" style="width: 100%" @click.native="lastStep">
<el-option
v-for="(item, index) in allSteps"
:key="index"
:value="item.name"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="连接类型:">
<el-select v-model="form.join_type" style="width: 100%">
<el-option
v-for="(item, index) in type"
:key="index"
:value="item.name"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
</el-form>
<br />
<el-row :gutter="20">
<el-col :span="12">
第一个步骤的连接字段
<br />
<el-button type="text" @click="oneStep(true)">添加字段</el-button>
<el-button type="text" @click="stepFields(true)">获取字段</el-button>
<el-table :data="key1" border style="width: 100%">
<el-table-column prop="key" label="连接字段"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
@click="oneStep(false, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="deleteField(scope.$index, key1)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="12">
第二个步骤的连接字段
<br />
<el-button type="text" @click="twoStep(true)">添加字段</el-button>
<el-button type="text" @click="stepFields(false)">获取字段</el-button>
<el-table :data="key2" border style="width: 100%">
<el-table-column prop="key" label="连接字段"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
@click="twoStep(false, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="deleteField(scope.$index, key2)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseFun">取 消</el-button>
<el-button type="primary" @click="SystemInfoDialogFun">确 定</el-button>
</span>
</el-dialog>
<el-dialog
:title="this.addstate ? '第一个步骤添加字段' : '第一个步骤修改字段'"
:visible.sync="oneStepDialog"
width="500px"
:before-close="handleClose"
>
<el-form :model="keyOne" label-width="120px">
<el-form-item label="连接字段:">
<el-input v-model="keyOne.key"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="oneStepDialog = false">取 消</el-button>
<el-button type="primary" @click="oneStepDialogFun">确 定</el-button>
</span>
</el-dialog>
<el-dialog
:title="this.addstate ? '第二个步骤添加字段' : '第二个步骤修改字段'"
:visible.sync="twoStepsDialog"
width="500px"
:before-close="handleClose"
>
<el-form :model="keyTwo" label-width="120px">
<el-form-item label="连接字段:">
<el-input v-model="keyTwo.key"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="twoStepsDialog = false">取 消</el-button>
<el-button type="primary" @click="twoStepsDialogFun">确 定</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 { typesss, previousSteps, inputOutputFields } from "@/api/kettle/link";
import loginVue from "../../../login.vue";
export default {
props: ["form", "recordConnectionDialog", "saveOutputDialog", "nodeData"], //从父组件传过来的值
data() {
return {
allSteps: [],
type: [],
newGraph: [],
key1: [],
key2: [],
addstate: false,
oneStepDialog: false,
twoStepsDialog:false,
keyOne:{},
keyTwo:{},
};
},
created() {},
methods: {
clickFun(graph, val) {
// console.log(val);
// console.log(graph, "双击获取值");
this.newGraph = graph;
this.key1 = JSON.parse(val.key1);
this.key2 = JSON.parse(val.key2);
// this.fields = JSON.parse(val.fields)
console.log(val, "拿到form");
this.types();
},
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.allSteps = res;
});
},
stepFields(state) {
if (state) {
this.key1 = [];
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.newGraph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerFiel = new FormData(); // 创建form对象
pamerFiel.append("stepName", this.form.step1);
pamerFiel.append("graphXml", this.graphXml);
pamerFiel.append("before", false);
inputOutputFields(pamerFiel).then((res) => {
res.forEach((itme) => {
this.key1.push({
key: itme.name,
});
});
});
} else {
this.key2 = [];
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.newGraph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerFiel = new FormData(); // 创建form对象
pamerFiel.append("stepName", this.form.step2);
pamerFiel.append("graphXml", this.graphXml);
pamerFiel.append("before", false);
inputOutputFields(pamerFiel).then((res) => {
res.forEach((itme) => {
this.key2.push({
key: itme.name,
});
});
});
}
},
oneStep(state,val) {
this.oneStepDialog = !this.oneStepDialog;
this.addstate = state;
if (state) {
this.keyOne = {}
}else{
this.keyOne = val
}
},
oneStepDialogFun() {
this.oneStepDialog = !this.oneStepDialog;
if (this.addstate) {
this.key1.push(this.keyOne)
}
},
twoStep(state,val) {
this.twoStepsDialog = !this.twoStepsDialog;
this.addstate = state;
if (state) {
this.keyTwo = {}
}else{
this.keyTwo = val
}
},
twoStepsDialogFun() {
this.twoStepsDialog = !this.twoStepsDialog;
if (this.addstate) {
this.key2.push(this.keyTwo)
}
},
types() {
let se = new FormData(); // 创建form对象
se.append("query", "");
typesss(se).then((res) => {
this.type = res;
});
},
//删除
deleteField(index, rows) {
rows.splice(index, 1);
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {});
},
handleCloseFun() {
this.$emit("update:recordConnectionDialog", false);
},
SystemInfoDialogFun() {
this.form.key1 = JSON.stringify(this.key1);
this.form.key2 = JSON.stringify(this.key2);
this.handleCloseFun();
// this.form.fields = JSON.stringify(this.fields);
this.saveOutputDialog(this.form);
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
},
};
</script>
<style lang="scss" scoped>
</style>
src/views/dashboard-kettle/components/designer/modules/node_menu.vue
...@@ -88,7 +88,9 @@ export default { ...@@ -88,7 +88,9 @@ export default {
return { return {
// prefix:'http://192.168.0.2:9700/etlweb/', // prefix:'http://192.168.0.2:9700/etlweb/',
// prefix:`http://147.1.3.180:9888/ETLWEB-SERVER/etlweb/`, // prefix:`http://147.1.3.180:9888/ETLWEB-SERVER/etlweb/`,
prefix:`http://192.168.0.44:9888/ETLWEB-SERVER/etlweb/`, // prefix:`http://192.168.0.24:9888/ETLWEB-SERVER/etlweb/`,
prefix:`http://192.168.0.25:9889/ETLWEB-SERVER/etlweb/`,
// 测试数据开始===== // 测试数据开始=====
jobTreeList: [ jobTreeList: [
{ {
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
...@@ -845,6 +845,18 @@ ...@@ -845,6 +845,18 @@
:saveOutputDialog="saveOutputDialog" :saveOutputDialog="saveOutputDialog"
></mergeRecords> ></mergeRecords>
<!-- 记录连接-->
<recordConnection
ref="recordConnection"
:disabed="true"
:form="form"
:nodeData="nodeData"
:recordConnectionDialog.sync="recordConnectionDialog"
:saveOutputDialog="saveOutputDialog"
></recordConnection>
<!-- 改变开始复制的数量 --> <!-- 改变开始复制的数量 -->
<el-dialog <el-dialog
title="改变开始复制的数量" title="改变开始复制的数量"
...@@ -1220,6 +1232,7 @@ import sortRecord from "../appBulletFrame/sortRecord"; //排序记录 ...@@ -1220,6 +1232,7 @@ import sortRecord from "../appBulletFrame/sortRecord"; //排序记录
import setVariable from "../appBulletFrame/setVariable"; //设置变量 import setVariable from "../appBulletFrame/setVariable"; //设置变量
import getVariable from "../appBulletFrame/getVariable"; //获取变量 import getVariable from "../appBulletFrame/getVariable"; //获取变量
import mergeRecords from "../appBulletFrame/mergeRecords"; //合并记录 import mergeRecords from "../appBulletFrame/mergeRecords"; //合并记录
import recordConnection from '../appBulletFrame/recordConnection';//记录连接
import selectField from "../appBulletFrame/selectField"; //选择字段 import selectField from "../appBulletFrame/selectField"; //选择字段
import toRepeat from "../appBulletFrame/toRepeat"; //去除重复 import toRepeat from "../appBulletFrame/toRepeat"; //去除重复
import mapping from "../appBulletFrame/mapping"; //映射(子转换) import mapping from "../appBulletFrame/mapping"; //映射(子转换)
...@@ -1349,6 +1362,7 @@ export default { ...@@ -1349,6 +1362,7 @@ export default {
setVariableDialog: false, //设置变量 setVariableDialog: false, //设置变量
getVariableDialog: false, //获取变量 getVariableDialog: false, //获取变量
mergeRecordsDialog: false, //合并记录 mergeRecordsDialog: false, //合并记录
recordConnectionDialog:false,//记录连接
selectFieldDialog: false, //选择字段 selectFieldDialog: false, //选择字段
conversionSettingsDialog: false, //转换设置 conversionSettingsDialog: false, //转换设置
jobSettingsDialog: false, //作业设置 jobSettingsDialog: false, //作业设置
...@@ -1458,6 +1472,7 @@ export default { ...@@ -1458,6 +1472,7 @@ export default {
setVariable, //设置变量 setVariable, //设置变量
getVariable, //获取变量 getVariable, //获取变量
mergeRecords, //合并记录 mergeRecords, //合并记录
recordConnection,// 记录连接
selectField, //选择字段 selectField, //选择字段
conversionSettings, //转换设置 conversionSettings, //转换设置
jobSettings, //作业设置 jobSettings, //作业设置
...@@ -1731,19 +1746,7 @@ export default { ...@@ -1731,19 +1746,7 @@ export default {
// } // }
// }, // },
mergeRecordsDialogFun() {
this.mergeRecordsDialog = !this.mergeRecordsDialog;
this.form.keys = JSON.stringify(this.$refs.mergeRecordsDialog.keys);
this.form.values = JSON.stringify(this.$refs.mergeRecordsDialog.values);
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
copyNumberFun() { copyNumberFun() {
console.log(this.form, "数据"); console.log(this.form, "数据");
...@@ -2170,11 +2173,32 @@ export default { ...@@ -2170,11 +2173,32 @@ export default {
valueFormat(pamer2).then((res) => { valueFormat(pamer2).then((res) => {
this.fieldFormat = res; this.fieldFormat = res;
}); });
// if (this.curFileType == "transformation" && cell.dis == "step98") ||
// cell.value.attributes.ctype.value == "Dummy" ) {
// }else if ( (this.curFileType == "transformation" && cell.dis == "srep167") ||
if ( cell.value.attributes.ctype.value == "MappingInput") {
this.mappingInputDialog = !this.mappingInputDialog
this.form = this.showDataFunc();
setTimeout(() => {
this.$refs.mappingInput.clickFun(this.graph,this.form);
}, 500);
}else if ( (this.curFileType == "transformation" && cell.dis == "srep168") ||
cell.value.attributes.ctype.value == "MappingOutput") {
this.mappingOutputDialog = !this.mappingOutputDialog
this.form = this.showDataFunc();
setTimeout(() => {
this.$refs.mappingOutput.clickFun(this.graph,this.form);
}, 500);
}else if (
(this.curFileType == "transformation" && cell.dis == "srep133") ||
cell.value.attributes.ctype.value == "MergeJoin"
) {
this.recordConnectionDialog = !this.recordConnectionDialog
this.form = this.showDataFunc();
setTimeout(() => {
this.$refs.recordConnection.clickFun(this.graph,this.form);
}, 500);
}else if (
(this.curFileType == "transformation" && cell.dis == "srep98") || (this.curFileType == "transformation" && cell.dis == "srep98") ||
cell.value.attributes.ctype.value == "Dummy" cell.value.attributes.ctype.value == "Dummy"
) { ) {
...@@ -2586,14 +2610,14 @@ export default { ...@@ -2586,14 +2610,14 @@ export default {
this.$refs.conversionSettings.clickFun(this.graph, this.form); //向子组件传递画布 this.$refs.conversionSettings.clickFun(this.graph, this.form); //向子组件传递画布
}, 500); }, 500);
}); });
menu.addItem("映射输入规范", null, () => { // menu.addItem("映射输入规范", null, () => {
console.log(cell, "当前节点"); // console.log(cell, "当前节点");
this.mappingInputDialog = !this.mappingInputDialog; // this.mappingInputDialog = !this.mappingInputDialog;
}); // });
menu.addItem("映射输出规范", null, () => { // menu.addItem("映射输出规范", null, () => {
console.log(cell, "当前节点"); // console.log(cell, "当前节点");
this.mappingOutputDialog = !this.mappingOutputDialog; // this.mappingOutputDialog = !this.mappingOutputDialog;
}); // });
// menu.addItem("空操作", null, () => { // menu.addItem("空操作", null, () => {
// console.log(cell, "当前节点"); // console.log(cell, "当前节点");
// this.nullOperationDialog = !this.nullOperationDialog; // this.nullOperationDialog = !this.nullOperationDialog;
......
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