yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(bpm)：修正 BPM 流程实例审批弹窗网关分支重算的并发与提交问题 

- 提交时不再用节点表单值覆盖 data.variables；与预览阶段使用同一份合并变量
- onChange 加 useDebounceFn(300ms) + 请求序号去重，handleAudit 提交前 await 最新一轮重算
- 切换任务时重置请求序号与 pending 重算
- 改用 form-create 官方 formData() 取节点表单当前值
- 节点表单初始化等 fApi 就绪后再计算下一节点（until + 1s 兜底）

同步至 web-antd / web-ele 两端
pull/341/head
YunaiV 2026-05-03 16:35:03 +08:00
parent a3d8e4bfc1
commit c641542c71
2 changed files with 124 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ import { useUserStore } from '@vben/stores';
import { isEmpty } from '@vben/utils';
import FormCreate from '@form-create/ant-design-vue';
import { until, useDebounceFn } from '@vueuse/core';
import {
Alert,
Button,
@ -113,6 +114,8 @@ const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
[],
); // 下一个审批节点信息
const nextAssigneesTimelineRef = ref(); // 下一个节点审批人时间线组件的引用
let nextApprovalRequestId = 0; // 请求序号；onChange 高频触发时，丢弃过期请求结果
let pendingNextNodesTask: null | Promise<unknown> = null; // 跟踪 onChange 触发的最新一轮重算，提交前需 await 等其完成
const approveReasonForm: any = reactive({
reason: '',
signPicUrl: '',
@ -256,7 +259,6 @@ async function openPopover(type: string) {
message.warning('表单校验不通过，请先完善表单!!');
return;
}
await initNextAssigneesFormField();
}
if (type === 'return') {
// 获取退回节点
@ -269,6 +271,20 @@ async function openPopover(type: string) {
Object.keys(popOverVisible.value).forEach((item) => {
if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
});
if (type === 'approve') {
// 当前任务有节点表单时，等 form-create 的 fApi 就绪后再计算下一个节点；
// 没有节点表单时，approveFormFApi 永远不会被赋值，跳过等待
if (runningTask.value?.formId > 0) {
// 1s 兜底超时；超时 until 会抛错，这里静默吞掉，让首次计算照常进行
await until(
() => typeof approveFormFApi.value?.validate === 'function',
)
.toBeTruthy({ timeout: 1000 })
.catch(() => {});
}
// 初始化下一个审批人表单字段
await initNextAssigneesFormField();
}
}
/** 关闭气泡卡 */
@ -286,6 +302,8 @@ function closePopover(type: string, formRef: any | FormInstance) {
/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
async function initNextAssigneesFormField() {
// 记录当前请求序号；如果在等待响应期间又有新请求发出，本次结果作废
const requestId = ++nextApprovalRequestId;
// 获取修改的流程变量, 暂时只支持流程表单
const variables = getUpdatedProcessInstanceVariables();
const data = await getNextApprovalNodes({
@ -293,6 +311,12 @@ async function initNextAssigneesFormField() {
taskId: runningTask.value.id,
processVariablesStr: JSON.stringify(variables),
});
// 已有更新的请求发出，丢弃本次过期结果，避免把旧分支节点回写到当前列表
if (requestId !== nextApprovalRequestId) {
return;
}
// 在最新结果到达时再清空，避免请求期间出现节点信息抖动
nextAssigneesActivityNode.value = [];
if (data && data.length > 0) {
const customApproveUsersData: Record<string, any[]> = {}; // 用于收集需要设置到 Timeline 组件的自定义审批人数据
data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
@ -327,6 +351,12 @@ async function initNextAssigneesFormField() {
}
}
/** onChange 高频触发时合并 300ms 内的连续按键，减少网关查询请求 */
const debouncedInitNextAssigneesFormField = useDebounceFn(
initNextAssigneesFormField,
300,
);
/** 选择下一个节点的审批人 */
function selectNextAssigneesConfirm(id: string, userList: any[]) {
approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
@ -362,6 +392,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
}
if (pass) {
// 等待 onChange 触发的最新一轮重算落地，避免拿旧分支节点 + 旧审批人选择 + 新表单变量的错配组合提交
if (pendingNextNodesTask) {
await pendingNextNodesTask;
}
const nextAssigneesValid = validateNextAssignees();
if (!nextAssigneesValid) return;
const variables = getUpdatedProcessInstanceVariables();
@ -376,12 +410,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
if (runningTask.value.signEnable) {
data.signPicUrl = approveReasonForm.signPicUrl;
}
// 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
// TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
// 多表单处理：节点表单需要校验；变量已经在 getUpdatedProcessInstanceVariables 中合并到 data.variables，无需再覆盖
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;
@ -648,18 +680,32 @@ function loadTodoTask(task: any) {
approveForm.value = {};
runningTask.value = task;
approveFormFApi.value = {};
// 切换任务时重置请求序号与 pending 重算，避免旧任务飞行中的请求/Promise 串到新任务
nextApprovalRequestId += 1;
pendingNextNodesTask = null;
reasonRequire.value = task?.reasonRequire ?? false;
nodeTypeName.value =
task?.nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ? '办理' : '审批';
// 处理 approve 表单
if (task && task.formId && task.formConf) {
const tempApproveForm = {};
const tempApproveForm: { option?: any; rule?: any; value?: any } = {};
setConfAndFields2(
tempApproveForm,
task.formConf,
task.formFields,
task.formVariables,
);
// 为表单添加 onChange 事件，当表单值变化时，重新计算下一个节点的信息；网关分支可能依赖表单字段
tempApproveForm.option.onChange = () => {
// 弹窗打开时，才重新计算下一个节点的信息
if (!popOverVisible.value.approve) {
return;
}
// useDebounceFn 会把前一次返回的 Promise reject 掉，需 catch 吞掉 'cancelled'
pendingNextNodesTask = debouncedInitNextAssigneesFormField().catch(
() => {},
);
};
approveForm.value = tempApproveForm;
} else {
approveForm.value = {}; // 占位，避免为空
@ -684,9 +730,17 @@ async function validateNormalForm() {
/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
function getUpdatedProcessInstanceVariables() {
const variables: any = {};
props.writableFields.forEach((field: string) => {
variables[field] = props.normalFormApi.getValue(field);
});
// 从流程表单（流程定义级别）中获取变量
if (props.writableFields?.length && props.normalFormApi) {
props.writableFields.forEach((field: string) => {
variables[field] = props.normalFormApi.getValue(field);
});
}
// 从节点表单（节点级别）中获取变量；通过 form-create 官方的 formData() 拿当前值
const nodeFormData = approveFormFApi.value?.formData?.();
if (nodeFormData) {
Object.assign(variables, nodeFormData);
}
return variables;
}

70
apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
View File

@ -23,6 +23,7 @@ import { useUserStore } from '@vben/stores';
import { isEmpty } from '@vben/utils';
import FormCreate from '@form-create/element-ui';
import { until, useDebounceFn } from '@vueuse/core';
import {
ElAlert,
ElButton,
@ -111,6 +112,8 @@ const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
[],
); // 下一个审批节点信息
const nextAssigneesTimelineRef = ref(); // 下一个节点审批人时间线组件的引用
let nextApprovalRequestId = 0; // 请求序号；onChange 高频触发时，丢弃过期请求结果
let pendingNextNodesTask: null | Promise<unknown> = null; // 跟踪 onChange 触发的最新一轮重算，提交前需 await 等其完成
const approveReasonForm: any = reactive({
reason: '',
signPicUrl: '',
@ -264,7 +267,6 @@ async function openPopover(type: string) {
ElMessage.warning('表单校验不通过，请先完善表单!!');
return;
}
await initNextAssigneesFormField();
}
if (type === 'return') {
// 获取退回节点
@ -277,6 +279,20 @@ async function openPopover(type: string) {
Object.keys(popOverVisible.value).forEach((item) => {
if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
});
if (type === 'approve') {
// 当前任务有节点表单时，等 form-create 的 fApi 就绪后再计算下一个节点；
// 没有节点表单时，approveFormFApi 永远不会被赋值，跳过等待
if (runningTask.value?.formId > 0) {
// 1s 兜底超时；超时 until 会抛错，这里静默吞掉，让首次计算照常进行
await until(
() => typeof approveFormFApi.value?.validate === 'function',
)
.toBeTruthy({ timeout: 1000 })
.catch(() => {});
}
// 初始化下一个审批人表单字段
await initNextAssigneesFormField();
}
}
/** 关闭气泡卡 */
@ -294,6 +310,8 @@ function closePopover(type: string, formRef: any | FormInstance) {
/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
async function initNextAssigneesFormField() {
// 记录当前请求序号；如果在等待响应期间又有新请求发出，本次结果作废
const requestId = ++nextApprovalRequestId;
// 获取修改的流程变量, 暂时只支持流程表单
const variables = getUpdatedProcessInstanceVariables();
const data = await getNextApprovalNodes({
@ -301,6 +319,12 @@ async function initNextAssigneesFormField() {
taskId: runningTask.value.id,
processVariablesStr: JSON.stringify(variables),
});
// 已有更新的请求发出，丢弃本次过期结果，避免把旧分支节点回写到当前列表
if (requestId !== nextApprovalRequestId) {
return;
}
// 在最新结果到达时再清空，避免请求期间出现节点信息抖动
nextAssigneesActivityNode.value = [];
if (data && data.length > 0) {
const customApproveUsersData: Record<string, any[]> = {}; // 用于收集需要设置到 Timeline 组件的自定义审批人数据
data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
@ -335,6 +359,12 @@ async function initNextAssigneesFormField() {
}
}
/** onChange 高频触发时合并 300ms 内的连续按键，减少网关查询请求 */
const debouncedInitNextAssigneesFormField = useDebounceFn(
initNextAssigneesFormField,
300,
);
/** 选择下一个节点的审批人 */
function selectNextAssigneesConfirm(id: string, userList: any[]) {
approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
@ -370,6 +400,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
}
if (pass) {
// 等待 onChange 触发的最新一轮重算落地，避免拿旧分支节点 + 旧审批人选择 + 新表单变量的错配组合提交
if (pendingNextNodesTask) {
await pendingNextNodesTask;
}
const nextAssigneesValid = validateNextAssignees();
if (!nextAssigneesValid) return;
const variables = getUpdatedProcessInstanceVariables();
@ -384,12 +418,10 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
if (runningTask.value.signEnable) {
data.signPicUrl = approveReasonForm.signPicUrl;
}
// 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
// TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
// 多表单处理：节点表单需要校验；变量已经在 getUpdatedProcessInstanceVariables 中合并到 data.variables，无需再覆盖
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;
@ -656,18 +688,32 @@ function loadTodoTask(task: any) {
approveForm.value = {};
runningTask.value = task;
approveFormFApi.value = {};
// 切换任务时重置请求序号与 pending 重算，避免旧任务飞行中的请求/Promise 串到新任务
nextApprovalRequestId += 1;
pendingNextNodesTask = null;
reasonRequire.value = task?.reasonRequire ?? false;
nodeTypeName.value =
task?.nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ? '办理' : '审批';
// 处理 approve 表单
if (task && task.formId && task.formConf) {
const tempApproveForm = {};
const tempApproveForm: { option?: any; rule?: any; value?: any } = {};
setConfAndFields2(
tempApproveForm,
task.formConf,
task.formFields,
task.formVariables,
);
// 为表单添加 onChange 事件，当表单值变化时，重新计算下一个节点的信息；网关分支可能依赖表单字段
tempApproveForm.option.onChange = () => {
// 弹窗打开时，才重新计算下一个节点的信息
if (!popOverVisible.value.approve) {
return;
}
// useDebounceFn 会把前一次返回的 Promise reject 掉，需 catch 吞掉 'cancelled'
pendingNextNodesTask = debouncedInitNextAssigneesFormField().catch(
() => {},
);
};
approveForm.value = tempApproveForm;
} else {
approveForm.value = {}; // 占位，避免为空
@ -692,9 +738,17 @@ async function validateNormalForm() {
/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
function getUpdatedProcessInstanceVariables() {
const variables: any = {};
props.writableFields.forEach((field: string) => {
variables[field] = props.normalFormApi.getValue(field);
});
// 从流程表单（流程定义级别）中获取变量
if (props.writableFields?.length && props.normalFormApi) {
props.writableFields.forEach((field: string) => {
variables[field] = props.normalFormApi.getValue(field);
});
}
// 从节点表单（节点级别）中获取变量；通过 form-create 官方的 formData() 拿当前值
const nodeFormData = approveFormFApi.value?.formData?.();
if (nodeFormData) {
Object.assign(variables, nodeFormData);
}
return variables;
}