Vue3 重构：流程实例的详情（流程任务列表）

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

@@ -97,9 +97,9 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
+import { useUserStore } from '@/store/modules/user'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import { useUserStore } from '@/store/modules/user'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
@@ -177,16 +177,19 @@ const handleBack = async (task) => {
   console.log(task)
 }
 
-// ========== 初始化 ==========
+/** 获得详情 */
-onMounted(() => {
-  getDetail()
-})
-
 const getDetail = () => {
   // 1. 获得流程实例相关
+  getProcessInstance()
+  // 2. 获得流程任务列表（审批记录）
+  getTaskList()
+}
+
+/** 加载流程实例 */
+const getProcessInstance = async () => {
+  try {
     processInstanceLoading.value = true
-  ProcessInstanceApi.getProcessInstanceApi(id)
+    const data = await ProcessInstanceApi.getProcessInstanceApi(id)
-    .then((data) => {
     if (!data) {
       message.error('查询不到流程信息！')
       return
@@ -210,29 +213,26 @@ const getDetail = () => {
     }
 
     // 加载流程图
-      DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => {
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id)
-        bpmnXML.value = data
+  } finally {
-      })
-    })
-    .finally(() => {
     processInstanceLoading.value = false
-    })
+  }
+}
 
-  // 2. 获得流程任务列表（审批记录）
+/** 加载任务列表 */
+const getTaskList = async () => {
+  try {
+    // 获得未取消的任务
     tasksLoad.value = true
-  runningTasks.value = []
+    const data = await TaskApi.getTaskListByProcessInstanceId(id)
-  auditForms.value = []
-  TaskApi.getTaskListByProcessInstanceId(id)
-    .then((data) => {
-      // 审批记录
     tasks.value = []
-      // 移除已取消的审批
+    // 1.1 移除已取消的审批
     data.forEach((task) => {
       if (task.result !== 4) {
         tasks.value.push(task)
       }
     })
-      // 排序，将未完成的排在前面，已完成的排在后面；
+    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
     tasks.value.sort((a, b) => {
       // 有已完成的情况，按照完成时间倒序
       if (a.endTime && b.endTime) {
@@ -247,25 +247,31 @@ const getDetail = () => {
       }
     })
 
-      // 需要审核的记录
+    // 获得需要自己审批的任务
+    runningTasks.value = []
+    auditForms.value = []
     tasks.value.forEach((task) => {
-        // 1.1 只有待处理才需要
+      // 2.1 只有待处理才需要
       if (task.result !== 1) {
         return
       }
-        // 1.2 自己不是处理人
+      // 2.2 自己不是处理人
       if (!task.assigneeUser || task.assigneeUser.id !== userId) {
         return
       }
-        // 2. 添加到处理任务
+      // 2.3 添加到处理任务
       runningTasks.value.push({ ...task })
       auditForms.value.push({
         reason: ''
       })
     })
-    })
+  } finally {
-    .finally(() => {
     tasksLoad.value = false
-    })
+  }
 }
+
+/** 初始化 */
+onMounted(() => {
+  getDetail()
+})
 </script>