From fb68dc2bfad4a1473b786d4af74d00a90aaf2f1d Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Mon, 2 Sep 2024 09:35:37 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=EF=BC=9B=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E5=9C=A8=E6=95=B4=E4=B8=AA=E9=A1=B5=E9=9D=A2=E4=B8=8B=E6=96=B9?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppView.vue             |  2 +-
 ...vue => ProcessInstanceOperationButton.vue} |  7 +++----
 .../bpm/processInstance/detail/index_new.vue  | 21 ++++++++++---------
 3 files changed, 15 insertions(+), 15 deletions(-)
 rename src/views/bpm/processInstance/detail/{ProcessInstanceBtnConatiner.vue => ProcessInstanceOperationButton.vue} (97%)

diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index df720a111..456eff155 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -36,7 +36,7 @@ provide('reload', reload)
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)] section-container',
       {
         '!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
           footer
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBtnConatiner.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
similarity index 97%
rename from src/views/bpm/processInstance/detail/ProcessInstanceBtnConatiner.vue
rename to src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index abb15c3ae..3882866c0 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBtnConatiner.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,8 +1,7 @@
 <template>
-  <el-affix target=".formCol" position="bottom" class="h-50px" v-if="runningTask?.id">
-    <el-divider class="!mb-8px !mt-0" />
+  <Teleport v-if="runningTask?.id" to=".section-container">
     <div
-      class="pl-50px text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+      class="h-50px position-fixed bottom-10 pl-50px text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
     >
       <el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
         <template #reference>
@@ -126,7 +125,7 @@
       <div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
       <div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
     </div>
-  </el-affix>
+  </Teleport>
   <!-- 弹窗：转派审批人 -->
   <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
   <!-- 弹窗：回退节点 -->
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 00a6c0a2a..6fbac83df 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -46,14 +46,6 @@
                 <BusinessFormComponent :id="processInstance.businessKey" />
               </div>
             </div>
-            <!-- 操作栏按钮 -->
-            <!-- TODO @GoldenZqqq：ProcessInstanceOperationButton，操作按钮。不叫 Container 会好点点，和后端也更统一 -->
-            <ProcessInstanceBtnConatiner
-              ref="processInstanceBtnRef"
-              :processInstance="processInstance"
-              :userOptions="userOptions"
-              @success="getDetail"
-            />
           </el-col>
           <el-col :span="6">
             <!-- TODO @GoldenZqqq：后续这个，也拆个小组件出来 -->
@@ -126,6 +118,14 @@
       <!-- 流转评论 -->
       <el-tab-pane label="流转评论"> 流转评论 </el-tab-pane>
     </el-tabs>
+
+    <!-- 操作栏按钮 -->
+    <ProcessInstanceOperationButton
+      ref="operationButtonRef"
+      :processInstance="processInstance"
+      :userOptions="userOptions"
+      @success="getDetail"
+    />
   </ContentWrap>
 </template>
 <script lang="ts" setup>
@@ -138,6 +138,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
+import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import { registerComponent } from '@/utils/routerHelper'
 import * as UserApi from '@/api/system/user'
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
@@ -151,7 +152,7 @@ const message = useMessage() // 消息弹窗
 const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
-const processInstanceBtnRef = ref()
+const operationButtonRef = ref()
 const bpmnXml = ref('') // BPMN XML
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
@@ -244,7 +245,7 @@ const getTaskList = async () => {
     })
 
     // 获得需要自己审批的任务
-    processInstanceBtnRef.value.loadRunningTask(tasks.value)
+    operationButtonRef.value?.loadRunningTask(tasks.value)
   } finally {
     tasksLoad.value = false
   }

From 715169510315cb25a32373f43ca4c78677e77230 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Mon, 2 Sep 2024 09:54:46 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=9B=E5=85=A5?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E9=A1=B5=E9=9D=A2=E5=90=8E=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E8=87=B3=E5=85=B6=E4=BB=96=E9=A1=B5=E9=9D=A2=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceOperationButton.vue | 236 +++++++++---------
 .../bpm/processInstance/detail/index_new.vue  |  16 +-
 2 files changed, 123 insertions(+), 129 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 3882866c0..799a8ae9e 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,131 +1,125 @@
 <template>
-  <Teleport v-if="runningTask?.id" to=".section-container">
-    <div
-      class="h-50px position-fixed bottom-10 pl-50px text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
-    >
-      <el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
-        <template #reference>
-          <el-button plain type="success" @click="openPopover('1')">
-            <Icon icon="ep:select" />&nbsp; 通过
-          </el-button>
-        </template>
-        <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
-          <el-form
-            label-position="top"
-            class="mb-auto"
-            ref="formRef"
-            :model="auditForm"
-            :rules="auditRule"
-            label-width="100px"
-          >
-            <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-              {{ processInstance?.startUser.nickname }}
-              <el-tag size="small" type="info" class="ml-8px">
-                {{ processInstance?.startUser.deptName }}
-              </el-tag>
-            </el-form-item>
-            <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
-              <template #header>
-                <span class="el-icon-picture-outline">
-                  填写表单【{{ runningTask?.formName }}】
-                </span>
-              </template>
-              <form-create
-                v-model="approveForm.value"
-                v-model:api="approveFormFApi"
-                :option="approveForm.option"
-                :rule="approveForm.rule"
+  <div
+    class="h-50px position-fixed bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+  >
+    <el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
+      <template #reference>
+        <el-button plain type="success" @click="openPopover('1')">
+          <Icon icon="ep:select" />&nbsp; 通过
+        </el-button>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="auditForm"
+          :rules="auditRule"
+          label-width="100px"
+        >
+          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
+            {{ processInstance?.startUser.nickname }}
+            <el-tag size="small" type="info" class="ml-8px">
+              {{ processInstance?.startUser.deptName }}
+            </el-tag>
+          </el-form-item>
+          <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+            <template #header>
+              <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
+            </template>
+            <form-create
+              v-model="approveForm.value"
+              v-model:api="approveFormFApi"
+              :option="approveForm.option"
+              :rule="approveForm.rule"
+            />
+          </el-card>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
+          </el-form-item>
+          <el-form-item label="抄送人" prop="copyUserIds">
+            <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
+              <el-option
+                v-for="itemx in userOptions"
+                :key="itemx.id"
+                :label="itemx.nickname"
+                :value="itemx.id"
               />
-            </el-card>
-            <el-form-item label="审批建议" prop="reason">
-              <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
-            </el-form-item>
-            <el-form-item label="抄送人" prop="copyUserIds">
-              <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
-                <el-option
-                  v-for="itemx in userOptions"
-                  :key="itemx.id"
-                  :label="itemx.nickname"
-                  :value="itemx.id"
-                />
-              </el-select>
-            </el-form-item>
+            </el-select>
+          </el-form-item>
 
-            <el-form-item>
-              <el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
-                通过
-              </el-button>
-              <el-button @click="passVisible = false"> 取消 </el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-popover>
-      <el-popover :visible="rejectVisible" placement="top-end" :width="500" trigger="click">
-        <template #reference>
-          <el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
-            <Icon icon="ep:close" />&nbsp; 拒绝
-          </el-button>
-        </template>
-        <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
-          <el-form
-            label-position="top"
-            class="mb-auto"
-            ref="formRef"
-            :model="auditForm"
-            :rules="auditRule"
-            label-width="100px"
-          >
-            <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-              {{ processInstance?.startUser.nickname }}
-              <el-tag size="small" type="info" class="ml-8px">
-                {{ processInstance?.startUser.deptName }}
-              </el-tag>
-            </el-form-item>
-            <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
-              <template #header>
-                <span class="el-icon-picture-outline">
-                  填写表单【{{ runningTask?.formName }}】
-                </span>
-              </template>
-              <form-create
-                v-model="approveForm.value"
-                v-model:api="approveFormFApi"
-                :option="approveForm.option"
-                :rule="approveForm.rule"
+          <el-form-item>
+            <el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
+              通过
+            </el-button>
+            <el-button @click="passVisible = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+    <el-popover :visible="rejectVisible" placement="top-end" :width="500" trigger="click">
+      <template #reference>
+        <el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
+          <Icon icon="ep:close" />&nbsp; 拒绝
+        </el-button>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="auditForm"
+          :rules="auditRule"
+          label-width="100px"
+        >
+          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
+            {{ processInstance?.startUser.nickname }}
+            <el-tag size="small" type="info" class="ml-8px">
+              {{ processInstance?.startUser.deptName }}
+            </el-tag>
+          </el-form-item>
+          <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+            <template #header>
+              <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
+            </template>
+            <form-create
+              v-model="approveForm.value"
+              v-model:api="approveFormFApi"
+              :option="approveForm.option"
+              :rule="approveForm.rule"
+            />
+          </el-card>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
+          </el-form-item>
+          <el-form-item label="抄送人" prop="copyUserIds">
+            <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
+              <el-option
+                v-for="itemx in userOptions"
+                :key="itemx.id"
+                :label="itemx.nickname"
+                :value="itemx.id"
               />
-            </el-card>
-            <el-form-item label="审批建议" prop="reason">
-              <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
-            </el-form-item>
-            <el-form-item label="抄送人" prop="copyUserIds">
-              <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
-                <el-option
-                  v-for="itemx in userOptions"
-                  :key="itemx.id"
-                  :label="itemx.nickname"
-                  :value="itemx.id"
-                />
-              </el-select>
-            </el-form-item>
+            </el-select>
+          </el-form-item>
 
-            <el-form-item>
-              <el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
-                拒绝
-              </el-button>
-              <el-button @click="rejectVisible = false"> 取消 </el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-popover>
-      <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
-      <div @click="openTaskUpdateAssigneeForm">
-        <Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
+          <el-form-item>
+            <el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
+              拒绝
+            </el-button>
+            <el-button @click="rejectVisible = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
       </div>
-      <div @click="handleDelegate"> <Icon :size="14" icon="ep:position" />&nbsp;委派 </div>
-      <div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
-      <div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
+    </el-popover>
+    <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
+    <div @click="openTaskUpdateAssigneeForm">
+      <Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
     </div>
-  </Teleport>
+    <div @click="handleDelegate"> <Icon :size="14" icon="ep:position" />&nbsp;委派 </div>
+    <div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
+    <div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
+  </div>
   <!-- 弹窗：转派审批人 -->
   <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
   <!-- 弹窗：回退节点 -->
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 6fbac83df..f554ac4e6 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -46,6 +46,14 @@
                 <BusinessFormComponent :id="processInstance.businessKey" />
               </div>
             </div>
+
+            <!-- 操作栏按钮 -->
+            <ProcessInstanceOperationButton
+              ref="operationButtonRef"
+              :processInstance="processInstance"
+              :userOptions="userOptions"
+              @success="getDetail"
+            />
           </el-col>
           <el-col :span="6">
             <!-- TODO @GoldenZqqq：后续这个，也拆个小组件出来 -->
@@ -118,14 +126,6 @@
       <!-- 流转评论 -->
       <el-tab-pane label="流转评论"> 流转评论 </el-tab-pane>
     </el-tabs>
-
-    <!-- 操作栏按钮 -->
-    <ProcessInstanceOperationButton
-      ref="operationButtonRef"
-      :processInstance="processInstance"
-      :userOptions="userOptions"
-      @success="getDetail"
-    />
   </ContentWrap>
 </template>
 <script lang="ts" setup>

From a9623e30013d82f7e05d832e6f15dceaeafdda60 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Mon, 2 Sep 2024 11:34:03 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=AE=A1=E6=89=B9=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=97=B6=E9=97=B4=E7=BA=BF=E6=8A=BD=E5=8F=96=E4=B8=BA?=
 =?UTF-8?q?=E5=8D=95=E7=8B=AC=E7=BB=84=E4=BB=B6=EF=BC=9B=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BA=BF=E6=95=B4=E4=BD=93=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=81=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91TODO?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTimeline.vue        | 161 ++++++++++++++++++
 .../bpm/processInstance/detail/index_new.vue  |  48 +-----
 2 files changed, 164 insertions(+), 45 deletions(-)
 create mode 100644 src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
new file mode 100644
index 000000000..17b858bca
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-timeline class="pt-20px">
+    <el-timeline-item v-for="(activity, index) in mockData" :key="index" size="large">
+      <div class="flex flex-col items-start">
+        <div class="font-bold"> {{ activity.name }}</div>
+        <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
+        <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
+          <div class="mb-5px">审批意见：</div>
+          <div
+            class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
+          >
+            {{ activity.opinion }}
+          </div>
+        </div>
+        <div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
+          {{ formatDate(activity.createTime) }}
+        </div>
+      </div>
+      <!-- 该节点用户的头像 -->
+      <template #dot>
+        <div class="w-35px h-35px position-relative">
+          <img
+            src="@/assets/imgs/avatar.jpg"
+            class="rounded-full w-full h-full position-absolute bottom-6px right-12px"
+            alt=""
+          />
+          <div
+            class="position-absolute top-16px left-8px bg-#fff rounded-full flex items-center content-center p-2px"
+          >
+            <Icon
+              :size="12"
+              :icon="optIconMap[activity.status]?.icon"
+              :color="optIconMap[activity.status]?.color"
+            />
+          </div>
+        </div>
+      </template>
+    </el-timeline-item>
+  </el-timeline>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'BpmProcessInstanceTimeline' })
+defineProps({
+  tasks: propTypes.array // 流程任务的数组
+})
+
+const optIconMap = {
+  // 审批中
+  '1': {
+    color: '#00b32a',
+    icon: 'fa-solid:clock'
+  },
+  // 审批通过
+  '2': { color: '#00b32a', icon: 'fa-solid:check-circle' },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' }
+}
+
+const mockData: any = [
+  {
+    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
+    name: '发起人',
+    createTime: 1725237646192,
+    endTime: null,
+    durationInMillis: null,
+    status: 1,
+    reason: null,
+    ownerUser: null,
+    assigneeUser: {
+      id: 104,
+      nickname: '测试号',
+      deptId: 107,
+      deptName: '运维部门'
+    },
+    taskDefinitionKey: 'task-01',
+    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+    processInstance: {
+      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+      name: 'oa_leave',
+      createTime: null,
+      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+      startUser: null
+    },
+    parentTaskId: null,
+    children: null,
+    formId: null,
+    formName: null,
+    formConf: null,
+    formFields: null,
+    formVariables: null
+  },
+  {
+    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
+    name: '领导审批',
+    createTime: 1725237646192,
+    endTime: null,
+    durationInMillis: null,
+    status: 2,
+    reason: null,
+    ownerUser: null,
+    assigneeUser: {
+      id: 104,
+      nickname: '领导',
+      deptId: 107,
+      deptName: '运维部门'
+    },
+    taskDefinitionKey: 'task-01',
+    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+    processInstance: {
+      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+      name: 'oa_leave',
+      createTime: null,
+      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+      startUser: null
+    },
+    parentTaskId: null,
+    children: null,
+    formId: null,
+    formName: null,
+    formConf: null,
+    formFields: null,
+    formVariables: null
+  },
+  {
+    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
+    name: '财务总监审核',
+    createTime: 1725237646192,
+    endTime: null,
+    durationInMillis: null,
+    status: 3,
+    reason: null,
+    ownerUser: null,
+    assigneeUser: {
+      id: 104,
+      nickname: '财务总监',
+      deptId: 107,
+      deptName: '运维部门'
+    },
+    taskDefinitionKey: 'task-01',
+    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+    processInstance: {
+      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+      name: 'oa_leave',
+      createTime: null,
+      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+      startUser: null
+    },
+    parentTaskId: null,
+    children: null,
+    formId: null,
+    formName: null,
+    formConf: null,
+    formFields: null,
+    formVariables: null
+  }
+]
+</script>
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index f554ac4e6..4529c3555 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -56,51 +56,8 @@
             />
           </el-col>
           <el-col :span="6">
-            <!-- TODO @GoldenZqqq：后续这个，也拆个小组件出来 -->
-            <el-timeline class="pt-20px">
-              <el-timeline-item type="primary" size="large">
-                <div class="flex flex-col items-start gap-2">
-                  <div class="font-bold"> 发起人：{{ processInstance?.startUser?.nickname }}</div>
-                  <el-tag type="success">发起</el-tag>
-                  <div class="text-#a5a5a5 text-12px">
-                    发起时间：{{ formatDate(processInstance.startTime) }}
-                  </div>
-                </div>
-              </el-timeline-item>
-              <el-timeline-item
-                v-for="(activity, index) in tasks"
-                :key="index"
-                type="primary"
-                size="large"
-              >
-                <div class="flex flex-col items-start gap-2">
-                  <div class="font-bold"> 审批人：{{ activity.assigneeUser?.nickname }}</div>
-                  <dict-tag
-                    :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
-                    :value="activity.status"
-                  />
-                  <!-- TODO：暂无该字段 -->
-                  <div v-if="activity.receiveTime" class="text-#a5a5a5 text-12px">
-                    接收时间：{{ formatDate(activity.receiveTime) }}
-                  </div>
-                  <div v-if="activity.createTime" class="text-#a5a5a5 text-12px">
-                    审批时间：{{ formatDate(activity.createTime) }}
-                  </div>
-                  <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
-                    <div class="mb-5px">审批意见：</div>
-                    <div
-                      class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
-                    >
-                      {{ activity.opinion }}
-                    </div>
-                  </div>
-                </div>
-                <!-- 该节点用户的头像 -->
-                <!-- <template #dot>
-                  <img :src="activity?.avatar" alt="" />
-                </template> -->
-              </el-timeline-item>
-            </el-timeline>
+            <!-- 审批记录时间线 -->
+            <ProcessInstanceTimeline :process-instance="processInstance" :tasks="tasks" />
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -139,6 +96,7 @@ import * as TaskApi from '@/api/bpm/task'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
+import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
 import { registerComponent } from '@/utils/routerHelper'
 import * as UserApi from '@/api/system/user'
 import audit1 from '@/assets/svgs/bpm/audit1.svg'

From 428f976034e28987eb223d21b9110ec2f9601678 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 3 Sep 2024 09:06:19 +0800
Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E6=B7=BB=E5=8A=A0=E7=9A=84=E5=85=83=E7=B4=A0=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 456eff155..df720a111 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -36,7 +36,7 @@ provide('reload', reload)
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)] section-container',
+      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
       {
         '!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
           footer