Vue3 重构:流程实例的详情(流程图预览)

This commit is contained in:
YunaiV 2023-03-28 01:19:25 +08:00
parent c5a3fa1f94
commit 9e6da44881
2 changed files with 63 additions and 50 deletions

View File

@ -0,0 +1,53 @@
<template>
<el-card class="box-card" v-loading="loading">
<template #header>
<span class="el-icon-picture-outline">流程图</span>
</template>
<my-process-viewer
key="designer"
:value="bpmnXml"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
:activityData="activityList"
:processInstanceData="processInstance"
:taskData="tasks"
/>
</el-card>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import * as ActivityApi from '@/api/bpm/activity'
// import * as DefinitionApi from '@/api/bpm/definition'
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 bpmnXML = computed(() => { // TODO
// if (!props.processInstance || !props.processInstance.processDefinition) {
// return
// }
// return DefinitionApi.getProcessDefinitionBpmnXML(props.processInstance.processDefinition.id)
// })
/** 初始化 */
onMounted(async () => {
activityList.value = await ActivityApi.getActivityList({
processInstanceId: props.id
})
})
</script>
<style>
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

View File

@ -127,21 +127,13 @@
</el-card> </el-card>
<!-- 高亮流程图 --> <!-- 高亮流程图 -->
<el-card class="box-card" v-loading="processInstanceLoading"> <ProcessInstanceBpmnViewer
<template #header> :id="id"
<span class="el-icon-picture-outline">流程图</span> :process-instance="processInstance"
</template> :loading="processInstanceLoading"
<my-process-viewer :tasks="tasks"
key="designer" :bpmn-xml="bpmnXML"
v-model="bpmnXML"
:value="bpmnXML"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
:activityData="activityList"
:processInstanceData="processInstance"
:taskData="tasks"
/> />
</el-card>
<!-- 弹窗转派审批人 --> <!-- 弹窗转派审批人 -->
<TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" /> <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
@ -149,16 +141,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { parseTime } from '@/utils/formatTime' import { parseTime } from '@/utils/formatTime'
import * as UserApi from '@/api/system/user'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as DefinitionApi from '@/api/bpm/definition'
import * as TaskApi from '@/api/bpm/task' import * as TaskApi from '@/api/bpm/task'
import * as ActivityApi from '@/api/bpm/activity'
import { formatPast2 } from '@/utils/formatTime' import { formatPast2 } from '@/utils/formatTime'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue' import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
import * as DefinitionApi from '@/api/bpm/definition'
const { query } = useRoute() // const { query } = useRoute() //
const message = useMessage() // const message = useMessage() //
@ -249,6 +240,7 @@ const getTimelineItemType = (item) => {
} }
// ========== ========== // ========== ==========
const bpmnXML = ref('')
/** 转派审批人 */ /** 转派审批人 */
const taskUpdateAssigneeFormRef = ref() const taskUpdateAssigneeFormRef = ref()
@ -265,32 +257,12 @@ const handleDelegate = async (task) => {
/** 处理审批退回的操作 */ /** 处理审批退回的操作 */
const handleBack = async (task) => { const handleBack = async (task) => {
message.error('暂不支持【退回】功能!') message.error('暂不支持【退回】功能!')
// http://blog.wya1.com/article/636697030/details/7296
// const data = {
// id: task.id,
// assigneeUserId: 1
// }
// backTask(data).then(response => {
// this.$modal.msgSuccess("退");
// this.getDetail(); //
// });
console.log(task) console.log(task)
} }
// ========== ==========
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
const activityList = ref([])
// ========== ========== // ========== ==========
onMounted(() => { onMounted(() => {
getDetail() getDetail()
//
UserApi.getSimpleUserList().then((data) => {
userOptions.value.push(...data)
})
}) })
const getDetail = () => { const getDetail = () => {
@ -324,13 +296,6 @@ const getDetail = () => {
DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => { DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => {
bpmnXML.value = data bpmnXML.value = data
}) })
//
ActivityApi.getActivityList({
processInstanceId: data.id
}).then((data) => {
activityList.value = data
})
}) })
.finally(() => { .finally(() => {
processInstanceLoading.value = false processInstanceLoading.value = false
@ -387,12 +352,7 @@ const getDetail = () => {
}) })
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.my-process-designer {
height: calc(100vh - 200px);
}
.box-card { .box-card {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;