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

Merge pull request !715 from SamllNorth_Lee/smallNorth/bpm

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) {

src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue

@@ -44,6 +44,18 @@
               :rows="4"
             />
           </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="签名"
@@ -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 = {}

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>

src/views/bpm/processInstance/detail/index.vue

@@ -179,7 +179,6 @@ const writableFields: Array<string> = [] // 表单可以编辑的字段
 /** 获得详情 */
 const getDetail = () => {
   getApprovalDetail()
-
   getProcessModelView()
 }