Skip to content

E
ETL-admin
Commit f0cb22fa by 李耀琨
Options

完成xml回显

parent 5b6a0b09
Showing with 164 additions and 108 deletions
.env.development
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
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 @@
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 = false">确 定</el-button>
<el-button type="primary" @click="excelLnputDetermine">确 定</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);
},
// //重绘流程图
......
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