【功能修改】 新审批页面增加减签

src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
-    v-if="runningTask.id"
+    v-if="runningTask && runningTask.id"
   >
     <!-- 【通过】按钮 -->
     <el-popover
@@ -9,7 +9,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.APPROVE)"
+      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
     >
       <template #reference>
         <el-button plain type="success" @click="openPopover('approve')">
@@ -38,7 +38,12 @@
             />
           </el-card>
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
+            <el-input
+              v-model="genericForm.reason"
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="4"
+            />
           </el-form-item>
           <el-form-item>
             <el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
@@ -56,7 +61,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.REJECT)"
+      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
     >
       <template #reference>
         <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
@@ -85,7 +90,12 @@
             />
           </el-card>
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
+            <el-input
+              v-model="genericForm.reason"
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="4"
+            />
           </el-form-item>
           <el-form-item>
             <el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
@@ -103,10 +113,10 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.COPY)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
     >
       <template #reference>
-        <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <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>
@@ -120,9 +130,14 @@
           :rules="genericRule"
           label-width="100px"
         >
-                
           <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="genericForm.copyUserIds" clearable style="width: 100%" multiple placeholder="请选择抄送人">
+            <el-select
+              v-model="genericForm.copyUserIds"
+              clearable
+              style="width: 100%"
+              multiple
+              placeholder="请选择抄送人"
+            >
               <el-option
                 v-for="item in userOptions"
                 :key="item.id"
@@ -132,7 +147,13 @@
             </el-select>
           </el-form-item>
           <el-form-item label="抄送意见" prop="copyReason">
-            <el-input v-model="genericForm.copyReason" clearable placeholder="请输入抄送意见" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.copyReason"
+              clearable
+              placeholder="请输入抄送意见"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
 
           <el-form-item>
@@ -151,10 +172,10 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.TRANSFER)"
+      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
     >
       <template #reference>
-        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <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>
@@ -168,7 +189,6 @@
           :rules="genericRule"
           label-width="100px"
         >
-                
           <el-form-item label="新审批人" prop="assigneeUserId">
             <el-select v-model="genericForm.assigneeUserId" clearable style="width: 100%">
               <el-option
@@ -180,12 +200,17 @@
             </el-select>
           </el-form-item>
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+            <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="handleTransfer()">
+            <el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
               {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
             </el-button>
             <el-button @click="popOverVisible.transfer = false"> 取消 </el-button>
@@ -193,22 +218,22 @@
         </el-form>
       </div>
     </el-popover>
-    
+
     <!-- 【委派】按钮 -->
     <el-popover
       :visible="popOverVisible.delegate"
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.DELEGATE)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
     >
       <template #reference>
-        <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <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"
@@ -228,9 +253,15 @@
               />
             </el-select>
           </el-form-item>
-     
+
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
 
           <el-form-item>
@@ -241,7 +272,6 @@
           </el-form-item>
         </el-form>
       </div>
-
     </el-popover>
 
     <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
@@ -250,10 +280,10 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.ADD_SIGN)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
     >
       <template #reference>
-        <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <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>
@@ -278,9 +308,15 @@
               />
             </el-select>
           </el-form-item>
-      
+
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+            <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')">
@@ -295,17 +331,25 @@
       </div>
     </el-popover>
 
-    <!-- TODO @jason：减签 -->
+    <!-- 【减签】按钮 -->
+    <div
+      @click="openChildrenTask()"
+      class="hover-bg-gray-100 rounded-xl p-6px"
+      v-if="runningTask.children"
+    >
+      <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
+    </div>
+
     <!-- 【退回】按钮 -->
     <el-popover
       :visible="popOverVisible.return"
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.RETURN)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
     >
       <template #reference>
-        <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px">
           <Icon :size="14" icon="fa:mail-reply" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.RETURN) }}
         </div>
@@ -320,20 +364,26 @@
           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-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-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()">
+            <el-button :disabled="formLoading" type="primary" @click="handleReturn()">
               {{ getButtonDisplayName(OperationButtonType.RETURN) }}
             </el-button>
             <el-button @click="popOverVisible.return = false"> 取消 </el-button>
@@ -341,29 +391,29 @@
         </el-form>
       </div>
     </el-popover>
-   
+
+    <!-- 弹窗：子任务  -->
+    <TaskSignList ref="taskSignListRef" @success="reload" />
     <!--TODO @jason：撤回 -->
     <!--TODO @jason：再次发起 -->
   </div>
 </template>
 <script lang="ts" setup>
+import TaskSignList from './dialog/TaskSignList.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
-import { useUserStore } from '@/store/modules/user'
 import * as TaskApi from '@/api/bpm/task'
 import { propTypes } from '@/utils/propTypes'
-import { isEmpty } from '@/utils/is'
 import {
   OperationButtonType,
   OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
 defineOptions({ name: 'ProcessInstanceBtnConatiner' })
 
-const userId = useUserStore().getUser.id // 当前登录的编号
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-defineProps({
-  processInstance: propTypes.any, // 流程实例信息
+const props = defineProps({
+  processInstanceId: propTypes.string, // 流程实例信息
   userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
@@ -374,7 +424,7 @@ const popOverVisible = ref({
   transfer: false,
   delegate: false,
   addSign: false,
-  return : false,
+  return: false,
   copy: false
 })
 /** 退回节点 */
@@ -390,7 +440,7 @@ 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' }],
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
   addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
 })
@@ -407,43 +457,25 @@ watch(
   }
 )
 
-// TODO @jaosn：具体的审批任务，要不改成后端返回。让前端弱化下
-/**
- * 设置 runningTasks 中的任务
- */
-const loadRunningTask = (tasks: any[]) => {
-  runningTask.value = {}
-  genericForm.value = {}
-  approveForm.value = {}
-  approveFormFApi.value = {}
-  tasks.forEach((task: any) => {
-    if (!isEmpty(task.children)) {
-      loadRunningTask(task.children)
-    }
-    // 2.1 只有待处理才需要
-    if (task.status !== 1 && task.status !== 6) {
-      return
-    }
-    // 2.2 自己不是处理人
-    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-      return
-    }
-    // 2.3 添加到处理任务
-    runningTask.value = { ...task }
-    genericForm.value = {
-      reason: '',
-      copyUserIds: []
-    }
-
-    // 2.4 处理 approve 表单
-    if (task.formId && task.formConf) {
-      const tempApproveForm = {}
-      setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
-      approveForm.value = tempApproveForm
+/** 弹出退回气泡卡 */
+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 {
-      approveForm.value = {} // 占位，避免为空
+      popOverVisible.value[item] = false
     }
   })
+  formRef.value.resetFields()
 }
 
 /** 处理审批通过和不通过的操作 */
@@ -479,7 +511,7 @@ const handleAudit = async (pass: boolean) => {
       message.success('审批不通过成功')
     }
     // 2.2 加载最新数据
-    getDetail()
+    reload()
   } finally {
     formLoading.value = false
   }
@@ -511,7 +543,6 @@ const handleCopy = async () => {
 
 /** 处理转交 */
 const handleTransfer = async () => {
-   
   formLoading.value = true
   try {
     const transferFormRef = proxy.$refs['formRef']
@@ -526,12 +557,12 @@ const handleTransfer = async () => {
       reason: genericForm.value.reason,
       assigneeUserId: genericForm.value.assigneeUserId
     }
-  
+
     await TaskApi.transferTask(data)
     popOverVisible.value.transfer = false
     message.success('操作成功')
     // 2. 加载最新数据
-    getDetail()
+    reload()
   } finally {
     formLoading.value = false
   }
@@ -539,30 +570,30 @@ const handleTransfer = async () => {
 
 /** 处理委派 */
 const handleDelegate = async () => {
-   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
-   }
- }
+  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. 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
 
 /** 处理加签 */
 const handlerAddSign = async (type: string) => {
@@ -585,7 +616,7 @@ const handlerAddSign = async (type: string) => {
     message.success('操作成功')
     popOverVisible.value.addSign = false
     // 2 加载最新数据
-    getDetail()
+    reload()
   } finally {
     formLoading.value = false
   }
@@ -607,43 +638,41 @@ const handleReturn = async () => {
       reason: genericForm.value.returnReason,
       targetTaskDefinitionKey: genericForm.value.targetTaskDefinitionKey
     }
-  
+
     await TaskApi.returnTask(data)
     popOverVisible.value.return = false
     message.success('操作成功')
-    // 2 加载最新数据
-    getDetail()
+    // 2 重新加载数据
+    reload()
   } finally {
     formLoading.value = false
   }
 }
 
-/** 弹出退回气泡卡 */
-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 taskSignListRef = ref()
+const openChildrenTask = () => {
+  taskSignListRef.value.open(runningTask.value)
 }
 
-/** 获得详情 */
-const getDetail = () => {
+/** 重新加载数据 */
+const reload = () => {
+  getMyTodoTask()
   emit('success')
 }
 
+/** 任务是否为处理中状态 */
+const isHandleTaskStatus = () => {
+  let canHandle = false
+  if (
+    TaskApi.TaskStatusEnum.RUNNING === runningTask.value.status ||
+    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value.status
+  ) {
+    canHandle = true
+  }
+  return canHandle
+}
+
 /** 是否显示按钮 */
 const isShowButton = (btnType: OperationButtonType): boolean => {
   let isShow = true
@@ -662,7 +691,26 @@ const getButtonDisplayName = (btnType: OperationButtonType) => {
   return displayName
 }
 
-defineExpose({ loadRunningTask })
+/** 获取我的待办任务 */
+const getMyTodoTask = async () => {
+  genericForm.value = {}
+  approveForm.value = {}
+  approveFormFApi.value = {}
+  const data = await TaskApi.myTodoTask(props.processInstanceId)
+  runningTask.value = data
+  // 处理 approve 表单.
+  if (data && data.formId && data.formConf) {
+    const tempApproveForm = {}
+    setConfAndFields2(tempApproveForm, data.formConf, data.formFields, data.formVariables)
+    approveForm.value = tempApproveForm
+  } else {
+    approveForm.value = {} // 占位，避免为空
+  }
+}
+
+onMounted(async () => {
+  await getMyTodoTask()
+})
 </script>
 
 <style lang="scss" scoped>