将xml dom 转成文本

src/api/kettle/link.js

@@ -285,9 +285,6 @@ export function fileexplorer(data){
   })
 }
 
-
-
-
 //返回画布初始xml
 export function open(data){
   return request({
@@ -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 @@
           :key-id="data.children ? '' : 123"
           :id="data.id"
           :icon="data.icon"
+          :pluginId="data.pluginId"
         >
           {{ data.text }}
         </div>
@@ -30,6 +31,7 @@ export default {
         children: "children",
         label: "text",
         id: "id",
+        pluginId:"pluginId",
       },
       data: [],
     };

src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue

@@ -824,6 +824,7 @@ import {
   valueFormat,
   valueMeta,
   save,
+  newStep
 } from "@/api/kettle/link";
 // 输入弹窗
 import tableInput from "../appBulletFrame/tableInput";
@@ -877,18 +878,23 @@ import {
 // } from "mxgraph/javascript/mxClient";
 
 export default {
-  props: {
-    dialogVisibleFourth: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  // props: {
+  //   dialogVisibleFourth: {
+  //     type: Boolean,
+  //     default: false,
+  //   },
+    
+  // },
+
+    props: ["blankCanvas"], //从父组件传过来的值
+
 
   data() {
     return {
       keyHandler: null,
       palettes: {},
       graphXml: "",
+      xmlDocuments:"",//获取解码的xml
 
       // mxl=================================
       InsertOrUpdateVisible: false,
@@ -1153,10 +1159,16 @@ 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);
+      
     },
 
     //初始化画布
@@ -1180,16 +1192,15 @@ export default {
 
       this.graph.addListener(mxEvent.DOUBLE_CLICK, (graph, evt) => {
         console.log(evt);
-
+        // this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
         this.graphXml = this.encode(this.graph);
-        console.log(this.graphXml);
+        console.log(this.graphXml,this.xmlDocuments);
 
         // 监听双击事件
         const cell = this.R.pathOr([], ["properties", "cell"], evt);
         console.info(cell); // 在控制台输出双击的cell
         if (cell.ids == "step1") {
           this.excelLnput = !this.excelLnput;
-          
           return;
         } else if (cell.ids == "step7") {
           this.TableInputDialog = !this.TableInputDialog;
@@ -1245,10 +1256,10 @@ export default {
       });
 
       this.graph.addListener(mxEvent.CLICK, (graph, evt) => {
-        console.log(evt);
+        // console.log(evt);
         // 监听单击事件
         const cell = this.R.pathOr([], ["properties", "cell"], evt);
-        console.info(cell); // 在控制台输出单击的cell
+        // console.info(cell); // 在控制台输出单击的cell
       });
     },
 
@@ -1268,6 +1279,38 @@ export default {
         );
         vertex.title = toolItem["title"];
         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 {
         this.graph.getModel().endUpdate();
       }
@@ -1276,19 +1319,20 @@ export default {
     //选择
     initToolbar() {
       let domArr = document.querySelectorAll('[key-id="123"]');
-      // console.log(domArr);
+      console.log(domArr);
       domArr.forEach((dom, index) => {
+        // console.log(dom.pluginId);
                 // console.log(dom);
 
+
         let toolItemObj = {
           title: dom.innerHTML,
           id: dom.id,
           width: 60,
           height: 60,
-          value: dom.id,
-          param: {
-            id: "id5",
-          },
+          // value: dom.pluginId,
+          pluginId:dom.getAttribute("pluginId"),
+         
         };
 
         const { width, height } = toolItemObj;

src/views/kettle/home2.vue

@@ -94,7 +94,7 @@
         <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-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-tabs>  
             
@@ -1211,6 +1211,16 @@ props: ["dragItem"],
             console.log(res,'返回空白画布xml');
             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);
+						
+
 
         })