feat: [antd][bpm] bpmn 流程图查看修改

apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue

@@ -24,6 +24,7 @@ import {
 } from '#/api/bpm/processInstance';
 import { decodeFields, setConfAndFields2 } from '#/components/form-create';
 import { router } from '#/router';
+import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
 import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
 import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
 
@@ -318,10 +319,15 @@ defineExpose({ initProcessInfo });
         class="flex flex-1 overflow-hidden"
         :force-render="true"
       >
-        <div class="w-full">
+        <div class="h-full w-full">
+          <!-- BPMN 流程图预览 -->
+          <ProcessInstanceBpmnViewer
+            :bpmn-xml="bpmnXML"
+            v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+          />
           <ProcessInstanceSimpleViewer
             :simple-json="simpleJson"
-            v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
+            v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
           />
         </div>
       </Tabs.TabPane>

apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue

@@ -1,10 +1,59 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
+
 defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    bpmnXml?: string;
+    loading?: boolean; // 是否加载中
+    modelView?: Object;
+  }>(),
+  {
+    loading: false,
+    modelView: () => ({}),
+    bpmnXml: '',
+  },
+);
+
+// BPMN 流程图数据
+const view = ref({
+  bpmnXml: '',
+});
+
+/** 监控 modelView 更新 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    // 加载最新
+    if (newModelView) {
+      // @ts-ignore
+      view.value = newModelView;
+    }
+  },
+);
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value;
+  },
+);
 </script>
 
 <template>
-  <!-- TODO @jason：这里 BPMN 图的接入 -->
+  <div
-  <div>
+    v-loading="loading"
-    <h1>BPMN Viewer</h1>
+    class="h-full w-full overflow-auto rounded-lg border border-gray-200 bg-white p-4"
+  >
+    <MyProcessViewer
+      key="processViewer"
+      :xml="view.bpmnXml"
+      :view="view"
+      class="h-full min-h-[500px] w-full"
+    />
   </div>
 </template>