From ac305676d82f989523e299371d773eafd2601301 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 26 Nov 2025 22:46:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20[bpm][ele]=20=E6=B5=81=E7=A8=8B/?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E8=AF=A6=E6=83=85=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/package.json                     |    2 +
 apps/web-ele/src/api/bpm/task/index.ts        |   27 +
 apps/web-ele/src/router/routes/modules/bpm.ts |   38 +-
 .../bpm/processInstance/detail/index.vue      |  423 +++++
 .../detail/modules/bpm-viewer.vue             |   59 +
 .../detail/modules/operation-button.vue       | 1424 +++++++++++++++++
 .../detail/modules/process-print.vue          |  299 ++++
 .../detail/modules/signature.vue              |   64 +
 .../detail/modules/simple-bpm-viewer.vue      |  178 +++
 .../detail/modules/task-list.vue              |  197 +++
 .../detail/modules/time-line.vue              |  486 ++++++
 pnpm-lock.yaml                                |    6 +
 12 files changed, 3184 insertions(+), 19 deletions(-)
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/index.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/detail/modules/time-line.vue

diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 7031134e8..4f74ce6a1 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -57,6 +57,8 @@
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",
+    "vue3-print-nb": "catalog:",
+    "vue3-signature": "catalog:",
     "vuedraggable": "catalog:"
   },
   "devDependencies": {
diff --git a/apps/web-ele/src/api/bpm/task/index.ts b/apps/web-ele/src/api/bpm/task/index.ts
index 8572b7e6e..d6a0e81cb 100644
--- a/apps/web-ele/src/api/bpm/task/index.ts
+++ b/apps/web-ele/src/api/bpm/task/index.ts
@@ -15,6 +15,33 @@ export namespace BpmTaskApi {
     valueType: string; // 监听器值类型
     processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
   }
+
+  // 流程任务
+  export interface TaskManager {
+    id: string; // 编号
+    name: string; // 任务名称
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
+    durationInMillis: number; // 持续时间
+    status: number; // 状态
+    reason: string; // 原因
+    ownerUser: any; // 负责人
+    assigneeUser: any; // 处理人
+    taskDefinitionKey: string; // 任务定义key
+    processInstanceId: string; // 流程实例id
+    processInstance: BpmProcessInstanceApi.ProcessInstance; // 流程实例
+    parentTaskId: any; // 父任务id
+    children: any; // 子任务
+    formId: any; // 表单id
+    formName: any; // 表单名称
+    formConf: any; // 表单配置
+    formFields: any; // 表单字段
+    formVariables: any; // 表单变量
+    buttonsSetting: any; // 按钮设置
+    signEnable: any; // 签名设置
+    reasonRequire: any; // 原因设置
+    nodeType: any; // 节点类型
+  }
 }
 
 /** 查询待办任务分页 */
diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
index 375b45830..05e0e5664 100644
--- a/apps/web-ele/src/router/routes/modules/bpm.ts
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -27,25 +27,25 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
-      // {
-      //   path: 'process-instance/detail',
-      //   component: () => import('#/views/bpm/processInstance/detail/index.vue'),
-      //   name: 'BpmProcessInstanceDetail',
-      //   meta: {
-      //     title: '流程详情',
-      //     activePath: '/bpm/task/my',
-      //     icon: 'ant-design:history-outlined',
-      //     keepAlive: false,
-      //     hideInMenu: true,
-      //   },
-      //   props: (route) => {
-      //     return {
-      //       id: route.query.id,
-      //       taskId: route.query.taskId,
-      //       activityId: route.query.activityId,
-      //     };
-      //   },
-      // },
+      {
+        path: 'process-instance/detail',
+        component: () => import('#/views/bpm/processInstance/detail/index.vue'),
+        name: 'BpmProcessInstanceDetail',
+        meta: {
+          title: '流程详情',
+          activePath: '/bpm/task/my',
+          icon: 'ant-design:history-outlined',
+          keepAlive: false,
+          hideInMenu: true,
+        },
+        props: (route) => {
+          return {
+            id: route.query.id,
+            taskId: route.query.taskId,
+            activityId: route.query.activityId,
+          };
+        },
+      },
       {
         path: '/bpm/manager/form/edit',
         name: 'BpmFormEditor',
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
new file mode 100644
index 000000000..bda76b993
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
@@ -0,0 +1,423 @@
+<script lang="ts" setup>
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import {
+  BpmFieldPermissionType,
+  BpmModelFormType,
+  BpmModelType,
+  BpmTaskStatusEnum,
+  DICT_TYPE,
+} from '@vben/constants';
+import {
+  IconifyIcon,
+  SvgBpmApproveIcon,
+  SvgBpmCancelIcon,
+  SvgBpmRejectIcon,
+  SvgBpmRunningIcon,
+} from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElAvatar,
+  ElCard,
+  ElCol,
+  ElMessage,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import {
+  getApprovalDetail as getApprovalDetailApi,
+  getProcessInstanceBpmnModelView,
+} from '#/api/bpm/processInstance';
+import { getSimpleUserList } from '#/api/system/user';
+import DictTag from '#/components/dict-tag/dict-tag.vue';
+import { setConfAndFields2 } from '#/components/form-create';
+import { registerComponent } from '#/utils';
+
+import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
+import ProcessInstanceOperationButton from './modules/operation-button.vue';
+import ProcessssPrint from './modules/process-print.vue';
+import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
+import BpmProcessInstanceTaskList from './modules/task-list.vue';
+import ProcessInstanceTimeline from './modules/time-line.vue';
+
+defineOptions({ name: 'BpmProcessInstanceDetail' });
+
+const props = defineProps<{
+  activityId?: string; // 流程活动编号，用于抄送查看
+  id: string; // 流程实例的编号
+  taskId?: string; // 任务编号
+}>();
+
+const processInstanceLoading = ref(false); // 流程实例的加载中
+const processInstance = ref<BpmProcessInstanceApi.ProcessInstance>(); // 流程实例
+const processDefinition = ref<any>({}); // 流程定义
+const processModelView = ref<any>({}); // 流程模型视图
+const operationButtonRef = ref(); // 操作按钮组件 ref
+const activeTab = ref('form');
+const taskListRef = ref();
+const auditIconsMap: {
+  [key: string]:
+    | typeof SvgBpmApproveIcon
+    | typeof SvgBpmCancelIcon
+    | typeof SvgBpmRejectIcon
+    | typeof SvgBpmRunningIcon;
+} = {
+  [BpmTaskStatusEnum.RUNNING]: SvgBpmRunningIcon,
+  [BpmTaskStatusEnum.APPROVE]: SvgBpmApproveIcon,
+  [BpmTaskStatusEnum.REJECT]: SvgBpmRejectIcon,
+  [BpmTaskStatusEnum.CANCEL]: SvgBpmCancelIcon,
+  [BpmTaskStatusEnum.APPROVING]: SvgBpmApproveIcon,
+  [BpmTaskStatusEnum.RETURN]: SvgBpmRejectIcon,
+  [BpmTaskStatusEnum.WAIT]: SvgBpmRunningIcon,
+};
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+
+const fApi = ref<any>();
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {},
+}); // 流程实例的表单详情
+const writableFields: Array<string> = []; // 表单可以编辑的字段
+
+const BusinessFormComponent = shallowRef<any>(null); // 异步组件(业务表单）
+
+/** 获取详情 */
+async function getDetail() {
+  // 获得审批详情
+  await getApprovalDetail();
+  // 获得流程模型视图
+  await getProcessModelView();
+}
+
+/** 获得审批详情 */
+async function getApprovalDetail() {
+  processInstanceLoading.value = true;
+  try {
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId,
+    };
+    const data = await getApprovalDetailApi(param);
+    if (!data) {
+      ElMessage.error('查询不到审批详情信息！');
+    }
+    if (!data.processDefinition || !data.processInstance) {
+      ElMessage.error('查询不到流程信息！');
+    }
+
+    processInstance.value = data.processInstance;
+    processDefinition.value = data.processDefinition;
+
+    // 设置表单信息
+    if (processDefinition.value.formType === BpmModelFormType.NORMAL) {
+      // 获取表单字段权限
+      const formFieldsPermission = data.formFieldsPermission;
+      // 清空可编辑字段为空
+      writableFields.splice(0);
+      if (detailForm.value.rule?.length > 0) {
+        // 避免刷新 form-create 显示不了
+        detailForm.value.value = processInstance.value.formVariables;
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables,
+        );
+      }
+      await nextTick();
+      fApi.value?.btn.show(false);
+      fApi.value?.resetBtn.show(false);
+      fApi.value?.disabled(true);
+      // 设置表单字段权限
+      if (formFieldsPermission) {
+        Object.keys(data.formFieldsPermission).forEach((item) => {
+          setFieldPermission(item, formFieldsPermission[item]);
+        });
+      }
+    } else {
+      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+      BusinessFormComponent.value = registerComponent(
+        data?.processDefinition?.formCustomViewPath || '',
+      );
+    }
+
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes;
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask);
+  } catch {
+    ElMessage.error('获取审批详情失败！');
+  } finally {
+    processInstanceLoading.value = false;
+  }
+}
+
+/** 获取流程模型视图*/
+async function getProcessModelView() {
+  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
+    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
+    processModelView.value = {
+      bpmnXml: '',
+    };
+  }
+  const data = await getProcessInstanceBpmnModelView(props.id);
+  if (data) {
+    processModelView.value = data;
+  }
+}
+
+/** 设置表单权限 */
+function setFieldPermission(field: string, permission: string) {
+  if (permission === BpmFieldPermissionType.READ) {
+    fApi.value?.disabled(true, field);
+  }
+  if (permission === BpmFieldPermissionType.WRITE) {
+    fApi.value?.disabled(false, field);
+    // 加入可以编辑的字段
+    writableFields.push(field);
+  }
+  if (permission === BpmFieldPermissionType.NONE) {
+    fApi.value?.hidden(true, field);
+  }
+}
+
+/** 操作成功后刷新 */
+const refresh = () => {
+  // 重新获取详情
+  getDetail();
+};
+
+const [PrintModal, printModalApi] = useVbenModal({
+  connectedComponent: ProcessssPrint,
+  destroyOnClose: true,
+});
+
+/** 打开打印对话框 */
+function handlePrint() {
+  printModalApi.setData({ processInstanceId: props.id }).open();
+}
+
+/** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
+watch(
+  () => activeTab.value,
+  async (newVal) => {
+    if (newVal === 'record') {
+      // 如果切换到流转记录标签，刷新任务列表
+      await nextTick();
+      taskListRef.value?.refresh();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  await getDetail();
+  // 获得用户列表
+  userOptions.value = await getSimpleUserList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <ElCard
+      class="flex h-full flex-col"
+      :body-style="{
+        flex: 1,
+        overflow: 'hidden',
+        paddingTop: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+      }"
+    >
+      <template #header>
+        <div class="flex items-center gap-4">
+          <span class="text-gray-500">编号：{{ id || '-' }}</span>
+          <IconifyIcon
+            icon="lucide:printer"
+            class="hover:text-primary cursor-pointer"
+            @click="handlePrint"
+          />
+        </div>
+      </template>
+
+      <div class="flex h-full flex-col">
+        <!-- 流程基本信息 -->
+        <div class="flex flex-col gap-2">
+          <div class="flex h-10 items-center gap-5">
+            <div class="mb-1 text-2xl font-bold">
+              {{ processInstance?.name }}
+            </div>
+            <DictTag
+              v-if="processInstance?.status"
+              :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+              :value="processInstance.status"
+            />
+          </div>
+
+          <div class="flex h-12 items-center gap-5 text-sm">
+            <div
+              class="flex items-center gap-2 rounded-3xl bg-gray-100 px-2.5 py-1 dark:bg-gray-600"
+            >
+              <ElAvatar
+                :size="28"
+                v-if="processInstance?.startUser?.avatar"
+                :src="processInstance?.startUser?.avatar"
+              />
+              <ElAvatar
+                :size="28"
+                v-else-if="processInstance?.startUser?.nickname"
+              >
+                {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+              </ElAvatar>
+              <span class="text-sm">
+                {{ processInstance?.startUser?.nickname }}
+              </span>
+            </div>
+            <div class="text-gray-500">
+              {{ formatDateTime(processInstance?.startTime) }} 提交
+            </div>
+          </div>
+
+          <component
+            v-if="processInstance?.status"
+            :is="auditIconsMap[processInstance?.status]"
+            class="absolute right-5 top-2.5 size-36"
+          />
+        </div>
+
+        <!-- 流程操作 -->
+        <div class="flex h-full flex-1 flex-col">
+          <ElTabs v-model="activeTab">
+            <ElTabPane label="审批详情" name="form" class="pb-20 pr-3">
+              <ElRow :gutter="24">
+                <ElCol
+                  :xs="24"
+                  :sm="24"
+                  :md="18"
+                  :lg="18"
+                  :xl="16"
+                  class="h-full"
+                >
+                  <!-- 流程表单 -->
+                  <div
+                    v-if="
+                      processDefinition?.formType === BpmModelFormType.NORMAL
+                    "
+                  >
+                    <form-create
+                      v-model="detailForm.value"
+                      v-model:api="fApi"
+                      :option="detailForm.option"
+                      :rule="detailForm.rule"
+                    />
+                  </div>
+                  <div
+                    v-else-if="
+                      processDefinition?.formType === BpmModelFormType.CUSTOM
+                    "
+                  >
+                    <BusinessFormComponent :id="processInstance?.businessKey" />
+                  </div>
+                </ElCol>
+                <ElCol :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
+                  <div class="mt-2">
+                    <ProcessInstanceTimeline :activity-nodes="activityNodes" />
+                  </div>
+                </ElCol>
+              </ElRow>
+            </ElTabPane>
+            <ElTabPane label="流程图" name="diagram" class="pb-20 pr-3">
+              <div>
+                <ProcessInstanceSimpleViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.SIMPLE
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+                <ProcessInstanceBpmnViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.BPMN
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+              </div>
+            </ElTabPane>
+            <ElTabPane label="流转记录" name="record" class="pb-20 pr-3">
+              <BpmProcessInstanceTaskList
+                ref="taskListRef"
+                :loading="processInstanceLoading"
+                :id="id"
+              />
+            </ElTabPane>
+            <!-- TODO 待开发 -->
+            <ElTabPane
+              label="流转评论"
+              name="comment"
+              v-if="false"
+              class="pr-3"
+            >
+              <div>待开发</div>
+            </ElTabPane>
+          </ElTabs>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="px-4">
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :user-options="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="refresh"
+          />
+        </div>
+      </template>
+    </ElCard>
+    <!-- 打印对话框 -->
+    <PrintModal />
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.el-card) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+}
+
+:deep(.el-tabs__content) {
+  flex: 1;
+  overflow-y: auto;
+}
+</style>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
new file mode 100644
index 000000000..2b9dfdeee
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
+
+defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    bpmnXml?: string;
+    loading?: boolean; // 是否加载中
+    modelView?: Object;
+  }>(),
+  {
+    loading: false,
+    modelView: () => ({}),
+    bpmnXml: '',
+  },
+);
+
+// BPMN 流程图数据
+const view = ref({
+  bpmnXml: '',
+});
+
+/** 监控 modelView 更新 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    // 加载最新
+    if (newModelView) {
+      // @ts-ignore
+      view.value = newModelView;
+    }
+  },
+);
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value;
+  },
+);
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    class="h-full w-full overflow-auto rounded-lg border border-gray-200 bg-white p-4"
+  >
+    <!-- <MyProcessViewer
+      key="processViewer"
+      :xml="view.bpmnXml"
+      :view="view"
+      class="h-full min-h-[500px] w-full"
+    /> -->
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
new file mode 100644
index 000000000..4e1cd2425
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -0,0 +1,1424 @@
+<script lang="ts" setup>
+// TODO @jason：你感觉要拆分下，按照表单么？
+import type { FormInstance, FormRules } from 'element-plus';
+
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  BpmCandidateStrategyEnum,
+  BpmModelFormType,
+  BpmNodeTypeEnum,
+  BpmProcessInstanceStatus,
+  BpmTaskOperationButtonTypeEnum,
+  BpmTaskStatusEnum,
+  OPERATION_BUTTON_NAME,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+import { isEmpty } from '@vben/utils';
+
+import FormCreate from '@form-create/element-ui';
+import {
+  ElAlert,
+  ElButton,
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElImage,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElPopover,
+  ElSelect,
+  ElSpace,
+} from 'element-plus';
+
+import {
+  cancelProcessInstanceByStartUser,
+  getNextApprovalNodes,
+} from '#/api/bpm/processInstance';
+import {
+  approveTask,
+  copyTask,
+  delegateTask,
+  getTaskListByReturn,
+  rejectTask,
+  returnTask,
+  signCreateTask,
+  signDeleteTask,
+  transferTask,
+} from '#/api/bpm/task';
+import { setConfAndFields2 } from '#/components/form-create';
+import { $t } from '#/locales';
+
+import Signature from './signature.vue';
+import ProcessInstanceTimeline from './time-line.vue';
+
+defineOptions({ name: 'ProcessInstanceBtnContainer' });
+
+const props = defineProps<{
+  normalForm: any; // 流程表单 formCreate
+  normalFormApi: any; // 流程表单 formCreate Api
+  processDefinition: any; // 流程定义信息
+  processInstance: any; // 流程实例信息
+  userOptions: SystemUserApi.User[];
+  writableFields: string[]; // 流程表单可以编辑的字段
+}>(); // 当前登录的编号
+const emit = defineEmits(['success']);
+
+const [SignatureModal, signatureModalApi] = useVbenModal({
+  connectedComponent: Signature,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+const userStore = useUserStore();
+const userId = userStore.userInfo?.id;
+const formLoading = ref(false); // 表单加载中
+const popOverVisible: any = ref({
+  approve: false,
+  reject: false,
+  transfer: false,
+  delegate: false,
+  addSign: false,
+  return: false,
+  copy: false,
+  cancel: false,
+  deleteSign: false,
+}); // 气泡卡是否展示
+const returnList = ref([] as any); // 退回节点
+
+/** 创建流程表达式 */
+function openSignatureModal() {
+  signatureModalApi.setData(null).open();
+}
+
+// ========== 审批信息 ==========
+const runningTask = ref<any>(); // 运行中的任务
+const approveForm = ref<any>({}); // 审批通过时，额外的补充信息
+const approveFormFApi = ref<any>({}); // approveForms 的 fAPi
+const nodeTypeName = ref('审批'); // 节点类型名称
+
+const reasonRequire = ref();
+const approveFormRef = ref<FormInstance>(); // 审批通过意见表单
+const approveSignFormRef = ref();
+const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
+  [],
+); // 下一个审批节点信息
+const nextAssigneesTimelineRef = ref(); // 下一个节点审批人时间线组件的引用
+const approveReasonForm: any = reactive({
+  reason: '',
+  signPicUrl: '',
+  nextAssignees: {},
+});
+const approveReasonRule: Record<string, any> = computed(() => {
+  return {
+    reason: [
+      {
+        required: reasonRequire.value,
+        message: `${nodeTypeName.value}意见不能为空`,
+        trigger: 'blur',
+      },
+    ],
+    signPicUrl: [
+      { required: true, message: '签名不能为空', trigger: 'change' },
+    ],
+    nextAssignees: [
+      { required: true, message: '审批人不能为空', trigger: 'blur' },
+    ],
+  };
+});
+
+const rejectFormRef = ref<FormInstance>();
+const rejectReasonForm = reactive({
+  reason: '',
+}); // 拒绝表单
+const rejectReasonRule: any = computed(() => {
+  return {
+    reason: [
+      {
+        required: reasonRequire.value,
+        message: '审批意见不能为空',
+        trigger: 'blur',
+      },
+    ],
+  } as FormRules;
+});
+
+const copyFormRef = ref<FormInstance>(); // 抄送表单
+const copyForm = reactive({
+  copyUserIds: [],
+  copyReason: '',
+});
+const copyFormRule: FormRules = reactive({
+  copyUserIds: [
+    {
+      required: true,
+      message: '抄送人不能为空',
+      trigger: 'change',
+      type: 'array',
+    },
+  ],
+});
+
+const transferFormRef = ref<FormInstance>(); // 转办表单
+const transferForm = reactive({
+  assigneeUserId: undefined,
+  reason: '',
+});
+const transferFormRule: FormRules = reactive({
+  assigneeUserId: [
+    { required: true, message: '新审批人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+const delegateFormRef = ref<FormInstance>(); // 委派表单
+const delegateForm = reactive({
+  delegateUserId: undefined,
+  reason: '',
+});
+const delegateFormRule: FormRules = reactive({
+  delegateUserId: [
+    { required: true, message: '接收人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+const addSignFormRef = ref<FormInstance>(); // 加签表单
+const addSignForm = reactive({
+  addSignUserIds: undefined,
+  reason: '',
+});
+const addSignFormRule: FormRules = reactive({
+  addSignUserIds: [
+    {
+      required: true,
+      message: '加签处理人不能为空',
+      trigger: 'change',
+      type: 'array',
+    },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+const deleteSignFormRef = ref<FormInstance>(); // 减签表单
+const deleteSignForm = reactive({
+  deleteSignTaskId: undefined,
+  reason: '',
+});
+const deleteSignFormRule: FormRules = reactive({
+  deleteSignTaskId: [
+    { required: true, message: '减签人员不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+const returnFormRef = ref<FormInstance>(); // 退回表单
+const returnForm = reactive({
+  targetTaskDefinitionKey: undefined,
+  returnReason: '',
+});
+const returnFormRule: FormRules = reactive({
+  targetTaskDefinitionKey: [
+    { required: true, message: '退回节点不能为空', trigger: 'change' },
+  ],
+  returnReason: [
+    { required: true, message: '退回理由不能为空', trigger: 'blur' },
+  ],
+});
+
+const cancelFormRef = ref<FormInstance>(); // 取消表单
+const cancelForm = reactive({
+  cancelReason: '',
+});
+const cancelFormRule: FormRules = reactive({
+  cancelReason: [
+    { required: true, message: '取消理由不能为空', trigger: 'blur' },
+  ],
+});
+
+/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
+watch(
+  () => approveFormFApi.value,
+  (val) => {
+    val?.btn?.show(false);
+    val?.resetBtn?.show(false);
+  },
+  {
+    deep: true,
+  },
+);
+
+/** 弹出气泡卡 */
+async function openPopover(type: string) {
+  if (type === 'approve') {
+    // 校验流程表单
+    const valid = await validateNormalForm();
+    if (!valid) {
+      ElMessage.warning('表单校验不通过，请先完善表单!!');
+      return;
+    }
+    await initNextAssigneesFormField();
+  }
+  if (type === 'return') {
+    // 获取退回节点
+    returnList.value = await getTaskListByReturn(runningTask.value.id);
+    if (returnList.value.length === 0) {
+      ElMessage.warning('当前没有可退回的节点');
+      return;
+    }
+  }
+  Object.keys(popOverVisible.value).forEach((item) => {
+    if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
+  });
+}
+
+/** 关闭气泡卡 */
+function closePopover(type: string, formRef: any | FormInstance) {
+  if (formRef) {
+    formRef.resetFields();
+  }
+  if (popOverVisible.value[type]) popOverVisible.value[type] = false;
+  nextAssigneesActivityNode.value = [];
+  // 清理 Timeline 组件中的自定义审批人数据
+  if (nextAssigneesTimelineRef.value) {
+    nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+  }
+}
+
+/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
+async function initNextAssigneesFormField() {
+  // 获取修改的流程变量, 暂时只支持流程表单
+  const variables = getUpdatedProcessInstanceVariables();
+  const data = await getNextApprovalNodes({
+    processInstanceId: props.processInstance.id,
+    taskId: runningTask.value.id,
+    processVariablesStr: JSON.stringify(variables),
+  });
+  if (data && data.length > 0) {
+    const customApproveUsersData: Record<string, any[]> = {}; // 用于收集需要设置到 Timeline 组件的自定义审批人数据
+    data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+      if (
+        // 情况一：当前节点没有审批人，并且是发起人自选
+        (isEmpty(node.tasks) &&
+          isEmpty(node.candidateUsers) &&
+          BpmCandidateStrategyEnum.START_USER_SELECT ===
+            node.candidateStrategy) ||
+        // 情况二：当前节点是审批人自选
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT === node.candidateStrategy
+      ) {
+        nextAssigneesActivityNode.value.push(node);
+      }
+
+      // 如果节点有 candidateUsers，设置到 customApproveUsers 中
+      if (node.candidateUsers && node.candidateUsers.length > 0) {
+        customApproveUsersData[node.id] = node.candidateUsers;
+      }
+    });
+
+    // 将 candidateUsers 设置到 Timeline 组件中
+    await nextTick(); // 等待下一个 tick，确保 Timeline 组件已经渲染
+    if (
+      nextAssigneesTimelineRef.value &&
+      Object.keys(customApproveUsersData).length > 0
+    ) {
+      nextAssigneesTimelineRef.value.batchSetCustomApproveUsers(
+        customApproveUsersData,
+      );
+    }
+  }
+}
+
+/** 选择下一个节点的审批人 */
+function selectNextAssigneesConfirm(id: string, userList: any[]) {
+  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
+}
+
+/** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
+function validateNextAssignees() {
+  if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
+    return true;
+  }
+  // 如果需要自选审批人，则校验每个节点是否都已配置审批人
+  for (const item of nextAssigneesActivityNode.value) {
+    if (isEmpty(approveReasonForm.nextAssignees[item.id])) {
+      ElMessage.warning('下一个节点的审批人不能为空!');
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 处理审批通过和不通过的操作 */
+async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
+  formLoading.value = true;
+  try {
+    // 校验表单
+    if (!formRef) return;
+    await formRef?.validate();
+    // 校验流程表单必填字段
+    const valid = await validateNormalForm();
+    if (!valid) {
+      ElMessage.warning('表单校验不通过，请先完善表单!!');
+      return;
+    }
+
+    if (pass) {
+      const nextAssigneesValid = validateNextAssignees();
+      if (!nextAssigneesValid) return;
+      const variables = getUpdatedProcessInstanceVariables();
+      // 审批通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: approveReasonForm.reason,
+        variables, // 审批通过, 把修改的字段值赋于流程实例变量
+        nextAssignees: approveReasonForm.nextAssignees, // 下个自选节点选择的审批人信息
+      } as any;
+      // 签名
+      if (runningTask.value.signEnable) {
+        data.signPicUrl = approveReasonForm.signPicUrl;
+      }
+      // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+      // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
+      const formCreateApi = approveFormFApi.value;
+      if (Object.keys(formCreateApi)?.length > 0) {
+        await formCreateApi.validate();
+        data.variables = approveForm.value.value;
+      }
+      await approveTask(data);
+      popOverVisible.value.approve = false;
+      nextAssigneesActivityNode.value = [];
+      // 清理 Timeline 组件中的自定义审批人数据
+      if (nextAssigneesTimelineRef.value) {
+        nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+      }
+      ElMessage.success('审批通过成功');
+    } else {
+      // 审批不通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: rejectReasonForm.reason,
+      };
+      await rejectTask(data);
+      popOverVisible.value.reject = false;
+      ElMessage.success('审批不通过成功');
+    }
+    // 重置表单
+    formRef.resetFields();
+    // 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理抄送 */
+async function handleCopy() {
+  formLoading.value = true;
+  try {
+    // 1. 校验表单
+    if (!copyFormRef.value) return;
+    await copyFormRef.value.validate();
+    // 2. 提交抄送
+    const data = {
+      id: runningTask.value.id,
+      reason: copyForm.copyReason,
+      copyUserIds: copyForm.copyUserIds,
+    };
+    await copyTask(data);
+    copyFormRef.value.resetFields();
+    popOverVisible.value.copy = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理转交 */
+async function handleTransfer() {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!transferFormRef.value) {
+      return;
+    }
+    await transferFormRef.value.validate();
+    // 1.2 提交转交
+    const data = {
+      id: runningTask.value.id,
+      reason: transferForm.reason,
+      assigneeUserId: transferForm.assigneeUserId,
+    };
+    await transferTask(data);
+    transferFormRef.value.resetFields();
+    popOverVisible.value.transfer = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    // 2. 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理委派 */
+async function handleDelegate() {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!delegateFormRef.value) return;
+    await delegateFormRef.value.validate();
+    // 1.2 处理委派
+    const data = {
+      id: runningTask.value.id,
+      reason: delegateForm.reason,
+      delegateUserId: delegateForm.delegateUserId,
+    };
+    await delegateTask(data);
+    popOverVisible.value.delegate = false;
+    delegateFormRef.value.resetFields();
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    // 2. 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理加签 */
+async function handlerAddSign(type: string) {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!addSignFormRef.value) return;
+    await addSignFormRef.value.validate();
+    // 1.2 提交加签
+    const data = {
+      id: runningTask.value.id,
+      type,
+      reason: addSignForm.reason,
+      userIds: addSignForm.addSignUserIds,
+    };
+    await signCreateTask(data);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    addSignFormRef.value.resetFields();
+    popOverVisible.value.addSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理退回 */
+async function handleReturn() {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!returnFormRef.value) return;
+    await returnFormRef.value.validate();
+    // 1.2 提交退回
+    const data = {
+      id: runningTask.value.id,
+      reason: returnForm.returnReason,
+      targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey,
+    };
+    await returnTask(data);
+    popOverVisible.value.return = false;
+    returnFormRef.value.resetFields();
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    // 2 重新加载数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理取消 */
+async function handleCancel() {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!cancelFormRef.value) return;
+    await cancelFormRef.value.validate();
+    // 1.2 提交取消
+    await cancelProcessInstanceByStartUser(
+      props.processInstance.id,
+      cancelForm.cancelReason,
+    );
+    popOverVisible.value.return = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    cancelFormRef.value.resetFields();
+    // 2 重新加载数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 处理再次提交 */
+async function handleReCreate() {
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: props.processInstance?.id },
+  });
+}
+
+/** 获取减签人员标签 */
+function getDeleteSignUserLabel(task: any): string {
+  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName;
+  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname;
+  return `${nickname} ( 所属部门：${deptName} )`;
+}
+
+/** 处理减签 */
+async function handlerDeleteSign() {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!deleteSignFormRef.value) return;
+    await deleteSignFormRef.value?.validate();
+    // 1.2 提交减签
+    const data = {
+      id: deleteSignForm.deleteSignTaskId,
+      reason: deleteSignForm.reason,
+    };
+    await signDeleteTask(data);
+    ElMessage.success('减签成功');
+    deleteSignFormRef.value.resetFields();
+    popOverVisible.value.deleteSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 重新加载数据 */
+function reload() {
+  emit('success');
+}
+
+/** 任务是否为处理中状态 */
+function isHandleTaskStatus() {
+  let canHandle = false;
+  if (BpmTaskStatusEnum.RUNNING === runningTask.value?.status) {
+    canHandle = true;
+  }
+  return canHandle;
+}
+
+/** 流程状态是否为结束状态 */
+function isEndProcessStatus(status: number) {
+  let isEndStatus = false;
+  if (
+    BpmProcessInstanceStatus.APPROVE === status ||
+    BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.CANCEL === status
+  ) {
+    isEndStatus = true;
+  }
+  return isEndStatus;
+}
+
+/** 是否显示按钮 */
+function isShowButton(btnType: BpmTaskOperationButtonTypeEnum): boolean {
+  let isShow = true;
+  if (
+    runningTask.value?.buttonsSetting &&
+    runningTask.value?.buttonsSetting[btnType]
+  ) {
+    isShow = runningTask.value.buttonsSetting[btnType].enable;
+  }
+  return isShow;
+}
+
+/** 获取按钮的显示名称 */
+function getButtonDisplayName(btnType: BpmTaskOperationButtonTypeEnum) {
+  let displayName = OPERATION_BUTTON_NAME.get(btnType);
+  if (
+    runningTask.value?.buttonsSetting &&
+    runningTask.value?.buttonsSetting[btnType]
+  ) {
+    displayName = runningTask.value.buttonsSetting[btnType].displayName;
+  }
+  return displayName;
+}
+
+/** 加载待办任务 */
+function loadTodoTask(task: any) {
+  approveForm.value = {};
+  runningTask.value = task;
+  approveFormFApi.value = {};
+  reasonRequire.value = task?.reasonRequire ?? false;
+  nodeTypeName.value =
+    task?.nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ? '办理' : '审批';
+  // 处理 approve 表单
+  if (task && task.formId && task.formConf) {
+    const tempApproveForm = {};
+    setConfAndFields2(
+      tempApproveForm,
+      task.formConf,
+      task.formFields,
+      task.formVariables,
+    );
+    approveForm.value = tempApproveForm;
+  } else {
+    approveForm.value = {}; // 占位，避免为空
+  }
+}
+
+/** 校验流程表单 */
+async function validateNormalForm() {
+  if (props.processDefinition?.formType === BpmModelFormType.NORMAL) {
+    let valid = true;
+    try {
+      await props.normalFormApi?.validate();
+    } catch {
+      valid = false;
+    }
+    return valid;
+  } else {
+    return true;
+  }
+}
+
+/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
+function getUpdatedProcessInstanceVariables() {
+  const variables: any = {};
+  props.writableFields.forEach((field: string) => {
+    variables[field] = props.normalFormApi.getValue(field);
+  });
+  return variables;
+}
+
+/** 处理签名完成 */
+function handleSignFinish(url: string) {
+  approveReasonForm.signPicUrl = url;
+  approveFormRef.value?.validateField('signPicUrl');
+}
+
+/** 处理弹窗可见性 */
+function handlePopoverVisible(visible: boolean) {
+  if (!visible) {
+    // 拦截关闭事件
+    popOverVisible.value.approve = true;
+  }
+}
+
+defineExpose({ loadTodoTask });
+</script>
+<template>
+  <div class="flex items-center">
+    <!-- 【通过】按钮 -->
+    <!-- z-index 设置为300 避免覆盖签名弹窗 -->
+    <ElSpace size="default">
+      <ElPopover
+        v-model:visible="popOverVisible.approve"
+        placement="top"
+        :popper-style="{ minWidth: '400px', zIndex: 300 }"
+        trigger="click"
+        @open-change="handlePopoverVisible"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.APPROVE)
+        "
+      >
+        <template #reference>
+          <ElButton plain type="primary" @click="openPopover('approve')">
+            <IconifyIcon icon="lucide:check" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE)
+            }}</span>
+          </ElButton>
+        </template>
+        <!-- 办理表单 -->
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="approveFormRef"
+            :model="approveReasonForm"
+            :rules="approveReasonRule"
+            label-width="100px"
+          >
+            <ElCard v-if="runningTask?.formId > 0" class="!-mt-2.5 mb-3.5">
+              <template #title>
+                <span class="el-icon-picture-outline">
+                  填写表单【{{ runningTask?.formName }}】
+                </span>
+              </template>
+              <FormCreate
+                v-model:value="approveForm.value"
+                v-model:api="approveFormFApi"
+                :option="approveForm.option"
+                :rule="approveForm.rule"
+              />
+            </ElCard>
+
+            <ElFormItem
+              label="下一个节点的审批人"
+              prop="nextAssignees"
+              v-if="nextAssigneesActivityNode.length > 0"
+            >
+              <div class="-mb-8 -mt-3.5 ml-2.5">
+                <ProcessInstanceTimeline
+                  ref="nextAssigneesTimelineRef"
+                  :activity-nodes="nextAssigneesActivityNode"
+                  :show-status-icon="false"
+                  :enable-approve-user-select="true"
+                  @select-user-confirm="selectNextAssigneesConfirm"
+                />
+              </div>
+            </ElFormItem>
+            <ElFormItem
+              v-if="runningTask.signEnable"
+              label="签名"
+              prop="signPicUrl"
+              ref="approveSignFormRef"
+            >
+              <div class="flex items-center gap-2">
+                <ElButton @click="openSignatureModal" type="primary">
+                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
+                </ElButton>
+                <ElImage
+                  class="!h-10 !w-40 object-contain"
+                  v-if="approveReasonForm.signPicUrl"
+                  :src="approveReasonForm.signPicUrl"
+                />
+              </div>
+            </ElFormItem>
+            <ElFormItem :label="`${nodeTypeName}意见`" prop="reason">
+              <ElInput
+                type="textarea"
+                v-model="approveReasonForm.reason"
+                :placeholder="`请输入${nodeTypeName}意见`"
+                :rows="4"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handleAudit(true, approveFormRef)"
+                >
+                  {{
+                    getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE)
+                  }}
+                </ElButton>
+                <ElButton @click="closePopover('approve', approveFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【拒绝】按钮 -->
+      <ElPopover
+        v-model:visible="popOverVisible.reject"
+        placement="top"
+        :popper-style="{ minWidth: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.REJECT)
+        "
+      >
+        <template #reference>
+          <ElButton plain danger type="primary" @click="openPopover('reject')">
+            <IconifyIcon icon="lucide:x" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT)
+            }}</span>
+          </ElButton>
+        </template>
+        <!-- 审批表单 -->
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="rejectFormRef"
+            :model="rejectReasonForm"
+            :rules="rejectReasonRule"
+            label-width="100px"
+          >
+            <ElFormItem label="审批意见" prop="reason">
+              <ElInput
+                type="textarea"
+                v-model="rejectReasonForm.reason"
+                placeholder="请输入审批意见"
+                :rows="4"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton
+                :disabled="formLoading"
+                danger
+                type="primary"
+                @click="handleAudit(false, rejectFormRef)"
+              >
+                {{
+                  getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT)
+                }}
+              </ElButton>
+              <ElButton
+                class="ml-2"
+                @click="closePopover('reject', rejectFormRef)"
+              >
+                取消
+              </ElButton>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【抄送】按钮 -->
+      <ElPopover
+        v-model:visible="popOverVisible.copy"
+        placement="top"
+        :popper-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.COPY)
+        "
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('copy')">
+            <IconifyIcon icon="lucide:copy" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY)
+            }}</span>
+          </ElButton>
+        </template>
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="copyFormRef"
+            :model="copyForm"
+            :rules="copyFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="抄送人" prop="copyUserIds">
+              <ElSelect
+                v-model="copyForm.copyUserIds"
+                clearable
+                multiple
+                placeholder="请选择抄送人"
+                class="w-full"
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                >
+                  {{ item.nickname }}
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="抄送意见" prop="copyReason">
+              <ElInput
+                type="textarea"
+                v-model="copyForm.copyReason"
+                placeholder="请输入抄送意见"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handleCopy"
+                >
+                  {{
+                    getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY)
+                  }}
+                </ElButton>
+                <ElButton @click="closePopover('copy', copyFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【转办】按钮 -->
+      <ElPopover
+        v-model:visible="popOverVisible.transfer"
+        placement="top"
+        :popper-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.TRANSFER)
+        "
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('transfer')">
+            <IconifyIcon icon="icon-park-outline:share-two" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.TRANSFER)
+            }}</span>
+          </ElButton>
+        </template>
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="transferFormRef"
+            :model="transferForm"
+            :rules="transferFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="新审批人" prop="assigneeUserId">
+              <ElSelect
+                v-model="transferForm.assigneeUserId"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                >
+                  {{ item.nickname }}
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="审批意见" prop="reason">
+              <ElInput
+                type="textarea"
+                v-model="transferForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handleTransfer()"
+                >
+                  {{
+                    getButtonDisplayName(
+                      BpmTaskOperationButtonTypeEnum.TRANSFER,
+                    )
+                  }}
+                </ElButton>
+                <ElButton @click="closePopover('transfer', transferFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【委派】按钮 -->
+      <ElPopover
+        v-model:visible="popOverVisible.delegate"
+        placement="top"
+        :popper-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.DELEGATE)
+        "
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('delegate')">
+            <IconifyIcon :size="14" icon="icon-park-outline:user-positioning" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE)
+            }}</span>
+          </ElButton>
+        </template>
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="delegateFormRef"
+            :model="delegateForm"
+            :rules="delegateFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="接收人" prop="delegateUserId">
+              <ElSelect
+                v-model="delegateForm.delegateUserId"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                >
+                  {{ item.nickname }}
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="审批意见" prop="reason">
+              <ElInput
+                type="textarea"
+                v-model="delegateForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handleDelegate()"
+                >
+                  {{
+                    getButtonDisplayName(
+                      BpmTaskOperationButtonTypeEnum.DELEGATE,
+                    )
+                  }}
+                </ElButton>
+                <ElButton @click="closePopover('delegate', delegateFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+      <ElPopover
+        v-model:visible="popOverVisible.addSign"
+        placement="top"
+        :popper-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+        "
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('addSign')">
+            <IconifyIcon :size="14" icon="icon-park-outline:plus" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+            }}</span>
+          </ElButton>
+        </template>
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="addSignFormRef"
+            :model="addSignForm"
+            :rules="addSignFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="加签处理人" prop="addSignUserIds">
+              <ElSelect
+                v-model="addSignForm.addSignUserIds"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                >
+                  {{ item.nickname }}
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="审批意见" prop="reason">
+              <ElInput
+                type="textarea"
+                v-model="addSignForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handlerAddSign('before')"
+                >
+                  向前{{
+                    getButtonDisplayName(
+                      BpmTaskOperationButtonTypeEnum.ADD_SIGN,
+                    )
+                  }}
+                </ElButton>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handlerAddSign('after')"
+                >
+                  向后{{
+                    getButtonDisplayName(
+                      BpmTaskOperationButtonTypeEnum.ADD_SIGN,
+                    )
+                  }}
+                </ElButton>
+                <ElButton @click="closePopover('addSign', addSignFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【减签】按钮 -->
+      <ElPopover
+        v-model:visible="popOverVisible.deleteSign"
+        placement="top"
+        :popper-style="{ width: '400px' }"
+        trigger="click"
+        v-if="runningTask?.children.length > 0"
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('deleteSign')">
+            <IconifyIcon :size="14" icon="icon-park-outline:minus" />
+            <span class="ml-1">减签</span>
+          </ElButton>
+        </template>
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="deleteSignFormRef"
+            :model="deleteSignForm"
+            :rules="deleteSignFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="减签人员" prop="deleteSignTaskId">
+              <ElSelect
+                v-model="deleteSignForm.deleteSignTaskId"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="item in runningTask.children"
+                  :key="item.id"
+                  :label="getDeleteSignUserLabel(item)"
+                  :value="item.id"
+                >
+                  {{ getDeleteSignUserLabel(item) }}
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="审批意见" prop="reason">
+              <ElInput
+                type="textarea"
+                v-model="deleteSignForm.reason"
+                clearable
+                placeholder="请输入审批意见"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handlerDeleteSign()"
+                >
+                  减签
+                </ElButton>
+                <ElButton
+                  @click="closePopover('deleteSign', deleteSignFormRef)"
+                >
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!-- 【退回】按钮 -->
+      <ElPopover
+        v-model:visible="popOverVisible.return"
+        placement="top"
+        :popper-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.RETURN)
+        "
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('return')">
+            <IconifyIcon :size="14" icon="lucide:arrow-left" />
+            <span class="ml-1">{{
+              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN)
+            }}</span>
+          </ElButton>
+        </template>
+        <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="returnFormRef"
+            :model="returnForm"
+            :rules="returnFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="退回节点" prop="targetTaskDefinitionKey">
+              <ElSelect
+                v-model="returnForm.targetTaskDefinitionKey"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="item in returnList"
+                  :key="item.taskDefinitionKey"
+                  :label="item.name"
+                  :value="item.taskDefinitionKey"
+                >
+                  {{ item.name }}
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="退回理由" prop="returnReason">
+              <ElInput
+                type="textarea"
+                v-model="returnForm.returnReason"
+                clearable
+                placeholder="请输入退回理由"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handleReturn()"
+                >
+                  {{
+                    getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN)
+                  }}
+                </ElButton>
+                <ElButton @click="closePopover('return', returnFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+
+      <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+      <ElPopover
+        v-model:visible="popOverVisible.cancel"
+        placement="top"
+        :popper-style="{ width: '460px' }"
+        trigger="click"
+        v-if="
+          userId === processInstance?.startUser?.id &&
+          !isEndProcessStatus(processInstance?.status)
+        "
+      >
+        <template #reference>
+          <ElButton plain @click="openPopover('cancel')">
+            <IconifyIcon :size="14" icon="icon-park-outline:back" />
+            <span class="ml-1">取消</span>
+          </ElButton>
+        </template>
+        <div
+          class="flex w-full flex-1 flex-col px-5 pt-5"
+          v-loading="formLoading"
+        >
+          <ElForm
+            label-position="top"
+            class="mb-auto"
+            ref="cancelFormRef"
+            :model="cancelForm"
+            :rules="cancelFormRule"
+            label-width="100px"
+          >
+            <ElFormItem label="取消理由" prop="cancelReason">
+              <ElAlert
+                class="!mb-2 text-xs"
+                type="warning"
+                size="small"
+                show-icon
+                title="友情提醒：取消后，该审批流程将自动结束。"
+              />
+              <ElInput
+                type="textarea"
+                v-model="cancelForm.cancelReason"
+                clearable
+                placeholder="请输入取消理由"
+                :rows="3"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElSpace>
+                <ElButton
+                  :disabled="formLoading"
+                  type="primary"
+                  @click="handleCancel()"
+                >
+                  确认
+                </ElButton>
+
+                <ElButton @click="closePopover('cancel', cancelFormRef)">
+                  取消
+                </ElButton>
+              </ElSpace>
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElPopover>
+      <!-- 【再次提交】 按钮-->
+      <ElButton
+        plain
+        @click="handleReCreate()"
+        v-if="
+          userId === processInstance?.startUser?.id &&
+          isEndProcessStatus(processInstance?.status) &&
+          processDefinition?.formType === 10
+        "
+      >
+        <IconifyIcon :size="14" icon="lucide:refresh-cw" />
+        <span class="ml-1">再次提交</span>
+      </ElButton>
+    </ElSpace>
+  </div>
+
+  <!-- 签名弹窗 -->
+  <SignatureModal @success="handleSignFinish" />
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
new file mode 100644
index 000000000..85693735b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { useUserStore } from '@vben/stores';
+import { formatDate } from '@vben/utils';
+
+// @ts-ignore - 安装 vue3-print-nb 局部指令 v-print
+import vPrint from 'vue3-print-nb';
+
+import { getProcessInstancePrintData } from '#/api/bpm/processInstance';
+import { decodeFields } from '#/components/form-create';
+
+const userStore = useUserStore();
+
+const printData = ref<BpmProcessInstanceApi.ProcessPrintDataRespVO>();
+const userName = computed(() => userStore.userInfo?.nickname ?? '');
+const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
+const formFields = ref<any[]>([]);
+const printDataMap = ref<Record<string, any>>({});
+
+/** 打印配置 */
+const printObj = ref({
+  id: 'printDivTag',
+  popTitle: '&nbsp;',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20_003,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  closable: true,
+  footer: false,
+  title: '打印流程',
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const { processInstanceId } = modalApi.getData<{
+        processInstanceId: string;
+      }>();
+      if (processInstanceId) {
+        await fetchPrintData(processInstanceId);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 获取打印数据 */
+async function fetchPrintData(id: string) {
+  printData.value = await getProcessInstancePrintData(id);
+  initPrintDataMap();
+  parseFormFields();
+}
+
+/** 解析表单字段 */
+function parseFormFields() {
+  if (!printData.value) return;
+
+  const formFieldsObj = decodeFields(
+    printData.value.processInstance.processDefinition?.formFields || [],
+  );
+  const processVariables = printData.value.processInstance.formVariables;
+  const res: any = [];
+
+  for (const item of formFieldsObj) {
+    const id = item.field;
+    const name = item.title;
+    const fieldKey = item.field as string;
+    const variable = processVariables[fieldKey];
+    let html = variable;
+
+    switch (item.type) {
+      case 'checkbox':
+      case 'radio':
+      case 'select': {
+        const options = item.options;
+        const temp: any = [];
+        if (Array.isArray(options)) {
+          if (Array.isArray(variable)) {
+            const labels = options
+              .filter((o: any) => variable.includes(o.value))
+              .map((o: any) => o.label);
+            temp.push(...labels);
+          } else {
+            const opt = options.find((o: any) => o.value === variable);
+            if (opt) {
+              temp.push(opt.label);
+            }
+          }
+        }
+        html = temp.join(',');
+        break;
+      }
+      case 'UploadImg': {
+        const imgEl = document.createElement('img');
+        imgEl.setAttribute('src', variable);
+        imgEl.setAttribute('style', 'max-width: 600px;');
+        html = imgEl.outerHTML;
+        break;
+      }
+      // TODO 更多表单打印展示
+    }
+
+    printDataMap.value[fieldKey] = html;
+    res.push({ id, name, html });
+  }
+
+  formFields.value = res;
+}
+
+/** 初始化打印数据映射 */
+function initPrintDataMap() {
+  if (!printData.value) return;
+
+  printDataMap.value.startUser =
+    printData.value.processInstance.startUser?.nickname || '';
+  printDataMap.value.startUserDept =
+    printData.value.processInstance.startUser?.deptName || '';
+  printDataMap.value.processName = printData.value.processInstance.name;
+  printDataMap.value.processNum = printData.value.processInstance.id;
+  printDataMap.value.startTime = formatDate(
+    printData.value.processInstance.startTime,
+  );
+  printDataMap.value.endTime = formatDate(
+    printData.value.processInstance.endTime,
+  );
+  printDataMap.value.processStatus = getDictLabel(
+    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+    printData.value.processInstance.status,
+  );
+  printDataMap.value.printUser = userName.value;
+  printDataMap.value.printTime = printTime.value;
+}
+
+/** 获取打印模板 HTML  */
+function getPrintTemplateHTML() {
+  if (!printData.value?.printTemplateHtml) return '';
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(
+    printData.value.printTemplateHtml,
+    'text/html',
+  );
+
+  // 替换 mentions
+  const mentions = doc.querySelectorAll('[data-w-e-type="mention"]');
+  mentions.forEach((item) => {
+    const htmlElement = item as HTMLElement;
+    const mentionId = JSON.parse(
+      decodeURIComponent(htmlElement.dataset.info ?? ''),
+    ).id;
+    item.innerHTML = printDataMap.value[mentionId] ?? '';
+  });
+
+  // 替换流程记录
+  const processRecords = doc.querySelectorAll(
+    '[data-w-e-type="process-record"]',
+  );
+  const processRecordTable: Element = document.createElement('table');
+
+  if (processRecords.length > 0) {
+    // 构建流程记录 html
+    processRecordTable.setAttribute('class', 'w-full border-collapse');
+
+    const headTr = document.createElement('tr');
+    const headTd = document.createElement('td');
+    headTd.setAttribute('colspan', '2');
+    headTd.setAttribute('class', 'border border-black p-1.5 text-center');
+    headTd.innerHTML = '流程记录';
+    headTr.append(headTd);
+    processRecordTable.append(headTr);
+
+    printData.value?.tasks.forEach((item) => {
+      const tr = document.createElement('tr');
+      const td1 = document.createElement('td');
+      td1.setAttribute('class', 'border border-black p-1.5');
+      td1.innerHTML = item.name;
+      const td2 = document.createElement('td');
+      td2.setAttribute('class', 'border border-black p-1.5');
+      td2.innerHTML = item.description;
+      tr.append(td1);
+      tr.append(td2);
+      processRecordTable.append(tr);
+    });
+  }
+
+  processRecords.forEach((item) => {
+    item.innerHTML = processRecordTable.outerHTML;
+  });
+
+  // 返回 html
+  return doc.body.innerHTML;
+}
+</script>
+
+<template>
+  <Modal class="w-2/3">
+    <div id="printDivTag" class="break-all">
+      <!-- eslint-disable vue/no-v-html  使用自定义打印模板 -->
+      <div
+        v-if="printData?.printTemplateEnable"
+        v-html="getPrintTemplateHTML()"
+      ></div>
+      <div v-else-if="printData">
+        <h2 class="mb-3 text-center text-xl font-bold">
+          {{ printData.processInstance.name }}
+        </h2>
+        <div class="mb-2 flex justify-between text-sm">
+          <div>
+            {{ `流程编号: ${printData.processInstance.id}` }}
+          </div>
+          <div>
+            {{ `打印人员: ${userName}` }}
+          </div>
+        </div>
+        <table class="mt-3 w-full border-collapse">
+          <tbody>
+            <tr>
+              <td class="w-1/4 border border-black p-1.5">发起人</td>
+              <td class="w-1/4 border border-black p-1.5">
+                {{ printData.processInstance.startUser?.nickname }}
+              </td>
+              <td class="w-1/4 border border-black p-1.5">发起时间</td>
+              <td class="w-1/4 border border-black p-1.5">
+                {{ formatDate(printData.processInstance.startTime) }}
+              </td>
+            </tr>
+            <tr>
+              <td class="w-1/4 border border-black p-1.5">所属部门</td>
+              <td class="w-1/4 border border-black p-1.5">
+                {{ printData.processInstance.startUser?.deptName }}
+              </td>
+              <td class="w-1/4 border border-black p-1.5">流程状态</td>
+              <td class="w-1/4 border border-black p-1.5">
+                {{
+                  getDictLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+                    printData.processInstance.status,
+                  )
+                }}
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="w-full border border-black p-1.5 text-center"
+                colspan="4"
+              >
+                <h4>表单内容</h4>
+              </td>
+            </tr>
+            <tr v-for="item in formFields" :key="item.id">
+              <td class="w-1/5 border border-black p-1.5">
+                {{ item.name }}
+              </td>
+              <td class="w-4/5 border border-black p-1.5" colspan="3">
+                <div v-html="item.html"></div>
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="w-full border border-black p-1.5 text-center"
+                colspan="4"
+              >
+                <h4>流程记录</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.tasks" :key="item.id">
+              <td class="w-1/5 border border-black p-1.5">
+                {{ item.name }}
+              </td>
+              <td class="w-4/5 border border-black p-1.5" colspan="3">
+                {{ item.description }}
+                <div v-if="item.signPicUrl && item.signPicUrl.length > 0">
+                  <img class="h-10 w-[90px]" :src="item.signPicUrl" alt="" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <ElButton @click="modalApi.close()">取 消</ElButton>
+        <ElButton v-print="printObj" type="primary">打 印</ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue
new file mode 100644
index 000000000..a3f1b0861
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { base64ToFile } from '@vben/utils';
+
+import Vue3Signature from 'vue3-signature';
+
+import { uploadFile } from '#/api/infra/file';
+
+defineOptions({
+  name: 'BpmProcessInstanceSignature',
+});
+
+const emits = defineEmits(['success']);
+
+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    modalApi.lock();
+    try {
+      const signFileUrl = await uploadFile({
+        file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
+      });
+      emits('success', signFileUrl);
+      await modalApi.close();
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="流程签名" class="w-3/5">
+    <div class="mb-2 flex justify-end">
+      <ElSpace>
+        <ElTooltip content="撤销上一步操作">
+          <ElButton @click="signature?.undo()">
+            <template #icon>
+              <IconifyIcon icon="lucide:undo" class="mb-1 size-4" />
+            </template>
+            撤销
+          </ElButton>
+        </ElTooltip>
+        <ElTooltip content="清空画布">
+          <ElButton @click="signature?.clear()">
+            <template #icon>
+              <IconifyIcon icon="lucide:trash" class="mb-1 size-4" />
+            </template>
+            <span>清除</span>
+          </ElButton>
+        </ElTooltip>
+      </ElSpace>
+    </div>
+
+    <Vue3Signature
+      class="mx-auto !h-80 border border-solid border-gray-300"
+      ref="signature"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
new file mode 100644
index 000000000..751f390ca
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import type { SimpleFlowNode } from '#/views/bpm/components/simple-process-design';
+
+import { ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum, BpmTaskStatusEnum } from '@vben/constants';
+
+import { SimpleProcessViewer } from '#/views/bpm/components/simple-process-design';
+
+defineOptions({ name: 'BpmProcessInstanceSimpleViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean; // 是否加载中
+    modelView?: any;
+    simpleJson?: string; // Simple 模型结构数据 (json 格式)
+  }>(),
+  {
+    loading: false,
+    modelView: () => ({}),
+    simpleJson: '',
+  },
+);
+
+const simpleModel = ref<any>({});
+const tasks = ref([]); // 用户任务
+const processInstance = ref(); // 流程实例
+
+/** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    if (newModelView) {
+      tasks.value = newModelView.tasks;
+      processInstance.value = newModelView.processInstance;
+      // 已经拒绝的活动节点编号集合，只包括 UserTask
+      const rejectedTaskActivityIds: string[] =
+        newModelView.rejectedTaskActivityIds;
+      // 进行中的活动节点编号集合， 只包括 UserTask
+      const unfinishedTaskActivityIds: string[] =
+        newModelView.unfinishedTaskActivityIds;
+      // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+      const finishedActivityIds: string[] =
+        newModelView.finishedTaskActivityIds;
+      // 已经完成的连线节点编号集合，只包括 SequenceFlow
+      const finishedSequenceFlowActivityIds: string[] =
+        newModelView.finishedSequenceFlowActivityIds;
+      setSimpleModelNodeTaskStatus(
+        newModelView.simpleModel,
+        newModelView.processInstance?.status,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds,
+      );
+      simpleModel.value = newModelView.simpleModel || {};
+    }
+  },
+);
+
+/** 监控模型结构数据 */
+watch(
+  () => props.simpleJson,
+  async (value) => {
+    if (value) {
+      simpleModel.value = JSON.parse(value);
+    }
+  },
+);
+
+const setSimpleModelNodeTaskStatus = (
+  simpleModel: SimpleFlowNode | undefined,
+  processStatus: number,
+  rejectedTaskActivityIds: string[],
+  unfinishedTaskActivityIds: string[],
+  finishedActivityIds: string[],
+  finishedSequenceFlowActivityIds: string[],
+) => {
+  if (!simpleModel) {
+    return;
+  }
+  // 结束节点
+  if (simpleModel.type === BpmNodeTypeEnum.END_EVENT_NODE) {
+    simpleModel.activityStatus = finishedActivityIds.includes(simpleModel.id)
+      ? processStatus
+      : BpmTaskStatusEnum.NOT_START;
+    return;
+  }
+  // 审批节点
+  if (
+    simpleModel.type === BpmNodeTypeEnum.START_USER_NODE ||
+    simpleModel.type === BpmNodeTypeEnum.USER_TASK_NODE ||
+    simpleModel.type === BpmNodeTypeEnum.TRANSACTOR_NODE ||
+    simpleModel.type === BpmNodeTypeEnum.CHILD_PROCESS_NODE
+  ) {
+    simpleModel.activityStatus = BpmTaskStatusEnum.NOT_START;
+    if (rejectedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = BpmTaskStatusEnum.REJECT;
+    } else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = BpmTaskStatusEnum.RUNNING;
+    } else if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = BpmTaskStatusEnum.APPROVE;
+    }
+    // TODO 是不是还缺一个 cancel 的状态 @jason：
+  }
+  // 抄送节点
+  if (simpleModel.type === BpmNodeTypeEnum.COPY_TASK_NODE) {
+    // 抄送节点,只有通过和未执行状态
+    simpleModel.activityStatus = finishedActivityIds.includes(simpleModel.id)
+      ? BpmTaskStatusEnum.APPROVE
+      : BpmTaskStatusEnum.NOT_START;
+  }
+  // 延迟器节点
+  if (simpleModel.type === BpmNodeTypeEnum.DELAY_TIMER_NODE) {
+    // 延迟器节点,只有通过和未执行状态
+    simpleModel.activityStatus = finishedActivityIds.includes(simpleModel.id)
+      ? BpmTaskStatusEnum.APPROVE
+      : BpmTaskStatusEnum.NOT_START;
+  }
+  // 触发器节点
+  if (simpleModel.type === BpmNodeTypeEnum.TRIGGER_NODE) {
+    // 触发器节点,只有通过和未执行状态
+    simpleModel.activityStatus = finishedActivityIds.includes(simpleModel.id)
+      ? BpmTaskStatusEnum.APPROVE
+      : BpmTaskStatusEnum.NOT_START;
+  }
+
+  // 条件节点对应 SequenceFlow
+  if (simpleModel.type === BpmNodeTypeEnum.CONDITION_NODE) {
+    // 条件节点,只有通过和未执行状态
+    simpleModel.activityStatus = finishedSequenceFlowActivityIds.includes(
+      simpleModel.id,
+    )
+      ? BpmTaskStatusEnum.APPROVE
+      : BpmTaskStatusEnum.NOT_START;
+  }
+  // 网关节点
+  if (
+    simpleModel.type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+    simpleModel.type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+    simpleModel.type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE ||
+    simpleModel.type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE
+  ) {
+    // 网关节点。只有通过和未执行状态
+    simpleModel.activityStatus = finishedActivityIds.includes(simpleModel.id)
+      ? BpmTaskStatusEnum.APPROVE
+      : BpmTaskStatusEnum.NOT_START;
+    simpleModel.conditionNodes?.forEach((node) => {
+      setSimpleModelNodeTaskStatus(
+        node,
+        processStatus,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds,
+      );
+    });
+  }
+
+  setSimpleModelNodeTaskStatus(
+    simpleModel.childNode,
+    processStatus,
+    rejectedTaskActivityIds,
+    unfinishedTaskActivityIds,
+    finishedActivityIds,
+    finishedSequenceFlowActivityIds,
+  );
+};
+</script>
+<template>
+  <div v-loading="loading">
+    <SimpleProcessViewer
+      :flow-node="simpleModel"
+      :tasks="tasks"
+      :process-instance="processInstance"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue
new file mode 100644
index 000000000..5b64e38ad
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import FormCreate from '@form-create/element-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
+import { setConfAndFields2 } from '#/components/form-create';
+
+defineOptions({
+  name: 'BpmProcessInstanceTaskList',
+});
+
+const props = defineProps<{
+  id: string;
+  loading: boolean;
+}>();
+
+/** 表单类型定义 */
+interface TaskForm {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+/** 获取表格列配置 */
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '审批节点',
+      minWidth: 150,
+    },
+    {
+      field: 'approver',
+      title: '审批人',
+      slots: {
+        default: ({ row }: { row: BpmTaskApi.TaskManager }) => {
+          return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+        },
+      },
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '开始时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      slots: {
+        default: 'slot-reason',
+      },
+      minWidth: 200,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+  ];
+}
+
+const formRef = ref();
+const taskForm = ref<TaskForm>({
+  rule: [],
+  option: {},
+  value: {},
+});
+
+const [Modal, modalApi] = useVbenModal({
+  title: '查看表单',
+  footer: false,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 显示表单详情 */
+async function handleShowFormDetail(row: BpmTaskApi.TaskManager) {
+  // 设置表单配置和表单字段
+  taskForm.value = {
+    rule: [],
+    option: {},
+    value: row,
+  };
+  setConfAndFields2(
+    taskForm,
+    row.formConf,
+    row.formFields || [],
+    row.formVariables || {},
+  );
+
+  // 打开弹窗
+  modalApi.open();
+  // 等待表单渲染
+  await nextTick();
+  // 获取表单 API 实例
+  const formApi = formRef.value?.fapi;
+  if (!formApi) {
+    return;
+  }
+  // 设置表单不可编辑
+  formApi.btn.show(false);
+  formApi.resetBtn.show(false);
+  formApi.disabled(true);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    showFooter: true,
+    border: true,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getTaskListByProcessInstanceId(props.id);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+});
+
+defineExpose({
+  refresh: handleRefresh,
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <Grid>
+      <template #slot-reason="{ row }">
+        <div class="flex flex-wrap items-center justify-center">
+          <span v-if="row.reason">{{ row.reason }}</span>
+          <span v-else>-</span>
+          <ElButton
+            v-if="row.formId > 0"
+            type="primary"
+            size="small"
+            plain
+            class="ml-1"
+            @click="handleShowFormDetail(row)"
+          >
+            <IconifyIcon icon="lucide:file-text" />
+            <span class="!ml-0.5 text-xs">查看表单</span>
+          </ElButton>
+        </div>
+      </template>
+    </Grid>
+  </div>
+  <Modal class="w-[800px]">
+    <FormCreate
+      ref="formRef"
+      v-model="taskForm.value"
+      :option="taskForm.option"
+      :rule="taskForm.rule"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/time-line.vue
new file mode 100644
index 000000000..f085a6385
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -0,0 +1,486 @@
+<!-- 审批详情的右侧：审批流 -->
+<script lang="ts" setup>
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  BpmCandidateStrategyEnum,
+  BpmNodeTypeEnum,
+  BpmTaskStatusEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime, isEmpty } from '@vben/utils';
+
+import {
+  ElAvatar,
+  ElButton,
+  ElImage,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+} from 'element-plus';
+
+import { UserSelectModal } from '#/views/system/user/components';
+
+defineOptions({ name: 'BpmProcessInstanceTimeline' });
+
+const props = withDefaults(
+  defineProps<{
+    activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
+    enableApproveUserSelect?: boolean; // 是否开启审批人自选功能
+    showStatusIcon?: boolean; // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true, // 默认值为 true
+    enableApproveUserSelect: false, // 默认值为 false
+  },
+);
+
+const emit = defineEmits<{
+  selectUserConfirm: [activityId: string, userList: any[]];
+}>();
+
+const { push } = useRouter();
+
+const statusIconMap: Record<
+  string,
+  { animation?: string; color: string; icon: string }
+> = {
+  '-2': { color: '#909398', icon: 'mdi:skip-forward-outline' }, // 跳过
+  '-1': { color: '#909398', icon: 'mdi:clock-outline' }, // 审批未开始
+  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' }, // 待审批
+  '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 = {
+  // 结束节点
+  [BpmNodeTypeEnum.END_EVENT_NODE]: {
+    color: '#909398',
+    icon: 'mdi:power',
+  },
+  // 开始节点
+  [BpmNodeTypeEnum.START_USER_NODE]: {
+    color: '#909398',
+    icon: 'mdi:account-outline',
+  },
+  // 用户任务节点
+  [BpmNodeTypeEnum.USER_TASK_NODE]: {
+    color: '#ff943e',
+    icon: 'tdesign:seal',
+  },
+  // 事务节点
+  [BpmNodeTypeEnum.TRANSACTOR_NODE]: {
+    color: '#ff943e',
+    icon: 'mdi:file-edit-outline',
+  },
+  // 复制任务节点
+  [BpmNodeTypeEnum.COPY_TASK_NODE]: {
+    color: '#3296fb',
+    icon: 'mdi:content-copy',
+  },
+  // 条件分支节点
+  [BpmNodeTypeEnum.CONDITION_NODE]: {
+    color: '#14bb83',
+    icon: 'carbon:flow',
+  },
+  // 并行分支节点
+  [BpmNodeTypeEnum.PARALLEL_BRANCH_NODE]: {
+    color: '#14bb83',
+    icon: 'si:flow-parallel-line',
+  },
+  // 子流程节点
+  [BpmNodeTypeEnum.CHILD_PROCESS_NODE]: {
+    color: '#14bb83',
+    icon: 'icon-park-outline:tree-diagram',
+  },
+} as Record<BpmNodeTypeEnum, { color: string; icon: string }>; // 节点类型图标映射
+const onlyStatusIconShow = [-1, 0, 1]; // 只有状态是 -1、0、1 才展示头像右小角状态小 icon
+
+/** 获取审批节点类型图标 */
+function getApprovalNodeTypeIcon(nodeType: BpmNodeTypeEnum) {
+  return nodeTypeSvgMap[nodeType]?.icon;
+}
+
+/** 获取审批节点图标 */
+function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
+  if (taskStatus === BpmTaskStatusEnum.NOT_START) {
+    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
+  }
+  if (
+    [
+      BpmNodeTypeEnum.CHILD_PROCESS_NODE,
+      BpmNodeTypeEnum.END_EVENT_NODE,
+      BpmNodeTypeEnum.START_USER_NODE,
+      BpmNodeTypeEnum.TRANSACTOR_NODE,
+      BpmNodeTypeEnum.USER_TASK_NODE,
+    ].includes(nodeType)
+  ) {
+    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
+  }
+  return 'mdi:clock-outline';
+}
+
+/** 获取审批节点颜色 */
+function getApprovalNodeColor(taskStatus: number) {
+  return statusIconMap[taskStatus]?.color;
+}
+
+/** 获取审批节点时间 */
+function getApprovalNodeTime(node: BpmProcessInstanceApi.ApprovalNodeInfo) {
+  if (node.nodeType === BpmNodeTypeEnum.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 [UserSelectModalComp, userSelectModalApi] = useVbenModal({
+  connectedComponent: UserSelectModal,
+  destroyOnClose: true,
+});
+const selectedActivityNodeId = ref<string>();
+const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
+
+/** 打开选择用户弹窗 */
+const handleSelectUser = (activityId: string, selectedList: any[]) => {
+  selectedActivityNodeId.value = activityId;
+  userSelectModalApi
+    .setData({ userIds: selectedList.map((item) => item.id) })
+    .open();
+};
+
+/** 选择用户完成 */
+const selectedUsers = ref<number[]>([]);
+function handleUserSelectConfirm(userList: any[]) {
+  if (!selectedActivityNodeId.value) {
+    return;
+  }
+  customApproveUsers.value[selectedActivityNodeId.value] = userList || [];
+
+  emit('selectUserConfirm', selectedActivityNodeId.value, userList);
+}
+
+/** 跳转子流程 */
+function handleChildProcess(activity: any) {
+  if (!activity.processInstanceId) {
+    return;
+  }
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: activity.processInstanceId,
+    },
+  });
+}
+
+/** 判断是否需要显示自定义选择审批人 */
+function shouldShowCustomUserSelect(
+  activity: BpmProcessInstanceApi.ApprovalNodeInfo,
+) {
+  return (
+    isEmpty(activity.tasks) &&
+    ((BpmCandidateStrategyEnum.START_USER_SELECT ===
+      activity.candidateStrategy &&
+      isEmpty(activity.candidateUsers)) ||
+      (props.enableApproveUserSelect &&
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
+          activity.candidateStrategy))
+  );
+}
+
+/** 判断是否需要显示审批意见 */
+function shouldShowApprovalReason(task: any, nodeType: BpmNodeTypeEnum) {
+  return (
+    task.reason &&
+    [BpmNodeTypeEnum.END_EVENT_NODE, BpmNodeTypeEnum.USER_TASK_NODE].includes(
+      nodeType,
+    )
+  );
+}
+
+/** 用户选择弹窗关闭 */
+function handleUserSelectClosed() {
+  selectedUsers.value = [];
+}
+
+/** 用户选择弹窗取消 */
+function handleUserSelectCancel() {
+  selectedUsers.value = [];
+}
+
+/** 设置自定义审批人 */
+const setCustomApproveUsers = (activityId: string, users: any[]) => {
+  customApproveUsers.value[activityId] = users || [];
+};
+
+/** 批量设置多个节点的自定义审批人 */
+const batchSetCustomApproveUsers = (data: Record<string, any[]>) => {
+  Object.keys(data).forEach((activityId) => {
+    customApproveUsers.value[activityId] = data[activityId] || [];
+  });
+};
+
+defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
+</script>
+
+<template>
+  <div>
+    <ElTimeline class="pt-5">
+      <!-- 遍历每个审批节点 -->
+      <ElTimelineItem
+        v-for="(activity, index) in activityNodes"
+        :key="index"
+        :color="getApprovalNodeColor(activity.status)"
+      >
+        <template #dot>
+          <div class="relative">
+            <div
+              class="absolute -left-2.5 -top-1.5 flex h-8 w-8 items-center justify-center rounded-full border border-solid border-gray-200 bg-blue-500 p-1.5"
+            >
+              <IconifyIcon
+                :icon="getApprovalNodeTypeIcon(activity.nodeType)"
+                class="size-6 text-white"
+              />
+            </div>
+            <div
+              v-if="showStatusIcon"
+              class="absolute left-1.5 top-2.5 flex size-4 items-center rounded-full border-2 border-solid border-white p-0.5"
+              :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 items-center">
+            <div class="font-bold">
+              {{ activity.name }}
+              <span v-if="activity.status === BpmTaskStatusEnum.SKIP">
+                【跳过】
+              </span>
+            </div>
+            <!-- 信息：时间 -->
+            <div
+              v-if="activity.status !== BpmTaskStatusEnum.NOT_START"
+              class="ml-auto text-sm text-gray-500"
+            >
+              {{ getApprovalNodeTime(activity) }}
+            </div>
+          </div>
+
+          <!-- 子流程节点 -->
+          <div v-if="activity.nodeType === BpmNodeTypeEnum.CHILD_PROCESS_NODE">
+            <ElButton
+              type="primary"
+              plain
+              size="small"
+              @click="handleChildProcess(activity)"
+              :disabled="!activity.processInstanceId"
+            >
+              查看子流程
+            </ElButton>
+          </div>
+
+          <!-- 需要自定义选择审批人 -->
+          <div
+            v-if="shouldShowCustomUserSelect(activity)"
+            class="flex flex-wrap items-center gap-2"
+          >
+            <ElTooltip content="添加用户" placement="left">
+              <ElButton
+                type="primary"
+                size="default"
+                plain
+                class="flex items-center justify-center"
+                @click="
+                  handleSelectUser(
+                    activity.id,
+                    customApproveUsers[activity.id] ?? [],
+                  )
+                "
+              >
+                <IconifyIcon icon="lucide:user-plus" class="size-4" />
+              </ElButton>
+            </ElTooltip>
+
+            <div
+              v-for="(user, userIndex) in customApproveUsers[activity.id]"
+              :key="user.id || userIndex"
+              class="relative flex h-9 items-center gap-2 rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
+            >
+              <ElAvatar
+                class="!m-1"
+                :size="28"
+                v-if="user.avatar"
+                :src="user.avatar"
+              />
+
+              <ElAvatar class="!m-1" :size="28" v-else>
+                <span>{{ user.nickname.substring(0, 1) }}</span>
+              </ElAvatar>
+              <span class="text-sm">{{ 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-2"
+            >
+              <div
+                class="relative flex flex-wrap gap-2"
+                v-if="task.assigneeUser || task.ownerUser"
+              >
+                <!-- 信息：头像昵称 -->
+                <div class="relative flex h-8 items-center rounded-3xl pr-2">
+                  <template
+                    v-if="
+                      task.assigneeUser?.avatar || task.assigneeUser?.nickname
+                    "
+                  >
+                    <ElAvatar
+                      class="!m-1"
+                      :size="28"
+                      v-if="task.assigneeUser?.avatar"
+                      :src="task.assigneeUser?.avatar"
+                    />
+                    <ElAvatar class="!m-1" :size="28" v-else>
+                      {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                    </ElAvatar>
+                    {{ task.assigneeUser?.nickname }}
+                  </template>
+                  <template
+                    v-else-if="
+                      task.ownerUser?.avatar || task.ownerUser?.nickname
+                    "
+                  >
+                    <ElAvatar
+                      class="!m-1"
+                      :size="28"
+                      v-if="task.ownerUser?.avatar"
+                      :src="task.ownerUser?.avatar"
+                    />
+                    <ElAvatar class="!m-1" :size="28" v-else>
+                      {{ task.ownerUser?.nickname.substring(0, 1) }}
+                    </ElAvatar>
+                    {{ task.ownerUser?.nickname }}
+                  </template>
+
+                  <!-- 信息：任务状态图标 -->
+                  <div
+                    v-if="
+                      showStatusIcon && onlyStatusIconShow.includes(task.status)
+                    "
+                    class="absolute left-5 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
+                    :style="{
+                      backgroundColor: statusIconMap[task.status]?.color,
+                    }"
+                  >
+                    <IconifyIcon
+                      :icon="statusIconMap[task.status]?.icon || 'lucide:clock'"
+                      class="size-1.5 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-gray-100 p-2 text-sm text-gray-500"
+                >
+                  审批意见：{{ task.reason }}
+                </div>
+                <div
+                  v-if="
+                    task.signPicUrl &&
+                    activity.nodeType === BpmNodeTypeEnum.USER_TASK_NODE
+                  "
+                  class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
+                >
+                  签名：
+                  <ElImage
+                    class="ml-1 h-10 w-24"
+                    :src="task.signPicUrl"
+                    :preview-src-list="[task.signPicUrl]"
+                  />
+                </div>
+              </teleport>
+            </div>
+
+            <!-- 情况二：遍历每个审批节点下的【候选的】task 任务 -->
+            <div
+              v-for="(user, userIndex) in activity.candidateUsers"
+              :key="userIndex"
+              class="relative flex h-8 items-center rounded-3xl pr-2"
+            >
+              <ElAvatar
+                class="!m-1"
+                :size="28"
+                v-if="user.avatar"
+                :src="user.avatar"
+              />
+              <ElAvatar class="!m-1" :size="28" v-else>
+                {{ user.nickname.substring(0, 1) }}
+              </ElAvatar>
+              <span class="text-sm">
+                {{ user.nickname }}
+              </span>
+
+              <!-- 候选任务状态图标 -->
+              <div
+                v-if="showStatusIcon"
+                class="absolute left-6 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
+                :style="{ backgroundColor: statusIconMap['-1']?.color }"
+              >
+                <IconifyIcon
+                  class="text-xs text-white"
+                  :icon="statusIconMap['-1']?.icon || 'lucide:clock'"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </ElTimelineItem>
+    </ElTimeline>
+
+    <!-- 用户选择弹窗 -->
+    <UserSelectModalComp
+      class="w-3/5"
+      v-model="selectedUsers"
+      :multiple="true"
+      title="选择用户"
+      @confirm="handleUserSelectConfirm"
+      @closed="handleUserSelectClosed"
+      @cancel="handleUserSelectCancel"
+    />
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6b72b312..b37c4abdc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -940,6 +940,12 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+      vue3-print-nb:
+        specifier: 'catalog:'
+        version: 0.1.4(typescript@5.9.3)
+      vue3-signature:
+        specifier: 'catalog:'
+        version: 0.2.4(vue@3.5.24(typescript@5.9.3))
       vuedraggable:
         specifier: 'catalog:'
         version: 4.1.0(vue@3.5.24(typescript@5.9.3))

From fe8d13da66c19084a4d2565d327de0d069ae3efa Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 26 Nov 2025 22:49:00 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20[bpm][ele]=20=E6=B5=81=E7=A8=8B/?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E8=AF=A6=E6=83=85=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/src/views/bpm/processInstance/detail/index.vue     | 2 +-
 .../bpm/processInstance/detail/modules/operation-button.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
index bda76b993..ccc4a5811 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup>
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';
 
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 4e1cd2425..19a5fd407 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup>
 // TODO @jason：你感觉要拆分下，按照表单么？
 import type { FormInstance, FormRules } from 'element-plus';