You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.1 KiB
88 lines
3.1 KiB
<template> |
|
<BasicModal |
|
v-bind="$attrs" |
|
width="1000px" |
|
:minHeight="600" |
|
:showCancelBtn="false" |
|
:showOkBtn="false" |
|
@register="registerModal" |
|
@visible-change="handleVisibleChange" |
|
> |
|
<div id="workflowChart"/> |
|
</BasicModal> |
|
</template> |
|
<script lang="ts" setup> |
|
import { reactive } from 'vue'; |
|
import { loadMicroApp, MicroApp } from 'qiankun'; |
|
import { getSubDefineProps } from '/@/qiankun/state'; |
|
import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum'; |
|
import { useMicroAppStore } from '/@/store/modules/microApp'; |
|
import { apps } from '/@/qiankun/apps'; |
|
import { getFlowChart as getProcessDefFlowChart } from '/@/api/platform/workflow/controller/process'; |
|
import { getFlowChart as getProcessInsFlowChart } from '/@/api/platform/workflow/controller/task'; |
|
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
|
|
interface WindowState { |
|
workflowDesignApp: MicroApp; |
|
bpmnData: Recordable; |
|
} |
|
|
|
const state = reactive<WindowState>({ |
|
workflowDesignApp: undefined!, |
|
bpmnData: {}, |
|
}); |
|
|
|
const workflowDesignProps = { |
|
style: { 'min-height': '100vh' }, |
|
}; |
|
const emit = defineEmits(['register']); |
|
const microAppStore = useMicroAppStore(); |
|
const { createMessage } = useMessage(); |
|
const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => { |
|
const props: Partial<ModalProps> = { title: '查看进度' }; |
|
const { processInsId, processDefId } = data.record || {}; |
|
if (processInsId || processDefId) { |
|
changeLoading(); |
|
try { |
|
if (processInsId) { |
|
state.bpmnData = await getProcessInsFlowChart(processInsId); |
|
} else { |
|
const bpmnXml = await getProcessDefFlowChart(processDefId); |
|
state.bpmnData = { bpmnXml }; |
|
} |
|
state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), { |
|
container: '#workflowChart', |
|
props: { |
|
...getSubDefineProps(), |
|
mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART, |
|
[GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps |
|
} |
|
}), { sandbox: { experimentalStyleIsolation: true }}); |
|
state.workflowDesignApp.mountPromise.then(() => { |
|
const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART), |
|
workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart']; |
|
workflowRef.setHighlightImportDiagram(state.bpmnData); |
|
changeLoading(false); |
|
}); |
|
} catch(e: any) { |
|
createMessage.error(e); |
|
changeLoading(false); |
|
} |
|
} else createMessage.error('无法打开流程图,没有关联流程图ID!'); |
|
setModalProps(props); |
|
}); |
|
|
|
function handleVisibleChange(visible: boolean) { |
|
!visible && state.workflowDesignApp?.unmount(); |
|
} |
|
|
|
</script> |
|
<style lang="less"> |
|
.ant-modal { |
|
.ant-modal-body > .scrollbar { |
|
padding: 0; |
|
} |
|
} |
|
</style> |
|
|
|
|