update 优化设计器

src/components/BpmnDesign/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="containers">
-    <el-dialog v-model="visible" width="100%" fullscreen :title="title" @close="closeCallBack" @opened="designOpened">
+    <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">
@@ -68,13 +68,16 @@
       </div>
     </el-dialog>
   </div>
-  <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
+  <div class="preview-XML">
-    <highlightjs :code="xmlStr" language="XML" />
+    <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
-  </el-dialog>
+      <highlightjs :code="xmlStr" language="XML" />
-
+    </el-dialog>
-  <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
+  </div>
-    <div style="text-align: center" v-html="svgData" />
+  <div>
-  </el-dialog>
+    <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
+      <div style="text-align: center" v-html="svgData" />
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="BpmnDesign">
@@ -91,14 +94,7 @@ import Modules from './assets/module/index';
 import useModelerStore from '@/store/modules/modeler';
 import useDialog from '@/hooks/useDialog';
 
-interface PropType {
+const emit = defineEmits(['closeCallBack', 'saveCallBack']);
-  closeCallBack?: () => void;
-  xml?: string;
-}
-const prop = withDefaults(defineProps<PropType>(), {
-  closeCallBack: () => {},
-  xml: defaultXML
-});
 
 const { visible, title, openDialog, closeDialog } = useDialog({
   title: '编辑流程'
@@ -118,12 +114,6 @@ const perviewSVGShow = ref(false);
 const xmlStr = ref('');
 const svgData = ref('');
 
-const designOpened = () => {
-  // initCanvas();
-  // initModel();
-  // initDiagram();
-};
-
 const panelBarClick = () => {
   // 延迟执行，否则会导致面板收起时，属性面板不显示
   panelFlag.value = !panelFlag.value;
@@ -295,6 +285,8 @@ const saveXml = async () => {
   console.log(xml);
   console.log(svg);
   console.log(process);
+
+  emit('saveCallBack');
 };
 
 const open = (xml?: string) => {
@@ -371,20 +363,23 @@ defineExpose({
   }
 
   .process-toolbar {
-    pre {
+  }
-      margin: 0;
+}
-      height: 100%;
+.preview-XML {
-      max-height: calc(80vh - 32px);
+  pre {
-      overflow-x: hidden;
+    margin: 0;
-      overflow-y: auto;
+    height: 100%;
-      :deep(.hljs) {
+    max-height: calc(80vh - 32px);
-        word-break: break-word;
+    overflow-x: hidden;
-        white-space: pre-wrap;
+    overflow-y: auto;
-        padding: 0.5em;
+    :deep(.hljs) {
-      }
+      word-break: break-word;
+      white-space: pre-wrap;
+      padding: 0.5em;
     }
   }
 }
+
 .open-bar {
   font-size: 20px;
   cursor: pointer;

src/views/workflow/model/index.vue

@@ -99,7 +99,7 @@
       </el-col>
     </el-row>
     <!-- 设计流程开始 -->
-    <BpmnDesign ref="bpmnDesignRef" :xml="xmlStr"></BpmnDesign>
+    <BpmnDesign ref="bpmnDesignRef"></BpmnDesign>
     <!-- 设计流程结束 -->
     <!-- 添加模型对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false">
@@ -164,7 +164,6 @@ const modelList = ref<ModelVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
 const categoryName = ref('');
 const modelId = ref<string>('');
-const xmlStr = ref('');
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -323,7 +322,6 @@ const reset = () => {
 // 打开设计流程
 const clickDesign = async (id: string) => {
   const res = await getInfo(id);
-  xml.value = res.data.xml;
   bpmnDesignRef.value?.open(res.data.xml);
 };
 // 导出流程模型