refactor: 终止/转办/委托支持填写意见

apps/web-antd/src/api/workflow/task/index.ts

@@ -97,7 +97,7 @@ export function getTaskByTaskId(taskId: string) {
  * 终止任务
  * @param data
  */
-export function terminationTask(data: { taskId: string }) {
+export function terminationTask(data: { comment?: string; taskId: string }) {
   return requestClient.postWithMsg<void>(
     '/workflow/task/terminationTask',
     data,

apps/web-antd/src/views/workflow/components/approval-content.vue

@@ -0,0 +1,26 @@
+<!-- 审批终止 Modal弹窗的content属性专用 用于填写审批意见 -->
+<script setup lang="ts">
+import { Textarea } from 'ant-design-vue';
+
+defineOptions({
+  name: 'ApprovalContent',
+  inheritAttrs: false,
+});
+
+defineProps<{ description: string; value: string }>();
+
+defineEmits<{ 'update:value': [string] }>();
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div>{{ description }}</div>
+    <Textarea
+      :allow-clear="true"
+      :auto-size="true"
+      :value="value"
+      placeholder="审批意见(可选)"
+      @change="(e) => $emit('update:value', e.target.value!)"
+    />
+  </div>
+</template>

apps/web-antd/src/views/workflow/components/approval-panel.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import type { User } from '#/api/core/user';
 import type { FlowInfoResponse } from '#/api/workflow/instance/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
@@ -46,6 +46,7 @@ import {
   ApprovalTimeline,
   flowInterfereModal,
 } from '.';
+import { approveWithReasonModal } from './helper';
 import userSelectModal from './user-select-modal.vue';
 
 defineOptions({
@@ -205,18 +206,15 @@ function handleRejection() {
   });
   rejectionModalApi.open();
 }
-
 /**
  * 审批终止
  */
 function handleTermination() {
-  Modal.confirm({
+  approveWithReasonModal({
     title: '审批终止',
-    content: '确定终止当前审批流程吗？',
+    description: '确定终止当前审批流程吗？',
-    centered: true,
+    onOk: async (reason) => {
-    okButtonProps: { danger: true },
+      await terminationTask({ taskId: props.task!.id, comment: reason });
-    onOk: async () => {
-      await terminationTask({ taskId: props.task!.id });
       emit('reload');
     },
   });
@@ -246,13 +244,12 @@ const [DelegationModal, delegationModalApi] = useVbenModal({
 function handleDelegation(userList: User[]) {
   if (userList.length === 0) return;
   const current = userList[0];
-  Modal.confirm({
+  approveWithReasonModal({
     title: '委托',
-    content: `确定委托给${current?.nickName}吗?`,
+    description: `确定委托给[${current?.nickName}]吗?`,
-    centered: true,
+    onOk: async (reason) => {
-    onOk: async () => {
       await taskOperation(
-        { taskId: props.task!.id, userId: current!.userId },
+        { taskId: props.task!.id, userId: current!.userId, message: reason },
         'delegateTask',
       );
       emit('reload');
@@ -269,13 +266,12 @@ const [TransferModal, transferModalApi] = useVbenModal({
 function handleTransfer(userList: User[]) {
   if (userList.length === 0) return;
   const current = userList[0];
-  Modal.confirm({
+  approveWithReasonModal({
     title: '转办',
-    content: `确定转办给${current?.nickName}吗?`,
+    description: `确定转办给[${current?.nickName}]吗?`,
-    centered: true,
+    onOk: async (reason) => {
-    onOk: async () => {
       await taskOperation(
-        { taskId: props.task!.id, userId: current!.userId },
+        { taskId: props.task!.id, userId: current!.userId, message: reason },
         'transferTask',
       );
       emit('reload');

apps/web-antd/src/views/workflow/components/helper.tsx

@@ -0,0 +1,38 @@
+import { defineComponent, h, ref } from 'vue';
+
+import { Modal } from 'ant-design-vue';
+
+import ApprovalContent from './approval-content.vue';
+
+export interface ApproveWithReasonModalProps {
+  title: string;
+  description: string;
+  onOk: (reason: string) => void;
+}
+
+/**
+ * 带审批意见的confirm
+ * @param props props
+ */
+export function approveWithReasonModal(props: ApproveWithReasonModalProps) {
+  const { onOk, title, description } = props;
+  const content = ref('');
+  Modal.confirm({
+    title,
+    content: h(
+      defineComponent({
+        setup() {
+          return () =>
+            h(ApprovalContent, {
+              description,
+              value: content.value,
+              'onUpdate:value': (v) => (content.value = v),
+            });
+        },
+      }),
+    ),
+    centered: true,
+    okButtonProps: { danger: true },
+    onOk: () => onOk(content.value),
+  });
+}