From 229b55e3d0fe8da99f65c78b9b0a6590a5898d65 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Sun, 4 Feb 2024 11:32:36 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BpmnDesign/index.vue | 145 ++++++++++++++--------------
 src/views/workflow/model/design.vue |  47 +++++++++
 2 files changed, 118 insertions(+), 74 deletions(-)
 create mode 100644 src/views/workflow/model/design.vue

diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index a69991d..9a0a7e4 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -1,72 +1,70 @@
 <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">
-            <el-header>
-              <div class="process-toolbar">
-                <el-space wrap :size="10">
-                  <el-button size="small" type="primary" @click="saveXml">保 存</el-button>
-                  <el-dropdown size="small">
-                    <el-button size="small" type="primary"> 预 览 </el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
-                        <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
+    <div class="app-containers">
+      <el-container class="h-full">
+        <el-container style="align-items: stretch">
+          <el-header>
+            <div class="process-toolbar">
+              <el-space wrap :size="10">
+                <el-button size="small" type="primary" @click="saveXml">保 存</el-button>
+                <el-dropdown size="small">
+                  <el-button size="small" type="primary"> 预 览 </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
+                      <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
 
-                  <el-dropdown size="small">
-                    <el-button size="small" type="primary"> 下 载 </el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
-                        <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                  <el-tooltip effect="dark" content="新建" placement="bottom">
-                    <el-button size="small" icon="CirclePlus" @click="newDiagram" />
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-                    <el-button size="small" icon="Rank" @click="fitViewport" />
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="放大" placement="bottom">
-                    <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="缩小" placement="bottom">
-                    <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="后退" placement="bottom">
-                    <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
-                  </el-tooltip>
-                  <el-tooltip effect="dark" content="前进" placement="bottom">
-                    <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
-                  </el-tooltip>
-                </el-space>
-              </div>
-            </el-header>
-            <div ref="canvas" class="canvas" />
-          </el-container>
-          <div :class="{ 'process-panel': true, 'hide': panelFlag }">
-            <div class="process-panel-bar" @click="panelBarClick">
-              <div class="open-bar">
-                <el-link type="default" :underline="false">
-                  <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
-                </el-link>
-              </div>
+                <el-dropdown size="small">
+                  <el-button size="small" type="primary"> 下 载 </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
+                      <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <el-tooltip effect="dark" content="新建" placement="bottom">
+                  <el-button size="small" icon="CirclePlus" @click="newDiagram" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+                  <el-button size="small" icon="Rank" @click="fitViewport" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="放大" placement="bottom">
+                  <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="缩小" placement="bottom">
+                  <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="后退" placement="bottom">
+                  <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="前进" placement="bottom">
+                  <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
+                </el-tooltip>
+              </el-space>
             </div>
-            <transition enter-active-class="animate__animated animate__fadeIn">
-              <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
-                <PropertyPanel :modeler="bpmnModeler" />
-              </div>
-            </transition>
-          </div>
+          </el-header>
+          <div ref="canvas" class="canvas" />
         </el-container>
-      </div>
-    </el-dialog>
+        <div :class="{ 'process-panel': true, 'hide': panelFlag }">
+          <div class="process-panel-bar" @click="panelBarClick">
+            <div class="open-bar">
+              <el-link type="default" :underline="false">
+                <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
+              </el-link>
+            </div>
+          </div>
+          <transition enter-active-class="animate__animated animate__fadeIn">
+            <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
+              <PropertyPanel :modeler="bpmnModeler" />
+            </div>
+          </transition>
+        </div>
+      </el-container>
+    </div>
   </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;
diff --git a/src/views/workflow/model/design.vue b/src/views/workflow/model/design.vue
new file mode 100644
index 0000000..80031ac
--- /dev/null
+++ b/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>