保存、预览流程

src/plugins/package/designer/ProcessDesigner.vue

@@ -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 });