Skip to content

E
ETL-admin
Commit 5b6a0b09 by 李耀琨
Options

将xml dom 转成文本

parent e8853010
Showing with 89 additions and 24 deletions
src/api/kettle/link.js
...@@ -285,9 +285,6 @@ export function fileexplorer(data){ ...@@ -285,9 +285,6 @@ export function fileexplorer(data){
}) })
} }
//返回画布初始xml //返回画布初始xml
export function open(data){ export function open(data){
return request({ return request({
...@@ -298,6 +295,18 @@ export function open(data){ ...@@ -298,6 +295,18 @@ export function open(data){
} }
//获取弹框xml
export function newStep(data){
return request({
url: 'etlweb/trans/newStep',
data,
method: 'post'
})
}
......
src/views/dashboard-kettle/components/designer/modules/node_menu2.vue
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
:key-id="data.children ? '' : 123" :key-id="data.children ? '' : 123"
:id="data.id" :id="data.id"
:icon="data.icon" :icon="data.icon"
:pluginId="data.pluginId"
> >
{{ data.text }} {{ data.text }}
</div> </div>
...@@ -30,6 +31,7 @@ export default { ...@@ -30,6 +31,7 @@ export default {
children: "children", children: "children",
label: "text", label: "text",
id: "id", id: "id",
pluginId:"pluginId",
}, },
data: [], data: [],
}; };
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
...@@ -824,6 +824,7 @@ import { ...@@ -824,6 +824,7 @@ import {
valueFormat, valueFormat,
valueMeta, valueMeta,
save, save,
newStep
} from "@/api/kettle/link"; } from "@/api/kettle/link";
// 输入弹窗 // 输入弹窗
import tableInput from "../appBulletFrame/tableInput"; import tableInput from "../appBulletFrame/tableInput";
...@@ -877,18 +878,23 @@ import { ...@@ -877,18 +878,23 @@ import {
// } from "mxgraph/javascript/mxClient"; // } from "mxgraph/javascript/mxClient";
export default { export default {
props: { // props: {
dialogVisibleFourth: { // dialogVisibleFourth: {
type: Boolean, // type: Boolean,
default: false, // default: false,
}, // },
},
// },
props: ["blankCanvas"], //从父组件传过来的值
data() { data() {
return { return {
keyHandler: null, keyHandler: null,
palettes: {}, palettes: {},
graphXml: "", graphXml: "",
xmlDocuments:"",//获取解码的xml
// mxl================================= // mxl=================================
InsertOrUpdateVisible: false, InsertOrUpdateVisible: false,
...@@ -1153,10 +1159,16 @@ export default { ...@@ -1153,10 +1159,16 @@ export default {
window["mxGraphModel"] = mxGraphModel; window["mxGraphModel"] = mxGraphModel;
window["mxGeometry"] = mxGeometry; window["mxGeometry"] = mxGeometry;
const xmlDocument = mxUtils.parseXml(graphXml); // const xmlDocument = mxUtils.parseXml(graphXml);
const decoder = new MxCodec(xmlDocument); // const decoder = new mxCodec(xmlDocument);
const node = xmlDocument.documentElement; // const node = xmlDocument.documentElement;
decoder.decode(node, graph.getModel()); // 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);
}, },
//初始化画布 //初始化画布
...@@ -1180,16 +1192,15 @@ export default { ...@@ -1180,16 +1192,15 @@ export default {
this.graph.addListener(mxEvent.DOUBLE_CLICK, (graph, evt) => { this.graph.addListener(mxEvent.DOUBLE_CLICK, (graph, evt) => {
console.log(evt); console.log(evt);
// this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
this.graphXml = this.encode(this.graph); this.graphXml = this.encode(this.graph);
console.log(this.graphXml); console.log(this.graphXml,this.xmlDocuments);
// 监听双击事件 // 监听双击事件
const cell = this.R.pathOr([], ["properties", "cell"], evt); const cell = this.R.pathOr([], ["properties", "cell"], evt);
console.info(cell); // 在控制台输出双击的cell console.info(cell); // 在控制台输出双击的cell
if (cell.ids == "step1") { if (cell.ids == "step1") {
this.excelLnput = !this.excelLnput; this.excelLnput = !this.excelLnput;
return; return;
} else if (cell.ids == "step7") { } else if (cell.ids == "step7") {
this.TableInputDialog = !this.TableInputDialog; this.TableInputDialog = !this.TableInputDialog;
...@@ -1245,10 +1256,10 @@ export default { ...@@ -1245,10 +1256,10 @@ export default {
}); });
this.graph.addListener(mxEvent.CLICK, (graph, evt) => { this.graph.addListener(mxEvent.CLICK, (graph, evt) => {
console.log(evt); // console.log(evt);
// 监听单击事件 // 监听单击事件
const cell = this.R.pathOr([], ["properties", "cell"], evt); const cell = this.R.pathOr([], ["properties", "cell"], evt);
console.info(cell); // 在控制台输出单击的cell // console.info(cell); // 在控制台输出单击的cell
}); });
}, },
...@@ -1268,6 +1279,38 @@ export default { ...@@ -1268,6 +1279,38 @@ export default {
); );
vertex.title = toolItem["title"]; vertex.title = toolItem["title"];
vertex.ids = toolItem["id"]; vertex.ids = toolItem["id"];
vertex.pluginId = toolItem["pluginId"];
this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
console.log(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();
})
} finally { } finally {
this.graph.getModel().endUpdate(); this.graph.getModel().endUpdate();
} }
...@@ -1276,19 +1319,20 @@ export default { ...@@ -1276,19 +1319,20 @@ export default {
//选择 //选择
initToolbar() { initToolbar() {
let domArr = document.querySelectorAll('[key-id="123"]'); let domArr = document.querySelectorAll('[key-id="123"]');
// console.log(domArr); console.log(domArr);
domArr.forEach((dom, index) => { domArr.forEach((dom, index) => {
// console.log(dom.pluginId);
// console.log(dom); // console.log(dom);
let toolItemObj = { let toolItemObj = {
title: dom.innerHTML, title: dom.innerHTML,
id: dom.id, id: dom.id,
width: 60, width: 60,
height: 60, height: 60,
value: dom.id, // value: dom.pluginId,
param: { pluginId:dom.getAttribute("pluginId"),
id: "id5",
},
}; };
const { width, height } = toolItemObj; const { width, height } = toolItemObj;
......
src/views/kettle/home2.vue
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
<div class="mid"> <div class="mid">
<el-tabs v-if="tabShowFlag" style="margin-top:-5vh;margin-bottom:0;" v-model="picName" type="card" closable @tab-remove="removeTab"> <el-tabs v-if="tabShowFlag" style="margin-top:-5vh;margin-bottom:0;" v-model="picName" type="card" closable @tab-remove="removeTab">
<el-tab-pane label="数据库名称" > <el-tab-pane label="数据库名称" >
<mxgraph-designer ref="pic" v-if="mxGraphShow"></mxgraph-designer> <mxgraph-designer ref="pic" v-if="mxGraphShow" :blankCanvas="blankCanvas"></mxgraph-designer>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -1211,6 +1211,16 @@ props: ["dragItem"], ...@@ -1211,6 +1211,16 @@ props: ["dragItem"],
console.log(res,'返回空白画布xml'); console.log(res,'返回空白画布xml');
this.blankCanvas = res this.blankCanvas = res
// var xmlDocument = mxUtils.parseXml(res);
// var decoder = new mxCodec(xmlDocument);
// var node = xmlDocument.documentElement;
// var graphPanel = Ext.create({repositoryId: path}, xtype);
// var graph = graphPanel.getGraph();
// decoder.decode(node, graph.getModel());
// console.log(esponse.responseText);
}) })
......
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