feat: 【工作流】--委派

src/api/bpm/task/index.ts

@@ -57,3 +57,10 @@ export const getReturnList = async (params) => {
 export const okRollback = async (data) => {
 export const okRollback = async (data) => {
   return await request.put({ url: '/bpm/task/rollback', 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/ProcessInstanceTaskList.vue

@@ -92,6 +92,9 @@ const getTimelineItemType = (item) => {
   if (item.result === 5) {
   if (item.result === 5) {
     return 'warning'
     return 'warning'
   }
   }
+  if (item.result === 6) {
+    return 'default'
+  }
   return ''
   return ''
 }
 }
 </script>
 </script>

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

+<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>

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

@@ -93,6 +93,8 @@
     <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
     <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
     <!-- 弹窗，回退节点 -->
     <!-- 弹窗，回退节点 -->
     <TaskRollbackDialog ref="taskRollbackRef" @success="getDetail" />
     <TaskRollbackDialog ref="taskRollbackRef" @success="getDetail" />
+    <!-- 委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
+    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
   </ContentWrap>
   </ContentWrap>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
@@ -106,6 +108,7 @@ import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import TaskRollbackDialog from './TaskRollbackDialogForm.vue'
 import TaskRollbackDialog from './TaskRollbackDialogForm.vue'
+import TaskDelegateForm from './taskDelegateForm.vue'
 import { registerComponent } from '@/utils/routerHelper'
 import { registerComponent } from '@/utils/routerHelper'
 
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 defineOptions({ name: 'BpmProcessInstanceDetail' })
@@ -169,10 +172,10 @@ const openTaskUpdateAssigneeForm = (id: string) => {
   taskUpdateAssigneeFormRef.value.open(id)
   taskUpdateAssigneeFormRef.value.open(id)
 }
 }
 
 
+const taskDelegateForm = ref()
 /** 处理审批退回的操作 */
 /** 处理审批退回的操作 */
 const handleDelegate = async (task) => {
 const handleDelegate = async (task) => {
-  message.error('暂不支持【委派】功能，可以使用【转派】替代！')
-  console.log(task)
+  taskDelegateForm.value.open(task.id)
 }
 }
 
 
 //回退弹框组件
 //回退弹框组件
@@ -260,7 +263,7 @@ const getTaskList = async () => {
     auditForms.value = []
     auditForms.value = []
     tasks.value.forEach((task) => {
     tasks.value.forEach((task) => {
       // 2.1 只有待处理才需要
       // 2.1 只有待处理才需要
-      if (task.result !== 1) {
+      if (task.result !== 1 && task.result !== 6) {
         return
         return
       }
       }
       // 2.2 自己不是处理人
       // 2.2 自己不是处理人