From 62407c7aa2fc3e1f2ce35dc0d3c5685cc48fd556 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 5 Nov 2025 09:52:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[antd][bpm]=20=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E7=AD=BE=E5=90=8D=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/modules/operation-button.vue       | 10 +++---
 .../detail/modules/signature.vue              | 32 +++++++------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 1c5b186de..63ca567e5 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -772,12 +772,12 @@ defineExpose({ loadTodoTask });
                 name="signPicUrl"
                 ref="approveSignFormRef"
               >
-                <Button @click="openSignatureModal" type="primary">
-                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
-                </Button>
-                <div class="mt-2">
+                <div class="flex items-center gap-2">
+                  <Button @click="openSignatureModal" type="primary">
+                    {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
+                  </Button>
                   <Image
-                    class="float-left h-40 w-80"
+                    class="!h-10 !w-40 object-contain"
                     v-if="approveReasonForm.signPicUrl"
                     :src="approveReasonForm.signPicUrl"
                   />
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
index 3698f6594..4122c1fc0 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -5,7 +5,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { base64ToFile } from '@vben/utils';
 
-import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import { Button, Space, Tooltip } from 'ant-design-vue';
 import Vue3Signature from 'vue3-signature';
 
 import { uploadFile } from '#/api/infra/file';
@@ -20,28 +20,22 @@ const signature = ref<InstanceType<typeof Vue3Signature>>();
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // TODO @jason：这里需要使用类似 modalApi.lock() 么？类似别的模块
-    message.success({
-      content: '签名上传中，请稍等...',
-    });
-    const signFileUrl = await uploadFile({
-      file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
-    });
-    emits('success', signFileUrl);
-    // TODO @jason：是不是不用主动 close？
-    await modalApi.close();
-  },
-  // TODO @jason：这个是不是下面方法，可以删除；
-  onOpenChange(visible) {
-    if (!visible) {
-      modalApi.close();
+    modalApi.lock();
+    try {
+      const signFileUrl = await uploadFile({
+        file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
+      });
+      emits('success', signFileUrl);
+      await modalApi.close();
+    } finally {
+      modalApi.unlock();
     }
   },
 });
 </script>
 
 <template>
-  <Modal title="流程签名" class="h-2/5 w-3/5">
+  <Modal title="流程签名" class="w-3/5">
     <div class="mb-2 flex justify-end">
       <Space>
         <Tooltip title="撤销上一步操作">
@@ -64,10 +58,8 @@ const [Modal, modalApi] = useVbenModal({
     </div>
 
     <Vue3Signature
-      class="mx-auto border border-solid border-gray-300"
+      class="mx-auto !h-80 border border-solid border-gray-300"
       ref="signature"
-      w="874px"
-      h="324px"
     />
   </Modal>
 </template>