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

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>