model

src/components/ProcessDesigner/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="process-design" :style="'display: flex; height:' + height">
-    <!-- <bpmn-process-designer
+    <bpmn-process-designer
       v-model="xmlString"
       v-bind="controlForm"
       keyboard
@@ -16,15 +16,21 @@
       @event="handlerEvent"
       @save="onSaveProcess"
     />
+
     <bmpn-process-penal
       :bpmn-modeler="modeler"
       :prefix="controlForm.prefix"
       class="process-panel"
-    /> -->
+    />
   </div>
 </template>
 <script setup>
+import BmpnProcessPenal from "@/plugins/package/penal";
+import BpmnProcessDesigner from "@/plugins/package/designer";
 import "@/plugins/package/theme/index.scss";
+// import "highlight.js/styles/atom-one-dark-reasonable.css";
+import CustomContentPadProvider from "@/plugins/package/designer/plugins/content-pad";
+import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
 import { ref } from "vue";
 const props = defineProps({
   bpmnXml: {
@@ -37,9 +43,39 @@ const props = defineProps({
   },
 });
 const { bpmnXml, designerForm } = toRefs(props);
-
+const modeler = ref(null);
 const height = ref(document.documentElement.clientHeight - 94.5 + "px;");
 const xmlString = ref(bpmnXml.value);
+const emit = defineEmits(["save"]);
+const data = reactive({
+  element: null,
+  controlForm: {
+    processId: designerForm.value.processKey || "",
+    processName: designerForm.value.processName || "",
+    simulation: false,
+    labelEditing: false,
+    labelVisible: false,
+    prefix: "flowable",
+    headerButtonSize: "small",
+    additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
+  },
+});
+const { controlForm, element } = toRefs(data);
+
+function elementClick(elementArgv) {
+  element.value = elementArgv;
+  console.log(elementArgv);
+}
+function initModeler(modelerArgv) {
+  setTimeout(() => {
+    modeler.value = modelerArgv;
+    console.log(modeler.value.get("eventBus"), "71");
+  }, 10);
+}
+function handlerEvent(eventName, element) {}
+function onSaveProcess(saveData) {
+  emit("save", saveData);
+}
 </script>
 <!-- 
   
@@ -51,7 +87,7 @@ import CustomContentPadProvider from "@/plugins/package/designer/plugins/content
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
 import vuePlugin from "@/plugins/package/highlight";
-import "highlight.js/styles/atom-one-dark-reasonable.css";
+// import "highlight.js/styles/atom-one-dark-reasonable.css";
 // Vue.use(vuePlugin);
 
 export default {
@@ -63,32 +99,12 @@ export default {
   },
   data() {
     return {
-      modeler: null,
-      controlForm: {
-        processId: this.designerForm.processKey || "",
-        processName: this.designerForm.processName || "",
-        simulation: false,
-        labelEditing: false,
-        labelVisible: false,
-        prefix: "flowable",
-        headerButtonSize: "small",
-        additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
-      },
+    
+     
     };
   },
   methods: {
-    elementClick(element) {
-      this.element = element;
-    },
-    initModeler(modeler) {
-      setTimeout(() => {
-        this.modeler = modeler;
-      }, 10);
-    },
-    handlerEvent(eventName, element) {},
-    onSaveProcess(saveData) {
-      this.$emit("save", saveData);
-    },
+  
   },
 };
 </script>