mirror of
https://github.com/yudaocode/yudao-ui-admin-vue3.git
synced 2026-04-29 13:08:39 +00:00
377 lines
11 KiB
Vue
377 lines
11 KiB
Vue
<template>
|
||
<el-timeline class="pt-20px">
|
||
<el-timeline-item
|
||
v-for="(activity, index) in approveNodes"
|
||
:key="index"
|
||
size="large"
|
||
:icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
|
||
:color="getApprovalNodeColor(activity.status)"
|
||
>
|
||
<div class="flex flex-col items-start">
|
||
<div class="font-bold"> {{ activity.name }}</div>
|
||
<div class="flex items-center mt-1">
|
||
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
|
||
<div class="flex items-center flex-col pr-2">
|
||
<div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
|
||
<el-avatar
|
||
:size="36"
|
||
v-if="task.assigneeUser && task.assigneeUser.avatar"
|
||
:src="task.assigneeUser.avatar"
|
||
/>
|
||
<el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
|
||
{{ task.assigneeUser.nickname.substring(0, 1) }}</el-avatar
|
||
>
|
||
<el-avatar
|
||
v-else-if="task.ownerUser && task.ownerUser.avatar"
|
||
:src="task.ownerUser.avatar"
|
||
/>
|
||
<el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
|
||
{{ task.ownerUser.nickname.substring(0, 1) }}</el-avatar
|
||
>
|
||
<div
|
||
class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||
>
|
||
<Icon
|
||
:size="12"
|
||
:icon="statusIconMap2[task.status]?.icon"
|
||
:color="statusIconMap2[task.status]?.color"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col mt-1">
|
||
<div
|
||
v-if="task.assigneeUser && task.assigneeUser.nickname"
|
||
class="text-10px text-align-center"
|
||
>{{ task.assigneeUser.nickname }}</div
|
||
>
|
||
<div
|
||
v-else-if="task.ownerUser && task.ownerUser.nickname"
|
||
class="text-10px text-align-center"
|
||
>
|
||
{{ task.ownerUser.nickname }}</div
|
||
>
|
||
<!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-for="(user, idx1) in activity.candidateUserList"
|
||
:key="idx1"
|
||
class="flex items-center"
|
||
>
|
||
<div class="flex items-center flex-col pr-2">
|
||
<div class="position-relative">
|
||
<el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
|
||
<el-avatar v-else-if="user.nickname && user.nickname">
|
||
{{ user.nickname.substring(0, 1) }}</el-avatar
|
||
>
|
||
<div
|
||
class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||
>
|
||
<Icon
|
||
:size="12"
|
||
:icon="statusIconMap2['-1']?.icon"
|
||
:color="statusIconMap2['-1']?.color"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col mt-1">
|
||
<div v-if="user.nickname" class="text-10px text-align-center">{{
|
||
user.nickname
|
||
}}</div>
|
||
<!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="activity.status !== TaskStatusEnum.NOT_START" class="text-#a5a5a5 text-13px mt-1">
|
||
{{ getApprovalNodeTime(activity) }}
|
||
</div>
|
||
|
||
<!-- <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
|
||
<div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
|
||
<div class="mb-5px">审批意见：</div>
|
||
<div
|
||
class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
|
||
>
|
||
{{ activity.opinion }}
|
||
</div>
|
||
</div>
|
||
<div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
|
||
{{ formatDate(activity.createTime) }}
|
||
</div> -->
|
||
</div>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { formatDate } from '@/utils/formatTime'
|
||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
||
import { TaskStatusEnum } from '@/api/bpm/task'
|
||
import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
|
||
import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
|
||
defineOptions({ name: 'BpmProcessInstanceTimeline' })
|
||
const props = defineProps({
|
||
// 流程实例编号
|
||
processInstanceId: {
|
||
type: String,
|
||
required: false,
|
||
default: ''
|
||
},
|
||
// 流程定义编号
|
||
processDefinitionId: {
|
||
type: String,
|
||
required: false,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
// 审批节点
|
||
const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
|
||
|
||
const statusIconMap2 = {
|
||
// 未开始
|
||
'-1': { color: '#e5e7ec', icon: 'ep-clock' },
|
||
// 待审批
|
||
'0': { color: '#e5e7ec', icon: 'ep:loading' },
|
||
// 审批中
|
||
'1': { color: '#448ef7', icon: 'ep:loading'},
|
||
// 审批通过
|
||
'2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
|
||
// 审批不通过
|
||
'3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
|
||
// 取消
|
||
'4': { color: '#cccccc', icon: 'ep:delete-filled' },
|
||
// 回退
|
||
'5': { color: '#f46b6c', icon: 'ep:remove-filled' },
|
||
// 委派中
|
||
'6': { color: '#448ef7', icon: 'ep:loading' },
|
||
// 审批通过中
|
||
'7': { color: '#00b32a', icon: 'ep:circle-check-filled' },
|
||
|
||
}
|
||
|
||
const statusIconMap = {
|
||
// 审批未开始
|
||
'-1': { color: '#e5e7ec', icon: Clock },
|
||
'0': { color: '#e5e7ec', icon: Clock },
|
||
// 审批中
|
||
'1': { color: '#448ef7', icon: Loading },
|
||
// 审批通过
|
||
'2': { color: '#00b32a', icon: Check },
|
||
// 审批不通过
|
||
'3': { color: '#f46b6c', icon: Close },
|
||
// 已取消
|
||
'4': { color: '#cccccc', icon: Delete },
|
||
// 回退
|
||
'5' : { color: '#f46b6c', icon: Minus },
|
||
// 委派中
|
||
'6': { color: '#448ef7', icon: Loading },
|
||
// 审批通过中
|
||
'7': { color: '#00b32a', icon: Check },
|
||
}
|
||
|
||
/** 获得审批详情 */
|
||
const getApprovalDetail = async () => {
|
||
const data = await ProcessInstanceApi.getApprovalDetail(
|
||
props.processInstanceId,
|
||
props.processDefinitionId
|
||
)
|
||
approveNodes.value = data.approveNodes
|
||
}
|
||
|
||
const getApprovalNodeIcon = (taskStatus: number , nodeType: NodeType) => {
|
||
|
||
if(taskStatus == TaskStatusEnum.NOT_START) {
|
||
return statusIconMap[taskStatus]?.icon
|
||
}
|
||
|
||
if (nodeType === NodeType.START_USER_NODE || nodeType === NodeType.USER_TASK_NODE) {
|
||
return statusIconMap[taskStatus]?.icon
|
||
}
|
||
|
||
}
|
||
|
||
const getApprovalNodeColor = (taskStatus: number) => {
|
||
return statusIconMap[taskStatus]?.color
|
||
}
|
||
|
||
const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
|
||
|
||
if(node.endTime) {
|
||
return `结束时间：${formatDate(node.endTime)}`
|
||
}
|
||
if(node.startTime) {
|
||
return `创建时间：${formatDate(node.startTime)}`
|
||
}
|
||
}
|
||
|
||
const mockData: any = [
|
||
{
|
||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||
name: '发起人',
|
||
createTime: 1725237646192,
|
||
endTime: null,
|
||
durationInMillis: null,
|
||
status: 1,
|
||
reason: null,
|
||
ownerUser: null,
|
||
assigneeUser: {
|
||
id: 104,
|
||
nickname: '测试号',
|
||
deptId: 107,
|
||
deptName: '运维部门'
|
||
},
|
||
taskDefinitionKey: 'task-01',
|
||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
processInstance: {
|
||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
name: 'oa_leave',
|
||
createTime: null,
|
||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||
startUser: null
|
||
},
|
||
parentTaskId: null,
|
||
children: null,
|
||
formId: null,
|
||
formName: null,
|
||
formConf: null,
|
||
formFields: null,
|
||
formVariables: null
|
||
},
|
||
{
|
||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||
name: '领导审批',
|
||
createTime: 1725237646192,
|
||
endTime: null,
|
||
durationInMillis: null,
|
||
status: 2,
|
||
reason: null,
|
||
ownerUser: null,
|
||
assigneeUser: {
|
||
id: 104,
|
||
nickname: '领导',
|
||
deptId: 107,
|
||
deptName: '运维部门'
|
||
},
|
||
taskDefinitionKey: 'task-01',
|
||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
processInstance: {
|
||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
name: 'oa_leave',
|
||
createTime: null,
|
||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||
startUser: null
|
||
},
|
||
parentTaskId: null,
|
||
children: null,
|
||
formId: null,
|
||
formName: null,
|
||
formConf: null,
|
||
formFields: null,
|
||
formVariables: null
|
||
},
|
||
{
|
||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||
name: '财务总监审核',
|
||
createTime: 1725237646192,
|
||
endTime: null,
|
||
durationInMillis: null,
|
||
status: 3,
|
||
reason: null,
|
||
ownerUser: null,
|
||
assigneeUser: {
|
||
id: 104,
|
||
nickname: '财务总监',
|
||
deptId: 107,
|
||
deptName: '运维部门'
|
||
},
|
||
taskDefinitionKey: 'task-01',
|
||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
processInstance: {
|
||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
name: 'oa_leave',
|
||
createTime: null,
|
||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||
startUser: null
|
||
},
|
||
parentTaskId: null,
|
||
children: null,
|
||
formId: null,
|
||
formName: null,
|
||
formConf: null,
|
||
formFields: null,
|
||
formVariables: null
|
||
},
|
||
{
|
||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||
name: '领导审批',
|
||
createTime: 1725237646192,
|
||
endTime: null,
|
||
durationInMillis: null,
|
||
status: 2,
|
||
reason: null,
|
||
ownerUser: null,
|
||
assigneeUser: {
|
||
id: 104,
|
||
nickname: '领导',
|
||
deptId: 107,
|
||
deptName: '运维部门'
|
||
},
|
||
taskDefinitionKey: 'task-01',
|
||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
processInstance: {
|
||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
name: 'oa_leave',
|
||
createTime: null,
|
||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||
startUser: null
|
||
},
|
||
parentTaskId: null,
|
||
children: null,
|
||
formId: null,
|
||
formName: null,
|
||
formConf: null,
|
||
formFields: null,
|
||
formVariables: null
|
||
},
|
||
{
|
||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||
name: '财务总监审核',
|
||
createTime: 1725237646192,
|
||
endTime: null,
|
||
durationInMillis: null,
|
||
status: 3,
|
||
reason: null,
|
||
ownerUser: null,
|
||
assigneeUser: {
|
||
id: 104,
|
||
nickname: '财务总监',
|
||
deptId: 107,
|
||
deptName: '运维部门'
|
||
},
|
||
taskDefinitionKey: 'task-01',
|
||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
processInstance: {
|
||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||
name: 'oa_leave',
|
||
createTime: null,
|
||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||
startUser: null
|
||
},
|
||
parentTaskId: null,
|
||
children: null,
|
||
formId: null,
|
||
formName: null,
|
||
formConf: null,
|
||
formFields: null,
|
||
formVariables: null
|
||
}
|
||
]
|
||
|
||
onMounted(async () => {
|
||
getApprovalDetail()
|
||
})
|
||
</script>
|