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] =?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 | 240 +++++++++---------
 .../bpm/processInstance/detail/index_new.vue  |  16 +-
 2 files changed, 125 insertions(+), 131 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 3882866c..799a8ae9 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-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-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="success" @click="handleAudit(true)">
+              通过
+            </el-button>
+            <el-button @click="passVisible = 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>
+    <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-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;转交
     </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 6fbac83d..f554ac4e 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>