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
f0cb22fa
Commit
f0cb22fa
authored
Mar 31, 2021
by
李耀琨
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完成xml回显
parent
5b6a0b09
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
164 additions
and
108 deletions
+164
-108
.env.development
+2
-2
src/utils/mxgraph.js
+16
-0
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
+146
-106
No files found.
.env.development
View file @
f0cb22fa
ENV = 'development'
VUE_APP_BASE_API = 'http://192.168.0.
2
:9888/'
VUE_APP_WS_API = 'ws://192.168.0.
2
:9888/'
VUE_APP_BASE_API = 'http://192.168.0.
44
:9888/'
VUE_APP_WS_API = 'ws://192.168.0.
44
:9888/'
#VUE_APP_BASE_API = 'http://192.168.0.44:9882/'
...
...
src/utils/mxgraph.js
0 → 100644
View file @
f0cb22fa
import
mx
from
'mxgraph'
;
const
mxgraph
=
mx
({
mxImageBasePath
:
'./src/images'
,
mxBasePath
:
'./src'
});
// decode bug https://github.com/jgraph/mxgraph/issues/49
window
.
mxGraph
=
mxgraph
.
mxGraph
;
window
.
mxGraphModel
=
mxgraph
.
mxGraphModel
;
window
.
mxEditor
=
mxgraph
.
mxEditor
;
window
.
mxGeometry
=
mxgraph
.
mxGeometry
;
window
.
mxDefaultKeyHandler
=
mxgraph
.
mxDefaultKeyHandler
;
window
.
mxDefaultPopupMenu
=
mxgraph
.
mxDefaultPopupMenu
;
window
.
mxStylesheet
=
mxgraph
.
mxStylesheet
;
window
.
mxDefaultToolbar
=
mxgraph
.
mxDefaultToolbar
;
export
default
mxgraph
;
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
View file @
f0cb22fa
...
...
@@ -21,6 +21,7 @@
type=
"text"
icon=
"el-icon-receiving"
size=
"large"
@
click=
"saveFlow"
></el-button>
</el-tooltip>
<el-divider
direction=
"vertical"
></el-divider>
...
...
@@ -99,9 +100,9 @@
:before-close=
"handleClose"
>
<div
id=
"ExcelInputDialog"
></div>
<el-form
ref=
"
stepName"
:model=
"stepName
"
label-width=
"120px"
>
<el-form
ref=
"
form"
:model=
"form
"
label-width=
"120px"
>
<el-form-item
label=
"步骤名称:"
>
<el-input
v-model=
"
stepName.name
"
></el-input>
<el-input
v-model=
"
form.label
"
></el-input>
</el-form-item>
</el-form>
...
...
@@ -508,7 +509,7 @@
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"excelLnput = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"excelLnput
= fals
e"
>
确 定
</el-button>
<el-button
type=
"primary"
@
click=
"excelLnput
Determin
e"
>
确 定
</el-button>
</span>
</el-dialog>
...
...
@@ -660,11 +661,7 @@
width=
"800px"
:before-close=
"handleClose"
>
<tableInput
:disabled=
"true"
:connectionNode=
"connectionNode"
:stepName=
"stepName"
>
<tableInput
:disabled=
"true"
:connectionNode=
"connectionNode"
>
</tableInput>
<span
slot=
"footer"
class=
"dialog-footer"
>
...
...
@@ -824,7 +821,7 @@ import {
valueFormat
,
valueMeta
,
save
,
newStep
newStep
,
}
from
"@/api/kettle/link"
;
// 输入弹窗
import
tableInput
from
"../appBulletFrame/tableInput"
;
...
...
@@ -848,11 +845,11 @@ import microDialog from "../../../output-dialog/micro-excel";
// 输出弹窗end********************************************
import
{
import
mxgraph
from
"@/utils/mxgraph"
;
const
{
mxGraph
,
mxUtils
,
mxEvent
,
mxCell
,
mxKeyHandler
,
mxRubberband
,
mxConstants
,
...
...
@@ -861,21 +858,7 @@ import {
mxCodec
,
mxGraphModel
,
mxGeometry
,
}
from
"mxgraph-js"
;
// XML
// import {
// mxUtils as mxUtils,
// mxGraph as mxGraph,
// mxEvent as mxEvent,
// mxKeyHandler as mxKeyHandler,
// mxRubberband as mxRubberband,
// mxConstants as mxConstants,
// mxStencilRegistry as mxStencilRegistry,
// mxStencil as mxStencil,
// mxCodec as mxCodec,
// mxGraphModel as mxGraphModel,
// mxGeometry as mxGeometry,
// } from "mxgraph/javascript/mxClient";
}
=
mxgraph
;
export
default
{
// props: {
...
...
@@ -888,13 +871,14 @@ export default {
props
:
[
"blankCanvas"
],
//从父组件传过来的值
data
()
{
return
{
monitorCanvas
:
""
,
//监听画布
getXmlVal
:
""
,
//获取上一个xml
keyHandler
:
null
,
palettes
:
{},
graphXml
:
""
,
xmlDocuments
:
""
,
//获取解码的xml
xmlDocuments
:
""
,
//获取解码的xml
// mxl=================================
InsertOrUpdateVisible
:
false
,
...
...
@@ -932,7 +916,6 @@ export default {
activeName
:
"file"
,
fieldType
:
[],
fieldFormat
:
[],
stepName
:
{},
tableData
:
[
{
filemask
:
""
,
...
...
@@ -1032,6 +1015,13 @@ export default {
// },
},
},
watch
:
{
blankCanvas
(
n
,
o
)
{
this
.
monitorCanvas
=
n
;
this
.
setXml
();
this
.
getXml
();
},
},
mounted
()
{
this
.
createGraph
();
this
.
initToolbar
();
...
...
@@ -1040,6 +1030,22 @@ export default {
},
methods
:
{
setXml
()
{
this
.
graph
.
getModel
().
beginUpdate
();
try
{
var
doc
=
mxUtils
.
parseXml
(
decodeURIComponent
(
this
.
blankCanvas
));
var
codec
=
new
mxCodec
(
doc
);
codec
.
decode
(
doc
.
documentElement
,
this
.
graph
.
getModel
());
}
finally
{
this
.
graph
.
getModel
().
endUpdate
();
}
},
excelLnputDetermine
()
{
this
.
excelLnput
=
!
this
.
excelLnput
;
let
val
=
this
.
form
;
console
.
log
(
val
);
},
// 子组件发射回来的弹窗变量变为true
fathertrans
(
res
)
{
// this.dialogVisibleFourth=res;
...
...
@@ -1159,16 +1165,15 @@ export default {
window
[
"mxGraphModel"
]
=
mxGraphModel
;
window
[
"mxGeometry"
]
=
mxGeometry
;
// const xmlDocument = mxUtils.parseXml(graphXml);
// const decoder = new mxCodec(xmlDocument);
// const node = xmlDocument.documentElement;
// decoder.decode(node, graph.getModel());
// const xmlDocument = mxUtils.parseXml(graphXml);
// const decoder = new mxCodec(xmlDocument);
// const node = xmlDocument.documentElement;
// decoder.decode(node, graph.getModel());
var
enc
=
new
mxCodec
(
mxUtils
.
createXmlDocument
(
graphXml
));
var
node
=
enc
.
encode
(
graph
.
getModel
());
console
.
log
(
mxUtils
.
getPrettyXml
(
node
));
return
mxUtils
.
getPrettyXml
(
node
);
},
//初始化画布
...
...
@@ -1194,7 +1199,28 @@ export default {
console
.
log
(
evt
);
// this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
this
.
graphXml
=
this
.
encode
(
this
.
graph
);
console
.
log
(
this
.
graphXml
,
this
.
xmlDocuments
);
console
.
log
(
this
.
graphXml
,
this
.
xmlDocuments
);
// 获取接口数据
availableCharsets
(
pamer
).
then
((
res
)
=>
{
this
.
codingType
=
res
;
});
let
pamer
=
new
FormData
();
// 创建form对象
pamer
.
append
(
"query"
,
""
);
excelSheetType
(
pamer
).
then
((
res
)
=>
{
this
.
engine
=
res
;
});
valueMeta
().
then
((
res
)
=>
{
this
.
fieldType
=
res
;
});
let
pamer2
=
new
FormData
();
// 创建form对象
pamer2
.
append
(
"valueType"
,
"all"
);
valueFormat
(
pamer2
).
then
((
res
)
=>
{
this
.
fieldFormat
=
res
;
});
// 监听双击事件
const
cell
=
this
.
R
.
pathOr
([],
[
"properties"
,
"cell"
],
evt
);
...
...
@@ -1265,57 +1291,78 @@ export default {
addCell
(
toolItem
,
x
,
y
)
{
const
{
width
,
height
}
=
toolItem
;
const
parent
=
this
.
graph
.
getDefaultParent
();
//
const parent = this.graph.getDefaultParent();
this
.
graph
.
getModel
().
beginUpdate
();
try
{
let
vertex
=
this
.
graph
.
insertVertex
(
parent
,
null
,
null
,
x
,
y
,
width
,
height
);
vertex
.
title
=
toolItem
[
"title"
];
vertex
.
ids
=
toolItem
[
"id"
];
vertex
.
pluginId
=
toolItem
[
"pluginId"
];
this
.
xmlDocuments
=
mxUtils
.
parseXml
(
decodeURIComponent
(
this
.
blankCanvas
));
console
.
log
(
this
.
xmlDocuments
,
'拖拽'
);
// let vertex = this.graph.insertVertex(
// parent,
// null,
// null,
// x,
// y,
// width,
// height
// );
// vertex.title = toolItem["title"];
// vertex.ids = toolItem["id"];
// vertex.pluginId = toolItem["pluginId"];
// vertex.icon = toolItem["icon"];
// console.log(toolItem,888888888888);
// this.xmlDocuments = mxUtils.parseXml(
// decodeURIComponent(this.blankCanvas)
// );
// console.log(this.xmlDocuments, "拖拽");
var
oSerializer
=
new
XMLSerializer
();
console
.
log
(
oSerializer
.
serializeToString
(
this
.
xmlDocuments
));
//
var oSerializer = new XMLSerializer();
// console.log(oSerializer.serializeToString(this.xmlDocuments));
let
pameStep
=
new
FormData
();
// 创建form对象
pameStep
.
append
(
"graphXml"
,
oSerializer
.
serializeToString
(
this
.
xmlDocuments
));
pameStep
.
append
(
"pluginId"
,
vertex
.
pluginId
);
pameStep
.
append
(
"name"
,
vertex
.
title
);
newStep
(
pameStep
).
then
(
res
=>
{
console
.
log
(
res
,
4564564564566456
);
// this.graph.getModel().beginUpdate();
// try
// {
// var cell = this.graph.insertVertex(this.graph.getDefaultParent(), null, res.documentElement, x, y, width, height, "icon;image=" + node.attributes.dragIcon);
// this.graph.setSelectionCells([cell]);
// } finally
// {
// this.graph.getModel().endUpdate();
// }
// this.graph.container.focus();
})
pameStep
.
append
(
"graphXml"
,
this
.
getXmlVal
// oSerializer.serializeToString(this.xmlDocuments)
);
pameStep
.
append
(
"pluginId"
,
toolItem
.
pluginId
);
pameStep
.
append
(
"name"
,
toolItem
.
title
);
newStep
(
pameStep
).
then
((
res
)
=>
{
// console.log(res, 4564564564566456);
this
.
graph
.
getModel
().
beginUpdate
();
try
{
var
cell
=
this
.
graph
.
insertVertex
(
this
.
graph
.
getDefaultParent
(),
null
,
res
.
documentElement
,
x
,
y
,
width
,
height
,);
cell
.
title
=
toolItem
[
"title"
];
cell
.
ids
=
toolItem
[
"id"
];
cell
.
pluginId
=
toolItem
[
"pluginId"
];
cell
.
icon
=
toolItem
[
"icon"
];
this
.
graph
.
setSelectionCells
([
cell
]);
}
finally
{
this
.
graph
.
getModel
().
endUpdate
();
}
this
.
getXml
();
});
}
finally
{
this
.
graph
.
getModel
().
endUpdate
();
}
},
// 获取上一个xml
getXml
(){
const
codec
=
new
mxCodec
();
const
encodedModel
=
codec
.
encode
(
this
.
graph
.
getModel
());
this
.
getXmlVal
=
mxUtils
.
getXml
(
encodedModel
);
},
//选择
initToolbar
()
{
let
domArr
=
document
.
querySelectorAll
(
'[key-id="123"]'
);
...
...
@@ -1324,15 +1371,15 @@ export default {
// console.log(dom.pluginId);
// console.log(dom);
let
toolItemObj
=
{
title
:
dom
.
innerHTML
,
id
:
dom
.
id
,
width
:
60
,
height
:
60
,
// value: dom.pluginId,
pluginId
:
dom
.
getAttribute
(
"pluginId"
),
pluginId
:
dom
.
getAttribute
(
"pluginId"
),
icon
:
dom
.
getAttribute
(
"icon"
),
};
const
{
width
,
height
}
=
toolItemObj
;
...
...
@@ -1549,39 +1596,32 @@ export default {
// // 保存流程图
saveFlow
()
{
// this.graphXml = this.encode(this.graph);
// console.log(this.graphXml);
// const that = this;
// let flowObj = Object.assign({}, that.flowData);
// // localStorage.setItem("data_test", JSON.stringify(flowObj))
// console.log("保存流程图", flowObj);
// // 保存
// let pamers = new FormData(); // 创建form对象
// pamers.append("graphXml", jsonxml);
// save(pamers).then((res) => {
// console.log(res);
// if (res.success) {
// that.$message.success("保存流程成功!暂时请查先看控制台。");
// } else {
// that.$message.error(res.errMsg);
// }
// });
// },
// // 转xml
// createGraph() {
// this.graph = new mxGraph(this.$refs.efContainer);
// },
// encode(graph) {
// const encoder = new mxCodec();
// const result = encoder.encode(graph.getModel());
// return mxUtils.getPrettyXml(result);
// },
// decode(graphXml, graph) {
// window["mxGraphModel"] = mxGraphModel;
// window["mxGeometry"] = mxGeometry;
// const xmlDocument = mxUtils.parseXml(graphXml);
// const decoder = new mxCodec(xmlDocument);
// const node = xmlDocument.documentElement;
// decoder.decode(node, graph.getModel());
var
enc
=
new
mxCodec
(
mxUtils
.
createXmlDocument
());
var
node
=
enc
.
encode
(
this
.
graph
.
getModel
());
this
.
graphXml
=
mxUtils
.
getPrettyXml
(
node
);
console
.
log
(
this
.
graphXml
);
const
that
=
this
;
let
flowObj
=
Object
.
assign
({},
that
.
flowData
);
// localStorage.setItem("data_test", JSON.stringify(flowObj))
console
.
log
(
"保存流程图"
,
flowObj
);
// 保存
let
pamers
=
new
FormData
();
// 创建form对象
pamers
.
append
(
"graphXml"
,
this
.
graphXml
);
save
(
pamers
).
then
((
res
)
=>
{
console
.
log
(
res
);
if
(
res
.
success
)
{
that
.
$message
.
success
(
"保存流程成功!暂时请查先看控制台。"
);
this
.
createGraph
();
console
.
log
(
this
.
gr
);
}
else
{
that
.
$message
.
error
(
res
.
errMsg
);
}
});
},
// 转xml
createGraph
()
{
this
.
graph
=
new
mxGraph
(
this
.
$refs
.
container
);
},
// //重绘流程图
...
...
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