From 15ee7efa6ee13f3fa108fb5d60bbc0f8931fae8a Mon Sep 17 00:00:00 2001
From: hongawen <83944980@qq.com>
Date: Tue, 4 Jun 2024 13:48:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E5=8F=91=E8=B5=B7=E7=9A=84=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTaskList.vue        | 394 +++++------
 .../bpm/processInstance/detail/index.vue      | 617 +++++++++---------
 src/views/system/bpm/task/done/index.vue      | 173 ++---
 src/views/system/bpm/task/index.vue           |  40 +-
 .../system/bpm/task/myInstance/index.vue      | 138 ++++
 src/views/system/bpm/task/todo/index.vue      | 123 ++--
 6 files changed, 822 insertions(+), 663 deletions(-)
 create mode 100644 src/views/system/bpm/task/myInstance/index.vue

diff --git a/src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue
index fca3d278..233ebaf7 100644
--- a/src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -1,105 +1,103 @@
 <template>
-    <el-card v-loading="loading" class="box-card">
-        <el-col :offset="3" :span="17">
-            <div class="item_line">
-                <el-timeline>
-                    <div class="end_item_line">
-                        <div class="end_item_lines"></div>
-                        <el-timeline-item
-                            v-if="processInstance.endTime"
-                            :type="getProcessInstanceTimelineItemType(processInstance)"
-                        >
-                            <p style="font-weight: 700">
-                                结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
-                                <el-tag :type="getTaskTimelineItemType(processInstance.status)">
-                                    {{ getTaskNameItemType(processInstance.status) }}
-                                </el-tag>
-                            </p>
-                        </el-timeline-item>
-                    </div>
-                    <div class="start_item_line" v-for="(item, index) in tasksList" :key="index">
-                        <div class="start_item_lines"></div>
-                        <!-- 最后一条不显示重新发起 -->
-                        <el-timeline-item type="success" v-if="index != 0 && item.status != '1'">
-                            <p style="font-weight: 700">
-                                重新发起：【{{ item.processInstance.startUser?.name }}】在
-                                {{ formatDate(item?.createTime) }} 重新发起【 {{ item.processInstance.name }} 】流程
-                            </p>
-                        </el-timeline-item>
-                        <el-timeline-item :type="getTaskTimelineItemType(item)">
-                            <p style="font-weight: 700; margin: 8px">
-                                审批任务：{{ item.name }}
-                                <el-tag :type="getTaskTimelineItemType(item.status)">
-                                    {{ getTaskNameItemType(item.status) }}
-                                </el-tag>
-                                <el-button
-                                    class="ml-10px"
-                                    v-if="!isEmpty(item.children)"
-                                    @click="openChildrenTask(item)"
-                                    size="small"
-                                >
-                                    <Icon icon="ep:memo" />
-                                    子任务
-                                </el-button>
-                                <el-button
-                                    class="ml-10px"
-                                    size="small"
-                                    v-if="item.formId > 0"
-                                    @click="handleFormDetail(item)"
-                                >
-                                    <Icon icon="ep:document" />
-                                    查看表单
-                                </el-button>
-                            </p>
-                            <el-card :body-style="{ padding: '10px' }">
-                                <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
-                                    审批人：{{ item.assigneeUser.name }}
-                                    <el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
-                                </label>
-                                <label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
-                                <label style="font-weight: normal; color: #8a909c">
-                                    {{ formatDate(item?.createTime) }}
-                                </label>
-                                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
-                                    审批时间：
-                                </label>
-                                <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
-                                    {{ formatDate(item?.endTime) }}
-                                </label>
-                                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
-                                    耗时：
-                                </label>
-                                <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
-                                    {{ formatPast2(item?.durationInMillis) }}
-                                </label>
-                                <p v-if="item.reason">审批建议：{{ item.reason }}</p>
-                            </el-card>
-                        </el-timeline-item>
-                    </div>
-                    <el-timeline-item type="success">
-                        <p style="font-weight: 700">
-                            发起流程：【{{ tasksList[tasksList.length - 1]?.processInstance.startUser?.name }}】在
-                            {{ formatDate(tasksList[tasksList.length - 1]?.createTime) }} 发起【
-                            {{ tasksList[tasksList.length - 1]?.processInstance.name }} 】流程
-                        </p>
-                    </el-timeline-item>
-                </el-timeline>
-            </div>
-        </el-col>
-    </el-card>
-    <!-- 弹窗：子任务  -->
-    <TaskSignList ref="taskSignListRef" @success="refresh" />
-    <!-- 弹窗：表单 -->
-    <el-dialog title="表单详情" v-model="taskFormVisible" width="600">
-        <form-create ref="fApi" v-model="taskForm.value" :option="taskForm.option" :rule="taskForm.rule" />
-    </el-dialog>
+  <el-card v-loading='loading' class='box-card'>
+    <el-col :offset='3' :span='17'>
+      <div class='item_line'>
+        <el-timeline>
+          <div class='end_item_line'>
+            <div class='end_item_lines'></div>
+            <el-timeline-item
+                v-if='processInstance.endTime'
+                :type='getProcessInstanceTimelineItemType(processInstance)'
+            >
+              <p style='font-weight: 700'>
+                结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
+                <el-tag :type='getTaskTimelineItemType(processInstance.status)'>
+                  {{ getTaskNameItemType(processInstance.status) }}
+                </el-tag>
+              </p>
+            </el-timeline-item>
+          </div>
+          <div class='start_item_line' v-for='(item, index) in tasksList' :key='index'>
+            <div class='start_item_lines'></div>
+            <!-- 最后一条不显示重新发起 -->
+            <el-timeline-item type='success' v-if="index != 0 && item.status != '1'">
+              <p style='font-weight: 700'>
+                重新发起：【{{ item.processInstance.startUser?.name }}】在
+                {{ formatDate(item?.createTime) }} 重新发起【 {{ item.processInstance.name }} 】流程
+              </p>
+            </el-timeline-item>
+            <el-timeline-item :type='getTaskTimelineItemType(item)'>
+              <p style='font-weight: 700; margin: 8px'>
+                审批任务：{{ item.name }}
+                <el-tag :type='getTaskTimelineItemType(item.status)'>
+                  {{ getTaskNameItemType(item.status) }}
+                </el-tag>
+                <el-button
+                    class='ml-10px'
+                    v-if='!isEmpty(item.children)'
+                    @click='openChildrenTask(item)'
+                    size='small'
+                >
+                  <Icon icon='ep:memo' />
+                  子任务
+                </el-button>
+                <el-button
+                    class='ml-10px'
+                    size='small'
+                    v-if='item.formId > 0'
+                    @click='handleFormDetail(item)'
+                >
+                  <Icon icon='ep:document' />
+                  查看表单
+                </el-button>
+              </p>
+              <el-card :body-style="{ padding: '10px' }">
+                <label v-if='item.assigneeUser' style='margin-right: 30px; font-weight: normal'>
+                  审批人：{{ item.assigneeUser.name }}
+                  <el-tag size='small' type='info'>{{ item.assigneeUser.deptName }}</el-tag>
+                </label>
+                <label v-if='item.createTime' style='font-weight: normal'>创建时间：</label>
+                <label style='font-weight: normal; color: #8a909c'>
+                  {{ formatDate(item?.createTime) }}
+                </label>
+                <label v-if='item.endTime' style='margin-left: 30px; font-weight: normal'>
+                  审批时间：
+                </label>
+                <label v-if='item.endTime' style='font-weight: normal; color: #8a909c'>
+                  {{ formatDate(item?.endTime) }}
+                </label>
+                <label v-if='item.durationInMillis' style='margin-left: 30px; font-weight: normal'>
+                  耗时：
+                </label>
+                <label v-if='item.durationInMillis' style='font-weight: normal; color: #8a909c'>
+                  {{ formatPast2(item?.durationInMillis) }}
+                </label>
+                <p v-if='item.reason'>审批建议：{{ item.reason }}</p>
+              </el-card>
+            </el-timeline-item>
+          </div>
+          <el-timeline-item type='success'>
+            <p style='font-weight: 700'>
+              发起流程：【{{ tasksList[tasksList.length - 1]?.processInstance.startUser?.name }}】在
+              {{ formatDate(tasksList[tasksList.length - 1]?.createTime) }} 发起【
+              {{ tasksList[tasksList.length - 1]?.processInstance.name }} 】流程
+            </p>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-col>
+  </el-card>
+  <!-- 弹窗：子任务  -->
+  <TaskSignList ref='taskSignListRef' @success='refresh' />
+  <!-- 弹窗：表单 -->
+  <el-dialog title='表单详情' v-model='taskFormVisible' width='600'>
+    <form-create ref='fApi' v-model='taskForm.value' :option='taskForm.option' :rule='taskForm.rule' />
+  </el-dialog>
 </template>
-<script lang="ts" setup>
-import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
+<script lang='ts' setup>
+import { ref, watch, nextTick } from 'vue'
 import { formatDate, formatPast2 } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
-import { DICT_TYPE } from '@/utils/dict'
 import { isEmpty } from '@/utils/is'
 import TaskSignList from './dialog/TaskSignList.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -108,149 +106,153 @@ import { setConfAndFields2 } from '@/utils/formCreate'
 defineOptions({ name: 'BpmProcessInstanceTaskList' })
 
 const props = defineProps({
-    loading: propTypes.bool, // 是否加载中
-    processInstance: propTypes.object, // 流程实例
-    tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+  loading: propTypes.bool, // 是否加载中
+  processInstance: propTypes.object, // 流程实例
+  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
 })
 const tasksList: any = ref([])
 watch(
     () => props.tasks,
     (val, oldVal) => {
-        if (val && val.length != 0) {
-            tasksList.value = JSON.parse(JSON.stringify(val)).sort((a, b) => {
-                // 有已完成的情况，按照完成时间倒序
-                // if (a.endTime && b.endTime) {
-                //     return sortYMDHMS(a.endTime) - sortYMDHMS(b.endTime)
-                // } else
-                // if (a.endTime) {
-                //     return 1
-                // }
-                // else if (b.endTime) {
-                //     return -1
-                //     // 都是未完成，按照创建时间倒序
-                // }
-                //  else
-                // {
-                return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
-                // }
-            })
-        }
+      if (val && val.length != 0) {
+        tasksList.value = JSON.parse(JSON.stringify(val)).sort((a, b) => {
+          // 有已完成的情况，按照完成时间倒序
+          // if (a.endTime && b.endTime) {
+          //     return sortYMDHMS(a.endTime) - sortYMDHMS(b.endTime)
+          // } else
+          // if (a.endTime) {
+          //     return 1
+          // }
+          // else if (b.endTime) {
+          //     return -1
+          //     // 都是未完成，按照创建时间倒序
+          // }
+          //  else
+          // {
+          return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
+          // }
+        })
+      }
     },
     {
-        immediate: true,
-        deep: true
+      immediate: true,
+      deep: true
     }
 )
 const sortYMDHMS = val => {
-    return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
+  return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
 }
 /** 获得流程实例对应的颜色 */
 const getProcessInstanceTimelineItemType = (item: any) => {
-    if (item.status === 2) {
-        return 'success'
-    }
-    if (item.status === 3) {
-        return 'danger'
-    }
-    if (item.status === 4) {
-        return 'warning'
-    }
-    return ''
+  if (item.status === 2) {
+    return 'success'
+  }
+  if (item.status === 3) {
+    return 'danger'
+  }
+  if (item.status === 4) {
+    return 'warning'
+  }
+  return ''
 }
 
 /** 获得任务对应的颜色 */
 const getTaskTimelineItemType = (itemStatus: any) => {
-    if ([0, 1, 6, 7].includes(itemStatus)) {
-        return 'primary'
-    }
-    if (itemStatus === 2) {
-        return 'success'
-    }
-    if (itemStatus === 3) {
-        return 'danger'
-    }
-    if (itemStatus === 4) {
-        return 'info'
-    }
-    if (itemStatus === 5) {
-        return 'warning'
-    }
+  if ([0, 1, 6, 7].includes(itemStatus)) {
     return 'primary'
+  }
+  if (itemStatus === 2) {
+    return 'success'
+  }
+  if (itemStatus === 3) {
+    return 'danger'
+  }
+  if (itemStatus === 4) {
+    return 'info'
+  }
+  if (itemStatus === 5) {
+    return 'warning'
+  }
+  return 'primary'
 }
 const getTaskNameItemType = (itemStatus: any) => {
-    if (itemStatus === 1) {
-        return '审批中'
-    }
-    if (itemStatus === 2) {
-        return '审批通过'
-    }
-    if (itemStatus === 3) {
-        return '审批不通过'
-    }
-    if (itemStatus === 4) {
-        return '已取消'
-    }
+  if (itemStatus === 1) {
     return '审批中'
+  }
+  if (itemStatus === 2) {
+    return '审批通过'
+  }
+  if (itemStatus === 3) {
+    return '审批不通过'
+  }
+  if (itemStatus === 4) {
+    return '已取消'
+  }
+  return '审批中'
 }
 
 /** 子任务 */
 const taskSignListRef = ref()
 const openChildrenTask = (item: any) => {
-    taskSignListRef.value.open(item)
+  taskSignListRef.value.open(item)
 }
 
 /** 查看表单 */
 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
 const taskForm = ref({
-    rule: [],
-    option: {},
-    value: {}
+  rule: [],
+  option: {},
+  value: {}
 }) // 流程任务的表单详情
 const taskFormVisible = ref(false)
 const handleFormDetail = async row => {
-    // 设置表单
-    setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
-    // 弹窗打开
-    taskFormVisible.value = true
-    // 隐藏提交、重置按钮，设置禁用只读
-    await nextTick()
-    fApi.value.fapi.btn.show(false)
-    fApi.value?.fapi?.resetBtn.show(false)
-    fApi.value?.fapi?.disabled(true)
+  // 设置表单
+  setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
+  // 弹窗打开
+  taskFormVisible.value = true
+  // 隐藏提交、重置按钮，设置禁用只读
+  await nextTick()
+  fApi.value.fapi.btn.show(false)
+  fApi.value?.fapi?.resetBtn.show(false)
+  fApi.value?.fapi?.disabled(true)
 }
 
 /** 刷新数据 */
 const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
 const refresh = () => {
-    emit('refresh')
+  emit('refresh')
 }
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .item_line {
-    .end_item_line {
-        position: relative;
-        .end_item_lines {
-            position: absolute;
-            left: 4px;
-            top: 10px;
-            width: 2px;
-            height: 100%;
-            background: #eeeeee;
-        }
+  .end_item_line {
+    position: relative;
+
+    .end_item_lines {
+      position: absolute;
+      left: 4px;
+      top: 10px;
+      width: 2px;
+      height: 100%;
+      background: #eeeeee;
     }
-    .start_item_line {
-        position: relative;
-        .start_item_lines {
-            position: absolute;
-            left: 4px;
-            top: 10px;
-            width: 2px;
-            height: 100%;
-            background: #eeeeee;
-        }
+  }
+
+  .start_item_line {
+    position: relative;
+
+    .start_item_lines {
+      position: absolute;
+      left: 4px;
+      top: 10px;
+      width: 2px;
+      height: 100%;
+      background: #eeeeee;
     }
+  }
 }
+
 ::v-deep .el-timeline-item__tail {
-    display: none !important;
+  display: none !important;
 }
 </style>
diff --git a/src/views/system/bpm/processInstance/detail/index.vue b/src/views/system/bpm/processInstance/detail/index.vue
index 93e194b6..e6df7dd6 100644
--- a/src/views/system/bpm/processInstance/detail/index.vue
+++ b/src/views/system/bpm/processInstance/detail/index.vue
@@ -1,145 +1,144 @@
 <!-- 流程详情页面 tab切换 -->
 <template>
-    <div class="default-main" style="overflow: hidden">
-        <!--返回按钮-->
-        <back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
-        <el-tabs type="border-card" v-model="tab" @tab-click="handleClickTab">
-            <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' style='overflow: hidden'>
+    <!--返回按钮-->
+    <back-component style='margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px' />
+    <el-tabs type='border-card' v-model='tab' @tab-click='handleClickTab'>
+      <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">
+              <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>
+                </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-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
+                <el-input
+                    v-model='auditForms[index].reason'
+                    placeholder='请输入审批建议'
+                    type='textarea'
                 />
-            </el-tab-pane>
-            <el-tab-pane label="流程图" name="流程图">
-                <ProcessInstanceBpmnViewer
-                    ref="mapRef"
-                    :id="`${id}`"
-                    :bpmn-xml="bpmnXml"
-                    :loading="processInstanceLoading"
-                    :process-instance="processInstance"
-                    :tasks="tasks"
-                />
-            </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-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='流程图' name='流程图'>
+        <ProcessInstanceBpmnViewer
+            ref='mapRef'
+            :id='`${id}`'
+            :bpmn-xml='bpmnXml'
+            :loading='processInstanceLoading'
+            :process-instance='processInstance'
+            :tasks='tasks'
+        />
+      </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, markRaw } from 'vue'
+<script lang='ts' setup>
+import { onMounted, 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'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -178,7 +177,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
@@ -186,99 +185,99 @@ 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?.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
+  // 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
     }
-    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()
+    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)
+  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()
 }
 //tab切换
 const mapRef = ref(null)
 const handleClickTab = (tab: any, event: any) => {
-    if (tab.props.name == '流程图') {
-        mapRef.value.getMapList()
-    }
+  if (tab.props.name == '流程图') {
+    mapRef.value.getMapList()
+  }
 }
 
 /** 加载流程实例 */
@@ -287,109 +286,109 @@ const historyInstanceIdList: any = ref([])
 
 //查询流程数据
 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
-        }
-        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
-            //用markRaw解决因使用ref定义组件，导致组件被标记成响应式对象，造成性能开销警告的问题
-            BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
-        }
-
-        // 加载流程图
-        await getProcessDefinitionById(processDefinition.id).then(res => {
-            bpmnXml.value = res.data?.bpmnXml
-        })
-        // console.log(bpmnXml.value, '流程图数据')
-    } finally {
-        processInstanceLoading.value = false
+    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
+      //用markRaw解决因使用ref定义组件，导致组件被标记成响应式对象，造成性能开销警告的问题
+      BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
+    }
+
+    // 加载流程图
+    await getProcessDefinitionById(processDefinition.id).then(res => {
+      bpmnXml.value = res.data?.bpmnXml
+    })
+    // console.log(bpmnXml.value, '流程图数据')
+  } finally {
+    processInstanceLoading.value = false
+  }
 }
 const sortYMDHMS = val => {
-    return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
+  return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
 }
 
 /** 加载任务列表 */
 let stepList = ref([])
 const getTaskList = async () => {
-    historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : []
-    runningTasks.value = []
-    auditForms.value = []
-    approveForms.value = []
-    approveFormFApis.value = []
-    tasks.value = []
-    stepList.value = []
-    try {
-        // 获得未取消的任务
-        tasksLoad.value = true
-        //根据历史实例id查询历史任务日志数据把最新的id加进去
-        historyInstanceIdList.value.push(id)
-        //轮询
-        await historyInstanceIdList.value?.map((item: any) => {
-            getTaskListByProcessInstanceId(item).then(res => {
-                res.data?.map(vv => {
-                    stepList.value.push(vv)
-                })
-            })
-            tasks.value=[]
+  historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : []
+  runningTasks.value = []
+  auditForms.value = []
+  approveForms.value = []
+  approveFormFApis.value = []
+  tasks.value = []
+  stepList.value = []
+  try {
+    // 获得未取消的任务
+    tasksLoad.value = true
+    //根据历史实例id查询历史任务日志数据把最新的id加进去
+    historyInstanceIdList.value.push(id)
+    //轮询
+    await historyInstanceIdList.value?.map((item: any) => {
+      getTaskListByProcessInstanceId(item).then(res => {
+        res.data?.map(vv => {
+          stepList.value.push(vv)
         })
-    } finally {
-        tasksLoad.value = false
-    }
+      })
+      tasks.value = []
+    })
+  } finally {
+    tasksLoad.value = false
+  }
 }
 
 /**
  * 设置 runningTasks 中的任务
  */
 const loadRunningTask = tasks => {
-    //清空数据
-    runningTasks.value=[]
-    // tasks.length = 1
-    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: []
-        })
-        // 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({}) // 占位，避免为空
-        }
+  //清空数据
+  runningTasks.value = []
+  // tasks.length = 1
+  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: []
     })
+    // 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('')
@@ -400,53 +399,53 @@ const userOptions = ref([]) // 用户列表
 watch(
     () => stepList.value,
     (val, oldVal) => {
-        if (val&&val.length!=0 ) {
-            tasks.value=[]
-            val.map(task => {
-                if (task.status !== 4) {
-                    tasks.value.push(task)
-                }
-            })
-            // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-            let list = Array.from(tasks.value)?.sort((a, b) => {
-                // 有已完成的情况，按照完成时间倒序
-                if (a.endTime && b.endTime) {
-                    return sortYMDHMS(b.endTime) - sortYMDHMS(a.endTime)
-                } else if (a.endTime) {
-                    return 1
-                } else if (b.endTime) {
-                    return -1
-                    // 都是未完成，按照创建时间倒序
-                } else {
-                    return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
-                }
-            })
-            // 获得需要自己审批的任务
-             loadRunningTask(list)
-        }
+      if (val && val.length != 0) {
+        tasks.value = []
+        val.map(task => {
+          if (task.status !== 4) {
+            tasks.value.push(task)
+          }
+        })
+        // 1.2 排序，将未完成的排在前面，已完成的排在后面；
+        let list = Array.from(tasks.value)?.sort((a, b) => {
+          // 有已完成的情况，按照完成时间倒序
+          if (a.endTime && b.endTime) {
+            return sortYMDHMS(b.endTime) - sortYMDHMS(a.endTime)
+          } else if (a.endTime) {
+            return 1
+          } else if (b.endTime) {
+            return -1
+            // 都是未完成，按照创建时间倒序
+          } else {
+            return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
+          }
+        })
+        // 获得需要自己审批的任务
+        loadRunningTask(list)
+      }
     },
     {
-        immediate:true,
-        deep:true,
+      immediate: true,
+      deep: true
     }
 )
 
 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>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 ::v-deep .el-tab-pane {
-    height: calc(100vh - 200px) !important;
-    overflow: auto !important;
+  height: calc(100vh - 200px) !important;
+  overflow: auto !important;
 }
 </style>
diff --git a/src/views/system/bpm/task/done/index.vue b/src/views/system/bpm/task/done/index.vue
index 3a453a97..c597edf7 100644
--- a/src/views/system/bpm/task/done/index.vue
+++ b/src/views/system/bpm/task/done/index.vue
@@ -1,19 +1,19 @@
 <!--待办事项列表-->
 <template>
-    <div>
-        <TableHeader date-picker>
-            <template v-slot:select>
-                <el-form-item label="任务名称">
-                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入任务名称" />
-                </el-form-item>
-            </template>
-        </TableHeader>
-        <!--表格-->
-        <Table ref="tableRef"></Table>
-    </div>
+  <div>
+    <TableHeader date-picker>
+      <template v-slot:select>
+        <el-form-item label='任务名称'>
+          <el-input v-model='tableStore.table.params.searchValue' placeholder='请输入任务名称' />
+        </el-form-item>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -22,93 +22,100 @@ import { useRouter } from 'vue-router'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 
 defineOptions({
-    name: 'businessUser'
+  name: 'businessUser'
 })
 
 const { push } = useRouter()
 
 const tableStore = new TableStore({
-    url: '/bpm-boot/bpm/task/doneList',
-    method: 'POST',
-    publicHeight: 65,
-    column: [
-        { title: '序号', type: 'seq', width: 80 },
-        { title: '任务名称', field: 'processInstance.name', minWidth: 130 },
-        { title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
-        { title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
-        { title: '当前任务', field: 'name', minWidth: 130 },
-        { title: '发起时间', field: 'createTime', minWidth: 170 },
-        { title: '结束时间', field: 'endTime', minWidth: 170 },
+  url: '/bpm-boot/bpm/task/doneList',
+  method: 'POST',
+  publicHeight: 65,
+  column: [
+    {
+      field: 'index',
+      title: '序号',
+      width: '60',
+      formatter: (row: any) => {
+        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+      }
+    },
+    { title: '任务名称', field: 'processInstance.name', minWidth: 130 },
+    { title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
+    { title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
+    { title: '当前任务', field: 'name', minWidth: 130 },
+    { title: '发起时间', field: 'createTime', minWidth: 170 },
+    { title: '结束时间', field: 'endTime', minWidth: 170 },
+    {
+      title: '审批状态',
+      field: 'status',
+      minWidth: 130,
+      render: 'tag',
+      custom: {
+        1: 'primary',
+        2: 'success',
+        3: 'danger',
+        4: 'warning'
+      },
+      replaceValue: {
+        1: '审批中',
+        2: '审批通过',
+        3: '审批不通过',
+        4: '已取消'
+      }
+    },
+    { title: '审批建议', field: 'reason', minWidth: 150 },
+    {
+      title: '耗时',
+      field: 'durationInMillis',
+      minWidth: 150,
+      formatter: (obj: any) => {
+        return formatPast2(obj.row.durationInMillis)
+      }
+    },
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '150',
+      fixed: 'right',
+      render: 'buttons',
+      buttons: [
         {
-            title: '审批状态',
-            field: 'status',
-            minWidth: 130,
-            render: 'tag',
-            custom: {
-                1: 'primary',
-                2: 'success',
-                3: 'danger',
-                4: 'warning'
-            },
-            replaceValue: {
-                1: '审批中',
-                2: '审批通过',
-                3: '审批不通过',
-                4: '已取消'
-            }
-        },
-        { title: '审批建议', field: 'reason', minWidth: 150 },
-        {
-            title: '耗时',
-            field: 'durationInMillis',
-            minWidth: 150,
-            formatter: (obj: any) => {
-                return formatPast2(obj.row.durationInMillis)
-            }
-        },
-        {
-            title: '操作',
-            align: 'center',
-            minWidth: '150',
-            fixed: 'right',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '流程详情',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        handleAudit(row.processInstance.id)
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
-            }
+          name: 'productSetting',
+          title: '流程详情',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleAudit(row.processInstance.id)
+          }
         }
+      ]
     }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+  }
 })
 
 onMounted(() => {
-    // 加载数据
-    tableStore.index()
+  // 加载数据
+  tableStore.index()
 })
 tableStore.table.params.searchValue = ''
 provide('tableStore', tableStore)
 
 /** 处理审批按钮 */
 const handleAudit = (instanceId: any) => {
-    push({
-        name: 'BpmProcessInstanceDetail',
-        query: {
-            id: instanceId
-        }
-    })
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: instanceId
+    }
+  })
 }
 </script>
diff --git a/src/views/system/bpm/task/index.vue b/src/views/system/bpm/task/index.vue
index 2b6920e6..5f81ee21 100644
--- a/src/views/system/bpm/task/index.vue
+++ b/src/views/system/bpm/task/index.vue
@@ -1,36 +1,42 @@
 <template>
-    <div class="default-main">
-        <el-tabs v-model="activeName" type="border-card">
-            <el-tab-pane label="待办任务" name="1">
-                <TodoTask v-if="activeName == '1'" />
-            </el-tab-pane>
-            <el-tab-pane label="已办任务" name="2">
-                <DoneTask v-if="activeName == '2'" />
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+  <div class='default-main'>
+    <el-tabs v-model='activeName' type='border-card'>
+      <el-tab-pane label='待办任务' name='1'>
+        <TodoTask v-if="activeName == '1'" />
+      </el-tab-pane>
+      <el-tab-pane label='已办任务' name='2'>
+        <DoneTask v-if="activeName == '2'" />
+      </el-tab-pane>
+      <el-tab-pane label='我发起的' name='3'>
+        <MyInstance v-if="activeName == '3'" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { ref } from 'vue'
 import TodoTask from './todo/index.vue'
 import DoneTask from './done/index.vue'
+import MyInstance from './myInstance/index.vue'
 import { mainHeight } from '@/utils/layout'
+
 defineOptions({
-    // name: 'bpm/task'
+  // name: 'bpm/task'
 })
 const activeName = ref('1')
 
 const layout = mainHeight(63) as any
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .bars_w {
-    width: 100%;
-    height: 500px;
+  width: 100%;
+  height: 500px;
 }
+
 :deep(.el-tabs__content) {
-    height: v-bind('layout.height');
-    overflow-y: auto;
+  height: v-bind('layout.height');
+  overflow-y: auto;
 }
 </style>
diff --git a/src/views/system/bpm/task/myInstance/index.vue b/src/views/system/bpm/task/myInstance/index.vue
new file mode 100644
index 00000000..c9cce684
--- /dev/null
+++ b/src/views/system/bpm/task/myInstance/index.vue
@@ -0,0 +1,138 @@
+<!--待办事项列表-->
+<template>
+  <div>
+    <TableHeader date-picker>
+      <template v-slot:select>
+        <el-form-item label='任务名称'>
+          <el-input
+              v-model='tableStore.table.params.searchValue'
+              placeholder='请输入任务名称'
+          ></el-input>
+        </el-form-item>
+      </template>
+
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { onMounted, provide, ref } from 'vue'
+import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { useRouter } from 'vue-router'
+
+
+defineOptions({
+  name: 'businessUser'
+})
+
+const { push } = useRouter()
+
+
+const tableStore = new TableStore({
+  url: '/bpm-boot/bpm/processInstance/myPage',
+  method: 'POST',
+  publicHeight: 65,
+  column: [
+    {
+      field: 'index',
+      title: '序号',
+      width: '60',
+      formatter: (row: any) => {
+        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+      }
+    },
+    { title: '任务名称', field: 'name', minWidth: 130 },
+    { title: '流程分类', field: 'category', minWidth: 130 },
+    {
+      field: 'status',
+      title: '流程状态',
+      render: 'tag',
+      minWidth: 130,
+      custom: {
+        1: 'primary',
+        2: 'success',
+        3: 'danger',
+        4: 'warning'
+      },
+      replaceValue: {
+        1: '审批中',
+        2: '审批通过',
+        3: '审批不通过',
+        4: '已取消'
+      }
+    },
+    { title: '发起时间', field: 'startTime', minWidth: 140 },
+    { title: '结束时间', field: 'endTime', minWidth: 140 },
+    {
+      title: '耗时', field: 'durationInMillis', minWidth: 130,
+      formatter: (obj: any) => {
+        const millis = obj.row.durationInMillis
+        return millis > 0 ? formatPast2(millis) : ''
+      }
+    },
+    {
+      title: '当前审批任务', field: 'tasks', minWidth: 140,
+      formatter: (obj: any) => {
+        const tasks = obj.row.tasks
+        if (tasks) {
+          return tasks[0].name
+        } else {
+          return ''
+        }
+
+        // return millis > 0 ? formatPast2(millis) : '--'
+      }
+    },
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '180',
+      fixed: 'right',
+      render: 'buttons',
+      buttons: [
+        {
+          name: 'productSetting',
+          title: '流程详情',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleAudit(row.id)
+          }
+        }
+      ]
+    }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+
+  }
+})
+
+onMounted(() => {
+  // 加载数据
+  tableStore.index()
+})
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+/** 处理审批按钮 */
+const handleAudit = (instanceId: any) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: instanceId
+    }
+  })
+}
+
+</script>
diff --git a/src/views/system/bpm/task/todo/index.vue b/src/views/system/bpm/task/todo/index.vue
index a5c7775f..f268b5c5 100644
--- a/src/views/system/bpm/task/todo/index.vue
+++ b/src/views/system/bpm/task/todo/index.vue
@@ -1,20 +1,20 @@
 <!--待办事项列表-->
 <template>
-    <div >
-        <TableHeader date-picker>
-            <template v-slot:select>
-                <el-form-item label='任务名称'>
-                    <el-input
-                        v-model='tableStore.table.params.searchValue'
-                        placeholder='请输入任务名称'
-                    ></el-input>
-                </el-form-item>
-            </template>
+  <div>
+    <TableHeader>
+      <template v-slot:select>
+        <el-form-item label='任务名称'>
+          <el-input
+              v-model='tableStore.table.params.searchValue'
+              placeholder='请输入任务名称'
+          ></el-input>
+        </el-form-item>
+      </template>
 
-        </TableHeader>
-        <!--表格-->
-        <Table ref='tableRef'></Table>
-    </div>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+  </div>
 </template>
 
 <script setup lang='ts'>
@@ -26,68 +26,75 @@ import { useRouter } from 'vue-router'
 
 
 defineOptions({
-    name: 'businessUser'
+  name: 'businessUser'
 })
 
 const { push } = useRouter()
 
 
 const tableStore = new TableStore({
-    url: '/bpm-boot/bpm/task/todoList',
-    method: 'POST',
-    publicHeight: 65,
-    column: [
-        { title: '序号', type: 'seq', width: 80 },
-        { title: '任务名称', field: 'processInstance.name', minWidth: 130 },
-        { title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
-        { title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
-        { title: '发起时间', field: 'createTime', minWidth: 170 },
-        { title: '当前任务', field: 'name', minWidth: 130 },
+  url: '/bpm-boot/bpm/task/todoList',
+  method: 'POST',
+  publicHeight: 65,
+  column: [
+    {
+      field: 'index',
+      title: '序号',
+      width: '60',
+      formatter: (row: any) => {
+        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+      }
+    },
+    { title: '任务名称', field: 'processInstance.name', minWidth: 130 },
+    { title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
+    { title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
+    { title: '发起时间', field: 'createTime', minWidth: 170 },
+    { title: '当前任务', field: 'name', minWidth: 130 },
+    {
+      title: '操作',
+      align: 'center',
+      width: '230',
+      render: 'buttons',
+      buttons: [
         {
-            title: '操作',
-            align: 'center',
-            width: '230',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '办理',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        handleAudit(row.processInstance.id)
-                    }
-                }
-            ]
+          name: 'productSetting',
+          title: '办理',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleAudit(row.processInstance.id)
+          }
         }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
-            }
-        }
-
+      ]
     }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+
+  }
 })
 
 onMounted(() => {
-    // 加载数据
-    tableStore.index()
+  // 加载数据
+  tableStore.index()
 })
 tableStore.table.params.searchValue = ''
 provide('tableStore', tableStore)
 
 /** 处理审批按钮 */
 const handleAudit = (instanceId: any) => {
-    push({
-        name: 'BpmProcessInstanceDetail',
-        query: {
-            id: instanceId,
-            todo: 'todo'
-        }
-    })
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: instanceId,
+      todo: 'todo'
+    }
+  })
 }
 
 </script>