update 优化设计器

src/components/BpmnDesign/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="containers">
-    <el-dialog v-model="visible" width="100%" fullscreen :title="title" @close="emit('closeCallBack')">
     <div class="app-containers">
       <el-container class="h-full">
         <el-container style="align-items: stretch">
@@ -66,7 +65,6 @@
         </div>
       </el-container>
     </div>
-    </el-dialog>
   </div>
   <div class="preview-XML">
     <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
@@ -292,8 +290,6 @@ const saveXml = async () => {
 const open = (xml?: string) => {
   openDialog();
   nextTick(() => {
-    initCanvas();
-    initModel();
     initDiagram(xml);
   });
 };
@@ -301,6 +297,13 @@ const close = () => {
   closeDialog();
 };
 
+onMounted(() => {
+  nextTick(() => {
+    initCanvas();
+    initModel();
+  });
+});
+
 /**
  * 对外暴露子组件方法
  */
@@ -314,6 +317,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .containers {
+  height: 100%;
   .app-containers {
     width: 100%;
     height: 100%;
@@ -356,14 +360,6 @@ defineExpose({
       }
     }
   }
-
-  :deep(.el-dialog .el-dialog__body) {
-    max-height: 100% !important;
-    height: calc(100vh - 50px);
-  }
-
-  .process-toolbar {
-  }
 }
 .preview-XML {
   pre {
@@ -392,6 +388,7 @@ defineExpose({
   box-shadow: #cccccc 0 0 8px;
   max-height: 100%;
   width: 480px;
+  height: calc(100vh - 80px);
   :deep(.el-collapse) {
     height: calc(100vh - 162px);
     overflow: auto;

src/views/workflow/model/design.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="design">
+    <el-dialog v-model="visible" width="100%" fullscreen :title="title">
+      <div class="modeler">
+        <bpmn-design ref="bpmnDesignRef"></bpmn-design>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="Design">
+import { getInfo } from '@/api/workflow/model';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+import { ModelForm } from '@/api/workflow/model/types';
+import BpmnDesign from '@/components/BpmnDesign';
+import useDialog from '@/hooks/useDialog';
+const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>();
+const modelForm = ref<ModelForm>();
+
+const { visible, title } = useDialog({
+  title: '编辑流程'
+});
+
+const open = async (id) => {
+  visible.value = true;
+  const { data } = await getInfo(id);
+  modelForm.value = data;
+  bpmnDesignRef.value.initDiagram(modelForm.value.xml);
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open
+});
+</script>
+
+<style lang="scss" scoped>
+.design {
+  :deep(.el-dialog .el-dialog__body) {
+    max-height: 100% !important;
+    min-height: calc(100vh - 50px);
+  }
+}
+</style>