feat: 【工作流】--委派

src/api/bpm/task/index.ts

@@ -48,6 +48,13 @@ export const getReturnList = async (params) => {
 }
 
 // 回退
-export const returnTask = async (data) => {
+export const okRollback = async (data) => {
-  return await request.put({ url: '/bpm/task/return', data })
+  return await request.put({ url: '/bpm/task/rollback', data })
+}
+
+/**
+ * 委派
+ */
+export const delegateTask = async (data) => {
+  return await request.put({ url: '/bpm/task/delegate', data })
 }

src/views/bpm/processInstance/detail.vue

@@ -192,6 +192,8 @@
 
     <!-- 弹窗，回退节点 -->
     <TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail" />
+    <!-- 委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
+    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
   </ContentWrap>
 </template>
 <script lang="ts" setup>
@@ -208,6 +210,7 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useUserStore } from '@/store/modules/user'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import TaskReturnDialog from './detail/TaskReturnDialogForm.vue'
+import TaskDelegateForm from './detail/taskDelegateForm.vue'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 
@@ -303,6 +306,9 @@ const getTimelineItemType = (item) => {
   if (item.result === 5) {
     return 'warning'
   }
+  if (item.result === 6) {
+    return 'default'
+  }
   return ''
 }
 
@@ -358,10 +364,10 @@ const resetUpdateAssigneeForm = () => {
   updateAssigneeFormRef.value?.resetFields()
 }
 
+const taskDelegateForm = ref()
 /** 处理审批退回的操作 */
 const handleDelegate = async (task) => {
-  message.error('暂不支持【委派】功能，可以使用【转派】替代！')
+  taskDelegateForm.value.open(task.id)
-  console.log(task)
 }
 
 //回退弹框组件
@@ -463,7 +469,7 @@ const getDetail = () => {
       // 需要审核的记录
       tasks.value.forEach((task) => {
         // 1.1 只有待处理才需要
-        if (task.result !== 1) {
+        if (task.result !== 1 && task.result !== 6) {
           return
         }
         // 1.2 自己不是处理人

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

@@ -0,0 +1,86 @@
+<template>
+  <Dialog v-model="dialogVisible" title="委派任务" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="接收人" prop="receiveId">
+        <el-select v-model="formData.receiveId" clearable style="width: 100%">
+          <el-option
+            v-for="item in userList"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="委派理由" prop="reason">
+        <el-input v-model="formData.reason" clearable placeholder="请输入委派理由" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'BpmTaskDelegateForm' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  receiveId: undefined
+})
+const formRules = ref({
+  receiveId: [{ required: true, message: '接收人不能为空', trigger: 'change' }]
+})
+
+const formRef = ref() // 表单 Ref
+const userList = ref<any[]>([]) // 用户列表
+
+/** 打开弹窗 */
+const open = async (id: string) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.id = id
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await TaskApi.delegateTask(formData.value)
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    receiveId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>