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

- 提交时不再用节点表单值覆盖 data.variables;与预览阶段使用同一份合并变量
- onChange 加 useDebounceFn(300ms) + 请求序号去重,handleAudit 提交前 await 最新一轮重算
- 切换任务时重置请求序号与 pending 重算
- 改用 form-create 官方 formData() 取节点表单当前值
- 双 nextTick 改为 until 等 fApi 就绪,1s 兜底超时
pull/876/head
YunaiV 2026-05-03 16:34:55 +08:00
parent 06e2ca3100
commit 9df6828255
1 changed files with 50 additions and 53 deletions

View File

@ -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<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 下一个审批节点信息
const nextAssigneesTimelineRef = ref() // 下一个节点审批人时间线组件的引用
let nextApprovalRequestId = 0 // 请求序号;onChange 高频触发时,丢弃过期请求结果
let pendingNextNodesTask: Promise<unknown> | 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<string, any[]> = {} // 用于收集需要设置到 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
}