github/yudao-ui-admin-vue3
1
0
Fork 0
mirror of https://github.com/yudaocode/yudao-ui-admin-vue3.git synced 2026-04-29 16:58:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

【代码评审】工作流：新审批界面

Browse Source
This commit is contained in:
YunaiV
2024-10-04 16:16:33 +08:00
parent dd4c4817e4
commit 619491b4d0
3 changed files with 90 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
View File

@@ -1,5 +1,7 @@
<!-- 审批详情的右侧：审批流 -->
<template>
<el-timeline class="pt-20px">
<!-- 遍历每个审批节点 -->
<el-timeline-item
v-for="(activity, index) in approveNodes"
:key="index"
@@ -10,25 +12,28 @@
<div class="flex flex-col items-start">
<div class="font-bold"> {{ activity.name }}</div>
<div class="flex items-center mt-1">
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
<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
>
{{ 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
{{ task.ownerUser.nickname.substring(0, 1) }}
</el-avatar>
<!-- 信息：任务 ICON -->
<div
class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
>
<Icon
@@ -39,21 +44,25 @@
</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
>
{{ task.assigneeUser.nickname }}
</div>
<div
v-else-if="task.ownerUser && task.ownerUser.nickname"
class="text-10px text-align-center"
>
{{ task.ownerUser.nickname }}</div
>
{{ task.ownerUser.nickname }}
</div>
<!-- TODO @jason：审批意见，要展示哈。 -->
<!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
</div>
</div>
</div>
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
<div
v-for="(user, idx1) in activity.candidateUserList"
:key="idx1"
@@ -61,10 +70,12 @@
>
<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
>
{{ user.nickname.substring(0, 1) }}
</el-avatar>
<!-- 信息：任务 ICON -->
<div
class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
>
@@ -76,18 +87,24 @@
</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="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">
<!-- 信息：时间 -->
<div
v-if="activity.status !== TaskStatusEnum.NOT_START"
class="text-#a5a5a5 text-13px mt-1"
>
{{ getApprovalNodeTime(activity) }}
</div>
<!-- TODO @jason：审批意见，要展示哈。 -->
<!-- <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>
@@ -136,7 +153,7 @@ const statusIconMap2 = {
// 待审批
'0': { color: '#e5e7ec', icon: 'ep:loading' },
// 审批中
'1': { color: '#448ef7', icon: 'ep:loading'},
'1': { color: '#448ef7', icon: 'ep:loading' },
// 审批通过
'2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
// 审批不通过
@@ -148,8 +165,7 @@ const statusIconMap2 = {
// 委派中
'6': { color: '#448ef7', icon: 'ep:loading' },
// 审批通过中
'7': { color: '#00b32a', icon: 'ep:circle-check-filled' },
'7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
}
const statusIconMap = {
@@ -165,11 +181,11 @@ const statusIconMap = {
// 已取消
'4': { color: '#cccccc', icon: Delete },
// 回退
'5' : { color: '#f46b6c', icon: Minus },
'5': { color: '#f46b6c', icon: Minus },
// 委派中
'6': { color: '#448ef7', icon: Loading },
// 审批通过中
'7': { color: '#00b32a', icon: Check },
'7': { color: '#00b32a', icon: Check }
}
/** 获得审批详情 */
@@ -181,16 +197,14 @@ const getApprovalDetail = async () => {
approveNodes.value = data.approveNodes
}
const getApprovalNodeIcon = (taskStatus: number , nodeType: NodeType) => {
if(taskStatus == TaskStatusEnum.NOT_START) {
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) => {
@@ -198,25 +212,22 @@ const getApprovalNodeColor = (taskStatus: number) => {
}
const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
if(node.endTime) {
if (node.endTime) {
return `结束时间：${formatDate(node.endTime)}`
}
if(node.startTime) {
if (node.startTime) {
return `创建时间：${formatDate(node.startTime)}`
}
}
/**
* 重新刷新审批详情
*/
const refresh = () => {
/** 重新刷新审批详情 */
const refresh = () => {
getApprovalDetail()
}
defineExpose({ refresh })
onMounted(async () => {
getApprovalDetail()
await getApprovalDetail()
})
</script>