From 2e4ae78ee08173594d899ae84a63cce0c8257107 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sat, 21 Dec 2024 21:01:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=88=E6=AD=A2/=E8=BD=AC?=
 =?UTF-8?q?=E5=8A=9E/=E5=A7=94=E6=89=98=E6=94=AF=E6=8C=81=E5=A1=AB?=
 =?UTF-8?q?=E5=86=99=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/workflow/task/index.ts  |  2 +-
 .../workflow/components/approval-content.vue  | 26 +++++++++++++
 .../workflow/components/approval-panel.vue    | 32 +++++++---------
 .../src/views/workflow/components/helper.tsx  | 38 +++++++++++++++++++
 4 files changed, 79 insertions(+), 19 deletions(-)
 create mode 100644 apps/web-antd/src/views/workflow/components/approval-content.vue
 create mode 100644 apps/web-antd/src/views/workflow/components/helper.tsx

diff --git a/apps/web-antd/src/api/workflow/task/index.ts b/apps/web-antd/src/api/workflow/task/index.ts
index 5591cde4..134a54c7 100644
--- a/apps/web-antd/src/api/workflow/task/index.ts
+++ b/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,
diff --git a/apps/web-antd/src/views/workflow/components/approval-content.vue b/apps/web-antd/src/views/workflow/components/approval-content.vue
new file mode 100644
index 00000000..8db040d0
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/workflow/components/approval-panel.vue b/apps/web-antd/src/views/workflow/components/approval-panel.vue
index 450ae0b6..cf67ba1d 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel.vue
+++ b/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: '确定终止当前审批流程吗？',
-    centered: true,
-    okButtonProps: { danger: true },
-    onOk: async () => {
-      await terminationTask({ taskId: props.task!.id });
+    description: '确定终止当前审批流程吗？',
+    onOk: async (reason) => {
+      await terminationTask({ taskId: props.task!.id, comment: reason });
       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}吗?`,
-    centered: true,
-    onOk: async () => {
+    description: `确定委托给[${current?.nickName}]吗?`,
+    onOk: async (reason) => {
       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}吗?`,
-    centered: true,
-    onOk: async () => {
+    description: `确定转办给[${current?.nickName}]吗?`,
+    onOk: async (reason) => {
       await taskOperation(
-        { taskId: props.task!.id, userId: current!.userId },
+        { taskId: props.task!.id, userId: current!.userId, message: reason },
         'transferTask',
       );
       emit('reload');
diff --git a/apps/web-antd/src/views/workflow/components/helper.tsx b/apps/web-antd/src/views/workflow/components/helper.tsx
new file mode 100644
index 00000000..26ead674
--- /dev/null
+++ b/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),
+  });
+}