Skip to content

E
ETL-admin
Commit 1807c413 by 莫晓莉
Options

流程组件switch保存和回显

parent b36ea399
Showing with 393 additions and 8 deletions
src/api/kettle/file.js
......@@ -347,6 +347,17 @@ export function getEntries(data) {
method: 'post'
})
}
// 获取默认目标步骤
export function nextSteps(data) {
return request({
url: 'etlweb/trans/nextSteps',
data,
method: 'post'
})
}
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -898,10 +898,17 @@
<homeworkDialog ref="myhomework" :jobHomeworkVisible.sync="jobHomeworkVisible" :saveOutputDialog="saveOutputDialog" :jobWorkFormSend="outPutFormData11" :doubleClickCell="doubleClickCell"></homeworkDialog>
<setvalue ref="mySet" :jobSetVisible.sync="jobSetVisible" :saveOutputDialog="saveOutputDialog" :setFormSend="outPutFormData12" :doubleClickCell="doubleClickCell"></setvalue>
<startDialog ref="myStart" :jobStartVisible.sync="jobStartVisible" :saveOutputDialog="saveOutputDialog" :startFormSend="outPutFormData10" :doubleClickCell="doubleClickCell"></startDialog>
<successDialog ref="mySuccess" :jobSuccessVisible.sync="jobSuccessVisible" :saveOutputDialog="saveOutputDialog" :successFormSend="outPutFormData14" :doubleClickCell="doubleClickCell"></successDialog>
<successDialog ref="mySuccess" :jobSuccessVisible.sync="jobSuccessVisible" :saveOutputDialog="saveOutputDialog" :successFormSend="outPutFormData14" :doubleClickCell="doubleClickCell"></successDialog>
<!-- 作业弹窗组件end------------------------------------->
<!-- 转换弹窗组件start333 ------------------------------>
<switchDialog
ref="switch"
:switchVisible.sync="switchVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:switchFormSend="outPutFormData15"></switchDialog>
<!-- 转换弹窗组件end33333------------------------------ -->
<!-- 执行转换开始 -->
<trans-graph
......@@ -993,9 +1000,12 @@ import setvalue from "../../../job-dialog/set-value";
import startDialog from "../../../job-dialog/start";
import successDialog from "../../../job-dialog/success";
import homeworkDialog from "../../../job-dialog/homework";
// 作业弹窗组件结束---------------------------------------
// 流程弹窗组件start3333--------------------
import switchDialog from "../../../stream-dialog/switch";
// 作业弹窗组件结束---------------------------------------
// 流程弹窗组件end3333333333----------------
import mxgraph from "@/utils/mxgraph";
......@@ -1049,6 +1059,9 @@ export default {
outPutFormData13:{},//作业---转换
outPutFormData14:{},//作业---成功
outPutFormData:{},//输出弹窗组件的表单值
// 转换33start---------
outPutFormData15:{},//转换--字段选择
// 转换3end------------
doubleClickCell:{},
getField:[],
transGraphVisible:false,//执行转换弹窗
......@@ -1083,6 +1096,9 @@ export default {
myjobTransVisible:false,
jobSuccessVisible:false,
// 作业弹窗组件数据end----------
// 流程弹窗组件start----------
switchVisible:false,
// 流程弹窗组件end------------
// 输入模块
file: [],
......@@ -1171,8 +1187,11 @@ export default {
setvalue,
startDialog,
successDialog,
homeworkDialog
homeworkDialog,
// 作业弹簧组件end----------------------
// 转换弹窗组件start---------
switchDialog,
// 转换弹窗组件end-----------
},
//自定义指令 https://www.jb51.net/article/108047.htm
directives: {
......@@ -2036,10 +2055,15 @@ previousField(){
setTimeout(() => {
this.$refs.mytrans.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}else if((this.curFileType=="transformation" && cell.ids == "step36") || cell.value.attributes.ctype.value == "SwitchCase"){
//流程--Switch / Case
this.switchVisible = !this.switchVisible;
this.outPutFormData15 = this.showDataFunc();
setTimeout(() => {
this.$refs.switch.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}
});
......
src/views/stream-dialog/switch.vue 0 → 100644
<template>
<div>
<el-dialog
title="Switch/Case"
:visible.sync="switchVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="delForm" :model="myForm" label-width="180px">
<el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item>
<div style="border:1px solid #99BBE8;padding:15px 15px;margin-bottom:15px;">
<el-form-item label="Switch 字段:" >
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.fieldname" style="width: 100%" @focus="inputOutputFields">
<!-- <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> -->
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="使用字符串包含比较符:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.use_contains" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Case值数据类型:" >
<el-row :gutter="10">
<el-col :span="23">
<!-- <el-select v-model="myForm.case_value_type" style="width: 100%" >
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select> -->
<el-select v-model="myForm.case_value_type" style="width: 100%" @focus="getValueMetaStore">
<el-option v-for="(item,index) in metaStoreList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Case值转换掩码:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.case_value_format"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Case值小数点符号:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.case_value_decimal"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Case值分组标志:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.case_value_group"></el-input>
</el-col>
</el-row>
</el-form-item>
</div>
<el-card style="margin-bottom:15px;" class="box-card">
<div slot="header" class="clearfix">
<span>Case值映射</span>
<el-button style="padding: 3px 0;margin-left:50px;" type="text" @click="fieldClick(true)">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields('get')">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除全部</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form1" :model="fieldForm" label-width="80px">
<el-form-item label="值:">
<el-input v-model="fieldForm.value"></el-input>
</el-form-item>
<el-form-item label="目标步骤:">
<el-input v-model="fieldForm.target_step"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
<el-form-item label="默认目标步骤:" >
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.default_target_step" style="width: 100%" >
<!-- <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> -->
<el-option v-for="(item,index) in goalList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
tableFields,
inputOutputFields,//获取表输出
getValueMetaStore,
nextSteps,//默认目标步骤
} from "@/api/kettle/file";
export default ({
data(){
return{
goalList:[],
metaStoreList:[],//类型
myForm:{},//解决子组件改变父组件传递props属性报错
newGraph:{},
fieldsList1:[],
fieldsList2:[],
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
stepName:{name:'删除'},
activeName:'content',
// 查询字段--start------------
fieldsList:[],//字段获取
keyConditionList:[{value: '=', text: '='},
{value: '<>', text: '<>'},
{value: '<', text: '<'},
{value: '<=', text: '<='},
{value: '>', text: '>'},
{value: '>=', text: '>='},
{value: 'LIKE', text: 'LIKE'},
{value: 'BETWEEN', text: 'BETWEEN'},
{value: 'IS NULL', text: 'IS NULL'},
{value: 'IS NOT NULL', text: 'IS NOT NULL'}],
// 表头数据
tableHead:[
{
column_name: "value",column_comment:"值"
},
{
column_name: "target_step",column_comment:"目标步骤"
},
],
// 表格数据
tableData: [
],
// 查询字段--end------------
}
},
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
switchFormSend(val){
console.log("回显的表单数据===",val);
this.myForm=val;
if(this.myForm.cases){
var ny=JSON.parse(this.myForm.cases);
this.tableData=ny;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
props:["title","nodePath","switchVisible","doubleClickCell","saveOutputDialog","switchFormSend","getXmlVal"],
mounted(){
},
created(){
},
methods:{
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph;
this.nextSteps();//获取默认目标步骤
},
handleClose(){
this.$emit("update:switchVisible", false);
},
confirm(){
this.myForm.cases=JSON.stringify(this.tableData);//字段复值
console.log('弹窗数据：===',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
tableFields(){
if(this.doubleClickCell){
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("databaseName", this.myForm.connection);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("schema", this.myForm.schema);
pamer.append("table", this.myForm.table);
pamer.append("query", '');
tableFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList1=res;
})
},
//获取表输出
inputOutputFields(par){
if(this.doubleClickCell){
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
this.fieldsList2=res;
})
},
//删除全部
deleteFields(){
this.tableData=[];
},
// 获取字段类型
getValueMetaStore(){
var formData = new FormData();
formData.append('query', '');
getValueMetaStore(formData).then(res=>{
if (res) {
console.log('字段类型==',res);
this.metaStoreList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
// 获取默认目标步骤
nextSteps(){
if(this.doubleClickCell){
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("query", '');
nextSteps(pamer).then(res=>{
console.log('字段',res);
this.goalList=res;
})
},
}
})
</script>
\ No newline at end of file
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