From e40a29ccb4307bc9f60e87b4a91af039a6cb9a3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=90=E5=A4=9C?= <278898052@qq.com>
Date: Thu, 8 May 2025 16:52:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=A8=A1=E5=9D=97=EF=BC=8C=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=2025%=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=97=B6=E9=97=B4=E7=BA=BF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/index.vue      |  26 +-
 .../detail/modules/time-line.vue              | 442 ++++++++++++++++++
 2 files changed, 459 insertions(+), 9 deletions(-)
 create mode 100644 apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 0c6f191b..a469fb9f 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -13,7 +13,6 @@ import {
 } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
-import formCreate from '@form-create/ant-design-vue';
 import {
   Avatar,
   Button,
@@ -40,6 +39,8 @@ import {
   TaskStatusEnum,
 } from '#/utils';
 
+import TimeLine from './modules/time-line.vue';
+
 defineOptions({ name: 'BpmProcessInstanceDetail' });
 
 const props = defineProps<{
@@ -146,6 +147,9 @@ async function getApprovalDetail() {
           processDefinition.value.formFields,
           processInstance.value.formVariables,
         );
+
+        detailForm.value.value.Fx21maervo4ratc = undefined;
+        detailForm.value.value.F3yvmaervlwuanc = undefined;
       }
       nextTick().then(() => {
         fApi.value?.btn.show(false);
@@ -232,17 +236,20 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <Card class="h-full" :body-style="{ height: 'calc(100% - 140px)' }">
+    <Card
+      class="h-full"
+      :body-style="{ height: 'calc(100% - 140px)', overflowY: 'auto' }"
+    >
       <template #title>
-        <span class="text-[#878c93]">编号：{{ id }}</span>
+        <span class="text-[#878c93]">编号：{{ id || '-' }}</span>
       </template>
 
       <div class="flex h-[100%] flex-col">
         <!-- 流程基本信息 -->
         <div class="flex flex-col gap-2">
           <div class="mb-10px h-40px flex items-center gap-5">
-            <div class="mb-5px text-[28px] font-bold">
-              {{ processInstance?.name || '-' }}
+            <div class="mb-5px text-[26px] font-bold">
+              {{ processInstance?.name }}
             </div>
             <DictTag
               v-if="processInstance?.status"
@@ -284,9 +291,9 @@ onMounted(async () => {
 
         <!-- 流程操作 -->
         <div class="flex-1">
-          <Tabs v-model:active-key="activeTab" class="mt-4">
+          <Tabs v-model:active-key="activeTab" class="mt-0">
             <TabPane tab="审批详情" key="form">
-              <Row :gutter="[24, 24]">
+              <Row :gutter="[48, 24]">
                 <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
                   <!-- 流程表单 -->
                   <div
@@ -294,6 +301,7 @@ onMounted(async () => {
                       processDefinition?.formType === BpmModelFormType.NORMAL
                     "
                   >
+                    <!-- v-model="detailForm.value" -->
                     <form-create
                       v-model="detailForm.value"
                       v-model:api="fApi"
@@ -311,8 +319,8 @@ onMounted(async () => {
                   </div>
                 </Col>
                 <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
-                  <div>
-                    <div>审批流程线条</div>
+                  <div class="mt-2">
+                    <TimeLine :activity-nodes="activityNodes" />
                   </div>
                 </Col>
               </Row>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
new file mode 100644
index 00000000..83cd68d0
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -0,0 +1,442 @@
+<!-- 审批详情的右侧：审批流 -->
+<script lang="ts" setup>
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime, isEmpty } from '@vben/utils';
+
+import { Avatar, Button, Image, Tooltip } from 'ant-design-vue';
+
+import { CandidateStrategyEnum, NodeTypeEnum, TaskStatusEnum } from '#/utils';
+
+defineOptions({ name: 'BpmProcessInstanceTimeline' });
+
+withDefaults(
+  defineProps<{
+    activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
+    showStatusIcon?: boolean; // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true, // 默认值为 true
+  },
+);
+
+const emit = defineEmits<{
+  selectUserConfirm: [id: string, userList: any[]];
+}>();
+
+const { push } = useRouter(); // 路由
+
+// 状态图标映射
+const statusIconMap: Record<
+  string,
+  { animation?: string; color: string; icon: string }
+> = {
+  // 审批未开始
+  '-1': { color: '#909398', icon: 'mdi:clock-outline' },
+  // 待审批
+  '0': { color: '#00b32a', icon: 'mdi:loading' },
+  // 审批中
+  '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
+  // 审批通过
+  '2': { color: '#00b32a', icon: 'mdi:check' },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: 'mdi:close' },
+  // 已取消
+  '4': { color: '#cccccc', icon: 'mdi:trash-can-outline' },
+  // 退回
+  '5': { color: '#f46b6c', icon: 'mdi:arrow-left' },
+  // 委派中
+  '6': { color: '#448ef7', icon: 'mdi:clock-outline' },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: 'mdi:check' },
+};
+
+// 节点类型图标映射
+const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeTypeEnum.END_EVENT_NODE]: {
+    color: '#909398',
+    icon: 'mdi:power',
+  },
+  // 开始节点
+  [NodeTypeEnum.START_USER_NODE]: {
+    color: '#909398',
+    icon: 'mdi:account-outline',
+  },
+  // 用户任务节点
+  [NodeTypeEnum.USER_TASK_NODE]: {
+    color: '#ff943e',
+    icon: 'tdesign:seal',
+  },
+  // 事务节点
+  [NodeTypeEnum.TRANSACTOR_NODE]: {
+    color: '#ff943e',
+    icon: 'mdi:file-edit-outline',
+  },
+  // 复制任务节点
+  [NodeTypeEnum.COPY_TASK_NODE]: {
+    color: '#3296fb',
+    icon: 'mdi:content-copy',
+  },
+  // 条件分支节点
+  [NodeTypeEnum.CONDITION_NODE]: {
+    color: '#14bb83',
+    icon: 'carbon:flow',
+  },
+  // 并行分支节点
+  [NodeTypeEnum.PARALLEL_BRANCH_NODE]: {
+    color: '#14bb83',
+    icon: 'si:flow-parallel-line',
+  },
+  // 子流程节点
+  [NodeTypeEnum.CHILD_PROCESS_NODE]: {
+    color: '#14bb83',
+    icon: 'icon-park-outline:tree-diagram',
+  },
+};
+
+// 只有状态是 -1、0、1 才展示头像右小角状态小icon
+const onlyStatusIconShow = [-1, 0, 1];
+
+// 获取审批节点类型图标
+const getApprovalNodeTypeIcon = (nodeType: NodeTypeEnum) => {
+  return nodeTypeSvgMap[nodeType]?.icon;
+};
+
+// 获取审批节点图标
+const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeTypeEnum) => {
+  if (taskStatus === TaskStatusEnum.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
+  ) {
+    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
+  }
+  return 'mdi:clock-outline';
+};
+
+// 获取审批节点颜色
+const getApprovalNodeColor = (taskStatus: number) => {
+  return statusIconMap[taskStatus]?.color;
+};
+
+// 获取审批节点时间
+const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+  if (node.nodeType === NodeTypeEnum.START_USER_NODE && node.startTime) {
+    return formatDateTime(node.startTime);
+  }
+  if (node.endTime) {
+    return formatDateTime(node.endTime);
+  }
+  if (node.startTime) {
+    return formatDateTime(node.startTime);
+  }
+  return '';
+};
+
+// 选择自定义审批人
+const userSelectFormRef = ref();
+const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
+
+// 打开选择用户弹窗
+const handleSelectUser = (activityId: string, selectedList: any[]) => {
+  userSelectFormRef.value.open(activityId, selectedList);
+};
+
+// 选择用户完成
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+  customApproveUsers.value[activityId] = userList || [];
+  emit('selectUserConfirm', activityId, userList);
+};
+
+/** 跳转子流程 */
+const handleChildProcess = (activity: any) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: activity.processInstanceId,
+    },
+  });
+};
+
+// 渲染用户头像和昵称
+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,
+) => {
+  return (
+    isEmpty(activity.tasks) &&
+    isEmpty(activity.candidateUsers) &&
+    (CandidateStrategyEnum.START_USER_SELECT === activity.candidateStrategy ||
+      CandidateStrategyEnum.APPROVE_USER_SELECT === activity.candidateStrategy)
+  );
+};
+
+// 判断是否需要显示审批意见
+const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
+  return (
+    task.reason &&
+    [NodeTypeEnum.END_EVENT_NODE, NodeTypeEnum.USER_TASK_NODE].includes(
+      nodeType,
+    )
+  );
+};
+</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 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]"
+          >
+            <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 }"
+            >
+              <IconifyIcon
+                class="text-[11px] text-white"
+                :icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-timeline-item>
+  </a-timeline>
+
+  <!-- 用户选择弹窗 -->
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
+</template>