Skip to content

E
ETL-admin
Commit cb3ef275 by 李耀锟
Options

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

parent 629a3b65
Showing with 913 additions and 297 deletions
.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_WS_API = 'ws://192.168.0.44:9888'
VUE_APP_FILE_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.25:9889'
VUE_APP_FILE_API = 'http://192.168.0.25:9889'
......
package.json
......@@ -58,7 +58,7 @@
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"prop-types": "^15.7.2",
"qs": "^6.9.1",
"qs": "^6.10.1",
"ramda": "^0.27.1",
"screenfull": "4.2.0",
"scss": "^0.2.4",
......
src/api/kettle/link.js
import request from '@/utils/request'
import qs from 'qs'
import { Dropdown } from 'element-ui'
//获取连接类型
......@@ -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) {
return request({
......@@ -430,3 +441,31 @@ export function datetimeformat(data){
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 {
//
// $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';
// .schema { background-image: url($svgUrl/ui/images/schema.svg?scale=16) !important;}
......
src/main.js
......@@ -79,7 +79,9 @@ 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/"
// 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({
router,
......
src/views/dashboard-kettle/components/appBulletFrame/conversionSettings.vue
......@@ -235,7 +235,7 @@
<el-tab-pane label="依赖">
<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>
......@@ -407,7 +407,7 @@
<el-form :model="relyOnFise" label-width="80px">
<el-form-item label="字段名称">
<el-form-item label="数据库连接">
<el-select
v-model="relyOnFise.connection"
style="width: 100%"
......@@ -423,11 +423,11 @@
</el-select>
</el-form-item>
<el-form-item label="步骤名称">
<el-form-item label="表">
<el-input v-model="relyOnFise.table"></el-input>
</el-form-item>
<el-form-item label="字段描述">
<el-form-item label="字段">
<el-input v-model="relyOnFise.field"></el-input>
</el-form-item>
</el-form>
......@@ -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 {
this.form.dependencies = JSON.stringify(this.dependencies)
this.form.transLogTable = JSON.stringify(this.form.transLogTable)
this.form.stepLogTable = JSON.stringify(this.form.stepLogTable)
this.form.performanceLogTable = JSON.stringify(this.form.performanceLogTable)
......
src/views/dashboard-kettle/components/appBulletFrame/importXmlFile.vue
......@@ -17,14 +17,22 @@
<el-card class="box-card">
<el-form :model="form" label-width="160px">
<el-form-item label="资源库"> </el-form-item>
<el-form-item label="资源库名称">
<el-select
v-model="form.repositoryname"
style="width: 100%"
@focus="getGraphDataBases"
@change="getField"
clearable
>
<!-- <el-form-item label="资源库名称">
<el-select
v-model="form.repositoryname"
style="width: 100%"
@change="getField"
@focus="getGraphDataBases"
clearable
> -->
<el-option
v-for="(item, index) in namesList"
:key="index"
......@@ -43,7 +51,7 @@
</el-form-item>
<el-row :gutter="10">
<el-col class="line" :span="4" :offset="20">
<el-button type="primary" @click="metadata(true)"
<el-button type="primary" @click="testDialogueOpen()"
>测试连接</el-button
>
</el-col>
......@@ -89,7 +97,7 @@
></el-input>
</el-col>
<el-col class="line" :span="2">
<el-button type="primary" @click="metadata(true)"
<el-button type="primary" @click="expFun()"
:disabled="
form.export_type === 'export_by_folder' ||
form.export_type === 'export_all' ||
......@@ -130,7 +138,7 @@
</el-col>
<el-col class="line" :span="3">
<el-button type="primary" @click="selectFilePath()"
>文件</el-button
>浏 览</el-button
>
</el-col>
</el-row>
......@@ -269,6 +277,28 @@
</span>
</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>
......@@ -277,7 +307,7 @@
<script>
import main from "../../../mykettle/main";
import browseFiles from "../appBulletFrame/browseFiles";
import { datetimeformat, listNames } from "@/api/kettle/link";
import { datetimeformat, getLinkList,exp,test } from "@/api/kettle/link";
export default {
components: {
main,
......@@ -300,12 +330,88 @@ export default {
namesList: [],
filePathSelection:false,
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() {},
methods: {
listNames() {
listNames().then((res) => {
clickFun(graph, val) {
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) {
console.log("获取所有已经创建的数据库列表：", res);
this.namesList = res;
......@@ -320,23 +426,36 @@ export default {
this.dateFormat = res;
});
},
clickFun(graph, val) {
this.datetimeformatFun();
this.listNames();
this.newGraph = graph;
console.log(val);
expFun(){
let pamerSteps = new FormData(); // 创建form对象
pamerSteps.append("data", this.form.repositoryname);
exp(pamerSteps).then(res=>{
console.log(res);
})
},
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;
getField(val) {
this.library = this.namesList.find((e) => {
return e.name == val;
});
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(){
this.filePathSelection = !this.filePathSelection
},
......
src/views/dashboard-kettle/components/appBulletFrame/mapping.vue
......@@ -14,11 +14,13 @@
<el-form-item label="转换:">
<el-row :gutter="10">
<el-col :span="21">
<el-input v-model="form.directory"></el-input>
<el-input v-model="form.filename"></el-input>
</el-col>
<el-col class="line" :span="2">
<el-button size="mini" @click="filePathSelection = true">浏览</el-button>
<el-button size="mini" @click="filePathSelection = true"
>浏览</el-button
>
</el-col>
</el-row>
</el-form-item>
......@@ -118,7 +120,7 @@
label="输入原步骤名(如果只有一个步骤该项可以为空)"
>
<el-select
v-model="form.lookup"
v-model="inputLies.input_step"
style="width: 100%"
clearable
@click.native="lastStep"
......@@ -133,21 +135,20 @@
</el-select>
</el-form-item>
<el-form-item label="子转换里的“映射输入接口”步骤名">
<el-row :gutter="10">
<el-col :span="20">
<el-input
<el-select
v-model="inputLies.output_step"
style="width: 100%"
clearable
:disabled="inputLies.main_path == 'Y'"
></el-input>
</el-col>
<el-col class="line" :span="2">
<el-button
size="mini"
:disabled="inputLies.main_path == 'Y'"
>选择</el-button
@click.native="getSubTranStep('MappingInput')"
>
</el-col>
</el-row>
<el-option
v-for="(item, index) in steps"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<el-form-item label="步骤映射描述:">
<el-input
......@@ -158,15 +159,14 @@
</el-form>
</div>
<div class="lowerRight">
<el-button type="text" @click="addInputField(true)"
<!-- <el-button type="text" @click="addInputField(true)"
>添加字段</el-button
>
> -->
<el-table
:data="inputLies.connector"
height=" 250 "
height="180"
border
style="width: 100%"
>
<el-table-column prop="parent" label="原字段名">
</el-table-column>
......@@ -204,8 +204,6 @@
<el-col :span="4">
<el-button @click="fieldMapping">字段映射...</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
......@@ -243,7 +241,7 @@
checked: outputIndex == index,
}"
>
{{ item.input_step || `输出${index + 1}` }}
{{ `输出${index + 1}` }}
</li>
</ul>
</div>
......@@ -259,43 +257,40 @@
></el-checkbox>
</el-form-item>
<el-form-item label="子转换里的“映射输入接口”步骤名">
<el-row :gutter="10">
<el-col :span="20">
<el-input
<el-form-item label="子转换里的“映射输出接口”步骤名">
<el-select
v-model="outputLies.input_step"
style="width: 100%"
clearable
:disabled="outputLies.main_path == 'Y'"
></el-input>
</el-col>
<el-col class="line" :span="2">
<el-button
size="mini"
:disabled="outputLies.main_path == 'Y'"
>选择</el-button
@click.native="getSubTranStep('MappingOutput')"
>
</el-col>
</el-row>
<el-option
v-for="(item, index) in stepsWto"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<el-form-item
label="输入原步骤名(如果只有一个步骤该项可以为空)"
>
<el-row :gutter="10">
<el-col :span="20">
<el-input
<el-select
v-model="outputLies.output_step"
style="width: 100%"
clearable
:disabled="outputLies.main_path == 'Y'"
></el-input>
</el-col>
<el-col class="line" :span="2">
<el-button
size="mini"
:disabled="outputLies.main_path == 'Y'"
>选择</el-button
@click.native="nextStep"
>
</el-col>
</el-row>
<el-option
v-for="(item, index) in nextStepFelt"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<el-form-item label="步骤映射描述:">
......@@ -312,7 +307,7 @@
>
<el-table
:data="outputLies.connector"
height=" 250 "
height="180"
border
style="width: 100%"
:row-style="{ height: '10px' }"
......@@ -348,7 +343,6 @@
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseFun">取 消</el-button>
<el-button type="primary" @click="mappingDialogFun">确 定</el-button>
</span>
</el-dialog>
......@@ -410,12 +404,94 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="inputBox = false">取 消</el-button>
<el-button @click="outputBox = false">取 消</el-button>
<el-button type="primary" @click="addoutputBoxFun">确 定</el-button>
</span>
</el-dialog>
<!-- 映射匹配 -->
<el-dialog
title="映射匹配"
:visible.sync="dialogVisible"
width="800px"
:before-close="handleClose"
>
<div>
<el-row :gutter="10">
<el-col :span="6">
<div class="sourceField">
<ul class="ulHeightS">
<li
class="list"
v-for="(item, index) in stepFields"
:key="item.id"
@click="switchJournalw(item, index)"
style="cursor: pointer"
:class="{
hover: outputIndexw == index,
checked: outputIndexw == index,
}"
>
{{ item.name }}
</li>
</ul>
</div>
<!-- <el-checkbox v-model="checked">自动选择目标</el-checkbox>
<el-checkbox v-model="checked">隐藏已经匹配的源字段</el-checkbox> -->
</el-col>
<el-col :span="6"
><div class="sourceField">
<ul class="ulHeightS">
<li
class="listw"
v-for="(item, index) in conversionField"
:key="item.id"
@click="switchJournalww(item, index)"
style="cursor: pointer"
:class="{
hover: outputIndexww == index,
checked: outputIndexww == index,
}"
>
{{ item.name }}
</li>
</ul>
</div>
<!-- <el-checkbox v-model="checked">自动选择源</el-checkbox>
<el-checkbox v-model="checked">隐藏已经匹配的目标字段</el-checkbox> -->
</el-col>
<el-col :span="4">
<div class="addSC">
<el-button @click="addMatchField">add</el-button>
<el-button @click="deleteFiel">删除</el-button>
</div></el-col
>
<el-col :span="8"
><div class="sourceField">
<ul class="ulHeightS">
<li
class="addList"
v-for="(item, index) in addSwitchFelt"
:key="item.id"
@click="addSwitchJournal(item, index)"
style="cursor: pointer"
:class="{
hover: addOutputIndex == index,
checked: addOutputIndex == index,
}"
>
{{ item.name }}
</li>
</ul>
</div></el-col
>
</el-row>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisibleFun">确 定</el-button>
</span>
</el-dialog>
<!-- 文件浏览器-->
<el-dialog
......@@ -425,7 +501,6 @@
:before-close="handleClose"
:modal="false"
>
<browseFiles :disabed="true" v-on:route="route"></browseFiles>
<span slot="footer" class="dialog-footer">
......@@ -435,8 +510,6 @@
>
</span>
</el-dialog>
</div>
</template>
......@@ -465,8 +538,11 @@ import {
availableCharsets,
previousSteps,
inputOutputFields,
mappingFields
mappingFields,
getSubTranStep,
nextSteps,
} from "@/api/kettle/link";
import loginVue from "../../../login.vue";
export default {
props: ["form", "nodeData", "saveOutputDialog", "mappingDialog"], //从父组件传过来的值
......@@ -478,7 +554,8 @@ export default {
connectionNode: [],
tableData: [],
newGraph: [],
filePathSelection:false,
filePathSelection: false,
dialogVisible: false,
metadataBox: false,
selectModifyBox: false,
inputBox: false,
......@@ -493,19 +570,29 @@ export default {
fileType: [],
codingType: [],
liList: [],
inputIndex: 0,
inputIndex: -1,
inputLies: { connector: [] },
inputField: {},
liListru: [],
outputIndex: 0,
outputIndex: -1,
outputIndexw: -1,
outputIndexww: -1,
addOutputIndex: -1,
outputLies: { connector: [] },
outputField: {},
steps: [],
stepsWto: [],
switchState: 1,
inputState: 1,
mappings: {},
inherit: "Y",
localPath:{},
localPath: {},
stepFields: [],
conversionField: [],
ontFelt: {},
twoFelt: {},
addSwitchFelt: [],
nextStepFelt: [],
};
},
......@@ -518,6 +605,7 @@ export default {
methods: {
clickFun(graph, val) {
console.log(val, "--------------------------");
this.mappings = [];
this.liList = [];
this.liListru = [];
......@@ -526,17 +614,18 @@ export default {
this.mappings = JSON.parse(val.mappings);
// console.log(val.mappings);
// console.log(this.mappings);
this.inherit = this.mappings.parameters.inherit_all_vars;
// console.log(this.mappings);
console.log(this.mappings.input);
// console.log(this.mappings.input);
// this.liList = this.mappings.input
console.log(this.mappings);
this.mappings.input.forEach((item, index) => {
console.log(item, index);
// console.log(item, index);
console.log(typeof item.connector == "string");
if (typeof item.connector === "string") {
item.connector = JSON.parse(item.connector);
this.liList.push(item);
console.log(this.liList);
} else {
this.liList.push(item);
}
......@@ -567,41 +656,91 @@ export default {
this.mappings.parameters.input.forEach((item, index) => {
console.log(item, index);
this.parameters.push({
variable: this.mappings.parameters.variable[index],
input: item,
variable: JSON.parse(this.mappings.parameters.variable[index]),
input: JSON.parse(item) ,
});
});
console.log(this.parameters);
}
},
fieldMapping(){
dialogVisibleFun() {
this.dialogVisible = !this.dialogVisible;
this.addSwitchFelt.forEach((item, index) => {
this.inputLies.connector.push({ parent: item.key1, child: item.key2 });
});
},
nextStep() {
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);
mappingFields(pamerFields).then(res=>{
console.log(res);
})
let steps = new FormData(); // 创建form对象
steps.append("stepName", this.nodeData.value.attributes.label.value);
steps.append("graphXml", this.graphXml);
steps.append("query", "");
nextSteps(steps).then((res) => {
this.nextStepFelt = res;
});
},
getSubTranStep(val) {
getSubTranStep({ path: this.form.filename, typeId: val }).then((res) => {
if (val == "MappingInput") {
this.steps = res;
} else {
this.stepsWto = res;
}
});
},
route(flowData){
this.localPath.fileName = flowData.name
console.log(this.localPath);
addMatchField() {
this.addSwitchFelt.push({
key1: this.ontFelt.name,
key2: this.twoFelt.name,
name: this.ontFelt.name + "-------->" + this.twoFelt.name,
});
console.log(this.addSwitchFelt);
},
deleteFiel() {
this.addSwitchFelt.splice(this.addOutputIndex, 1);
},
addFilePathSelection(){
this.filePathSelection = !this.filePathSelection
fieldMapping() {
this.dialogVisible = !this.dialogVisible;
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.nodeData.value.attributes.label.value);
pamerFiel.append("graphXml", this.graphXml);
pamerFiel.append("before", true);
inputOutputFields(pamerFiel).then((res) => {
console.log(res);
this.stepFields = res;
});
let pamerFields = new FormData(); // 创建form对象
pamerFields.append("stepName", this.inputLies.output_step);
this.form.directory = this.localPath.fileName
// pamerFields.append("graphXml", this.graphXml);
pamerFields.append("path", this.form.filename);
// pamerFields.append("before", false);
mappingFields(pamerFields).then((res) => {
console.log(res);
this.conversionField = res;
});
},
route(flowData) {
this.localPath.fileName = flowData.name;
console.log(this.localPath);
},
addFilePathSelection() {
this.filePathSelection = !this.filePathSelection;
this.form.filename = this.localPath.fileName;
},
inputSelection(val, index) {
......@@ -611,15 +750,15 @@ export default {
// console.log(this.mappings);
// this.inputState = val.input_step;
// // console.log(this.inputState);
// console.log(this.inputState);
// var index = this.liList.find(e =>{
// return e.index == val.index
// })
// console.log(index);
// // this.liList.splice(index, 1);
// // this.inputIndex = index
// // console.log(this.inputIndex.input_step);
// // this.inputIndex =
// this.liList.splice(index, 1);
// this.inputIndex = index
// console.log(this.inputIndex.input_step);
// this.inputIndex =
},
//修改数据
......@@ -637,12 +776,35 @@ export default {
this.outputLies = val;
},
switchJournalw(val, index) {
this.outputIndexw = index;
console.log(val);
// this.outputLies = val;
this.ontFelt = val;
},
switchJournalww(val, index) {
this.outputIndexww = index;
console.log(val);
// this.outputLies = val;
this.twoFelt = val;
},
addSwitchJournal(val, index) {
this.addOutputIndex = index;
console.log(val);
// this.outputLies = val;
// this.twoFelt = val
},
handleCloseFun() {
this.$emit("update:mappingDialog", false);
},
mappingDialogFun() {
this.form.mappings = JSON.parse(this.form.mappings);
this.form.mappings.input = []
this.form.mappings.output = []
// this.form.meta = JSON.stringify(this.meta);
// this.form.mappings.input = this.inputIndex
// this.form.mappings.parameters.inherit_all_vars = this.inherit
......@@ -656,21 +818,33 @@ export default {
w.push(item.input);
q.push(item.variable);
});
this.form.mappings.parameters.input = w;
this.form.mappings.parameters.variable = q;
console.log(this.form.mappings.parameters);
this.form.mappings.parameters.input = JSON.stringify(w);
this.form.mappings.parameters.variable = JSON.stringify(q);
// console.log(this.form.mappings.parameters);
this.form.mappings.parameters.inherit_all_vars = this.inherit;
// var qinput = []
// this.liList.forEach(item => {
// // item.connector = JSON.stringify(item.connector)
// qinput.push(item)
// })
this.form.mappings.input = this.liList;
this.form.mappings.output = this.liListru;
console.log(this.liList,'++++++++++');
console.log(this.liListru,'---------');
this.liList.forEach((item,index) => {
console.log(item,index);
item.connector = JSON.stringify(item.connector)
this.form.mappings.input.push(item)
});
this.liListru.forEach((item,index) => {
console.log(item,index);
item.connector = JSON.stringify(item.connector)
this.form.mappings.output.push(item)
});
// this.form.mappings.input = this.liList;
// console.log(this.liList, "this.liList");
// this.form.mappings.output = this.liListru;
this.form.mappings = JSON.stringify(this.form.mappings);
// this.form = JSON.stringify(this.form)
console.log(this.form.mappings);
console.log(this.form);
this.saveOutputDialog(this.form);
this.handleCloseFun();
},
......@@ -688,12 +862,12 @@ export default {
pamerFields.append("before", true);
inputOutputFields(pamerFields).then((res) => {
// this.parameters = res;
res.forEach((item,index)=>{
console.log(item,index);
res.forEach((item, index) => {
console.log(item, index);
this.parameters.push({
variable:item.name
})
})
variable: item.name,
});
});
console.log(res);
});
},
......@@ -866,6 +1040,18 @@ export default {
* {
outline: none;
}
.sourceField {
width: 100%;
height: 500px;
border: 1px solid #ccc;
}
.addSC {
width: 100%;
height: 500px;
padding-top: 250px;
// border: 1px solid #ccc;
}
.leftDiv {
width: 150px;
......@@ -881,6 +1067,11 @@ export default {
width: 120px;
height: 400px;
}
.ulHeightS {
border: 1px solid #d2e0f1;
width: 100%;
height: 500px;
}
.list.hover {
cursor: pointer;
......@@ -891,6 +1082,24 @@ export default {
background-color: #4e9df8;
color: #fff;
}
.addList.hover {
cursor: pointer;
background-color: #eeeeee;
}
.addList.checked {
background-color: #4e9df8;
color: #fff;
}
.listw.hover {
cursor: pointer;
background-color: #eeeeee;
}
.listw.checked {
background-color: #4e9df8;
color: #fff;
}
.rightDiv {
width: 550px;
height: 400px;
......
src/views/dashboard-kettle/components/appBulletFrame/mappingInput.vue
......@@ -24,8 +24,8 @@
<el-table-column label="字段">
<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="precision" label="精度"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
......@@ -47,7 +47,7 @@
</el-form-item >
<el-form-item >
<el-checkbox
v-model="form.capture_step_performance"
v-model="form.select_unspecified"
true-label="Y"
false-label="N"
></el-checkbox>
......@@ -70,7 +70,7 @@
:before-close="handleClose"
: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-input v-model="fiel.name"></el-input>
</el-form-item>
......@@ -79,12 +79,20 @@
<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"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
</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>
<span slot="footer" class="dialog-footer">
......@@ -96,7 +104,7 @@
</template>
<script>
import { systemDataTypes } from "@/api/kettle/link";
import { valueMeta } from "@/api/kettle/link";
export default {
props: ["form", "mappingInputDialog", "saveOutputDialog", "nodeData"],
data() {
......@@ -110,7 +118,6 @@ export default {
},
created() {
this.systemDataTypesFun();
},
methods: {
......@@ -119,6 +126,8 @@ export default {
this.newGraph = graph;
console.log(val, "拿到form");
this.fields = JSON.parse(val.fields);
this.valueMetaFun();
},
handleCloseFun() {
......@@ -161,8 +170,8 @@ export default {
}
},
systemDataTypesFun() {
systemDataTypes().then((res) => {
valueMetaFun() {
valueMeta().then((res) => {
this.type = res;
});
},
......
src/views/dashboard-kettle/components/appBulletFrame/mappingOutput.vue
......@@ -12,9 +12,6 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseFun">取 消</el-button>
<el-button type="primary" @click="mappingOutputDialogFun"
......@@ -23,35 +20,7 @@
</span>
</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>
</template>
......@@ -61,16 +30,11 @@ export default {
props: ["form", "mappingOutputDialog", "saveOutputDialog", "nodeData"],
data() {
return {
addField: false,
fields: [],
type: {},
dataStatus: false,
fiel: {},
};
},
created() {
this.systemDataTypesFun();
},
methods: {
......@@ -78,7 +42,6 @@ export default {
console.log(graph, "双击获取值");
this.newGraph = graph;
console.log(val, "拿到form");
this.fields = JSON.parse(val.fields);
},
handleCloseFun() {
......@@ -87,17 +50,10 @@ export default {
mappingOutputDialogFun() {
this.handleCloseFun();
this.form.fields = JSON.stringify(this.fields);
this.saveOutputDialog(this.form);
},
addFieldDetermine() {
this.addField = !this.addField;
if (this.dataStatus) {
this.fields.push(this.fiel);
} else {
}
},
// 关闭弹框
handleClose(done) {
this.$confirm("确认关闭？")
......@@ -111,21 +67,8 @@ export default {
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>
......
src/views/dashboard-kettle/components/appBulletFrame/nullOperation.vue
......@@ -13,11 +13,9 @@
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cd">取 消</el-button>
<el-button type="primary" @click="fetch"
<el-button @click="nullOperationDialog = false">取 消</el-button>
<el-button type="primary" @click="nullOperationDialogFun"
>确 定</el-button
>
</span>
......@@ -75,69 +73,10 @@ export default {
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) {
console.log(graph, "双击获取值");
this.newGraph = graph;
console.log(val, "拿到form");
this.fields = JSON.parse(val.fields);
},
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 {
return {
// prefix:'http://192.168.0.2:9700/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: [
{
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -845,6 +845,18 @@
:saveOutputDialog="saveOutputDialog"
></mergeRecords>
<!-- 记录连接-->
<recordConnection
ref="recordConnection"
:disabed="true"
:form="form"
:nodeData="nodeData"
:recordConnectionDialog.sync="recordConnectionDialog"
:saveOutputDialog="saveOutputDialog"
></recordConnection>
<!-- 改变开始复制的数量 -->
<el-dialog
title="改变开始复制的数量"
......@@ -1220,6 +1232,7 @@ import sortRecord from "../appBulletFrame/sortRecord"; //排序记录
import setVariable from "../appBulletFrame/setVariable"; //设置变量
import getVariable from "../appBulletFrame/getVariable"; //获取变量
import mergeRecords from "../appBulletFrame/mergeRecords"; //合并记录
import recordConnection from '../appBulletFrame/recordConnection';//记录连接
import selectField from "../appBulletFrame/selectField"; //选择字段
import toRepeat from "../appBulletFrame/toRepeat"; //去除重复
import mapping from "../appBulletFrame/mapping"; //映射(子转换)
......@@ -1349,6 +1362,7 @@ export default {
setVariableDialog: false, //设置变量
getVariableDialog: false, //获取变量
mergeRecordsDialog: false, //合并记录
recordConnectionDialog:false,//记录连接
selectFieldDialog: false, //选择字段
conversionSettingsDialog: false, //转换设置
jobSettingsDialog: false, //作业设置
......@@ -1458,6 +1472,7 @@ export default {
setVariable, //设置变量
getVariable, //获取变量
mergeRecords, //合并记录
recordConnection,// 记录连接
selectField, //选择字段
conversionSettings, //转换设置
jobSettings, //作业设置
......@@ -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() {
console.log(this.form, "数据");
......@@ -2170,11 +2173,32 @@ export default {
valueFormat(pamer2).then((res) => {
this.fieldFormat = res;
});
// if (this.curFileType == "transformation" && cell.dis == "step98") ||
// cell.value.attributes.ctype.value == "Dummy" ) {
// }else
if (
if ( (this.curFileType == "transformation" && cell.dis == "srep167") ||
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") ||
cell.value.attributes.ctype.value == "Dummy"
) {
......@@ -2586,14 +2610,14 @@ export default {
this.$refs.conversionSettings.clickFun(this.graph, this.form); //向子组件传递画布
}, 500);
});
menu.addItem("映射输入规范", null, () => {
console.log(cell, "当前节点");
this.mappingInputDialog = !this.mappingInputDialog;
});
menu.addItem("映射输出规范", null, () => {
console.log(cell, "当前节点");
this.mappingOutputDialog = !this.mappingOutputDialog;
});
// menu.addItem("映射输入规范", null, () => {
// console.log(cell, "当前节点");
// this.mappingInputDialog = !this.mappingInputDialog;
// });
// menu.addItem("映射输出规范", null, () => {
// console.log(cell, "当前节点");
// this.mappingOutputDialog = !this.mappingOutputDialog;
// });
// menu.addItem("空操作", null, () => {
// console.log(cell, "当前节点");
// 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