保存、预览流程
This commit is contained in:
@ -259,7 +259,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const bpmnCanvasRef = ref();
|
||||
const refFile = ref();
|
||||
const props = defineProps({
|
||||
value: String, // xml 字符串
|
||||
modelValue: String, // xml 字符串
|
||||
// value: String,
|
||||
processId: String,
|
||||
processName: String,
|
||||
translations: Object, // 自定义的翻译文件
|
||||
@ -285,7 +286,7 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "flowable",
|
||||
},
|
||||
events: {
|
||||
eventlist: {
|
||||
type: Array,
|
||||
default: () => ["element.click"],
|
||||
},
|
||||
@ -305,7 +306,8 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const {
|
||||
value,
|
||||
// value,
|
||||
modelValue,
|
||||
processId,
|
||||
processName,
|
||||
translations,
|
||||
@ -316,7 +318,7 @@ const {
|
||||
simulation,
|
||||
keyboard,
|
||||
prefix,
|
||||
events,
|
||||
eventlist,
|
||||
headerButtonSize,
|
||||
headerButtonType,
|
||||
} = toRefs(props);
|
||||
@ -375,22 +377,21 @@ const additionalModules = computed(() => {
|
||||
}
|
||||
|
||||
// 根据需要的流程类型设置扩展元素构建模块
|
||||
// if (prefix.value === "bpmn") {
|
||||
// Modules.push(bpmnModdleExtension);
|
||||
// }
|
||||
// // if (prefix.value === "bpmn") {
|
||||
// // Modules.push(bpmnModdleExtension);
|
||||
// // }
|
||||
if (prefix.value === "camunda") {
|
||||
Modules.push(camundaModdleExtension);
|
||||
}
|
||||
// FIXME: Function.prototype.bind.apply(...) is not a constructor
|
||||
// if (prefix.value === "flowable") {
|
||||
// Modules.push(flowableModdleExtension);
|
||||
// }
|
||||
|
||||
if (prefix.value === "flowable") {
|
||||
Modules.push(flowableModdleExtension);
|
||||
}
|
||||
if (prefix.value === "activiti") {
|
||||
Modules.push(activitiModdleExtension);
|
||||
}
|
||||
return Modules;
|
||||
});
|
||||
console.log(additionalModules.value);
|
||||
const moddleExtensions = computed(() => {
|
||||
const Extensions = {};
|
||||
// 仅使用用户自定义模块
|
||||
@ -421,7 +422,7 @@ const moddleExtensions = computed(() => {
|
||||
|
||||
onMounted(() => {
|
||||
initBpmnModeler();
|
||||
createNewDiagram(value.value);
|
||||
createNewDiagram(modelValue.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (bpmnModeler) bpmnModeler.destroy();
|
||||
@ -447,19 +448,14 @@ function initBpmnModeler() {
|
||||
additionalModules: additionalModules.value,
|
||||
moddleExtensions: moddleExtensions.value,
|
||||
});
|
||||
console.log("init-finished");
|
||||
emit("init-finished", bpmnModeler);
|
||||
initModelListeners();
|
||||
}
|
||||
function initModelListeners() {
|
||||
const EventBus = bpmnModeler.get("eventBus");
|
||||
console.log(EventBus);
|
||||
// const that = this;
|
||||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||
events.value.forEach((event) => {
|
||||
bpmnModeler.on(event, function (eventObj) {
|
||||
console.log("element-click", eventObj);
|
||||
|
||||
eventlist.value.forEach((event) => {
|
||||
EventBus.on(event, function (eventObj) {
|
||||
let eventName = event.replace(/\./g, "-");
|
||||
let element = eventObj ? eventObj.element : null;
|
||||
emit(eventName, element, eventObj);
|
||||
@ -467,18 +463,18 @@ function initModelListeners() {
|
||||
});
|
||||
});
|
||||
//FIXME: 监听图形改变返回xml
|
||||
// EventBus.on("commandStack.changed", async (event) => {
|
||||
// try {
|
||||
// recoverable.value = bpmnModeler.get("commandStack").canRedo();
|
||||
// revocable.value = bpmnModeler.get("commandStack").canUndo();
|
||||
// let { xml } = await bpmnModeler.saveXML({ format: true });
|
||||
// emit("commandStack-changed", event);
|
||||
// emit("input", xml);
|
||||
// emit("change", xml);
|
||||
// } catch (e) {
|
||||
// console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
// }
|
||||
// });
|
||||
EventBus.on("commandStack.changed", async (event) => {
|
||||
try {
|
||||
recoverable.value = bpmnModeler.get("commandStack").canRedo();
|
||||
revocable.value = bpmnModeler.get("commandStack").canUndo();
|
||||
let { xml } = await bpmnModeler.saveXML({ format: true });
|
||||
emit("commandStack-changed", event);
|
||||
emit("input", xml);
|
||||
emit("change", xml);
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
}
|
||||
});
|
||||
// 监听视图缩放变化
|
||||
bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
|
||||
emit("canvas-viewbox-changed", { viewbox });
|
||||
|
Reference in New Issue
Block a user