mirror of
https://gitee.com/myxzgzs/boyue-ui-admin-vue3
synced 2025-08-08 16:32:43 +08:00
54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<el-card v-loading="loading" class="box-card">
|
|
<MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
|
|
</el-card>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { propTypes } from '@/utils/propTypes'
|
|
import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
|
|
|
|
defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
|
|
|
|
const props = defineProps({
|
|
loading: propTypes.bool.def(false), // 是否加载中
|
|
bpmnXml: propTypes.string, // BPMN XML
|
|
modelView: propTypes.object
|
|
})
|
|
|
|
const view = ref({
|
|
bpmnXml: ''
|
|
}) // BPMN 流程图数据
|
|
|
|
|
|
/** 只有 loading 完成时，才去加载流程列表 */
|
|
watch(
|
|
() => props.modelView,
|
|
async (newModelView) => {
|
|
// 加载最新
|
|
if (newModelView) {
|
|
//@ts-ignore
|
|
view.value = newModelView
|
|
}
|
|
}
|
|
)
|
|
|
|
/** 监听 bpmnXml */
|
|
watch(
|
|
() => props.bpmnXml,
|
|
(value) => {
|
|
view.value.bpmnXml = value
|
|
}
|
|
)
|
|
</script>
|
|
<style>
|
|
.box-card {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
:deep(.process-viewer) {
|
|
height: 100% !important;
|
|
min-height: 500px;
|
|
}
|
|
</style>
|