admin-sjzx/src/views/system/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

<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>
</template>
<script lang="ts" setup>
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
})

const bpmnControlForm = ref({
    prefix: 'flowable'
})
const activityList = ref([]) // 任务列表
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;
}
</style>