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

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

@@ -1,56 +1,65 @@
 <template>
-  <el-card v-loading="loading" class="box-card">
-    <template #header>
-      <span class="el-icon-picture-outline">流程图</span>
-    </template>
-    <MyProcessViewer
-      key="designer"
-      :activityData="activityList"
-      :prefix="bpmnControlForm.prefix"
-      :processInstanceData="processInstance"
-      :taskData="tasks"
-      :value="bpmnXml"
-      v-bind="bpmnControlForm"
-    />
-  </el-card>
+    <el-card v-loading="loading" class="box-card">
+        <template #header>
+            <span class="el-icon-picture-outline">流程图</span>
+        </template>
+        <MyProcessViewer
+            key="designer"
+            :activityData="activityList"
+            :prefix="bpmnControlForm.prefix"
+            :processInstanceData="processInstance"
+            :taskData="tasks"
+            :value="bpmnXml"
+            v-bind="bpmnControlForm"
+        />
+    </el-card>
 </template>
 <script lang="ts" setup>
-import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref,nextTick } from 'vue'
+import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick ,defineExpose} from 'vue'
 import { ElMessage } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import { getTaskListByReturn } from '@/api/bpm-boot/activity'
+import { getMap } from 'echarts'
 
 defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 
 const props = defineProps({
-  loading: propTypes.bool, // 是否加载中
-  id: propTypes.string, // 流程实例的编号
-  processInstance: propTypes.any, // 流程实例的信息
-  tasks: propTypes.array, // 流程任务的数组
-  bpmnXml: propTypes.string // BPMN XML
+    loading: propTypes.bool, // 是否加载中
+    id: propTypes.string, // 流程实例的编号
+    processInstance: propTypes.any, // 流程实例的信息
+    tasks: propTypes.array, // 流程任务的数组
+    bpmnXml: propTypes.string // BPMN XML
 })
 
 const bpmnControlForm = ref({
-  prefix: 'flowable'
+    prefix: 'flowable'
 })
 const activityList = ref([]) // 任务列表
-
-/** 只有 loading 完成时，才去加载流程列表 */
-watch(
-  () => props.loading,
-  async (value) => {
-    if (value && props.id) {
-      await getTaskListByReturn(props.id).then(res =>{
-        activityList.value = res.data
-      })
+const getMapList = () => {
+  console.log('执行力');
+    if (props.id) {
+       nextTick(()=>{
+        getTaskListByReturn(props.id).then(res => {
+            activityList.value = res.data
+        })
+       })
     }
-  }
-)
+}
+/** 只有 loading 完成时，才去加载流程列表 */
+// watch(
+//     () => props.id
+//     async val => {
+//         await getTaskListByReturn(val).then(res => {
+//             activityList.value = res.data
+//         })
+//     }
+// )
+defineExpose({ getMapList })
 </script>
 <style>
 .box-card {
-  width: 100%;
-  margin-bottom: 20px;
+    width: 100%;
+    margin-bottom: 20px;
 }
 </style>

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>