【功能修改】新审批界面气泡卡按钮功能

2025-02-08 14:44:58 +08:00 · 2024-10-10 23:09:05 +08:00 · 2024-10-10 23:09:05 +08:00 · 4342c3ee05
commit 4342c3ee05
parent a4a4dcdfc2
5 changed files with 451 additions and 127 deletions
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@ -106,6 +106,11 @@ export const signDeleteTask = async (data: any) => {
  return await request.delete({ url: '/bpm/task/delete-sign', data })
 }

+// 抄送
+export const copyTask = async (data: any) => {
+  return await request.put({ url: '/bpm/task/copy', data })
+}
+
 // 获取减签任务列表
 export const getChildrenTaskList = async (id: string) => {
  return await request.get({ url: '/bpm/task/list-by-parent-task-id?parentTaskId=' + id })
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@ -362,7 +362,11 @@ export enum OperationButtonType {
  /**
   * 回退
   */
-  RETURN = 6
+  RETURN = 6,
+  /**
+   * 抄送
+   */
+  COPY = 7
 }

 /**
@ -504,6 +508,7 @@ OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
 OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
 OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
 OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')

 // 默认的按钮权限设置
 export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@ -5,14 +5,14 @@
  >
    <!-- 【通过】按钮 -->
    <el-popover
-      :visible="passVisible"
+      :visible="popOverVisible.approve"
      placement="top-end"
-      :width="500"
+      :width="420"
      trigger="click"
      v-if="isShowButton(OperationButtonType.APPROVE)"
    >
      <template #reference>
-        <el-button plain type="success" @click="openPopover('1')">
+        <el-button plain type="success" @click="openPopover('approve')">
          <Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
        </el-button>
      </template>
@ -22,16 +22,10 @@
          label-position="top"
          class="mb-auto"
          ref="formRef"
-          :model="auditForm"
-          :rules="auditRule"
+          :model="genericForm"
+          :rules="genericRule"
          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>
@ -43,25 +37,14 @@
              :rule="approveForm.rule"
            />
          </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
          </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="success" @click="handleAudit(true)">
              {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
            </el-button>
-            <el-button @click="passVisible = false"> 取消 </el-button>
+            <el-button @click="popOverVisible.approve = false"> 取消 </el-button>
          </el-form-item>
        </el-form>
      </div>
@ -69,14 +52,14 @@

    <!-- 【拒绝】按钮 -->
    <el-popover
-      :visible="rejectVisible"
+      :visible="popOverVisible.reject"
      placement="top-end"
-      :width="500"
+      :width="420"
      trigger="click"
      v-if="isShowButton(OperationButtonType.REJECT)"
    >
      <template #reference>
-        <el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
+        <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
          <Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
        </el-button>
      </template>
@ -86,16 +69,10 @@
          label-position="top"
          class="mb-auto"
          ref="formRef"
-          :model="auditForm"
-          :rules="auditRule"
+          :model="genericForm"
+          :rules="genericRule"
          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>
@ -107,80 +84,273 @@
              :rule="approveForm.rule"
            />
          </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
          </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)">
              {{ getButtonDisplayName(OperationButtonType.REJECT) }}
            </el-button>
-            <el-button @click="rejectVisible = false"> 取消 </el-button>
+            <el-button @click="popOverVisible.reject = false"> 取消 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-popover>

    <!-- 【抄送】按钮 -->
-    <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
+    <el-popover
+      :visible="popOverVisible.copy"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.COPY)"
+    >
+      <template #reference>
+        <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="svg-icon:send" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.COPY) }}
+        </div>
+      </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="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+                
+          <el-form-item label="抄送人" prop="copyUserIds">
+            <el-select v-model="genericForm.copyUserIds" clearable style="width: 100%" 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-item label="抄送意见" prop="copyReason">
+            <el-input v-model="genericForm.copyReason" clearable placeholder="请输入抄送意见" type="textarea"  :rows="3" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleCopy">
+              {{ getButtonDisplayName(OperationButtonType.COPY) }}
+            </el-button>
+            <el-button @click="popOverVisible.copy = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>

    <!-- 【转交】按钮 -->
-    <div @click="openTaskUpdateAssigneeForm" v-if="isShowButton(OperationButtonType.TRANSFER)">
-      <Icon :size="14" icon="fa:share-square-o" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
-    </div>
+    <el-popover
+      :visible="popOverVisible.transfer"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.TRANSFER)"
+    >
+      <template #reference>
+        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="fa:share-square-o" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+        </div>
+      </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="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+                
+          <el-form-item label="新审批人" prop="assigneeUserId">
+            <el-select v-model="genericForm.assigneeUserId" clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+          </el-form-item>

-    <!-- 【委托】按钮 -->
-    <div @click="handleDelegate" v-if="isShowButton(OperationButtonType.DELEGATE)">
-      <Icon :size="14" icon="ep:position" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
-    </div>

-    <!-- 【加签】 -->
-    <div @click="handleSign" v-if="isShowButton(OperationButtonType.ADD_SIGN)">
-      <Icon :size="14" icon="ep:plus" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
-    </div>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary"  @click="handleTransfer()">
+              {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+            </el-button>
+            <el-button @click="popOverVisible.transfer = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+    
+    <!-- 【委派】按钮 -->
+    <el-popover
+      :visible="popOverVisible.delegate"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.DELEGATE)"
+    >
+      <template #reference>
+        <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="ep:position" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+        </div>
+      </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="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="接收人" prop="delegateUserId">
+            <el-select v-model="genericForm.delegateUserId" clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+     
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
+              {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+            </el-button>
+            <el-button @click="popOverVisible.delegate = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </el-popover>
+
+    <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+    <el-popover
+      :visible="popOverVisible.addSign"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.ADD_SIGN)"
+    >
+      <template #reference>
+        <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="ep:plus" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+        </div>
+      </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="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="加签处理人" prop="addSignUserIds">
+            <el-select v-model="genericForm.addSignUserIds" multiple clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+      
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('before')">
+              向前{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+            </el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('after')">
+              向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+            </el-button>
+            <el-button @click="popOverVisible.addSign = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
    <!-- TODO @jason：减签 -->
-
    <!-- 【退回】按钮 -->
-    <div @click="handleBack" v-if="isShowButton(OperationButtonType.RETURN)">
-      <Icon :size="14" icon="fa:mail-reply" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.RETURN) }}
-    </div>
-
+    <el-popover
+      :visible="popOverVisible.return"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.RETURN)"
+    >
+      <template #reference>
+        <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+        </div>
+      </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="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
+              <el-select v-model="genericForm.targetTaskDefinitionKey" clearable style="width: 100%">
+                <el-option
+                  v-for="item in returnList"
+                  :key="item.taskDefinitionKey"
+                  :label="item.name"
+                  :value="item.taskDefinitionKey"
+                />
+              </el-select>
+          </el-form-item>
+          <el-form-item label="退回理由" prop="returnReason">
+            <el-input v-model="genericForm.returnReason" clearable placeholder="请输入退回理由" type="textarea"  :rows="3" />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary"  @click="handleReturn()">
+              {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+            </el-button>
+            <el-button @click="popOverVisible.return = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+   
    <!--TODO @jason：撤回 -->
    <!--TODO @jason：再次发起 -->
  </div>
-
-  <!-- 弹窗：转派审批人 -->
-  <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" />
 </template>
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { useUserStore } from '@/store/modules/user'
 import * as TaskApi from '@/api/bpm/task'
 import { propTypes } from '@/utils/propTypes'
-import TaskReturnForm from './dialog/TaskReturnForm.vue'
-import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
-import TaskTransferForm from './dialog/TaskTransferForm.vue'
-import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
 import { isEmpty } from '@/utils/is'
 import {
  OperationButtonType,
@ -197,16 +367,32 @@ defineProps({
  userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
-const passVisible = ref(false) // 是否显示
-const rejectVisible = ref(false) // 是否显示
+/** 气泡卡是否展示 */
+const popOverVisible = ref({
+  approve: false,
+  reject: false,
+  transfer: false,
+  delegate: false,
+  addSign: false,
+  return : false,
+  copy: false
+})
+/** 退回节点 */
+const returnList = ref([] as any)
 // ========== 审批信息 ==========
 const runningTask = ref<any>({}) // 运行中的任务
-const auditForm = ref<any>({}) // 审批任务的表单
+const genericForm = ref<any>({}) // 通用表单
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
 const formRef = ref()
-const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+/** 表单校验规则 */
+const genericRule = reactive({
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
+  copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
+  assigneeUserId:[{ required: true, message: '新审批人不能为空', trigger: 'change' }],
+  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
+  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
 })

 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@ -227,7 +413,7 @@ watch(
 */
 const loadRunningTask = (tasks: any[]) => {
  runningTask.value = {}
-  auditForm.value = {}
+  genericForm.value = {}
  approveForm.value = {}
  approveFormFApi.value = {}
  tasks.forEach((task: any) => {
@ -244,7 +430,7 @@ const loadRunningTask = (tasks: any[]) => {
    }
    // 2.3 添加到处理任务
    runningTask.value = { ...task }
-    auditForm.value = {
+    genericForm.value = {
      reason: '',
      copyUserIds: []
    }
@ -261,12 +447,12 @@ const loadRunningTask = (tasks: any[]) => {
 }

 /** 处理审批通过和不通过的操作 */
-const handleAudit = async (pass: any) => {
+const handleAudit = async (pass: boolean) => {
  formLoading.value = true
  try {
-    const auditFormRef = proxy.$refs['formRef']
+    const genericFormRef = proxy.$refs['formRef']
    // 1.2 校验表单
-    const elForm = unref(auditFormRef)
+    const elForm = unref(genericFormRef)
    if (!elForm) return
    const valid = await elForm.validate()
    if (!valid) return
@ -274,8 +460,7 @@ const handleAudit = async (pass: any) => {
    // 2.1 提交审批
    const data = {
      id: runningTask.value.id,
-      reason: auditForm.value.reason,
-      copyUserIds: auditForm.value.copyUserIds
+      reason: genericForm.value.reason
    }
    if (pass) {
      // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
@ -286,9 +471,11 @@ const handleAudit = async (pass: any) => {
        data.variables = approveForm.value.value
      }
      await TaskApi.approveTask(data)
+      popOverVisible.value.approve = false
      message.success('审批通过成功')
    } else {
      await TaskApi.rejectTask(data)
+      popOverVisible.value.reject = false
      message.success('审批不通过成功')
    }
    // 2.2 加载最新数据
@ -298,40 +485,160 @@ const handleAudit = async (pass: any) => {
  }
 }

-/* 抄送 TODO */
-const handleSend = () => {}
-
-// TODO 代码优化：这里 flag 改成 approve: boolean 。因为 flag 目前就只有 1 和 2
-const openPopover = (flag) => {
-  passVisible.value = false
-  rejectVisible.value = false
-  formRef.value.resetFields()
-  flag === '1' ? (passVisible.value = true) : (rejectVisible.value = true)
+/* 处理抄送 */
+const handleCopy = async () => {
+  formLoading.value = true
+  try {
+    const copyFormRef = proxy.$refs['formRef']
+    // 1. 校验表单
+    const elForm = unref(copyFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 2. 提交抄送
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.copyReason,
+      copyUserIds: genericForm.value.copyUserIds
+    }
+    await TaskApi.copyTask(data)
+    popOverVisible.value.copy = false
+    message.success('操作成功')
+  } finally {
+    formLoading.value = false
+  }
 }

-/** 转派审批人 */
-const taskTransferFormRef = ref()
-const openTaskUpdateAssigneeForm = () => {
-  taskTransferFormRef.value.open(runningTask.value.id)
+/** 处理转交 */
+const handleTransfer = async () => {
+   
+  formLoading.value = true
+  try {
+    const transferFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(transferFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交转交
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.reason,
+      assigneeUserId: genericForm.value.assigneeUserId
+    }
+  
+    await TaskApi.transferTask(data)
+    popOverVisible.value.transfer = false
+    message.success('操作成功')
+    // 2. 加载最新数据
+    getDetail()
+  } finally {
+    formLoading.value = false
+  }
 }

-/** 处理审批退回的操作 */
-const taskDelegateForm = ref()
+/** 处理委派 */
 const handleDelegate = async () => {
-  taskDelegateForm.value.open(runningTask.value.id)
+   formLoading.value = true
+   try {
+     const deletegateFormRef = proxy.$refs['formRef']
+     // 1.1 校验表单
+     const elForm = unref(deletegateFormRef)
+     if (!elForm) return
+     const valid = await elForm.validate()
+     if (!valid) return
+     // 1.2 处理委派
+     const data = {
+       id: runningTask.value.id,
+       reason: genericForm.value.reason,
+       delegateUserId: genericForm.value.delegateUserId
+     }
+   
+     await TaskApi.delegateTask(data)
+     popOverVisible.value.delegate = false
+     message.success('操作成功')
+     // 2. 加载最新数据
+     getDetail()
+   } finally {
+     formLoading.value = false
+   }
+ }
+
+/** 处理加签 */
+const handlerAddSign = async (type: string) => {
+  formLoading.value = true
+  try {
+    const transferFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(transferFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交加签
+    const data = {
+      id: runningTask.value.id,
+      type,
+      reason: genericForm.value.reason,
+      userIds: genericForm.value.addSignUserIds
+    }
+    await TaskApi.signCreateTask(data)
+    message.success('操作成功')
+    popOverVisible.value.addSign = false
+    // 2 加载最新数据
+    getDetail()
+  } finally {
+    formLoading.value = false
+  }
 }

-/** 处理审批退回的操作 */
-const taskReturnFormRef = ref()
-const handleBack = async () => {
-  taskReturnFormRef.value.open(runningTask.value.id)
+/** 处理退回 */
+const handleReturn = async () => {
+  formLoading.value = true
+  try {
+    const returnFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(returnFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交退回
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.returnReason,
+      targetTaskDefinitionKey: genericForm.value.targetTaskDefinitionKey
+    }
+  
+    await TaskApi.returnTask(data)
+    popOverVisible.value.return = false
+    message.success('操作成功')
+    // 2 加载最新数据
+    getDetail()
+  } finally {
+    formLoading.value = false
+  }
 }

-/** 处理审批加签的操作 */
-const taskSignCreateFormRef = ref()
-const handleSign = async () => {
-  taskSignCreateFormRef.value.open(runningTask.value.id)
+/** 弹出退回气泡卡 */
+const openReturnPopover = async  () => {
+  returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id)
+  if (returnList.value.length === 0) {
+    message.warning('当前没有可退回的节点')
+    return
+  }
+  openPopover('return')
 }
+/** 弹出气泡卡 */
+const openPopover = (type: string ) => {
+  Object.keys(popOverVisible.value).forEach( item => {
+    if( item === type) {
+      popOverVisible.value[item] = true
+    } else {
+      popOverVisible.value[item] = false
+    }
+  })
+  formRef.value.resetFields()
+}
+
 /** 获得详情 */
 const getDetail = () => {
  emit('success')
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@ -202,12 +202,18 @@ const getProcessInstance = async () => {
          activityId: props.activityId
        })
      }
-      setConfAndFields2(
-        detailForm,
-        processDefinition.formConf,
-        processDefinition.formFields,
-        data.formVariables
-      )
+
+      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 表单不显示
+        detailForm.value.value = data.formVariables
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.formConf,
+          processDefinition.formFields,
+          data.formVariables
+        )
+      }
+      
      nextTick().then(() => {
        fApi.value?.btn.show(false)
        fApi.value?.resetBtn.show(false)
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@ -55,6 +55,7 @@
      />
      <el-table-column align="center" label="抄送任务" prop="taskName" min-width="180" />
      <el-table-column align="center" label="抄送人" prop="creatorName" min-width="100" />
+      <el-table-column align="center" label="抄送意见" prop="reason" width="150" />
      <el-table-column
        align="center"
        label="抄送时间"