Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
ETL-admin
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
莫晓莉
ETL-admin
Commits
4fab0b48
Commit
4fab0b48
authored
Apr 10, 2021
by
李耀锟
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完成输入工具模块
parent
5230c886
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
299 additions
and
125 deletions
+299
-125
src/api/kettle/link.js
+9
-0
src/views/dashboard-kettle/components/appBulletFrame/customConstant.vue
+2
-2
src/views/dashboard-kettle/components/appBulletFrame/generatingRecords.vue
+3
-3
src/views/dashboard-kettle/components/appBulletFrame/getSystemInformation.vue
+1
-1
src/views/dashboard-kettle/components/appBulletFrame/randomNumber.vue
+1
-1
src/views/dashboard-kettle/components/appBulletFrame/tableInput.vue
+122
-85
src/views/dashboard-kettle/components/appBulletFrame/textFileInput.vue
+50
-12
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
+111
-21
No files found.
src/api/kettle/link.js
View file @
4fab0b48
...
...
@@ -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
View file @
4fab0b48
...
...
@@ -104,7 +104,7 @@
</el-form-item>
<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
v-for=
"item in fieldType"
:key=
"item.index"
...
...
@@ -115,7 +115,7 @@
</el-form-item>
<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
v-for=
"item in fieldFormat"
:key=
"item.index"
...
...
src/views/dashboard-kettle/components/appBulletFrame/generatingRecords.vue
View file @
4fab0b48
...
...
@@ -92,7 +92,7 @@
</el-form-item>
<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
v-for=
"item in fieldType"
:key=
"item.id"
...
...
@@ -103,7 +103,7 @@
</el-form-item>
<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
v-for=
"item in fieldFormat"
:key=
"item.index"
...
...
@@ -138,7 +138,7 @@
</el-form-item>
<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=
"Y"
></el-option>
</el-select>
...
...
src/views/dashboard-kettle/components/appBulletFrame/getSystemInformation.vue
View file @
4fab0b48
...
...
@@ -52,7 +52,7 @@
</el-form-item>
<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
v-for=
"item in type"
:key=
"item.code"
...
...
src/views/dashboard-kettle/components/appBulletFrame/randomNumber.vue
View file @
4fab0b48
...
...
@@ -57,7 +57,7 @@
</el-form-item>
<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
v-for=
"item in random"
:key=
"item.type"
...
...
src/views/dashboard-kettle/components/appBulletFrame/tableInput.vue
View file @
4fab0b48
...
...
@@ -15,9 +15,13 @@
style=
"width: 100%"
@
change=
"getField"
@
focus=
"getGraphDataBases"
clearable
>
<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
v-model=
"form.connection"
style=
"width: 100%"
@
change=
"getField()"
>
...
...
@@ -30,12 +34,12 @@
</el-select>
-->
</el-col>
<el-col
class=
"line"
:span=
"2"
>
<el-button
size=
"mini"
@
click=
"dialogVisibleFourthFun"
<el-button
size=
"mini"
@
click
.
native
=
"dialogVisibleFourthFun"
>
编辑
</el-button
></el-col
>
<el-col
class=
"line"
:span=
"2"
>
<el-button
size=
"mini"
@
click=
"dialogVisibleFourthNew"
<el-button
size=
"mini"
@
click
.
native
=
"dialogVisibleFourthNew"
>
新建
</el-button
></el-col
>
...
...
@@ -43,7 +47,7 @@
<el-button
size=
"mini"
>
向导
</el-button></el-col
>
<el-col
class=
"line"
:span=
"5"
>
<el-button
size=
"mini"
@
click=
"SQLPopup"
<el-button
size=
"mini"
@
click
.
native
=
"SQLPopup"
>
获取SQL查询语句
</el-button
></el-col
>
...
...
@@ -72,7 +76,12 @@
</el-form-item>
<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
v-for=
"item in connectionNode"
:key=
"item.id"
...
...
@@ -101,6 +110,7 @@
width=
"500px"
:before-close=
"handleClose"
:modal=
"false"
v-if=
"browsing"
>
<el-tree
:data=
"browsingData"
...
...
@@ -135,6 +145,8 @@
</span>
</el-dialog>
<estab-dialog
ref=
"establishDia"
:dialogVisibleFourth
.
sync=
"dialogVisibleFourth"
...
...
@@ -145,7 +157,8 @@
:chooseFlag
.
sync=
"chooseFlag"
:form
.
sync=
"form"
:getXmlVal=
"getXmlVal"
:graph=
"graph"
:noneRespository=
"noneRespository"
:graph
.
sync=
"newGraph"
></estab-dialog>
<!--
<database-choose
ref=
"databaseChoose"
:form
.
sync=
"tableOutForm"
:getXmlVal=
"getXmlVal"
:graph=
"newGraph"
></database-choose>
-->
...
...
@@ -153,29 +166,48 @@
</
template
>
<
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
{
tableFields
,
explorer2
,
listDatabases
,
listNames
,
previousSteps
,
}
from
"@/api/kettle/link"
;
export
default
{
props
:
[
"connectionNode"
,
"stepName"
,
"form"
,
"graphXml"
,
"getXmlVal
"
,
"graph"
],
//从父组件传过来的值
props
:
[
"stepName"
,
"form"
,
"graphXml"
,
"getXmlVal"
,
"nodeData
"
,
"graph"
],
//从父组件传过来的值
components
:
{
main
,
},
data
()
{
return
{
tableDetails
:{},
connectionNode
:[],
dataFlow
:
false
,
tableDetails
:
{},
connectionName
:
""
,
browsing
:
false
,
dialogVisibleFourth
:
false
,
scanDialogVisible
:
false
,
newForm
:
{},
namesList
:[],
namesList
:
[],
noneRespository
:
1
,
//判断是保存画布还是传后台
newGraph
:
{},
ComboBox
:
[],
library
:
[],
PopupFrom
:
{},
...
...
@@ -186,7 +218,7 @@ export default {
label
:
"text"
,
},
d
ataBaseName
:
""
,
formD
ataBaseName
:
""
,
curNode
:
{},
chooseType
:
"表"
,
chooseFlag
:
false
,
...
...
@@ -196,26 +228,24 @@ export default {
created
()
{
this
.
listDatabasesFun
();
},
// 监听编号好后获取选择的数据库的树形里列表
watch
:
{
d
ataBaseName
:
{
handler
(
newValue
,
oldValue
)
{
console
.
log
(
"obj changed"
);
if
(
newValue
)
{
this
.
$refs
.
establishDia
.
scanDialogOpen
();
this
.
chooseFlag
=
true
;
}
},
deep
:
true
,
},
// form(newValue, oldValue){ // this.form=newValue; // }
},
//
watch: {
// formD
ataBaseName: {
//
handler(newValue, oldValue) {
//
console.log("obj changed");
//
if (newValue) {
//
this.$refs.establishDia.scanDialogOpen();
//
this.chooseFlag = true;
//
}
//
},
//
deep: true,
//
}, // form(newValue, oldValue){ // this.form=newValue; // }
//
},
methods
:
{
clickFun
(
graph
){
console
.
log
(
graph
,
1
)
this
.
graph
=
graph
clickFun
(
graph
)
{
console
.
log
(
graph
,
1
);
this
.
newGraph
=
graph
;
setTimeout
(()
=>
{
this
.
$refs
.
establishDia
.
clickFun
(
graph
,
121331
);
this
.
$refs
.
establishDia
.
clickFun
(
graph
,
121331
);
},
500
);
},
...
...
@@ -226,8 +256,8 @@ export default {
// //获取新建弹窗返回来的值
getSonValue
(
res
)
{
if
(
typeof
res
==
"string"
)
{
this
.
d
ataBaseName
=
res
;
console
.
log
(
"接收子组件的值1111111----"
,
this
.
d
ataBaseName
);
this
.
formD
ataBaseName
=
res
;
console
.
log
(
"接收子组件的值1111111----"
,
this
.
formD
ataBaseName
);
}
else
if
(
typeof
res
==
"object"
)
{
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;
...
...
@@ -266,14 +296,14 @@ export default {
// },
//获取新建弹窗返回来的值
getGraphDataBases
()
{
getGraphDataBases
()
{
// var graph = this.getGraph();
var
root
=
this
.
graph
.
getDefaultParent
(),
data
=
[];
if
(
root
.
getAttribute
(
'databases'
)
!=
null
)
data
=
JSON
.
parse
(
root
.
getAttribute
(
'databases'
));
console
.
log
(
'获取到画布上的databases===='
,
data
);
this
.
namesList
=
data
;
var
root
=
this
.
newGraph
.
getDefaultParent
(),
data
=
[];
if
(
root
.
getAttribute
(
"databases"
)
!=
null
)
data
=
JSON
.
parse
(
root
.
getAttribute
(
"databases"
)
);
console
.
log
(
"获取到画布上的databases===="
,
data
)
;
this
.
namesList
=
data
;
},
// 查询已经建立的所有数据库列表
listNames
()
{
...
...
@@ -286,44 +316,83 @@ export default {
}
});
},
dialogVisibleFourthNew
()
{
this
.
dialogVisibleFourth
=
true
;
// this.$refs.establishDia.database();
// this.$refs.establishDia.accessMethod(); //获取连接方式
this
.
$refs
.
establishDia
.
clickFun
(
this
.
graph
);
//先把画布传过去
this
.
$refs
.
establishDia
.
clickFun
(
this
.
newGraph
);
//先把画布传过去
this
.
$refs
.
establishDia
.
getTransDatabase
();
this
.
$refs
.
establishDia
.
accessMethod
();
//获取连接方式
this
.
$refs
.
establishDia
.
accessMethod
();
//获取连接方式
},
dialogVisibleFourthFun
()
{
this
.
dialogVisibleFourth
=
true
;
// this.$refs.establishDia.database(this.connectionName);
this
.
$refs
.
establishDia
.
clickFun
(
this
.
graph
);
//先把画布传过去
if
(
this
.
selectName
){
this
.
dialogVisibleFourth
=
true
;
this
.
$refs
.
establishDia
.
clickFun
(
this
.
newGraph
);
//先把画布传过去
if
(
this
.
form
.
connection
)
{
this
.
dialogVisibleFourth
=
true
;
this
.
$refs
.
establishDia
.
getTransDatabase
(
this
.
form
.
connection
);
this
.
$refs
.
establishDia
.
accessMethod
();
//获取连接方式
}
// 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
)
{
this
.
library
=
this
.
ComboBox
.
find
((
e
)
=>
{
this
.
library
=
this
.
namesList
.
find
((
e
)
=>
{
return
e
.
name
==
val
;
});
console
.
log
(
this
.
library
);
console
.
log
(
this
.
library
,
"////////////////////////"
);
this
.
connectionName
=
val
;
},
addBrowsing
()
{
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对象
mps
.
append
(
"graphXml"
,
this
.
graph
Xml
);
mps
.
append
(
"graphXml"
,
gr
Xml
);
mps
.
append
(
"databaseName"
,
this
.
library
.
name
);
mps
.
append
(
"schema"
,
"test"
);
mps
.
append
(
"schema"
,
this
.
tableDetails
.
nodeId
);
mps
.
append
(
"table"
,
this
.
tableDetails
.
text
);
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 {
if
(
this
.
form
.
connection
)
{
this
.
browsing
=
!
this
.
browsing
;
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
{
this
.
$message
.
error
(
"请选择数据库"
);
console
.
log
(
this
.
stepName
);
...
...
@@ -370,6 +407,7 @@ export default {
},
loadDataTree
(
node
,
resolve
)
{
setTimeout
(()
=>
{
if
(
node
.
level
===
0
)
{
let
pamq
=
new
FormData
();
// 创建form对象
pamq
.
append
(
"databaseInfo"
,
JSON
.
stringify
(
this
.
library
));
...
...
@@ -402,6 +440,7 @@ export default {
}
});
}
},
500
);
// if (node.level > this.PopupFrom.length) return resolve([]);
},
...
...
@@ -409,9 +448,7 @@ export default {
handleNodeClick
(
data
,
node
)
{
console
.
log
(
"点击当前节点node==="
,
node
);
console
.
log
(
"点击当前节点data==="
,
data
);
this
.
tableDetails
=
data
this
.
tableDetails
=
data
;
},
handleClose
(
done
)
{
...
...
src/views/dashboard-kettle/components/appBulletFrame/textFileInput.vue
View file @
4fab0b48
...
...
@@ -87,7 +87,7 @@
</el-form-item>
<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
v-for=
"item in connectionNode"
:key=
"item.id"
...
...
@@ -110,7 +110,7 @@
<el-tab-pane
label=
"内容"
>
<el-form
ref=
"form"
:model=
"form"
label-width=
"200px"
>
<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=
"Fixed"
value=
"Fixed"
></el-option>
</el-select>
...
...
@@ -210,7 +210,7 @@
<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
v-for=
"item in fieldCompress"
:key=
"item.index"
...
...
@@ -266,7 +266,7 @@
</el-form-item>
<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
v-for=
"item in fileType"
:key=
"item.index"
...
...
@@ -278,7 +278,7 @@
<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
v-for=
"item in codingType"
:key=
"item.index"
...
...
@@ -471,9 +471,10 @@
<el-tab-pane
label=
"字段"
>
<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-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>
...
...
@@ -611,7 +612,7 @@
</el-form-item>
<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
v-for=
"item in fieldType"
:key=
"item.id"
...
...
@@ -622,7 +623,7 @@
</el-form-item>
<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
v-for=
"item in fieldFormat"
:key=
"item.index"
...
...
@@ -668,7 +669,7 @@
</el-form-item>
<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=
"left"
></el-option>
<el-option
label=
"去掉右空格"
value=
"right"
></el-option>
...
...
@@ -700,7 +701,7 @@
</el-form-item>
<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
v-for=
"item in fieldFormat"
:key=
"item.index"
...
...
@@ -752,15 +753,31 @@
<
script
>
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
{
props
:
[
"connectionNode"
,
"form"
],
//从父组件传过来的值
props
:
[
"connectionNode"
,
"form"
,
"nodeData"
],
//从父组件传过来的值
components
:
{
browseFiles
,
},
data
()
{
return
{
newGraph
:[],
fileBox
:
false
,
filterBox
:
false
,
fieldBox
:
false
,
...
...
@@ -796,6 +813,27 @@ export default {
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
(){
this
.
fileNameStore
.
push
(
this
.
fileSelection
)
console
.
log
(
this
.
fileNameStore
,
789787987987987
);
...
...
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
View file @
4fab0b48
...
...
@@ -111,7 +111,7 @@
<el-tab-pane
label=
"文件"
name=
"file"
>
<el-form
ref=
"form"
:model=
"form"
label-width=
"120px"
>
<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
v-for=
"item in engine"
:key=
"item.code"
...
...
@@ -177,7 +177,7 @@
style=
"width: 100%"
:disabled=
"
!form.accept_filenames || form.accept_filenames == 'N'"
@
click
.
native=
"lastStep"
@
click
.
native=
"lastStep"
clearable
>
<el-option
...
...
@@ -196,7 +196,7 @@
:disabled=
"
!form.accept_filenames || form.accept_filenames == 'N'
"
@
click
.
native=
"previousField"
@
click
.
native=
"previousField"
clearable
>
<el-option
v-for=
"item in getField"
:key=
"item.id"
...
...
@@ -272,7 +272,7 @@
</el-form-item>
<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
v-for=
"item in codingType"
:key=
"item.index"
...
...
@@ -445,9 +445,8 @@
</el-tab-pane>
<el-tab-pane
label=
"字段"
name=
"field"
>
<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=
"fields"
style=
"width: 100%"
>
<el-table-column
prop=
"name"
label=
"名称"
>
</el-table-column>
...
...
@@ -630,7 +629,7 @@
</el-form-item>
<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
v-for=
"item in fieldType"
:key=
"item.id"
...
...
@@ -649,7 +648,7 @@
</el-form-item>
<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=
"left"
></el-option>
<el-option
label=
"去掉右空格"
value=
"right"
></el-option>
...
...
@@ -662,7 +661,7 @@
</el-form-item>
<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
v-for=
"item in fieldFormat"
:key=
"item.index"
...
...
@@ -699,17 +698,18 @@
>
<tableInput
:disabled=
"true"
:connectionNode=
"connectionNode"
:form=
"form"
:graphXml=
"graphXml"
ref=
"TableInputDialog2"
:nodeData=
"nodeData"
ref=
"tableInputDialog"
>
</tableInput>
<span
slot=
"footer"
class=
"dialog-footer"
>
<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
>
</span>
...
...
@@ -800,6 +800,7 @@
:disabed=
"true"
:connectionNode=
"connectionNode"
:form=
"form"
:nodeData=
"nodeData"
></textFileInput>
<span
slot=
"footer"
class=
"dialog-footer"
>
...
...
@@ -894,6 +895,32 @@
:transGraphVisible
.
sync=
"transGraphVisible"
:getXmlVal=
"getXmlVal"
></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>
</template>
...
...
@@ -911,6 +938,7 @@ import {
valueMeta
,
save
,
newStep
,
previewData
}
from
"@/api/kettle/link"
;
// 输入弹窗
import
tableInput
from
"../appBulletFrame/tableInput"
;
...
...
@@ -962,7 +990,10 @@ export default {
data
()
{
return
{
nodeData
:[],
dataBrowsing
:[],
dataField
:[],
dataFlow
:
false
,
myoutPutFormData
:{},
outPutFormData1
:{},
outPutFormData2
:{},
...
...
@@ -1157,6 +1188,47 @@ export default {
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
()
{
this
.
graph
.
getModel
().
beginUpdate
();
try
{
...
...
@@ -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
(){
this
.
ConstantDialog
=
!
this
.
ConstantDialog
console
.
log
(
this
.
$refs
.
ConstantDialog
.
data
,
'asghaksghk'
);
...
...
@@ -1400,8 +1484,8 @@ lastStep(){
this
.
graphXml
=
mxUtils
.
getPrettyXml
(
node
);
let
pamerSteps
=
new
FormData
();
// 创建form对象
pamerSteps
.
append
(
"stepName"
,
this
.
nodeData
.
titl
e
);
pamerSteps
.
append
(
"graphXml"
,
this
.
g
etXmlVa
l
);
pamerSteps
.
append
(
"stepName"
,
this
.
nodeData
.
value
.
attributes
.
label
.
valu
e
);
pamerSteps
.
append
(
"graphXml"
,
this
.
g
raphXm
l
);
pamerSteps
.
append
(
"query"
,
""
);
previousSteps
(
pamerSteps
).
then
((
res
)
=>
{
this
.
connectionNode
=
res
...
...
@@ -1415,8 +1499,8 @@ previousField(){
this
.
graphXml
=
mxUtils
.
getPrettyXml
(
node
);
let
pamerFields
=
new
FormData
();
// 创建form对象
pamerFields
.
append
(
"stepName"
,
this
.
nodeData
.
titl
e
)
pamerFields
.
append
(
"graphXml"
,
this
.
g
etXmlVa
l
);
pamerFields
.
append
(
"stepName"
,
this
.
nodeData
.
value
.
attributes
.
label
.
valu
e
)
pamerFields
.
append
(
"graphXml"
,
this
.
g
raphXm
l
);
pamerFields
.
append
(
"before"
,
true
);
pamerFields
.
append
(
"query"
,
""
);
inputOutputFields
(
pamerFields
).
then
((
res
)
=>
{
...
...
@@ -1505,8 +1589,8 @@ previousField(){
// this.setXml();
this
.
doubleClickCell
=
cell
;
// 获取接口数据
// 获取接口数据
availableCharsets
(
pamer
).
then
((
res
)
=>
{
this
.
codingType
=
res
;
});
...
...
@@ -1570,8 +1654,10 @@ previousField(){
this
.
form
=
q
;
this
.
form
.
sql
=
decodeURIComponent
(
this
.
form
.
sql
)
console
.
log
(
this
.
form
,
456465465
);
this
.
$refs
.
TableInputDialog2
.
clickFun
(
this
.
graph
);
setTimeout
(()
=>
{
this
.
$refs
.
tableInputDialog
.
clickFun
(
this
.
graph
);
},
500
);
return
;
}
else
if
(
...
...
@@ -1654,6 +1740,9 @@ previousField(){
q
.
inputFields
=
JSON
.
parse
(
q
.
inputFields
)
q
.
filter
=
JSON
.
parse
(
q
.
filter
)
this
.
form
=
q
;
setTimeout
(()
=>
{
this
.
$refs
.
TextFileInputDialog
.
clickFun
(
this
.
graph
)
},
500
);
return
;
}
else
if
(
cell
.
ids
==
"step17"
||
...
...
@@ -1662,6 +1751,7 @@ previousField(){
//表输出
this
.
tableOutPutVisible
=
!
this
.
tableOutPutVisible
;
this
.
outPutFormData1
=
this
.
showDataFunc
();
this
.
$refs
.
tableOutPut
.
clickFun
(
this
.
graph
);
return
;
}
else
if
(
cell
.
ids
==
"step16"
||
cell
.
value
.
attributes
.
ctype
.
value
==
"Update"
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment