!715 feat: 流程审批，预测下个节点是否需要选择审批人

Merge pull request !715 from SamllNorth_Lee/smallNorth/bpm

!715 feat: 流程审批，预测下个节点是否需要选择审批人
Merge pull request !715 from SamllNorth_Lee/smallNorth/bpm
a911af3f · 芋道源码 · Gitee · 520c9af4 · 3ef04b55 · a911af3f
Commit a911af3f authored Mar 01, 2025 by 芋道源码 Committed by Gitee Mar 01, 2025
4 changed files
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -183,7 +183,7 @@ const getApprovalDetail = async (row: any) => {
    const data = await ProcessInstanceApi.getApprovalDetail({
      processDefinitionId: row.id,
      activityId: NodeId.START_USER_NODE_ID,
-      processVariablesStr: JSON.stringify(row.processVariablesStr) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+      processVariablesStr: row.processVariablesStr // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
    })
    if (!data) {

--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -45,6 +45,18 @@
            />
          </el-form-item>
          <el-form-item
+            label="选择下一个节点的审批人"
+            prop="nextAssignees"
+            v-if="dialogVisibleSelectApproveUser"
+          >
+            <ProcessInstanceTimeline
+              ref="timelineRef"
+              :activity-nodes="activityNodes"
+              :show-status-icon="false"
+              @select-user-confirm="selectUserConfirm"
+            />
+          </el-form-item>
+          <el-form-item
            v-if="runningTask.signEnable"
            label="签名"
            prop="signPicUrl"
@@ -506,11 +518,13 @@ import * as UserApi from '@/api/system/user'
 import {
  NodeType,
  OPERATION_BUTTON_NAME,
-  OperationButtonType
+  OperationButtonType,
+  CandidateStrategy
 } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { BpmModelFormType, BpmProcessInstanceStatus } from '@/utils/constants'
 import type { FormInstance, FormRules } from 'element-plus'
 import SignDialog from './SignDialog.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 defineOptions({ name: 'ProcessInstanceBtnContainer' })
@@ -548,6 +562,8 @@ const runningTask = ref<any>() // 运行中的任务
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
 const nodeTypeName = ref('审批') // 节点类型名称
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
+const dialogVisibleSelectApproveUser = ref(false) // 是否显示节点审批人选择框
 // 审批通过意见表单
 const reasonRequire = ref()
@@ -556,14 +572,16 @@ const signRef = ref()
 const approveSignFormRef = ref()
 const approveReasonForm = reactive({
  reason: '',
-  signPicUrl: ''
+  signPicUrl: '',
+  nextAssignees: {}
 })
 const approveReasonRule = computed(() => {
  return {
    reason: [
      { required: reasonRequire.value, message: nodeTypeName + '意见不能为空', trigger: 'blur' }
    ],
-    signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }]
+    signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }],
+    nextAssignees: [{ required: true, message: '审批人不能为空', trigger: 'blur' }]
  }
 })
 // 拒绝表单
@@ -663,6 +681,11 @@ watch(
  }
 )
+/** 选择下一个节点的审批人 */
+const selectUserConfirm = (id: string, userList: any[]) => {
+  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id)
+}
 /** 弹出气泡卡 */
 const openPopover = async (type: string) => {
  if (type === 'approve') {
@@ -672,6 +695,7 @@ const openPopover = async (type: string) => {
      message.warning('表单校验不通过，请先完善表单!!')
      return
    }
+    initNextTaskSelectAssigneeFormField()
  }
  if (type === 'return') {
    // 获取退回节点
@@ -694,6 +718,34 @@ const closePropover = (type: string, formRef: FormInstance | undefined) => {
    formRef.resetFields()
  }
  popOverVisible.value[type] = false
+  dialogVisibleSelectApproveUser.value = false
+}
+/** // 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
+const initNextTaskSelectAssigneeFormField = async () => {
+  // 获取修改的流程变量, 暂时只支持流程表单
+  const variables = getUpdatedProcessInstanceVariables()
+  const param = {
+    processInstanceId: props.processInstance.id,
+    processVariablesStr: JSON.stringify(variables)
+  }
+  const res = await ProcessInstanceApi.getApprovalDetail(param)
+  //当前待审批节点id
+  const activityId = res.todoTask?.taskDefinitionKey
+  if (res.activityNodes && res.activityNodes.length > 0) {
+    // 找到当前节点的索引
+    const currentNodeIndex = res.activityNodes.findIndex((node) => node.id === activityId)
+    const nextNode = res.activityNodes[currentNodeIndex + 1]
+    if (
+      nextNode.candidateStrategy === CandidateStrategy.START_USER_SELECT &&
+      !nextNode.tasks &&
+      nextNode.candidateUsers?.length === 0
+    ) {
+      // 自选审批人，则弹出选择审批人弹窗
+      activityNodes.value = [nextNode]
+      dialogVisibleSelectApproveUser.value = true
+    }
+  }
 }
 /** 处理审批通过和不通过的操作 */
@@ -711,13 +763,21 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) => 
    }
    if (pass) {
-      // 获取修改的流程变量, 暂时只支持流程表单
+      // 如果需要自选审批人，则校验自选审批人
+      if (
+        dialogVisibleSelectApproveUser.value &&
+        Object.keys(approveReasonForm.nextAssignees).length === 0
+      ) {
+        message.warning('下一个节点的审批人不能为空!')
+        return
+      }
      const variables = getUpdatedProcessInstanceVariables()
      // 审批通过数据
      const data = {
        id: runningTask.value.id,
        reason: approveReasonForm.reason,
-        variables // 审批通过, 把修改的字段值赋于流程实例变量
+        variables, // 审批通过, 把修改的字段值赋于流程实例变量
+        nextAssignees: approveReasonForm.nextAssignees // 下个自选节点选择的审批人信息
      }
      // 签名
      if (runningTask.value.signEnable) {
@@ -733,6 +793,7 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) => 
      }
      await TaskApi.approveTask(data)
      popOverVisible.value.approve = false
+      dialogVisibleSelectApproveUser.value = false
      message.success('审批通过成功')
    } else {
      // 审批不通过数据
@@ -1009,6 +1070,11 @@ const validateNormalForm = async () => {
  }
 }
+/**
+ * TODO @小北  TO  @芋道
+ * 问题：这里存在一种场景会出现问题，流程发起后，A节点审批完成，B节点没有可编辑的流程字段且B节点为自选审批人节点，会导致流程审批人为空，
+ * 原因：因为没有可编辑的流程字段时props.writableFields为空，参数variables传递时也为空
+ */
 /** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
 const getUpdatedProcessInstanceVariables = () => {
  const variables = {}

--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -42,13 +42,13 @@ watch(
      const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
      setSimpleModelNodeTaskStatus(
        newModelView.simpleModel,
-        newModelView.processInstance.status,
+        newModelView.processInstance?.status,
        rejectedTaskActivityIds,
        unfinishedTaskActivityIds,
        finishedActivityIds,
        finishedSequenceFlowActivityIds
      )
-      simpleModel.value = newModelView.simpleModel
+      simpleModel.value = newModelView.simpleModel ? newModelView.simpleModel : {}
    }
  }
 )
@@ -171,5 +171,4 @@ const setSimpleModelNodeTaskStatus = (
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-</style>
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -179,7 +179,6 @@ const writableFields: Array<string> = [] // 表单可以编辑的字段
 /** 获得详情 */
 const getDetail = () => {
  getApprovalDetail()
  getProcessModelView()
 }