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

3a9197df · jason · 842fe09e · 3a9197df · 3a9197df · 3a9197df
Commit 3a9197df authored Oct 16, 2024 by jason
5 changed files
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -87,14 +87,8 @@ export const getProcessInstanceCopyPage = async (params: any) => {
 }
 // 获取审批详情
-export const getApprovalDetail = async (
+export const getApprovalDetail = async (params: any) => {
-  processInstanceId?: string,
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail' , params })
-  processDefinitionId?: string
-) => {
-  const param = processInstanceId
-    ? '?processInstanceId=' + processInstanceId
-    : '?processDefinitionId=' + processDefinitionId
-  return await request.get({ url: 'bpm/process-instance/get-approval-detail' + param })
 }
 // 获取表单字段权限

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

--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/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 loadTodoTask = (task: any) => {
-const getMyTodoTask = async () => {
  genericForm.value = {}
  approveForm.value = {}
  approveFormFApi.value = {}
-  const data = await TaskApi.myTodoTask(props.processInstanceId)
+  runningTask.value = task
-  runningTask.value = data
  // 处理 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 () => {
+defineExpose({ loadTodoTask })
-  await getMyTodoTask()
-})
 </script>
 <style lang="scss" scoped>

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/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({
+// const props = defineProps({
-  // 流程实例编号
+//   // 流程实例编号
-  processInstanceId: {
+//   processInstanceId: {
-    type: String,
+//     type: String,
-    required: false,
+//     required: false,
-    default: ''
+//     default: ''
-  },
+//   },
-  // 流程定义编号
+//   // 流程定义编号
-  processDefinitionId: {
+//   processDefinitionId: {
-    type: String,
+//     type: String,
-    required: false,
+//     required: false,
-    default: ''
+//     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 getApprovalDetail = async () => {
-  const data = await ProcessInstanceApi.getApprovalDetail(
+//   const data = await ProcessInstanceApi.getApprovalDetail(
-    props.processInstanceId,
+//     props.processInstanceId,
-    props.processDefinitionId
+//     props.processDefinitionId
-  )
+//   )
-  approveNodes.value = data.approveNodes
+//   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 = () => {
+// const refresh = () => {
-  getApprovalDetail()
+//   getApprovalDetail()
-}
+// }
-defineExpose({ refresh })
+// defineExpose({ refresh })
-onMounted(async () => {
+// onMounted(async () => {
-  await getApprovalDetail()
+//   await getApprovalDetail()
-})
+// })
 </script>
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/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. 获得流程实例相关
+  // 1. 获取审批详情
-  getProcessInstance()
+  getApprovalDetail()
  // 2. 获得流程任务列表
  getTaskList()
 }
 /** 加载流程实例 */
 const BusinessFormComponent = ref<any>(null) // 异步组件
-const getProcessInstance = async () => {
+/** 获取审批详情 */
-  try {
+const getApprovalDetail = async () => {
  processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(props.id)
+  try {
+    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.value.formType === 10) {
-    if (processDefinition.formType === 10) {
      // 获取表单字段权限
-      let fieldsPermission = undefined
+      const formFieldsPermission = data.formFieldsPermission
-      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 表单不显示
+      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 显示不了，
-        detailForm.value.value = data.formVariables
+        detailForm.value.value = processInstance.value.formVariables
      } else {
        setConfAndFields2(
          detailForm,
-          processDefinition.formConf,
+          processDefinition.value.formConf,
-          processDefinition.formFields,
+          processDefinition.value.formFields,
-          data.formVariables
+          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) => {
+        if (formFieldsPermission) {
-            setFieldPermission(item, fieldsPermission[item])
+          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 */