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] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6=E5=91=BD=E5=90=8D=EF=BC=9B?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E5=9B=BA=E5=AE=9A=E5=9C=A8?=
 =?UTF-8?q?=E6=95=B4=E4=B8=AA=E9=A1=B5=E9=9D=A2=E4=B8=8B=E6=96=B9=E9=80=BB?=
 =?UTF-8?q?=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 df720a11..456eff15 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 abb15c3a..3882866c 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 00a6c0a2..6fbac83d 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
   }