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>

apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

@@ -23,12 +23,12 @@ defineOptions({ name: 'BpmProcessInstanceTimeline' });
 const props = withDefaults(
   defineProps<{
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
+    enableApproveUserSelect?: boolean; // 是否开启审批人自选功能
     showStatusIcon?: boolean; // 是否显示头像右下角状态图标
-    useNextAssignees?: boolean; //  是否用于下一个节点审批人选择
   }>(),
   {
     showStatusIcon: true, // 默认值为 true
-    useNextAssignees: false, // 默认值为 false
+    enableApproveUserSelect: false, // 默认值为 false
   },
 );
 
@@ -198,12 +198,12 @@ function shouldShowCustomUserSelect(
 ) {
   return (
     isEmpty(activity.tasks) &&
-    isEmpty(activity.candidateUsers) &&
-    (BpmCandidateStrategyEnum.START_USER_SELECT ===
-      activity.candidateStrategy ||
-      (BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
-        activity.candidateStrategy &&
-        props.useNextAssignees))
+    ((BpmCandidateStrategyEnum.START_USER_SELECT ===
+      activity.candidateStrategy &&
+      isEmpty(activity.candidateUsers)) ||
+      (props.enableApproveUserSelect &&
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
+          activity.candidateStrategy))
   );
 }
 
@@ -226,6 +226,21 @@ function handleUserSelectClosed() {
 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>