diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue index f23b6cef..b08c129c 100644 --- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue +++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue @@ -20,9 +20,9 @@ @@ -38,17 +38,17 @@ - + {{ getButtonDisplayName(OperationButtonType.APPROVE) }} - 取消 + 取消 @@ -72,24 +72,24 @@ - + {{ getButtonDisplayName(OperationButtonType.REJECT) }} - 取消 + 取消 @@ -113,14 +113,14 @@ {{ getButtonDisplayName(OperationButtonType.COPY) }} - 取消 + 取消 - + - + {{ getButtonDisplayName(OperationButtonType.TRANSFER) }} - 取消 + 取消 @@ -223,13 +223,13 @@ - + {{ getButtonDisplayName(OperationButtonType.DELEGATE) }} - 取消 + 取消 @@ -275,13 +275,13 @@ - + 向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }} - 取消 + 取消 @@ -329,13 +329,13 @@ - + 减签 - 取消 + 取消 @@ -372,7 +372,7 @@ v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)" > - + {{ getButtonDisplayName(OperationButtonType.RETURN) }} @@ -381,13 +381,13 @@ - + {{ getButtonDisplayName(OperationButtonType.RETURN) }} - 取消 + 取消 @@ -434,15 +434,15 @@ 取消后,该审批流程将自动结束 取消 - 取消 + 取消 @@ -483,11 +483,11 @@ import { OPERATION_BUTTON_NAME } from '@/components/SimpleProcessDesignerV2/src/consts' import { BpmProcessInstanceStatus, BpmModelFormType } from '@/utils/constants' +import type { FormInstance, FormRules } from 'element-plus' defineOptions({ name: 'ProcessInstanceBtnContainer' }) const router = useRouter() // 路由 const message = useMessage() // 消息弹窗 -const { proxy } = getCurrentInstance() as any const userId = useUserStoreWithOut().getUser.id // 当前登录的编号 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 @@ -517,21 +517,99 @@ const returnList = ref([] as any) // 退回节点 // ========== 审批信息 ========== const runningTask = ref() // 运行中的任务 -const genericForm = ref({}) // 通用表单 const approveForm = ref({}) // 审批通过时,额外的补充信息 const approveFormFApi = ref({}) // approveForms 的 fAPi -const formRef = ref() -const genericRule = reactive({ + +// 审批通过意见表单 +const approveFormRef = ref() +const approveReasonForm = reactive({ + reason: '' +}) +const approveReasonRule = reactive>({ reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }], - returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }], - cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }], - copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }], +}) +// 拒绝表单 +const rejectFormRef = ref() +const rejectReasonForm = reactive({ + reason: '' +}) +const rejectReasonRule = reactive>({ + reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }], +}) + +// 抄送表单 +const copyFormRef = ref() +const copyForm = reactive({ + copyUserIds: [], + copyReason: '' +}) +const copyFormRule = reactive>({ + copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }] +}) + +// 转办表单 +const transferFormRef = ref() +const transferForm = reactive({ + assigneeUserId: undefined, + reason: '' +}) +const transferFormRule = reactive>({ assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }], + reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }], +}) + +// 委派表单 +const delegateFormRef = ref() +const delegateForm = reactive({ + delegateUserId: undefined, + reason: '' +}) +const delegateFormRule = reactive>({ delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }], + reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }], +}) + +// 加签表单 +const addSignFormRef = ref() +const addSignForm = reactive({ + addSignUserIds: undefined, + reason: '' +}) +const addSignFormRule = reactive>({ addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }], + reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }], +}) + +// 减签表单 +const deleteSignFormRef = ref() +const deleteSignForm = reactive({ + deleteSignTaskId: undefined, + reason: '' +}) +const deleteSignFormRule = reactive>({ deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }], - targetTaskDefinitionKey: [{ required: true, message: '退回节点不能为空', trigger: 'change' }] -}) // 表单校验规则 + reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }], +}) + +// 退回表单 +const returnFormRef = ref() +const returnForm = reactive({ + targetTaskDefinitionKey: undefined, + returnReason: '' +}) +const returnFormRule = reactive>({ + targetTaskDefinitionKey: [{ required: true, message: '退回节点不能为空', trigger: 'change' }], + returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }] +}) + +// 取消表单 +const cancelFormRef = ref() +const cancelForm = reactive({ + cancelReason: '' +}) +const cancelFormRule = reactive>({ + cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }], +}) /** 监听 approveFormFApis,实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */ watch( @@ -545,71 +623,79 @@ watch( } ) -/** 弹出退回气泡卡 */ -const openReturnPopover = async () => { - returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id) - if (returnList.value.length === 0) { - message.warning('当前没有可退回的节点') - return - } - await openPopover('return') -} - /** 弹出气泡卡 */ const openPopover = async (type: string) => { if (type === 'approve') { // 校验流程表单 const valid = await validateNormalForm(); if (!valid) { - message.error('表单校验不通过,请先完善表单!!') + message.warning('表单校验不通过,请先完善表单!!') return; } } + if (type === 'return') { + // 获取退回节点 + returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id) + if (returnList.value.length === 0) { + message.warning('当前没有可退回的节点') + return + } + } Object.keys(popOverVisible.value).forEach((item) => { popOverVisible.value[item] = item === type }) - await nextTick() - formRef.value.resetFields() + // await nextTick() + // formRef.value.resetFields() +} + +/** 关闭气泡卡 */ +const closePropover = (type: string, formRef: FormInstance | undefined) => { + if (formRef) { + formRef.resetFields() + } + popOverVisible.value[type] = false } /** 处理审批通过和不通过的操作 */ -const handleAudit = async (pass: boolean) => { +const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) => { formLoading.value = true try { - // 校验审批表单 - const genericFormRef = proxy.$refs['formRef'] - const elForm = unref(genericFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return - // 提交审批 - const data = { - id: runningTask.value.id, - reason: genericForm.value.reason, - } + // 校验表单 + if (!formRef) return + await formRef.validate() if (pass) { // 获取修改的流程变量, 暂时只支持流程表单 - const variables = getUpdatedProcessInstanceVaiables(); - // 审批通过, 把修改的字段值赋于流程实例变量 - // @ts-ignore - data.variables = variables - // 审批通过,并且有额外的 approveForm 表单,需要校验 + 拼接到 data 表单里提交 + const variables = getUpdatedProcessInstanceVaiables(); + // 审批通过数据 + const data = { + id: runningTask.value.id, + reason: approveReasonForm.reason, + variables // 审批通过, 把修改的字段值赋于流程实例变量 + } + // 多表单处理,并且有额外的 approveForm 表单,需要校验 + 拼接到 data 表单里提交 + // TODO 芋艿 任务有多表单这里要如何处理,会和可编辑的字段冲突 const formCreateApi = approveFormFApi.value if (Object.keys(formCreateApi)?.length > 0) { await formCreateApi.validate() // @ts-ignore - // TODO 芋艿 任务有多表单这里要如何处理,会和可编辑的字段冲突 data.variables = approveForm.value.value } await TaskApi.approveTask(data) popOverVisible.value.approve = false message.success('审批通过成功') } else { + // 审批不通过数据 + const data = { + id: runningTask.value.id, + reason: rejectReasonForm.reason, + } await TaskApi.rejectTask(data) popOverVisible.value.reject = false message.success('审批不通过成功') } - // 2.2 加载最新数据 + // 重置表单 + formRef.resetFields() + // 加载最新数据 reload() } finally { formLoading.value = false @@ -620,19 +706,17 @@ const handleAudit = async (pass: boolean) => { const handleCopy = async () => { formLoading.value = true try { - const copyFormRef = proxy.$refs['formRef'] // 1. 校验表单 - const elForm = unref(copyFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!copyFormRef.value) return + await copyFormRef.value.validate() // 2. 提交抄送 const data = { id: runningTask.value.id, - reason: genericForm.value.copyReason, - copyUserIds: genericForm.value.copyUserIds + reason: copyForm.copyReason, + copyUserIds:copyForm.copyUserIds } await TaskApi.copyTask(data) + copyFormRef.value.resetFields() popOverVisible.value.copy = false message.success('操作成功') } finally { @@ -644,20 +728,17 @@ const handleCopy = async () => { const handleTransfer = async () => { formLoading.value = true try { - const transferFormRef = proxy.$refs['formRef'] // 1.1 校验表单 - const elForm = unref(transferFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!transferFormRef.value) return + await transferFormRef.value.validate() // 1.2 提交转交 const data = { id: runningTask.value.id, - reason: genericForm.value.reason, - assigneeUserId: genericForm.value.assigneeUserId + reason: transferForm.reason, + assigneeUserId: transferForm.assigneeUserId } - await TaskApi.transferTask(data) + transferFormRef.value.resetFields() popOverVisible.value.transfer = false message.success('操作成功') // 2. 加载最新数据 @@ -671,21 +752,20 @@ const handleTransfer = async () => { const handleDelegate = async () => { formLoading.value = true try { - const deletegateFormRef = proxy.$refs['formRef'] + // 1.1 校验表单 - const elForm = unref(deletegateFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!delegateFormRef.value) return + await delegateFormRef.value.validate() // 1.2 处理委派 const data = { id: runningTask.value.id, - reason: genericForm.value.reason, - delegateUserId: genericForm.value.delegateUserId + reason: delegateForm.reason, + delegateUserId: delegateForm.delegateUserId } await TaskApi.delegateTask(data) popOverVisible.value.delegate = false + delegateFormRef.value.resetFields() message.success('操作成功') // 2. 加载最新数据 reload() @@ -698,21 +778,19 @@ const handleDelegate = async () => { const handlerAddSign = async (type: string) => { formLoading.value = true try { - const transferFormRef = proxy.$refs['formRef'] // 1.1 校验表单 - const elForm = unref(transferFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!addSignFormRef.value) return + await addSignFormRef.value.validate() // 1.2 提交加签 const data = { id: runningTask.value.id, type, - reason: genericForm.value.reason, - userIds: genericForm.value.addSignUserIds + reason: addSignForm.reason, + userIds: addSignForm.addSignUserIds } await TaskApi.signCreateTask(data) message.success('操作成功') + addSignFormRef.value.resetFields() popOverVisible.value.addSign = false // 2 加载最新数据 reload() @@ -725,21 +803,19 @@ const handlerAddSign = async (type: string) => { const handleReturn = async () => { formLoading.value = true try { - const returnFormRef = proxy.$refs['formRef'] // 1.1 校验表单 - const elForm = unref(returnFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!returnFormRef.value) return + await returnFormRef.value.validate() // 1.2 提交退回 const data = { id: runningTask.value.id, - reason: genericForm.value.returnReason, - targetTaskDefinitionKey: genericForm.value.targetTaskDefinitionKey + reason: returnForm.returnReason, + targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey } await TaskApi.returnTask(data) popOverVisible.value.return = false + returnFormRef.value.resetFields() message.success('操作成功') // 2 重新加载数据 reload() @@ -752,19 +828,17 @@ const handleReturn = async () => { const handleCancel = async () => { formLoading.value = true try { - const cancelFormRef = proxy.$refs['formRef'] // 1.1 校验表单 - const elForm = unref(cancelFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!cancelFormRef.value) return + await cancelFormRef.value.validate() // 1.2 提交取消 await ProcessInstanceApi.cancelProcessInstanceByStartUser( props.processInstance.id, - genericForm.value.cancelReason + cancelForm.cancelReason ) popOverVisible.value.return = false message.success('操作成功') + cancelFormRef.value.resetFields() // 2 重新加载数据 reload() } finally { @@ -791,19 +865,17 @@ const getDeleteSignUserLabel = (task: any): string => { const handlerDeleteSign = async () => { formLoading.value = true try { - const deleteFormRef = proxy.$refs['formRef'] // 1.1 校验表单 - const elForm = unref(deleteFormRef) - if (!elForm) return - const valid = await elForm.validate() - if (!valid) return + if (!deleteSignFormRef.value) return + await deleteSignFormRef.value.validate() // 1.2 提交减签 const data = { - id: genericForm.value.deleteSignTaskId, - reason: genericForm.value.reason + id: deleteSignForm.deleteSignTaskId, + reason: deleteSignForm.reason } await TaskApi.signDeleteTask(data) message.success('减签成功') + deleteSignFormRef.value.resetFields() popOverVisible.value.deleteSign = false // 2 加载最新数据 reload() @@ -857,7 +929,6 @@ const getButtonDisplayName = (btnType: OperationButtonType) => { } const loadTodoTask = (task: any) => { - genericForm.value = {} approveForm.value = {} approveFormFApi.value = {} runningTask.value = task