| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-card v-loading="loading" class="box-card"> |
| 3e359e | 3 | <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" /> |
| 820397 | 4 | </el-card> |
| H | 5 | </template> |
| 6 | <script lang="ts" setup> | |
| 7 | import { propTypes } from '@/utils/propTypes' | |
| 8 | import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package' | |
| 9 | ||
| 10 | defineOptions({ name: 'BpmProcessInstanceBpmnViewer' }) | |
| 11 | ||
| 12 | const props = defineProps({ | |
| 3e359e | 13 | loading: propTypes.bool.def(false), // 是否加载中 |
| H | 14 | bpmnXml: propTypes.string, // BPMN XML |
| 15 | modelView: propTypes.object | |
| 820397 | 16 | }) |
| H | 17 | |
| 3e359e | 18 | const view = ref({ |
| H | 19 | bpmnXml: '' |
| 20 | }) // BPMN 流程图数据 | |
| 21 | ||
| 820397 | 22 | |
| H | 23 | /** 只有 loading 完成时，才去加载流程列表 */ |
| 24 | watch( | |
| 3e359e | 25 | () => props.modelView, |
| H | 26 | async (newModelView) => { |
| 27 | // 加载最新 | |
| 28 | if (newModelView) { | |
| 29 | //@ts-ignore | |
| 30 | view.value = newModelView | |
| 820397 | 31 | } |
| H | 32 | } |
| 33 | ) | |
| 3e359e | 34 | |
| H | 35 | /** 监听 bpmnXml */ |
| 36 | watch( | |
| 37 | () => props.bpmnXml, | |
| 38 | (value) => { | |
| 39 | view.value.bpmnXml = value | |
| 40 | } | |
| 41 | ) | |
| 820397 | 42 | </script> |
| 3e359e | 43 | <style lang="scss" scoped> |
| 820397 | 44 | .box-card { |
| 3e359e | 45 | height: 100%; |
| 820397 | 46 | width: 100%; |
| 3e359e | 47 | margin-bottom: 0; |
| H | 48 | |
| 49 | :deep(.el-card__body) { | |
| 50 | height: 100%; | |
| 51 | padding: 0; | |
| 52 | } | |
| 53 | ||
| 54 | :deep(.process-viewer) { | |
| 55 | height: 100% !important; | |
| 56 | min-height: 100%; | |
| 57 | width: 100%; | |
| 58 | overflow: auto; | |
| 59 | } | |
| 820397 | 60 | } |
| H | 61 | </style> |
