bpm：流程详情的转派审批人

yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue

@@ -39,6 +39,18 @@
             title="通过"
             @click="handleAudit(item, true)"
           />
+          <XButton
+            pre-icon="ep:close"
+            type="danger"
+            title="不通过"
+            @click="handleAudit(item, false)"
+          />
+          <XButton
+            pre-icon="ep:edit"
+            type="primary"
+            title="转办"
+            @click="handleUpdateAssignee(item)"
+          />
         </div>
       </el-col>
     </el-card>
@@ -116,17 +128,56 @@
         </div>
       </el-col>
     </el-card>
+
+    <!-- 对话框(转派审批人) -->
+    <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
+      <el-form
+        ref="updateAssigneeFormRef"
+        :model="updateAssigneeForm"
+        :rules="updateAssigneeRules"
+        label-width="110px"
+      >
+        <el-form-item label="新审批人" prop="assigneeUserId">
+          <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
+            <el-option
+              v-for="item in userOptions"
+              :key="parseInt(item.id)"
+              :label="item.nickname"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <!-- 操作按钮 -->
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          :loading="updateAssigneeLoading"
+          @click="submitUpdateAssigneeForm"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton
+          :loading="updateAssigneeLoading"
+          :title="t('dialog.close')"
+          @click="updateAssigneeLoading = false"
+        />
+      </template>
+    </XModal>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 import dayjs from 'dayjs'
+import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import { formatPast2 } from '@/utils/formatTime'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 const { proxy } = getCurrentInstance()
 
 // ========== 审批信息 ==========
@@ -216,9 +267,66 @@ const getTimelineItemType = (item) => {
   return ''
 }
 
+// ========== 审批记录 ==========
+const updateAssigneeVisible = ref(false)
+const updateAssigneeLoading = ref(false)
+const updateAssigneeForm = ref({
+  id: undefined,
+  assigneeUserId: undefined
+})
+const updateAssigneeRules = ref({
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+})
+const updateAssigneeFormRef = ref()
+const userOptions = ref([])
+
+// 处理转派审批人
+const handleUpdateAssignee = (task) => {
+  // 设置表单
+  resetUpdateAssigneeForm()
+  updateAssigneeForm.value.id = task.id
+  // 设置为打开
+  updateAssigneeVisible.value = true
+}
+
+// 提交转派审批人
+const submitUpdateAssigneeForm = async () => {
+  // 1. 校验表单
+  const elForm = unref(updateAssigneeFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+
+  // 2.1 提交审批
+  updateAssigneeLoading.value = true
+  try {
+    await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
+    // 2.2 设置为隐藏
+    updateAssigneeVisible.value = false
+    // 加载最新数据
+    getDetail()
+  } finally {
+    updateAssigneeLoading.value = false
+  }
+}
+
+// 重置转派审批人表单
+const resetUpdateAssigneeForm = () => {
+  updateAssigneeForm.value = {
+    id: undefined,
+    assigneeUserId: undefined
+  }
+  updateAssigneeFormRef.value?.resetFields()
+}
+
 // ========== 初始化 ==========
 onMounted(() => {
+  // 加载详情
   getDetail()
+  // 加载用户的列表
+  UserApi.getListSimpleUsersApi().then((data) => {
+    userOptions.value.push(...data)
+  })
 })
 
 const getDetail = () => {