From 9df6828255a5745f02e6018b3258a9071ed4c007 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sun, 3 May 2026 16:34:55 +0800 Subject: [PATCH] =?UTF-8?q?fix(bpm)=EF=BC=9A=E4=BF=AE=E6=AD=A3=E6=B5=81?= =?UTF-8?q?=E7=A8=8B=E5=AE=9E=E4=BE=8B=E5=AE=A1=E6=89=B9=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E7=BD=91=E5=85=B3=E5=88=86=E6=94=AF=E9=87=8D=E7=AE=97=E7=9A=84?= =?UTF-8?q?=E5=B9=B6=E5=8F=91=E4=B8=8E=E6=8F=90=E4=BA=A4=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 提交时不再用节点表单值覆盖 data.variables；与预览阶段使用同一份合并变量 - onChange 加 useDebounceFn(300ms) + 请求序号去重，handleAudit 提交前 await 最新一轮重算 - 切换任务时重置请求序号与 pending 重算 - 改用 form-create 官方 formData() 取节点表单当前值 - 双 nextTick 改为 until 等 fApi 就绪，1s 兜底超时 --- .../detail/ProcessInstanceOperationButton.vue | 103 +++++++++--------- 1 file changed, 50 insertions(+), 53 deletions(-) diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue index 34929a677..79f1df559 100644 --- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue +++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue @@ -526,6 +526,7 @@ import { } from '@/components/SimpleProcessDesignerV2/src/consts' import { BpmModelFormType, BpmProcessInstanceStatus } from '@/utils/constants' import type { FormInstance, FormRules } from 'element-plus' +import { until, useDebounceFn } from '@vueuse/core' import SignDialog from './SignDialog.vue' import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue' import { isEmpty } from '@/utils/is' @@ -574,6 +575,8 @@ const signRef = ref() const approveSignFormRef = ref() const nextAssigneesActivityNode = ref([]) // 下一个审批节点信息 const nextAssigneesTimelineRef = ref() // 下一个节点审批人时间线组件的引用 +let nextApprovalRequestId = 0 // 请求序号；onChange 高频触发时，丢弃过期请求结果 +let pendingNextNodesTask: Promise | null = null // 跟踪 onChange 触发的最新一轮重算，提交前需 await 等其完成 const approveReasonForm = reactive({ reason: '', signPicUrl: '', @@ -582,7 +585,11 @@ const approveReasonForm = reactive({ const approveReasonRule = computed(() => { return { reason: [ - { required: reasonRequire.value, message: nodeTypeName.value + '意见不能为空', trigger: 'blur' } + { + required: reasonRequire.value, + message: nodeTypeName.value + '意见不能为空', + trigger: 'blur' + } ], signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }], nextAssignees: [{ required: true, message: '审批人不能为空', trigger: 'blur' }] @@ -709,11 +716,16 @@ const openPopover = async (type: string) => { popOverVisible.value[item] = item === type }) if (type === 'approve') { - // 等待表单渲染完成后，再初始化下一个节点信息 - await nextTick() - // 再等待一个 tick，确保 form-create 的 API 已经初始化 - await nextTick() - initNextAssigneesFormField() + // 当前任务有节点表单时，等 form-create 的 fApi 就绪后再计算下一个节点； + // 没有节点表单时，approveFormFApi 永远不会被赋值，跳过等待 + if (runningTask.value?.formId > 0) { + // 1s 兜底超时；超时 until 会抛错，这里静默吞掉，让首次计算照常进行 + await until(() => typeof approveFormFApi.value?.validate === 'function') + .toBeTruthy({ timeout: 1000 }) + .catch(() => {}) + } + // 初始化下一个审批人表单字段 + await initNextAssigneesFormField() } // await nextTick() // formRef.value.resetFields() @@ -734,6 +746,8 @@ const closePopover = (type: string, formRef: FormInstance | undefined) => { /** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */ const initNextAssigneesFormField = async () => { + // 记录当前请求序号；如果在等待响应期间又有新请求发出，本次结果作废 + const requestId = ++nextApprovalRequestId // 获取修改的流程变量, 暂时只支持流程表单 const variables = getUpdatedProcessInstanceVariables() const data = await ProcessInstanceApi.getNextApprovalNodes({ @@ -741,6 +755,12 @@ const initNextAssigneesFormField = async () => { taskId: runningTask.value.id, processVariablesStr: JSON.stringify(variables) }) + // 已有更新的请求发出，丢弃本次过期结果，避免把旧分支节点回写到当前列表 + if (requestId !== nextApprovalRequestId) { + return + } + // 在最新结果到达时再清空，避免请求期间出现节点信息抖动 + nextAssigneesActivityNode.value = [] if (data && data.length > 0) { const customApproveUsersData: Record = {} // 用于收集需要设置到 Timeline 组件的自定义审批人数据 data.forEach((node: any) => { @@ -769,6 +789,9 @@ const initNextAssigneesFormField = async () => { } } +/** onChange 高频触发时合并 300ms 内的连续按键，减少网关查询请求 */ +const debouncedInitNextAssigneesFormField = useDebounceFn(initNextAssigneesFormField, 300) + /** 选择下一个节点的审批人 */ const selectNextAssigneesConfirm = (id: string, userList: any[]) => { approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id) @@ -803,6 +826,10 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) => } if (pass) { + // 等待 onChange 触发的最新一轮重算落地，避免拿旧分支节点 + 旧审批人选择 + 新表单变量的错配组合提交 + if (pendingNextNodesTask) { + await pendingNextNodesTask + } const nextAssigneesValid = validateNextAssignees() if (!nextAssigneesValid) return const variables = getUpdatedProcessInstanceVariables() @@ -817,13 +844,10 @@ const handleAudit = async (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() - // @ts-ignore - data.variables = approveForm.value.value } await TaskApi.approveTask(data) popOverVisible.value.approve = false @@ -1081,27 +1105,23 @@ const 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 === NodeType.TRANSACTOR_NODE ? '办理' : '审批' - // 处理 approve 表单. + // 处理 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 事件，当表单值变化时，重新计算下一个节点的信息 - // @ts-ignore - if (!tempApproveForm.option) { - // @ts-ignore - tempApproveForm.option = {} - } - // @ts-ignore + // 为表单添加 onChange 事件，当表单值变化时，重新计算下一个节点的信息；网关分支可能依赖表单字段 tempApproveForm.option.onChange = () => { - // 当弹窗打开时，才重新计算下一个节点的信息 - if (popOverVisible.value.approve) { - // 清空之前的节点信息 - nextAssigneesActivityNode.value = [] - // 重新计算下一个节点的信息 - initNextAssigneesFormField() + // 弹窗打开时，才重新计算下一个节点的信息 + if (!popOverVisible.value.approve) { + return } + // useDebounceFn 会把前一次返回的 Promise reject 掉，需 catch 吞掉 'cancelled' + pendingNextNodesTask = debouncedInitNextAssigneesFormField().catch(() => {}) } approveForm.value = tempApproveForm } else { @@ -1128,38 +1148,15 @@ const validateNormalForm = async () => { const getUpdatedProcessInstanceVariables = () => { const variables = {} // 从流程表单（流程定义级别）中获取变量 - if (props.writableFields && props.writableFields.length > 0 && props.normalFormApi) { + if (props.writableFields?.length && props.normalFormApi) { props.writableFields.forEach((field) => { variables[field] = props.normalFormApi.getValue(field) }) } - // 从节点表单（节点级别）中获取变量 - // 优先从 approveForm.value.value 中获取（这是 form-create 存储的值） - if (approveForm.value?.value) { - Object.assign(variables, approveForm.value.value) - } - // 再从 formVariables 中获取（这是后端返回的已保存的变量） - if (approveForm.value?.formVariables) { - Object.assign(variables, approveForm.value.formVariables) - } - // 再从 formFields 中获取（这是表单的字段值） - if (approveForm.value?.formFields) { - Object.assign(variables, approveForm.value.formFields) - } - // 最后尝试从 approveFormFApi 中获取（这是用户在表单中修改的值） - if (approveFormFApi.value && approveForm.value?.rule) { - approveForm.value.rule.forEach((field: any) => { - if (field.field) { - try { - const value = approveFormFApi.value.getValue(field.field) - if (value !== undefined && value !== null) { - variables[field.field] = value - } - } catch (e) { - // 忽略获取值时的错误 - } - } - }) + // 从节点表单（节点级别）中获取变量；通过 form-create 官方的 formData() 拿当前值 + const nodeFormData = approveFormFApi.value?.formData?.() + if (nodeFormData) { + Object.assign(variables, nodeFormData) } return variables }