|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<el-button @click="saveHandler" type="primary" size="small"
|
|
|
- >保存
|
|
|
+ >保存
|
|
|
<!-- <div class="button-list_column">
|
|
|
<el-button type="primary" size="small" @click="getProcessAsBpmn"
|
|
|
>导出为 Bpmn</el-button
|
|
|
@@ -16,9 +16,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { downloadFile, setEncoded } from "@utils/files";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import { addProcess, updateProcess } from "@/api/bpmprocess/process";
|
|
|
+import {downloadFile, setEncoded} from "@utils/files";
|
|
|
+import {mapGetters} from "vuex";
|
|
|
+import {addProcess, updateProcess} from "@/api/bpmprocess/process";
|
|
|
import xml from "highlight.js/lib/languages/xml";
|
|
|
|
|
|
export default {
|
|
|
@@ -26,6 +26,11 @@ export default {
|
|
|
computed: {
|
|
|
...mapGetters(["getModeler"]),
|
|
|
},
|
|
|
+ inject: {
|
|
|
+ formData: {
|
|
|
+ from: 'formData'
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
async getProcess(type, name = "diagram") {
|
|
|
try {
|
|
|
@@ -34,7 +39,7 @@ export default {
|
|
|
const modeler = this.getModeler;
|
|
|
// 按需要类型创建文件并下载
|
|
|
if (type === "xml" || type === "bpmn") {
|
|
|
- const { err, xml } = await modeler.saveXML();
|
|
|
+ const {err, xml} = await modeler.saveXML();
|
|
|
// 读取异常时抛出异常
|
|
|
if (err) {
|
|
|
console.error(`[Process Designer Warn ]: ${err.message || err}`);
|
|
|
@@ -44,7 +49,7 @@ export default {
|
|
|
// downloadFile(href, filename);
|
|
|
return xml;
|
|
|
} else {
|
|
|
- const { err, svg } = await modeler.saveSVG();
|
|
|
+ const {err, svg} = await modeler.saveSVG();
|
|
|
// 读取异常时抛出异常
|
|
|
if (err) {
|
|
|
console.error(err);
|
|
|
@@ -73,7 +78,7 @@ export default {
|
|
|
try {
|
|
|
if (!this.getModeler)
|
|
|
return this.$message.error("流程图引擎初始化失败");
|
|
|
- const { xml } = await this.getModeler.saveXML({
|
|
|
+ const {xml} = await this.getModeler.saveXML({
|
|
|
format: true,
|
|
|
preamble: true,
|
|
|
});
|
|
|
@@ -83,94 +88,46 @@ export default {
|
|
|
catchError(e);
|
|
|
}
|
|
|
},
|
|
|
- // xmlStr2XmlObj(xmlStr) {
|
|
|
- // var xmlObj = {};
|
|
|
- // if (document.all) {
|
|
|
- // var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
|
|
|
- // xmlDom.loadXML(xmlStr);
|
|
|
- // xmlObj = xmlDom;
|
|
|
- // } else {
|
|
|
- // xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
|
|
|
- // }
|
|
|
- // return xmlObj;
|
|
|
- // },
|
|
|
- getFileBinaryHandler() {},
|
|
|
async saveHandler() {
|
|
|
let _this = this;
|
|
|
- let processJsonObj = await this.getProcessJson();
|
|
|
- let { rootElements } = processJsonObj.rootElement;
|
|
|
- let processKey = rootElements[0].id;
|
|
|
- let processName = rootElements[0].name;
|
|
|
- let processType = ""; //流程类型
|
|
|
- let processXml = ""; //xml文件流
|
|
|
+ let formData = _this.formData() || {}; // 当前流程表单详细数据
|
|
|
+ let processJsonObj = await this.getProcessJson(); // xml标签转换json
|
|
|
+ formData.processJson = JSON.stringify(processJsonObj);
|
|
|
+ let {rootElements} = processJsonObj.rootElement;
|
|
|
+ formData.processKey = rootElements[0].id;// 流程编号
|
|
|
+ formData.processName = rootElements[0].name;// 流程名称
|
|
|
+ formData.processType = "0"; //流程类型
|
|
|
+ // 获取xml标签内容标签内容
|
|
|
let xmlPro = await this.getProcess("xml");
|
|
|
- let processXmlContent = xmlPro; //xml标签内容
|
|
|
- // const buffer = Buffer.from(xmlPro, "utf-8");
|
|
|
- // 将 Buffer 对象转换为二进制流
|
|
|
- const blob = new Blob([xmlPro]);
|
|
|
- blob.filename = processName + ".xml";
|
|
|
-
|
|
|
- let reader = new FileReader();
|
|
|
- reader.onloadend = function (da) {
|
|
|
- processXml = new Uint8Array(da.target.result);
|
|
|
- // console.log(
|
|
|
- // new File([processXml], processName + ".xml", {
|
|
|
- // type: "application/octet-stream",
|
|
|
- // lastModified: Date.now(),
|
|
|
- // })
|
|
|
- // );
|
|
|
- // return;
|
|
|
- let data = {
|
|
|
- bpmProcess: {
|
|
|
- processKey,
|
|
|
- processName,
|
|
|
- processType,
|
|
|
- processJson: JSON.stringify(processJsonObj),
|
|
|
- // fileXML: undefined,
|
|
|
- },
|
|
|
+ // 将asill码数组转换成文件格式
|
|
|
+ formData.fileXML = new File([xmlPro], formData.processKey + ".bpmn", {
|
|
|
+ type: "text/bpmn",
|
|
|
+ });
|
|
|
+ formData.processJson = JSON.stringify(processJsonObj);
|
|
|
+ // 最终提交data
|
|
|
+ const subformData = new FormData();
|
|
|
+ // 循环赋值
|
|
|
+ for (let key in formData) {
|
|
|
+ subformData.append(key, formData[key]);
|
|
|
+ }
|
|
|
+ if (formData?.processId) {
|
|
|
+ updateProcess(subformData).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ _this.$message.success("修改成功");
|
|
|
+ } else {
|
|
|
+ _this.$message.error("修改失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addProcess(subformData).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ _this.$message.success("保存成功");
|
|
|
+ } else {
|
|
|
+ _this.$message.error("保存失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- // processXmlContent,
|
|
|
- };
|
|
|
- if (_this.$route.query?.id) {
|
|
|
- data.bpmProcess.processId = _this.$route.query.id;
|
|
|
- var file = new File([processXmlContent], processKey + ".bpmn", {
|
|
|
- type: "text/xml",
|
|
|
- });
|
|
|
- const formData = new FormData();
|
|
|
- formData.append("fileXML", file);
|
|
|
- formData.append("processKey", processKey);
|
|
|
- formData.append("processName", processName);
|
|
|
- formData.append("processType", processType);
|
|
|
- formData.append("processId", _this.$route.query.id);
|
|
|
- formData.append("processJson", JSON.stringify(processJsonObj));
|
|
|
- updateProcess(data).then((res) => {
|
|
|
- if (res.code == 200) {
|
|
|
- _this.$message.success("修改成功");
|
|
|
- } else {
|
|
|
- _this.$message.error("修改失败");
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 后台回传文件
|
|
|
- var file = new File([processXmlContent], processKey + ".bpmn", {
|
|
|
- type: "text/xml",
|
|
|
- });
|
|
|
- const formData = new FormData();
|
|
|
- formData.append("fileXML", file);
|
|
|
- formData.append("processKey", processKey);
|
|
|
- formData.append("processName", processName);
|
|
|
- formData.append("processType", processType);
|
|
|
- formData.append("processJson", JSON.stringify(processJsonObj));
|
|
|
- addProcess(formData).then((res) => {
|
|
|
- if (res.code == 200) {
|
|
|
- _this.$message.success("保存成功");
|
|
|
- } else {
|
|
|
- _this.$message.error("保存失败");
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
- reader.readAsArrayBuffer(blob);
|
|
|
},
|
|
|
},
|
|
|
};
|
Zn