feat: 重构流程定义和流程实例模块，更新API命名，增强用户选择弹窗功能，支持多用户选择，优化流程实例创建界面。
feat: 完善流程定义模块、完善流程实例模块 feat: 完善OA请假模块 feat: 完善审批中心、发起流程、查看流程、工作流整体进度 40%
This commit is contained in:
ziye
@@ -2,7 +2,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||
|
||||
import { h, ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
@@ -11,7 +11,11 @@ import { formatDateTime, isEmpty } from '@vben/utils';
|
||||
import { Avatar, Button, Image, Tooltip } from 'ant-design-vue';
|
||||
|
||||
import { UserSelectModal } from '#/components/user-select-modal';
|
||||
import { CandidateStrategyEnum, NodeTypeEnum, TaskStatusEnum } from '#/utils';
|
||||
import {
|
||||
BpmCandidateStrategyEnum,
|
||||
BpmNodeTypeEnum,
|
||||
BpmTaskStatusEnum,
|
||||
} from '#/utils';
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceTimeline' });
|
||||
|
||||
@@ -26,7 +30,7 @@ withDefaults(
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectUserConfirm: [id: string, userList: any[]];
|
||||
selectUserConfirm: [activityId: string, userList: any[]];
|
||||
}>();
|
||||
|
||||
const { push } = useRouter(); // 路由
|
||||
@@ -59,42 +63,42 @@ const statusIconMap: Record<
|
||||
// 节点类型图标映射
|
||||
const nodeTypeSvgMap = {
|
||||
// 结束节点
|
||||
[NodeTypeEnum.END_EVENT_NODE]: {
|
||||
[BpmNodeTypeEnum.END_EVENT_NODE]: {
|
||||
color: '#909398',
|
||||
icon: 'mdi:power',
|
||||
},
|
||||
// 开始节点
|
||||
[NodeTypeEnum.START_USER_NODE]: {
|
||||
[BpmNodeTypeEnum.START_USER_NODE]: {
|
||||
color: '#909398',
|
||||
icon: 'mdi:account-outline',
|
||||
},
|
||||
// 用户任务节点
|
||||
[NodeTypeEnum.USER_TASK_NODE]: {
|
||||
[BpmNodeTypeEnum.USER_TASK_NODE]: {
|
||||
color: '#ff943e',
|
||||
icon: 'tdesign:seal',
|
||||
},
|
||||
// 事务节点
|
||||
[NodeTypeEnum.TRANSACTOR_NODE]: {
|
||||
[BpmNodeTypeEnum.TRANSACTOR_NODE]: {
|
||||
color: '#ff943e',
|
||||
icon: 'mdi:file-edit-outline',
|
||||
},
|
||||
// 复制任务节点
|
||||
[NodeTypeEnum.COPY_TASK_NODE]: {
|
||||
[BpmNodeTypeEnum.COPY_TASK_NODE]: {
|
||||
color: '#3296fb',
|
||||
icon: 'mdi:content-copy',
|
||||
},
|
||||
// 条件分支节点
|
||||
[NodeTypeEnum.CONDITION_NODE]: {
|
||||
[BpmNodeTypeEnum.CONDITION_NODE]: {
|
||||
color: '#14bb83',
|
||||
icon: 'carbon:flow',
|
||||
},
|
||||
// 并行分支节点
|
||||
[NodeTypeEnum.PARALLEL_BRANCH_NODE]: {
|
||||
[BpmNodeTypeEnum.PARALLEL_BRANCH_NODE]: {
|
||||
color: '#14bb83',
|
||||
icon: 'si:flow-parallel-line',
|
||||
},
|
||||
// 子流程节点
|
||||
[NodeTypeEnum.CHILD_PROCESS_NODE]: {
|
||||
[BpmNodeTypeEnum.CHILD_PROCESS_NODE]: {
|
||||
color: '#14bb83',
|
||||
icon: 'icon-park-outline:tree-diagram',
|
||||
},
|
||||
@@ -104,22 +108,22 @@ const nodeTypeSvgMap = {
|
||||
const onlyStatusIconShow = [-1, 0, 1];
|
||||
|
||||
// 获取审批节点类型图标
|
||||
const getApprovalNodeTypeIcon = (nodeType: NodeTypeEnum) => {
|
||||
const getApprovalNodeTypeIcon = (nodeType: BpmNodeTypeEnum) => {
|
||||
return nodeTypeSvgMap[nodeType]?.icon;
|
||||
};
|
||||
|
||||
// 获取审批节点图标
|
||||
const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeTypeEnum) => {
|
||||
if (taskStatus === TaskStatusEnum.NOT_START) {
|
||||
const getApprovalNodeIcon = (taskStatus: number, nodeType: BpmNodeTypeEnum) => {
|
||||
if (taskStatus === BpmTaskStatusEnum.NOT_START) {
|
||||
return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
|
||||
}
|
||||
|
||||
if (
|
||||
nodeType === NodeTypeEnum.START_USER_NODE ||
|
||||
nodeType === NodeTypeEnum.USER_TASK_NODE ||
|
||||
nodeType === NodeTypeEnum.TRANSACTOR_NODE ||
|
||||
nodeType === NodeTypeEnum.CHILD_PROCESS_NODE ||
|
||||
nodeType === NodeTypeEnum.END_EVENT_NODE
|
||||
nodeType === BpmNodeTypeEnum.START_USER_NODE ||
|
||||
nodeType === BpmNodeTypeEnum.USER_TASK_NODE ||
|
||||
nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ||
|
||||
nodeType === BpmNodeTypeEnum.CHILD_PROCESS_NODE ||
|
||||
nodeType === BpmNodeTypeEnum.END_EVENT_NODE
|
||||
) {
|
||||
return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
|
||||
}
|
||||
@@ -133,7 +137,7 @@ const getApprovalNodeColor = (taskStatus: number) => {
|
||||
|
||||
// 获取审批节点时间
|
||||
const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
|
||||
if (node.nodeType === NodeTypeEnum.START_USER_NODE && node.startTime) {
|
||||
if (node.nodeType === BpmNodeTypeEnum.START_USER_NODE && node.startTime) {
|
||||
return formatDateTime(node.startTime);
|
||||
}
|
||||
if (node.endTime) {
|
||||
@@ -147,18 +151,23 @@ const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
|
||||
|
||||
// 选择自定义审批人
|
||||
const userSelectFormRef = ref();
|
||||
const selectedActivityNodeId = ref<string>();
|
||||
const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
|
||||
|
||||
// 打开选择用户弹窗
|
||||
const handleSelectUser = (activityId: string, selectedList: any[]) => {
|
||||
userSelectFormRef.value.open(activityId, selectedList);
|
||||
selectedActivityNodeId.value = activityId;
|
||||
userSelectFormRef.value.open(
|
||||
selectedList?.length ? selectedList.map((item) => item.id) : [],
|
||||
);
|
||||
};
|
||||
|
||||
// 选择用户完成
|
||||
const selectedUsers = ref<number[]>([]);
|
||||
const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
|
||||
customApproveUsers.value[activityId] = userList || [];
|
||||
emit('selectUserConfirm', activityId, userList);
|
||||
const handleUserSelectConfirm = (userList: any[]) => {
|
||||
customApproveUsers.value[selectedActivityNodeId.value] = userList || [];
|
||||
|
||||
emit('selectUserConfirm', selectedActivityNodeId.value, userList);
|
||||
};
|
||||
|
||||
/** 跳转子流程 */
|
||||
@@ -171,31 +180,6 @@ const handleChildProcess = (activity: any) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 渲染用户头像和昵称
|
||||
const renderUserAvatar = (user: any) => {
|
||||
if (!user) return null;
|
||||
|
||||
return h('div', {}, [
|
||||
user.avatar
|
||||
? h(Avatar, {
|
||||
class: '!m-[5px]',
|
||||
size: 28,
|
||||
src: user.avatar,
|
||||
})
|
||||
: h(
|
||||
Avatar,
|
||||
{
|
||||
class: '!m-[5px]',
|
||||
size: 28,
|
||||
},
|
||||
{
|
||||
default: () => user.nickname?.slice(0, 1),
|
||||
},
|
||||
),
|
||||
h('span', { class: 'text-[13px]' }, user.nickname),
|
||||
]);
|
||||
};
|
||||
|
||||
// 判断是否需要显示自定义选择审批人
|
||||
const shouldShowCustomUserSelect = (
|
||||
activity: BpmProcessInstanceApi.ApprovalNodeInfo,
|
||||
@@ -203,16 +187,18 @@ const shouldShowCustomUserSelect = (
|
||||
return (
|
||||
isEmpty(activity.tasks) &&
|
||||
isEmpty(activity.candidateUsers) &&
|
||||
(CandidateStrategyEnum.START_USER_SELECT === activity.candidateStrategy ||
|
||||
CandidateStrategyEnum.APPROVE_USER_SELECT === activity.candidateStrategy)
|
||||
(BpmCandidateStrategyEnum.START_USER_SELECT ===
|
||||
activity.candidateStrategy ||
|
||||
BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
|
||||
activity.candidateStrategy)
|
||||
);
|
||||
};
|
||||
|
||||
// 判断是否需要显示审批意见
|
||||
const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
|
||||
const shouldShowApprovalReason = (task: any, nodeType: BpmNodeTypeEnum) => {
|
||||
return (
|
||||
task.reason &&
|
||||
[NodeTypeEnum.END_EVENT_NODE, NodeTypeEnum.USER_TASK_NODE].includes(
|
||||
[BpmNodeTypeEnum.END_EVENT_NODE, BpmNodeTypeEnum.USER_TASK_NODE].includes(
|
||||
nodeType,
|
||||
)
|
||||
);
|
||||
@@ -230,233 +216,250 @@ const handleUserSelectCancel = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-timeline class="pt-20px">
|
||||
<!-- 遍历每个审批节点 -->
|
||||
<a-timeline-item
|
||||
v-for="(activity, index) in activityNodes"
|
||||
:key="index"
|
||||
:color="getApprovalNodeColor(activity.status)"
|
||||
>
|
||||
<template #dot>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="position-absolute left--10px top--6px flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-[#dedede] bg-[#3f73f7] p-[6px]"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="getApprovalNodeTypeIcon(activity.nodeType)"
|
||||
class="size-[24px] text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showStatusIcon"
|
||||
class="absolute right-[-10px] top-[18px] flex size-[20px] items-center rounded-full border-[2px] border-solid border-white p-[2px]"
|
||||
:style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
|
||||
class="text-white"
|
||||
:class="[statusIconMap[activity.status]?.animation]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="ml-2 flex flex-col items-start gap-2"
|
||||
:id="`activity-task-${activity.id}-${index}`"
|
||||
<div>
|
||||
<a-timeline class="pt-20px">
|
||||
<!-- 遍历每个审批节点 -->
|
||||
<a-timeline-item
|
||||
v-for="(activity, index) in activityNodes"
|
||||
:key="index"
|
||||
:color="getApprovalNodeColor(activity.status)"
|
||||
>
|
||||
<!-- 第一行：节点名称、时间 -->
|
||||
<div class="flex w-full">
|
||||
<div class="font-bold">{{ activity.name }}</div>
|
||||
<!-- 信息：时间 -->
|
||||
<div
|
||||
v-if="activity.status !== TaskStatusEnum.NOT_START"
|
||||
class="ml-auto mt-1 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
{{ getApprovalNodeTime(activity) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子流程节点 -->
|
||||
<div v-if="activity.nodeType === NodeTypeEnum.CHILD_PROCESS_NODE">
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="handleChildProcess(activity)"
|
||||
>
|
||||
查看子流程
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 需要自定义选择审批人 -->
|
||||
<div
|
||||
v-if="shouldShowCustomUserSelect(activity)"
|
||||
class="flex flex-wrap items-center gap-2"
|
||||
>
|
||||
<Tooltip title="添加用户" placement="left">
|
||||
<Button
|
||||
type="primary"
|
||||
size="middle"
|
||||
ghost
|
||||
@click="
|
||||
handleSelectUser(activity.id, customApproveUsers[activity.id])
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon
|
||||
icon="mdi:account-plus-outline"
|
||||
class="size-[18px]"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<div
|
||||
v-for="(user, userIndex) in customApproveUsers[activity.id]"
|
||||
:key="userIndex"
|
||||
class="relative flex h-[36px] items-center gap-2 rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
{{ renderUserAvatar(user) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-1 flex flex-wrap items-center gap-2">
|
||||
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
|
||||
<div
|
||||
v-for="(task, idx) in activity.tasks"
|
||||
:key="idx"
|
||||
class="flex flex-col gap-2 pr-[8px]"
|
||||
>
|
||||
<template #dot>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="relative flex flex-wrap gap-2"
|
||||
v-if="task.assigneeUser || task.ownerUser"
|
||||
>
|
||||
<!-- 信息：头像昵称 -->
|
||||
<div
|
||||
class="h-35px relative flex items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<template
|
||||
v-if="
|
||||
task.assigneeUser?.avatar || task.assigneeUser?.nickname
|
||||
"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="task.assigneeUser?.avatar"
|
||||
:src="task.assigneeUser?.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ task.assigneeUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
{{ task.assigneeUser?.nickname }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="task.ownerUser?.avatar"
|
||||
:src="task.ownerUser?.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ task.ownerUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
{{ task.ownerUser?.nickname }}
|
||||
</template>
|
||||
|
||||
<!-- 信息：任务状态图标 -->
|
||||
<div
|
||||
v-if="
|
||||
showStatusIcon && onlyStatusIconShow.includes(task.status)
|
||||
"
|
||||
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[2px]"
|
||||
:style="{
|
||||
backgroundColor: statusIconMap[task.status]?.color,
|
||||
}"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="
|
||||
statusIconMap[task.status]?.icon || 'mdi:clock-outline'
|
||||
"
|
||||
class="size-[10px] text-white"
|
||||
:class="[statusIconMap[task.status]?.animation]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审批意见和签名 -->
|
||||
<teleport defer :to="`#activity-task-${activity.id}-${index}`">
|
||||
<div
|
||||
v-if="shouldShowApprovalReason(task, activity.nodeType)"
|
||||
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
task.signPicUrl &&
|
||||
activity.nodeType === NodeTypeEnum.USER_TASK_NODE
|
||||
"
|
||||
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
签名：
|
||||
<Image
|
||||
class="ml-[5px] h-[40px] w-[90px]"
|
||||
:src="task.signPicUrl"
|
||||
:preview="{ src: task.signPicUrl }"
|
||||
/>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
|
||||
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务 -->
|
||||
<div
|
||||
v-for="(user, userIndex) in activity.candidateUsers"
|
||||
:key="userIndex"
|
||||
class="relative flex h-[35px] items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ user.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
<span class="text-[13px]">
|
||||
{{ user.nickname }}
|
||||
</span>
|
||||
|
||||
<!-- 候选任务状态图标 -->
|
||||
<div
|
||||
v-if="showStatusIcon"
|
||||
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[1px]"
|
||||
:style="{ backgroundColor: statusIconMap['-1']?.color }"
|
||||
class="position-absolute left--10px top--6px flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-[#dedede] bg-[#3f73f7] p-[6px]"
|
||||
>
|
||||
<IconifyIcon
|
||||
class="text-[11px] text-white"
|
||||
:icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
|
||||
:icon="getApprovalNodeTypeIcon(activity.nodeType)"
|
||||
class="size-[24px] text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showStatusIcon"
|
||||
class="absolute right-[-10px] top-[18px] flex size-[20px] items-center rounded-full border-[2px] border-solid border-white p-[2px]"
|
||||
:style="{
|
||||
backgroundColor: getApprovalNodeColor(activity.status),
|
||||
}"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
|
||||
class="text-white"
|
||||
:class="[statusIconMap[activity.status]?.animation]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</template>
|
||||
|
||||
<!-- 用户选择弹窗 -->
|
||||
<UserSelectModal
|
||||
ref="userSelectFormRef"
|
||||
v-model:value="selectedUsers"
|
||||
:multiple="true"
|
||||
title="选择用户"
|
||||
@confirm="handleUserSelectConfirm"
|
||||
@closed="handleUserSelectClosed"
|
||||
@cancel="handleUserSelectCancel"
|
||||
/>
|
||||
<div
|
||||
class="ml-2 flex flex-col items-start gap-2"
|
||||
:id="`activity-task-${activity.id}-${index}`"
|
||||
>
|
||||
<!-- 第一行：节点名称、时间 -->
|
||||
<div class="flex w-full">
|
||||
<div class="font-bold">{{ activity.name }}</div>
|
||||
<!-- 信息：时间 -->
|
||||
<div
|
||||
v-if="activity.status !== BpmTaskStatusEnum.NOT_START"
|
||||
class="ml-auto mt-1 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
{{ getApprovalNodeTime(activity) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子流程节点 -->
|
||||
<div v-if="activity.nodeType === BpmNodeTypeEnum.CHILD_PROCESS_NODE">
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="handleChildProcess(activity)"
|
||||
>
|
||||
查看子流程
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 需要自定义选择审批人 -->
|
||||
<div
|
||||
v-if="shouldShowCustomUserSelect(activity)"
|
||||
class="flex flex-wrap items-center gap-2"
|
||||
>
|
||||
<Tooltip title="添加用户" placement="left">
|
||||
<Button
|
||||
type="primary"
|
||||
size="middle"
|
||||
ghost
|
||||
@click="
|
||||
handleSelectUser(activity.id, customApproveUsers[activity.id])
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon
|
||||
icon="mdi:account-plus-outline"
|
||||
class="size-[18px]"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<div
|
||||
v-for="(user, userIndex) in customApproveUsers[activity.id]"
|
||||
:key="user.id || userIndex"
|
||||
class="relative flex h-[36px] items-center gap-2 rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
/>
|
||||
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
<span>{{ user.nickname.substring(0, 1) }}</span>
|
||||
</Avatar>
|
||||
<span class="text-[13px]">{{ user.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-1 flex flex-wrap items-center gap-2">
|
||||
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
|
||||
<div
|
||||
v-for="(task, idx) in activity.tasks"
|
||||
:key="idx"
|
||||
class="flex flex-col gap-2 pr-[8px]"
|
||||
>
|
||||
<div
|
||||
class="relative flex flex-wrap gap-2"
|
||||
v-if="task.assigneeUser || task.ownerUser"
|
||||
>
|
||||
<!-- 信息：头像昵称 -->
|
||||
<div
|
||||
class="h-35px relative flex items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<template
|
||||
v-if="
|
||||
task.assigneeUser?.avatar || task.assigneeUser?.nickname
|
||||
"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="task.assigneeUser?.avatar"
|
||||
:src="task.assigneeUser?.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ task.assigneeUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
{{ task.assigneeUser?.nickname }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
task.ownerUser?.avatar || task.ownerUser?.nickname
|
||||
"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="task.ownerUser?.avatar"
|
||||
:src="task.ownerUser?.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ task.ownerUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
{{ task.ownerUser?.nickname }}
|
||||
</template>
|
||||
|
||||
<!-- 信息：任务状态图标 -->
|
||||
<div
|
||||
v-if="
|
||||
showStatusIcon && onlyStatusIconShow.includes(task.status)
|
||||
"
|
||||
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[2px]"
|
||||
:style="{
|
||||
backgroundColor: statusIconMap[task.status]?.color,
|
||||
}"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="
|
||||
statusIconMap[task.status]?.icon || 'mdi:clock-outline'
|
||||
"
|
||||
class="size-[10px] text-white"
|
||||
:class="[statusIconMap[task.status]?.animation]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审批意见和签名 -->
|
||||
<teleport defer :to="`#activity-task-${activity.id}-${index}`">
|
||||
<div
|
||||
v-if="shouldShowApprovalReason(task, activity.nodeType)"
|
||||
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
task.signPicUrl &&
|
||||
activity.nodeType === BpmNodeTypeEnum.USER_TASK_NODE
|
||||
"
|
||||
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
签名：
|
||||
<Image
|
||||
class="ml-[5px] h-[40px] w-[90px]"
|
||||
:src="task.signPicUrl"
|
||||
:preview="{ src: task.signPicUrl }"
|
||||
/>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
|
||||
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务 -->
|
||||
<div
|
||||
v-for="(user, userIndex) in activity.candidateUsers"
|
||||
:key="userIndex"
|
||||
class="relative flex h-[35px] items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ user.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
<span class="text-[13px]">
|
||||
{{ user.nickname }}
|
||||
</span>
|
||||
|
||||
<!-- 候选任务状态图标 -->
|
||||
<div
|
||||
v-if="showStatusIcon"
|
||||
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[1px]"
|
||||
:style="{ backgroundColor: statusIconMap['-1']?.color }"
|
||||
>
|
||||
<IconifyIcon
|
||||
class="text-[11px] text-white"
|
||||
:icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
|
||||
<!-- 用户选择弹窗 -->
|
||||
<UserSelectModal
|
||||
ref="userSelectFormRef"
|
||||
v-model:value="selectedUsers"
|
||||
:multiple="true"
|
||||
title="选择用户"
|
||||
@confirm="handleUserSelectConfirm"
|
||||
@closed="handleUserSelectClosed"
|
||||
@cancel="handleUserSelectCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user