Vue3 重构:流程实例的详情(流程图预览)
This commit is contained in:
parent
c5a3fa1f94
commit
9e6da44881
@ -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>
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user