feat: 优化操作按钮组件命名；操作按钮固定在整个页面下方逻辑完成

Author: GoldenZqqq

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

src/views/bpm/processInstance/detail/ProcessInstanceBtnConatiner.vue renamed to 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" />
   <!-- 弹窗：回退节点 -->

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
   }