【功能修改】 整合审批详情接口

Author: cooling-jason

src/api/bpm/processInstance/index.ts

@@ -87,14 +87,8 @@ export const getProcessInstanceCopyPage = async (params: any) => {
 }
 
 // 获取审批详情
-export const getApprovalDetail = async (
-  processInstanceId?: string,
-  processDefinitionId?: string
-) => {
-  const param = processInstanceId
-    ? '?processInstanceId=' + processInstanceId
-    : '?processDefinitionId=' + processDefinitionId
-  return await request.get({ url: 'bpm/process-instance/get-approval-detail' + param })
+export const getApprovalDetail = async (params: any) => {
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail' , params })
 }
 
 // 获取表单字段权限

src/utils/formCreate.ts

@@ -44,6 +44,7 @@ export const setConfAndFields2 = (
   value?: object
 ) => {
   if (isRef(detailPreview)) {
+    // @ts-ignore
     detailPreview = detailPreview.value
   }
   // @ts-ignore

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

@@ -657,7 +657,6 @@ const openChildrenTask = () => {
 
 /** 重新加载数据 */
 const reload = () => {
-  getMyTodoTask()
   emit('success')
 }
 
@@ -691,26 +690,23 @@ const getButtonDisplayName = (btnType: OperationButtonType) => {
   return displayName
 }
 
-/** 获取我的待办任务 */
-const getMyTodoTask = async () => {
+const loadTodoTask = (task: any) => {
   genericForm.value = {}
   approveForm.value = {}
   approveFormFApi.value = {}
-  const data = await TaskApi.myTodoTask(props.processInstanceId)
-  runningTask.value = data
+  runningTask.value = task
   // 处理 approve 表单.
-  if (data && data.formId && data.formConf) {
+  if (task && task.formId && task.formConf) {
     const tempApproveForm = {}
-    setConfAndFields2(tempApproveForm, data.formConf, data.formFields, data.formVariables)
+    setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
     approveForm.value = tempApproveForm
   } else {
     approveForm.value = {} // 占位，避免为空
   }
 }
 
-onMounted(async () => {
-  await getMyTodoTask()
-})
+defineExpose({ loadTodoTask })
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -134,23 +134,31 @@ import { TaskStatusEnum } from '@/api/bpm/task'
 import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-const props = defineProps({
-  // 流程实例编号
-  processInstanceId: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  // 流程定义编号
-  processDefinitionId: {
-    type: String,
-    required: false,
-    default: ''
-  }
-})
+// const props = defineProps({
+//   // 流程实例编号
+//   processInstanceId: {
+//     type: String,
+//     required: false,
+//     default: ''
+//   },
+//   // 流程定义编号
+//   processDefinitionId: {
+//     type: String,
+//     required: false,
+//     default: ''
+//   },
+//   approveNodes : {
+//     type: ProcessInstanceApi.ApprovalNodeInfo[],
+//     required: false,
+//     default: ''
+//   }
+// })
+defineProps<{
+  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+}>()
 
 // 审批节点
-const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+
 
 const statusIconMap2 = {
   // 未开始
@@ -194,13 +202,13 @@ const statusIconMap = {
 }
 
 /** 获得审批详情 */
-const getApprovalDetail = async () => {
-  const data = await ProcessInstanceApi.getApprovalDetail(
-    props.processInstanceId,
-    props.processDefinitionId
-  )
-  approveNodes.value = data.approveNodes
-}
+// const getApprovalDetail = async () => {
+//   const data = await ProcessInstanceApi.getApprovalDetail(
+//     props.processInstanceId,
+//     props.processDefinitionId
+//   )
+//   approveNodes.value = data.approveNodes
+// }
 
 const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
   if (taskStatus == TaskStatusEnum.NOT_START) {
@@ -226,13 +234,13 @@ const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
 }
 
 /** 重新刷新审批详情 */
-const refresh = () => {
-  getApprovalDetail()
-}
+// const refresh = () => {
+//   getApprovalDetail()
+// }
 
-defineExpose({ refresh })
+// defineExpose({ refresh })
 
-onMounted(async () => {
-  await getApprovalDetail()
-})
+// onMounted(async () => {
+//   await getApprovalDetail()
+// })
 </script>

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

@@ -23,7 +23,6 @@
           <div
             class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
           >
-            <!-- <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" /> -->
             <el-avatar
               :size="28"
               v-if="processInstance?.startUser?.avatar"
@@ -50,7 +49,7 @@
                       class="form-box flex flex-col mb-30px flex-1"
                     >
                       <!-- 情况一：流程表单 -->
-                      <el-col v-if="processInstance?.processDefinition?.formType === 10">
+                      <el-col v-if="processDefinition?.formType === 10">
                         <form-create
                           v-model="detailForm.value"
                           v-model:api="fApi"
@@ -59,14 +58,14 @@
                         />
                       </el-col>
                       <!-- 情况二：业务表单 -->
-                      <div v-if="processInstance?.processDefinition?.formType === 20">
+                      <div v-if="processDefinition?.formType === 20">
                         <BusinessFormComponent :id="processInstance.businessKey" />
                       </div>
                     </div>
                   </el-col>
                   <el-col :span="6">
                     <!-- 审批记录时间线 -->
-                    <ProcessInstanceTimeline ref="timelineRef" :process-instance-id="id" />
+                    <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -104,6 +103,7 @@
         <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
+            ref="operationButtonRef"
             :process-instance-id="id"
             :userOptions="userOptions"
             @success="refresh"
@@ -124,7 +124,6 @@ import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
-import { registerComponent } from '@/utils/routerHelper'
 import * as UserApi from '@/api/system/user'
 import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
@@ -141,7 +140,10 @@ const props = defineProps<{
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
+const processDefinition = ref<any>({}) // 流程定义
 const timelineRef = ref()
+// 操作按钮组件 ref
+const operationButtonRef = ref()
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
 const auditIcons = {
@@ -161,78 +163,92 @@ const detailForm = ref({
 
 /** 获得详情 */
 const getDetail = async () => {
-  // 1. 获得流程实例相关
-  getProcessInstance()
+  // 1. 获取审批详情
+  getApprovalDetail()
   // 2. 获得流程任务列表
   getTaskList()
 }
 
 /** 加载流程实例 */
 const BusinessFormComponent = ref<any>(null) // 异步组件
-const getProcessInstance = async () => {
+/** 获取审批详情 */
+const getApprovalDetail = async () => {
+  processInstanceLoading.value = true
   try {
-    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(props.id)
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param);
     if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if(!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！')
       return
     }
-    processInstance.value = data
+    processInstance.value = data.processInstance
+    processDefinition.value = data.processDefinition
 
     // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
+    if (processDefinition.value.formType === 10) {
       // 获取表单字段权限
-      let fieldsPermission = undefined
-      if (props.taskId || props.activityId) {
-        fieldsPermission = await ProcessInstanceApi.getFormFieldsPermission({
-          processInstanceId: props.id,
-          taskId: props.taskId,
-          activityId: props.activityId
-        })
-      }
-
-      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 表单不显示
-        detailForm.value.value = data.formVariables
+      const formFieldsPermission = data.formFieldsPermission
+     
+      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 显示不了，
+        detailForm.value.value = processInstance.value.formVariables
       } else {
         setConfAndFields2(
           detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables
         )
       }
-
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
+        //@ts-ignore
         fApi.value?.disabled(true)
-        if (fieldsPermission) {
-          Object.keys(fieldsPermission).forEach((item) => {
-            setFieldPermission(item, fieldsPermission[item])
+        // 设置表单字段权限
+        if (formFieldsPermission) {
+          Object.keys(data.formFieldsPermission).forEach((item) => {
+            setFieldPermission(item, formFieldsPermission[item])
           })
         }
       })
-    } else {
-      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
+
+    // 获取审批节点，显示 Timeline 的数据
+    approveNodes.value = data.approveNodes
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask)
+
   } finally {
     processInstanceLoading.value = false
   }
+  
 }
 
+// 审批节点信息
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /**
  * 设置表单权限
  */
 const setFieldPermission = (field: string, permission: string) => {
   if (permission === FieldPermissionType.READ) {
+    //@ts-ignore
     fApi.value?.disabled(true, field)
   }
   if (permission === FieldPermissionType.WRITE) {
+    //@ts-ignore
     fApi.value?.disabled(false, field)
   }
   if (permission === FieldPermissionType.NONE) {
+    //@ts-ignore
     fApi.value?.hidden(true, field)
   }
 }
@@ -264,9 +280,6 @@ const getTaskList = async () => {
         return b.createTime - a.createTime
       }
     })
-
-    // 获得需要自己审批的任务
-    //operationButtonRef.value?.loadRunningTask(tasks.value)
   } finally {
     tasksLoad.value = false
   }
@@ -278,8 +291,6 @@ const getTaskList = async () => {
 const refresh = () => {
   // 重新获取详情
   getDetail()
-  // 刷新审批详情 Timeline
-  timelineRef.value?.refresh()
 }
 
 /** 当前的Tab */