feat：【bpm 工作流】审批人自选时，相同节点共享数据

apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -4,7 +4,7 @@ import type { Rule } from 'ant-design-vue/es/form';
 
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -102,6 +102,7 @@ const approveSignFormRef = ref();
 const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
   [],
 ); // 下一个审批节点信息
+const nextAssigneesTimelineRef = ref(); // 下一个节点审批人时间线组件的引用
 const approveReasonForm: any = reactive({
   reason: '',
   signPicUrl: '',
@@ -278,6 +279,10 @@ function closePopover(type: string, formRef: any | FormInstance) {
   }
   if (popOverVisible.value[type]) popOverVisible.value[type] = false;
   nextAssigneesActivityNode.value = [];
+  // 清理 Timeline 组件中的自定义审批人数据
+  if (nextAssigneesTimelineRef.value) {
+    nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+  }
 }
 
 /** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
@@ -290,6 +295,7 @@ async function initNextAssigneesFormField() {
     processVariablesStr: JSON.stringify(variables),
   });
   if (data && data.length > 0) {
+    const customApproveUsersData: Record<string, any[]> = {}; // 用于收集需要设置到 Timeline 组件的自定义审批人数据
     data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
       if (
         // 情况一：当前节点没有审批人，并且是发起人自选
@@ -302,7 +308,23 @@ async function initNextAssigneesFormField() {
       ) {
         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,
+      );
+    }
   }
 }
 
@@ -364,6 +386,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
       await TaskApi.approveTask(data);
       popOverVisible.value.approve = false;
       nextAssigneesActivityNode.value = [];
+      // 清理 Timeline 组件中的自定义审批人数据
+      if (nextAssigneesTimelineRef.value) {
+        nextAssigneesTimelineRef.value.batchSetCustomApproveUsers({});
+      }
       message.success('审批通过成功');
     } else {
       // 审批不通过数据
@@ -733,9 +759,10 @@ defineExpose({ loadTodoTask });
               >
                 <div class="-mb-8 -mt-3.5 ml-2.5">
                   <ProcessInstanceTimeline
+                    ref="nextAssigneesTimelineRef"
                     :activity-nodes="nextAssigneesActivityNode"
                     :show-status-icon="false"
-                    :use-next-assignees="true"
+                    :enable-approve-user-select="true"
                     @select-user-confirm="selectNextAssigneesConfirm"
                   />
                 </div>