流程详情修改以及流程图高亮显示

src/views/system/bpm/processInstance/detail/index.vue

@@ -1,8 +1,9 @@
+<!-- 流程详情页面 tab切换 -->
 <template>
-    <div class="default-main">
+    <div class="default-main" style="overflow: hidden;">
         <!--返回按钮-->
         <back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
-        <el-tabs type="border-card" v-model="tab">
+        <el-tabs type="border-card" v-model="tab" @tab-click="handleClickTab">
             <el-tab-pane label="流程审核" name="流程审核" v-if="runningTasks.length > 0">
                 <el-card
                     v-for="(item, index) in runningTasks"
@@ -115,15 +116,17 @@
                     @refresh="getTaskList"
                 />
             </el-tab-pane>
-            <!--            <el-tab-pane label='流程图'>-->
-            <!--                &lt;!&ndash; 高亮流程图 &ndash;&gt;-->
-            <!--                &lt;!&ndash;    <ProcessInstanceBpmnViewer&ndash;&gt;-->
-            <!--                &lt;!&ndash;      :id="`${id}`"&ndash;&gt;-->
-            <!--                &lt;!&ndash;      :bpmn-xml="bpmnXml"&ndash;&gt;-->
-            <!--                &lt;!&ndash;      :loading="processInstanceLoading"&ndash;&gt;-->
-            <!--                &lt;!&ndash;      :process-instance="processInstance"&ndash;&gt;-->
-            <!--                &lt;!&ndash;      :tasks="tasks"&ndash;&gt;-->
-            <!--                &lt;!&ndash;    />&ndash;&gt;</el-tab-pane>-->
+            <el-tab-pane label="流程图" name="流程图">
+                高亮流程图
+                <ProcessInstanceBpmnViewer
+                ref="mapRef"
+                    :id="`${id}`"
+                    :bpmn-xml="bpmnXml"
+                    :loading="processInstanceLoading"
+                    :process-instance="processInstance"
+                    :tasks="tasks"
+                />
+            </el-tab-pane>
         </el-tabs>
         <ContentWrap>
             <!-- 弹窗：转派审批人 -->
@@ -138,7 +141,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick ,markRaw} from 'vue'
+import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick, markRaw } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/stores/modules/user'
 import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
@@ -272,6 +275,13 @@ const getDetail = () => {
     // 2. 获得流程任务列表（审批记录）
     getTaskList()
 }
+//tab切换
+const mapRef=ref(null)
+const handleClickTab = (tab:any, event:any) => {
+    if(tab.props.name=='流程图'){
+        mapRef.value.getMapList()
+    }
+}
 
 /** 加载流程实例 */
 const BusinessFormComponent = ref(null) // 异步组件
@@ -299,11 +309,15 @@ const getProcessInstance = async () => {
             })
         } else {
             // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+            //用markRaw解决因使用ref定义组件，导致组件被标记成响应式对象，造成性能开销警告的问题
             BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
         }
 
         // 加载流程图
-        bpmnXml.value = (await getProcessDefinitionById(processDefinition.id))?.bpmnXml
+        await getProcessDefinitionById(processDefinition.id).then(res => {
+            bpmnXml.value = res.data?.bpmnXml
+        })
+        console.log(bpmnXml.value, '流程图数据')
     } finally {
         processInstanceLoading.value = false
     }
@@ -402,3 +416,9 @@ onMounted(async () => {
     }
 })
 </script>
+<style lang="scss" scoped>
+::v-deep .el-tab-pane{
+    height: calc(100vh - 200px) !important;
+    overflow: auto !important;
+}
+</style>