Skip to content

E
ETL-admin
Commit f0cb22fa by 李耀琨
Options

完成xml回显

parent 5b6a0b09
Showing with 179 additions and 123 deletions
.env.development
ENV = 'development' ENV = 'development'
VUE_APP_BASE_API = 'http://192.168.0.2:9888/' VUE_APP_BASE_API = 'http://192.168.0.44:9888/'
VUE_APP_WS_API = 'ws://192.168.0.2:9888/' VUE_APP_WS_API = 'ws://192.168.0.44:9888/'
#VUE_APP_BASE_API = 'http://192.168.0.44:9882/' #VUE_APP_BASE_API = 'http://192.168.0.44:9882/'
......
src/utils/mxgraph.js 0 → 100644
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
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
type="text" type="text"
icon="el-icon-receiving" icon="el-icon-receiving"
size="large" size="large"
@click="saveFlow"
></el-button> ></el-button>
</el-tooltip> </el-tooltip>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
...@@ -99,9 +100,9 @@ ...@@ -99,9 +100,9 @@
:before-close="handleClose" :before-close="handleClose"
> >
<div id="ExcelInputDialog"></div> <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-form-item label="步骤名称:">
<el-input v-model="stepName.name"></el-input> <el-input v-model="form.label"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -508,7 +509,7 @@ ...@@ -508,7 +509,7 @@
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="excelLnput = false">取 消</el-button> <el-button @click="excelLnput = false">取 消</el-button>
<el-button type="primary" @click="excelLnput = false">确 定</el-button> <el-button type="primary" @click="excelLnputDetermine">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
...@@ -660,11 +661,7 @@ ...@@ -660,11 +661,7 @@
width="800px" width="800px"
:before-close="handleClose" :before-close="handleClose"
> >
<tableInput <tableInput :disabled="true" :connectionNode="connectionNode">
:disabled="true"
:connectionNode="connectionNode"
:stepName="stepName"
>
</tableInput> </tableInput>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -824,7 +821,7 @@ import { ...@@ -824,7 +821,7 @@ import {
valueFormat, valueFormat,
valueMeta, valueMeta,
save, save,
newStep newStep,
} from "@/api/kettle/link"; } from "@/api/kettle/link";
// 输入弹窗 // 输入弹窗
import tableInput from "../appBulletFrame/tableInput"; import tableInput from "../appBulletFrame/tableInput";
...@@ -848,11 +845,11 @@ import microDialog from "../../../output-dialog/micro-excel"; ...@@ -848,11 +845,11 @@ import microDialog from "../../../output-dialog/micro-excel";
// 输出弹窗end******************************************** // 输出弹窗end********************************************
import { import mxgraph from "@/utils/mxgraph";
const {
mxGraph, mxGraph,
mxUtils, mxUtils,
mxEvent, mxEvent,
mxCell,
mxKeyHandler, mxKeyHandler,
mxRubberband, mxRubberband,
mxConstants, mxConstants,
...@@ -861,21 +858,7 @@ import { ...@@ -861,21 +858,7 @@ import {
mxCodec, mxCodec,
mxGraphModel, mxGraphModel,
mxGeometry, mxGeometry,
} from "mxgraph-js"; } = mxgraph;
// 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";
export default { export default {
// props: { // props: {
...@@ -883,18 +866,19 @@ export default { ...@@ -883,18 +866,19 @@ export default {
// type: Boolean, // type: Boolean,
// default: false, // default: false,
// }, // },
// },
props: ["blankCanvas"], //从父组件传过来的值 // },
props: ["blankCanvas"], //从父组件传过来的值
data() { data() {
return { return {
monitorCanvas: "", //监听画布
getXmlVal:"",//获取上一个xml
keyHandler: null, keyHandler: null,
palettes: {}, palettes: {},
graphXml: "", graphXml: "",
xmlDocuments:"",//获取解码的xml xmlDocuments: "", //获取解码的xml
// mxl================================= // mxl=================================
InsertOrUpdateVisible: false, InsertOrUpdateVisible: false,
...@@ -932,7 +916,6 @@ export default { ...@@ -932,7 +916,6 @@ export default {
activeName: "file", activeName: "file",
fieldType: [], fieldType: [],
fieldFormat: [], fieldFormat: [],
stepName: {},
tableData: [ tableData: [
{ {
filemask: "", filemask: "",
...@@ -1032,6 +1015,13 @@ export default { ...@@ -1032,6 +1015,13 @@ export default {
// }, // },
}, },
}, },
watch: {
blankCanvas(n, o) {
this.monitorCanvas = n;
this.setXml();
this.getXml();
},
},
mounted() { mounted() {
this.createGraph(); this.createGraph();
this.initToolbar(); this.initToolbar();
...@@ -1040,6 +1030,22 @@ export default { ...@@ -1040,6 +1030,22 @@ export default {
}, },
methods: { 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 // 子组件发射回来的弹窗变量变为true
fathertrans(res) { fathertrans(res) {
// this.dialogVisibleFourth=res; // this.dialogVisibleFourth=res;
...@@ -1158,17 +1164,16 @@ export default { ...@@ -1158,17 +1164,16 @@ export default {
decode(graphXml, graph) { decode(graphXml, graph) {
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 enc = new mxCodec(mxUtils.createXmlDocument(graphXml));
var node = enc.encode(graph.getModel()); var node = enc.encode(graph.getModel());
console.log(mxUtils.getPrettyXml(node)); console.log(mxUtils.getPrettyXml(node));
return mxUtils.getPrettyXml(node); return mxUtils.getPrettyXml(node);
}, },
//初始化画布 //初始化画布
...@@ -1194,7 +1199,28 @@ export default { ...@@ -1194,7 +1199,28 @@ export default {
console.log(evt); console.log(evt);
// this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas)); // this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
this.graphXml = this.encode(this.graph); 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); const cell = this.R.pathOr([], ["properties", "cell"], evt);
...@@ -1265,74 +1291,95 @@ export default { ...@@ -1265,74 +1291,95 @@ export default {
addCell(toolItem, x, y) { addCell(toolItem, x, y) {
const { width, height } = toolItem; const { width, height } = toolItem;
const parent = this.graph.getDefaultParent(); // const parent = this.graph.getDefaultParent();
this.graph.getModel().beginUpdate(); this.graph.getModel().beginUpdate();
try { try {
let vertex = this.graph.insertVertex( // let vertex = this.graph.insertVertex(
parent, // parent,
null, // null,
null, // null,
x, // x,
y, // y,
width, // width,
height // 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));
     
let pameStep = new FormData(); // 创建form对象
pameStep.append(
"graphXml", this.getXmlVal
// oSerializer.serializeToString(this.xmlDocuments)
); );
vertex.title = toolItem["title"]; pameStep.append("pluginId", toolItem.pluginId);
vertex.ids = toolItem["id"]; pameStep.append("name", toolItem.title);
vertex.pluginId = toolItem["pluginId"]; newStep(pameStep).then((res) => {
// console.log(res, 4564564564566456);
this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
console.log(this.xmlDocuments,'拖拽');
this.graph.getModel().beginUpdate();
try
{
var oSerializer = new XMLSerializer(); var cell = this.graph.insertVertex(this.graph.getDefaultParent(), null, res.documentElement, x, y, width, height,);
console.log(oSerializer.serializeToString(this.xmlDocuments)); cell.title = toolItem["title"];
cell.ids = toolItem["id"];
cell.pluginId = toolItem["pluginId"];
cell.icon = toolItem["icon"];
this.graph.setSelectionCells([cell]);
let pameStep = new FormData(); // 创建form对象 } finally
pameStep.append("graphXml", oSerializer.serializeToString(this.xmlDocuments)); {
pameStep.append("pluginId", vertex.pluginId); this.graph.getModel().endUpdate();
pameStep.append("name", vertex.title); }
newStep(pameStep).then(res=>{
console.log(res,4564564564566456); this.getXml();
});
// 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();
} }
}, },
// 获取上一个xml
getXml(){
 const codec = new mxCodec();
      const encodedModel = codec.encode(this.graph.getModel());
      this.getXmlVal = mxUtils.getXml(encodedModel);
},
//选择 //选择
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.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.pluginId, // value: dom.pluginId,
pluginId:dom.getAttribute("pluginId"), pluginId: dom.getAttribute("pluginId"),
icon: dom.getAttribute("icon"),
}; };
const { width, height } = toolItemObj; const { width, height } = toolItemObj;
...@@ -1549,39 +1596,32 @@ export default { ...@@ -1549,39 +1596,32 @@ export default {
// // 保存流程图 // // 保存流程图
saveFlow() { saveFlow() {
// this.graphXml = this.encode(this.graph); // this.graphXml = this.encode(this.graph);
// console.log(this.graphXml); var enc = new mxCodec(mxUtils.createXmlDocument());
// const that = this; var node = enc.encode(this.graph.getModel());
// let flowObj = Object.assign({}, that.flowData); this.graphXml = mxUtils.getPrettyXml(node);
// // localStorage.setItem("data_test", JSON.stringify(flowObj))
// console.log("保存流程图", flowObj); console.log(this.graphXml);
// // 保存 const that = this;
// let pamers = new FormData(); // 创建form对象 let flowObj = Object.assign({}, that.flowData);
// pamers.append("graphXml", jsonxml); // localStorage.setItem("data_test", JSON.stringify(flowObj))
// save(pamers).then((res) => { console.log("保存流程图", flowObj);
// console.log(res); // 保存
// if (res.success) { let pamers = new FormData(); // 创建form对象
// that.$message.success("保存流程成功！暂时请查先看控制台。"); pamers.append("graphXml", this.graphXml);
// } else { save(pamers).then((res) => {
// that.$message.error(res.errMsg); console.log(res);
// } if (res.success) {
// }); that.$message.success("保存流程成功！暂时请查先看控制台。");
// }, this.createGraph();
// // 转xml console.log(this.gr);
// createGraph() { } else {
// this.graph = new mxGraph(this.$refs.efContainer); that.$message.error(res.errMsg);
// }, }
// encode(graph) { });
// const encoder = new mxCodec(); },
// const result = encoder.encode(graph.getModel()); // 转xml
// return mxUtils.getPrettyXml(result); createGraph() {
// }, this.graph = new mxGraph(this.$refs.container);
// 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());
}, },
// //重绘流程图 // //重绘流程图
......
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