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,95 +177,101 @@ const handleBack = async (task) => {
   console.log(task)
 }
 
-// ========== 初始化 ==========
+/** 获得详情 */
+const getDetail = () => {
+  // 1. 获得流程实例相关
+  getProcessInstance()
+  // 2. 获得流程任务列表（审批记录）
+  getTaskList()
+}
+
+/** 加载流程实例 */
+const getProcessInstance = async () => {
+  try {
+    processInstanceLoading.value = true
+    const data = await ProcessInstanceApi.getProcessInstanceApi(id)
+    if (!data) {
+      message.error('查询不到流程信息！')
+      return
+    }
+    processInstance.value = data
+
+    // 设置表单信息
+    const processDefinition = data.processDefinition
+    if (processDefinition.formType === 10) {
+      setConfAndFields2(
+        detailForm,
+        processDefinition.formConf,
+        processDefinition.formFields,
+        data.formVariables
+      )
+      nextTick().then(() => {
+        fApi.value?.fapi?.btn.show(false)
+        fApi.value?.fapi?.resetBtn.show(false)
+        fApi.value?.fapi?.disabled(true)
+      })
+    }
+
+    // 加载流程图
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id)
+  } finally {
+    processInstanceLoading.value = false
+  }
+}
+
+/** 加载任务列表 */
+const getTaskList = async () => {
+  try {
+    // 获得未取消的任务
+    tasksLoad.value = true
+    const data = await TaskApi.getTaskListByProcessInstanceId(id)
+    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) {
+        return b.endTime - a.endTime
+      } else if (a.endTime) {
+        return 1
+      } else if (b.endTime) {
+        return -1
+        // 都是未完成，按照创建时间倒序
+      } else {
+        return b.createTime - a.createTime
+      }
+    })
+
+    // 获得需要自己审批的任务
+    runningTasks.value = []
+    auditForms.value = []
+    tasks.value.forEach((task) => {
+      // 2.1 只有待处理才需要
+      if (task.result !== 1) {
+        return
+      }
+      // 2.2 自己不是处理人
+      if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+        return
+      }
+      // 2.3 添加到处理任务
+      runningTasks.value.push({ ...task })
+      auditForms.value.push({
+        reason: ''
+      })
+    })
+  } finally {
+    tasksLoad.value = false
+  }
+}
+
+/** 初始化 */
 onMounted(() => {
   getDetail()
 })
-
-const getDetail = () => {
-  // 1. 获得流程实例相关
-  processInstanceLoading.value = true
-  ProcessInstanceApi.getProcessInstanceApi(id)
-    .then((data) => {
-      if (!data) {
-        message.error('查询不到流程信息！')
-        return
-      }
-      processInstance.value = data
-
-      // 设置表单信息
-      const processDefinition = data.processDefinition
-      if (processDefinition.formType === 10) {
-        setConfAndFields2(
-          detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
-        )
-        nextTick().then(() => {
-          fApi.value?.fapi?.btn.show(false)
-          fApi.value?.fapi?.resetBtn.show(false)
-          fApi.value?.fapi?.disabled(true)
-        })
-      }
-
-      // 加载流程图
-      DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => {
-        bpmnXML.value = data
-      })
-    })
-    .finally(() => {
-      processInstanceLoading.value = false
-    })
-
-  // 2. 获得流程任务列表（审批记录）
-  tasksLoad.value = true
-  runningTasks.value = []
-  auditForms.value = []
-  TaskApi.getTaskListByProcessInstanceId(id)
-    .then((data) => {
-      // 审批记录
-      tasks.value = []
-      // 移除已取消的审批
-      data.forEach((task) => {
-        if (task.result !== 4) {
-          tasks.value.push(task)
-        }
-      })
-      // 排序，将未完成的排在前面，已完成的排在后面；
-      tasks.value.sort((a, b) => {
-        // 有已完成的情况，按照完成时间倒序
-        if (a.endTime && b.endTime) {
-          return b.endTime - a.endTime
-        } else if (a.endTime) {
-          return 1
-        } else if (b.endTime) {
-          return -1
-          // 都是未完成，按照创建时间倒序
-        } else {
-          return b.createTime - a.createTime
-        }
-      })
-
-      // 需要审核的记录
-      tasks.value.forEach((task) => {
-        // 1.1 只有待处理才需要
-        if (task.result !== 1) {
-          return
-        }
-        // 1.2 自己不是处理人
-        if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-          return
-        }
-        // 2. 添加到处理任务
-        runningTasks.value.push({ ...task })
-        auditForms.value.push({
-          reason: ''
-        })
-      })
-    })
-    .finally(() => {
-      tasksLoad.value = false
-    })
-}
 </script>