From 988eae1bb3e0171055e47c791ec522e4b0ad6904 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Wed, 22 May 2024 19:14:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2-=E8=A7=A3=E5=86=B3ref=E5=AE=9A=E4=B9=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=AF=BC=E8=87=B4=E6=80=A7=E8=83=BD=E8=AD=A6=E5=91=8A?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/index.vue      | 609 +++++++++---------
 1 file changed, 292 insertions(+), 317 deletions(-)

diff --git a/src/views/system/bpm/processInstance/detail/index.vue b/src/views/system/bpm/processInstance/detail/index.vue
index e71a4c13..ea872d6d 100644
--- a/src/views/system/bpm/processInstance/detail/index.vue
+++ b/src/views/system/bpm/processInstance/detail/index.vue
@@ -1,160 +1,144 @@
 <template>
-  <div class='default-main'>
-    <!--返回按钮-->
-    <back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
-    <el-tabs type='border-card' v-model='tab'>
-      <el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
-        <el-card
-            v-for='(item, index) in runningTasks'
-            :key='index'
-            v-loading='processInstanceLoading'
-            class='box-card'
-        >
-          <template #header>
-            <span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
-          </template>
-          <el-col :offset='6' :span='16'>
-            <el-form
-                :ref="'form' + index"
-                :model='auditForms[index]'
-                :rules='auditRule'
-                label-width='100px'
-            >
-              <el-form-item v-if='processInstance && processInstance.name' label='流程名'>
-                {{ processInstance.name }}
-              </el-form-item>
-              <el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
-                {{ processInstance?.startUser.name }}
-              </el-form-item>
-              <el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
-                {{ processInstance?.startUser.deptName }}
-              </el-form-item>
+    <div class="default-main">
+        <!--返回按钮-->
+        <back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
+        <el-tabs type="border-card" v-model="tab">
+            <el-tab-pane label="流程审核" name="流程审核" v-if="runningTasks.length > 0">
+                <el-card
+                    v-for="(item, index) in runningTasks"
+                    :key="index"
+                    v-loading="processInstanceLoading"
+                    class="box-card"
+                >
+                    <template #header>
+                        <span class="el-icon-picture-outline">当前任务【{{ item.name }}】</span>
+                    </template>
+                    <el-col :offset="6" :span="16">
+                        <el-form
+                            :ref="'form' + index"
+                            :model="auditForms[index]"
+                            :rules="auditRule"
+                            label-width="100px"
+                        >
+                            <el-form-item v-if="processInstance && processInstance.name" label="流程名">
+                                {{ processInstance.name }}
+                            </el-form-item>
+                            <el-form-item v-if="processInstance && processInstance.startUser" label="发起人">
+                                {{ processInstance?.startUser.name }}
+                            </el-form-item>
+                            <el-form-item v-if="processInstance && processInstance.startUser" label="发起部门">
+                                {{ processInstance?.startUser.deptName }}
+                            </el-form-item>
 
-              <el-card v-if='runningTasks[index].formId != null' class='mb-15px !-mt-10px'>
-                <template #header>
-                  <span class='el-icon-picture-outline'>
-                    {{ runningTasks[index]?.formName }}
-                  </span>
-                </template>
-                <form-create
-                    v-model='approveForms[index].value'
-                    v-model:api='approveFormFApis[index]'
-                    :option='approveForms[index].option'
-                    :rule='approveForms[index].rule'
+                            <el-card v-if="runningTasks[index].formId != null" class="mb-15px !-mt-10px">
+                                <template #header>
+                                    <span class="el-icon-picture-outline">
+                                        {{ runningTasks[index]?.formName }}
+                                    </span>
+                                </template>
+                                <form-create
+                                    v-model="approveForms[index].value"
+                                    v-model:api="approveFormFApis[index]"
+                                    :option="approveForms[index].option"
+                                    :rule="approveForms[index].rule"
+                                />
+                            </el-card>
+
+                            <el-form-item label="审批建议" prop="reason" style="margin-top: 15px">
+                                <el-input
+                                    v-model="auditForms[index].reason"
+                                    placeholder="请输入审批建议"
+                                    type="textarea"
+                                />
+                            </el-form-item>
+                            <!--                <el-form-item label='抄送人' prop='copyUserIds'>-->
+                            <!--                  <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
+                            <!--                    <el-option-->
+                            <!--                        v-for='item in userOptions'-->
+                            <!--                        :key='item.id'-->
+                            <!--                        :label='item.nickname'-->
+                            <!--                        :value='item.id'-->
+                            <!--                    />-->
+                            <!--                  </el-select>-->
+                            <!--                </el-form-item>-->
+                        </el-form>
+                        <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
+                            <el-button type="success" :icon="Select" @click="handleAudit(item, true)">通过</el-button>
+
+                            <el-button type="danger" :icon="Close" @click="handleAudit(item, false)">不通过</el-button>
+
+                            <!--                <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
+                            <!--                  <Icon icon='ep:edit' />-->
+                            <!--                  转办-->
+                            <!--                </el-button>-->
+                            <!--                <el-button type='primary' @click='handleDelegate(item)'>-->
+                            <!--                  <Icon icon='ep:position' />-->
+                            <!--                  委派-->
+                            <!--                </el-button>-->
+                            <!--                <el-button type='primary' @click='handleSign(item)'>-->
+                            <!--                  <Icon icon='ep:plus' />-->
+                            <!--                  加签-->
+                            <!--                </el-button>-->
+
+                            <el-button type="warning" :icon="Back" @click="handleBack(item)">回退</el-button>
+                        </div>
+                    </el-col>
+                </el-card>
+            </el-tab-pane>
+            <el-tab-pane label="申请信息" name="申请信息">
+                <!-- 申请信息 -->
+                <el-card v-loading="processInstanceLoading" class="box-card">
+                    <template #header>
+                        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+                    </template>
+                    <!-- 情况一：流程表单 -->
+                    <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
+                        <form-create
+                            v-model="detailForm.value"
+                            v-model:api="fApi"
+                            :option="detailForm.option"
+                            :rule="detailForm.rule"
+                        />
+                    </el-col>
+                    <!-- 情况二：业务表单 -->
+                    <div v-if="processInstance?.processDefinition?.formType === 20">
+                        <BusinessFormComponent :id="processInstance.businessKey" :applyTitle="processInstance.name" />
+                    </div>
+                </el-card>
+            </el-tab-pane>
+            <el-tab-pane label="审批记录" name="审批记录">
+                <!-- 审批记录 -->
+                <ProcessInstanceTaskList
+                    :loading="tasksLoad"
+                    :process-instance="processInstance"
+                    :tasks="tasks"
+                    @refresh="getTaskList"
                 />
-              </el-card>
-
-              <el-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
-                <el-input
-                    v-model='auditForms[index].reason'
-                    placeholder='请输入审批建议'
-                    type='textarea'
-                />
-              </el-form-item>
-              <!--                <el-form-item label='抄送人' prop='copyUserIds'>-->
-              <!--                  <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
-              <!--                    <el-option-->
-              <!--                        v-for='item in userOptions'-->
-              <!--                        :key='item.id'-->
-              <!--                        :label='item.nickname'-->
-              <!--                        :value='item.id'-->
-              <!--                    />-->
-              <!--                  </el-select>-->
-              <!--                </el-form-item>-->
-            </el-form>
-            <div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
-
-              <el-button
-                  type='success'
-                  :icon='Select'
-                  @click='handleAudit(item, true)'
-              >通过
-              </el-button>
-
-              <el-button
-                  type='danger'
-                  :icon='Close'
-                  @click='handleAudit(item, false)'
-              >不通过
-              </el-button>
-
-              <!--                <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
-              <!--                  <Icon icon='ep:edit' />-->
-              <!--                  转办-->
-              <!--                </el-button>-->
-              <!--                <el-button type='primary' @click='handleDelegate(item)'>-->
-              <!--                  <Icon icon='ep:position' />-->
-              <!--                  委派-->
-              <!--                </el-button>-->
-              <!--                <el-button type='primary' @click='handleSign(item)'>-->
-              <!--                  <Icon icon='ep:plus' />-->
-              <!--                  加签-->
-              <!--                </el-button>-->
-
-              <el-button
-                  type='warning'
-                  :icon='Back'
-                  @click='handleBack(item)'
-              >回退
-              </el-button>
-            </div>
-          </el-col>
-        </el-card>
-      </el-tab-pane>
-      <el-tab-pane label='申请信息' name='申请信息'>
-        <!-- 申请信息 -->
-        <el-card v-loading='processInstanceLoading' class='box-card'>
-          <template #header>
-            <span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
-          </template>
-          <!-- 情况一：流程表单 -->
-          <el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
-            <form-create
-                v-model='detailForm.value'
-                v-model:api='fApi'
-                :option='detailForm.option'
-                :rule='detailForm.rule'
-            />
-          </el-col>
-          <!-- 情况二：业务表单 -->
-          <div v-if='processInstance?.processDefinition?.formType === 20'>
-            <BusinessFormComponent :id='processInstance.businessKey' :applyTitle='processInstance.name' />
-          </div>
-        </el-card>
-      </el-tab-pane>
-      <el-tab-pane label='审批记录' name='审批记录'>
-        <!-- 审批记录 -->
-        <ProcessInstanceTaskList
-            :loading='tasksLoad'
-            :process-instance='processInstance'
-            :tasks='tasks'
-            @refresh='getTaskList'
-        />
-      </el-tab-pane>
-      <!--            <el-tab-pane label='流程图'>-->
-      <!--                &lt;!&ndash; 高亮流程图 &ndash;&gt;-->
-      <!--                &lt;!&ndash;    <ProcessInstanceBpmnViewer&ndash;&gt;-->
-      <!--                &lt;!&ndash;      :id="`${id}`"&ndash;&gt;-->
-      <!--                &lt;!&ndash;      :bpmn-xml="bpmnXml"&ndash;&gt;-->
-      <!--                &lt;!&ndash;      :loading="processInstanceLoading"&ndash;&gt;-->
-      <!--                &lt;!&ndash;      :process-instance="processInstance"&ndash;&gt;-->
-      <!--                &lt;!&ndash;      :tasks="tasks"&ndash;&gt;-->
-      <!--                &lt;!&ndash;    />&ndash;&gt;</el-tab-pane>-->
-    </el-tabs>
-    <ContentWrap>
-      <!-- 弹窗：转派审批人 -->
-      <TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
-      <!-- 弹窗：回退节点 -->
-      <TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
-      <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-      <TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
-      <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-      <TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
-    </ContentWrap>
-  </div>
+            </el-tab-pane>
+            <!--            <el-tab-pane label='流程图'>-->
+            <!--                &lt;!&ndash; 高亮流程图 &ndash;&gt;-->
+            <!--                &lt;!&ndash;    <ProcessInstanceBpmnViewer&ndash;&gt;-->
+            <!--                &lt;!&ndash;      :id="`${id}`"&ndash;&gt;-->
+            <!--                &lt;!&ndash;      :bpmn-xml="bpmnXml"&ndash;&gt;-->
+            <!--                &lt;!&ndash;      :loading="processInstanceLoading"&ndash;&gt;-->
+            <!--                &lt;!&ndash;      :process-instance="processInstance"&ndash;&gt;-->
+            <!--                &lt;!&ndash;      :tasks="tasks"&ndash;&gt;-->
+            <!--                &lt;!&ndash;    />&ndash;&gt;</el-tab-pane>-->
+        </el-tabs>
+        <ContentWrap>
+            <!-- 弹窗：转派审批人 -->
+            <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
+            <!-- 弹窗：回退节点 -->
+            <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
+            <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
+            <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
+            <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+            <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
+        </ContentWrap>
+    </div>
 </template>
-<script lang='ts' setup>
-import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
+<script lang="ts" setup>
+import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick ,markRaw} from 'vue'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/stores/modules/user'
 import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
@@ -181,11 +165,10 @@ defineOptions({ name: 'BpmProcessInstanceDetail' })
 const { query } = useRoute() // 查询参数
 const { proxy } = getCurrentInstance() as any
 
-const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id// 当前登录的编号
-
+const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id // 当前登录的编号
 
 const id = query.id as unknown as string // 流程实例的编号
-const todo = query.todo// 是否存在待办事项
+const todo = query.todo // 是否存在待办事项
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref({}) // 流程实例
 const bpmnXml = ref('') // BPMN XML
@@ -195,7 +178,7 @@ const tasks = ref<any[]>([]) // 任务列表
 const runningTasks = ref<any[]>([]) // 运行中的任务
 const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+    reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
 const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
 const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
@@ -203,211 +186,203 @@ const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
 const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
+    rule: [],
+    option: {},
+    value: {}
 }) // 流程实例的表单详情
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
 watch(
     () => approveFormFApis.value,
-    (value) => {
-      value?.forEach((api) => {
-        api.btn.show(false)
-        api.resetBtn.show(false)
-      })
+    value => {
+        value?.forEach(api => {
+            api.btn.show(false)
+            api.resetBtn.show(false)
+        })
     },
     {
-      deep: true
+        deep: true
     }
 )
 
 /** 处理审批通过和不通过的操作 */
 const handleAudit = async (task, pass) => {
-  // 1.1 获得对应表单
-  const index = runningTasks.value.indexOf(task)
-  const auditFormRef = proxy.$refs['form' + index][0]
-  // 1.2 校验表单
-  const elForm = unref(auditFormRef)
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
+    // 1.1 获得对应表单
+    const index = runningTasks.value.indexOf(task)
+    const auditFormRef = proxy.$refs['form' + index][0]
+    // 1.2 校验表单
+    const elForm = unref(auditFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
 
-  // 2.1 提交审批
-  const data = {
-    id: task.id,
-    reason: auditForms.value[index].reason,
-    copyUserIds: auditForms.value[index].copyUserIds
-  }
-  if (pass) {
-    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
-    const formCreateApi = approveFormFApis.value[index]
-    if (formCreateApi) {
-      await formCreateApi.validate()
-      data.variables = approveForms.value[index].value
+    // 2.1 提交审批
+    const data = {
+        id: task.id,
+        reason: auditForms.value[index].reason,
+        copyUserIds: auditForms.value[index].copyUserIds
     }
-    await approveTask(data)
-    tab.value = '审批记录'
-    ElMessage.success('审批通过成功')
-  } else {
-    await rejectTask(data)
-    tab.value = '审批记录'
-    ElMessage.success('审批不通过成功')
-  }
-  // 2.2 加载最新数据
-  getDetail()
+    if (pass) {
+        // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+        const formCreateApi = approveFormFApis.value[index]
+        if (formCreateApi) {
+            await formCreateApi.validate()
+            data.variables = approveForms.value[index].value
+        }
+        await approveTask(data)
+        tab.value = '审批记录'
+        ElMessage.success('审批通过成功')
+    } else {
+        await rejectTask(data)
+        tab.value = '审批记录'
+        ElMessage.success('审批不通过成功')
+    }
+    // 2.2 加载最新数据
+    getDetail()
 }
 
 /** 转派审批人 */
 const taskTransferFormRef = ref()
 const openTaskUpdateAssigneeForm = (id: string) => {
-  taskTransferFormRef.value.open(id)
+    taskTransferFormRef.value.open(id)
 }
 
 /** 处理审批委托的操作 */
 const taskDelegateForm = ref()
-const handleDelegate = async (task) => {
-  taskDelegateForm.value.open(task.id)
+const handleDelegate = async task => {
+    taskDelegateForm.value.open(task.id)
 }
 
 /** 处理审批退回的操作 */
 const taskReturnFormRef = ref()
 const handleBack = async (task: any) => {
-  taskReturnFormRef.value.open(task.id)
+    taskReturnFormRef.value.open(task.id)
 }
 
 /** 处理审批加签的操作 */
 const taskSignCreateFormRef = ref()
 const handleSign = async (task: any) => {
-  taskSignCreateFormRef.value.open(task.id)
+    taskSignCreateFormRef.value.open(task.id)
 }
 
 /** 获得详情 */
 const getDetail = () => {
-  // 1. 获得流程实例相关
-  getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
-  getTaskList()
+    // 1. 获得流程实例相关
+    getProcessInstance()
+    // 2. 获得流程任务列表（审批记录）
+    getTaskList()
 }
 
 /** 加载流程实例 */
 const BusinessFormComponent = ref(null) // 异步组件
 const getProcessInstance = async () => {
-  try {
-    processInstanceLoading.value = true
-    let data
-    await getProcessInstanceById(id).then(res => {
-      data = res.data
-    })
+    try {
+        processInstanceLoading.value = true
+        let data
+        await getProcessInstanceById(id).then(res => {
+            data = res.data
+        })
 
-    if (!data) {
-      ElMessage.error('查询不到流程信息！')
-      return
+        if (!data) {
+            ElMessage.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?.btn.show(false)
+                fApi.value?.resetBtn.show(false)
+                fApi.value?.disabled(true)
+            })
+        } else {
+            // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+            BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
+        }
+
+        // 加载流程图
+        bpmnXml.value = (await getProcessDefinitionById(processDefinition.id))?.bpmnXml
+    } finally {
+        processInstanceLoading.value = false
     }
-    processInstance.value = data
-    // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
-      setConfAndFields2(
-          detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
-      )
-      nextTick().then(() => {
-        fApi.value?.btn.show(false)
-        fApi.value?.resetBtn.show(false)
-        fApi.value?.disabled(true)
-      })
-    } else {
-
-      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
-    }
-
-    // 加载流程图
-    bpmnXml.value = (
-        await getProcessDefinitionById(processDefinition.id)
-    )?.bpmnXml
-  } finally {
-    processInstanceLoading.value = false
-  }
 }
 
 /** 加载任务列表 */
 const getTaskList = async () => {
-  runningTasks.value = []
-  auditForms.value = []
-  approveForms.value = []
-  approveFormFApis.value = []
-  try {
-    // 获得未取消的任务
-    tasksLoad.value = true
-    let data
-    await getTaskListByProcessInstanceId(id).then(res => {
-      data = res.data
-    })
-    tasks.value = []
-    // 1.1 移除已取消的审批
-    data.forEach((task) => {
-      if (task.status !== 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 = []
+    approveForms.value = []
+    approveFormFApis.value = []
+    try {
+        // 获得未取消的任务
+        tasksLoad.value = true
+        let data
+        await getTaskListByProcessInstanceId(id).then(res => {
+            data = res.data
+        })
+        tasks.value = []
+        // 1.1 移除已取消的审批
+        data.forEach(task => {
+            if (task.status !== 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
+            }
+        })
 
-    // 获得需要自己审批的任务
-    loadRunningTask(tasks.value)
-  } finally {
-    tasksLoad.value = false
-  }
+        // 获得需要自己审批的任务
+        loadRunningTask(tasks.value)
+    } finally {
+        tasksLoad.value = false
+    }
 }
 
 /**
  * 设置 runningTasks 中的任务
  */
-const loadRunningTask = (tasks) => {
-  tasks.forEach((task) => {
-    if (!isEmpty(task.children)) {
-      loadRunningTask(task.children)
-    }
-    // 2.1 只有待处理才需要
-    if (task.status !== 1 && task.status !== 6) {
-      return
-    }
-    // 2.2 自己不是处理人
-    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-      return
-    }
-    // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
-    auditForms.value.push({
-      reason: '',
-      copyUserIds: []
+const loadRunningTask = tasks => {
+    tasks.forEach(task => {
+        if (!isEmpty(task.children)) {
+            loadRunningTask(task.children)
+        }
+        // 2.1 只有待处理才需要
+        if (task.status !== 1 && task.status !== 6) {
+            return
+        }
+        // 2.2 自己不是处理人
+        if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+            return
+        }
+        // 2.3 添加到处理任务
+        runningTasks.value.push({ ...task })
+        auditForms.value.push({
+            reason: '',
+            copyUserIds: []
+        })
+        console.log(runningTasks.value)
+        // 2.4 处理 approve 表单
+        if (task.formId && task.formConf) {
+            const approveForm = {}
+            setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
+            approveForms.value.push(approveForm)
+        } else {
+            approveForms.value.push({}) // 占位，避免为空
+        }
     })
-      console.log(runningTasks.value)
-    // 2.4 处理 approve 表单
-    if (task.formId && task.formConf) {
-      const approveForm = {}
-      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
-      approveForms.value.push(approveForm)
-    } else {
-      approveForms.value.push({}) // 占位，避免为空
-    }
-  })
 }
 
 const tab = ref('')
@@ -415,15 +390,15 @@ const tab = ref('')
 /** 初始化 */
 const userOptions = ref([]) // 用户列表
 onMounted(async () => {
-  getDetail()
-  // 获得用户列表
-  await getUserSimpleList().then(res => {
-    userOptions.value = res.data
-  })
-  if (todo) {
-    tab.value = '流程审核'
-  } else {
-    tab.value = '申请信息'
-  }
+    getDetail()
+    // 获得用户列表
+    await getUserSimpleList().then(res => {
+        userOptions.value = res.data
+    })
+    if (todo) {
+        tab.value = '流程审核'
+    } else {
+        tab.value = '申请信息'
+    }
 })
 </script>