!255 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !255 from Jason/dev

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"
                   />

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>