From ada0a7edf695a3a613e97b3edafcb874cf8d9d4e Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 18 Dec 2024 09:57:31 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=86=85=E5=B5=8Ciframe=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E6=A0=B9=E6=8D=AE=E8=A1=A8=E5=8D=95=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/workflow/components/approval-panel.vue  | 11 ++++++++++-
 .../src/views/workflow/leave/leave-form.vue       | 15 +++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

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 fcc16a00..46f7e315 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-panel.vue
@@ -93,6 +93,7 @@ const currentFlowInfo = ref<FlowInfoResponse>();
  */
 const loading = ref(false);
 const iframeLoaded = ref(false);
+const iframeHeight = ref(300);
 useEventListener('message', (event) => {
   /**
    * iframe通信 加载完毕后才显示表单 解决卡顿问题
@@ -100,6 +101,13 @@ useEventListener('message', (event) => {
   if (event.data === 'mounted') {
     iframeLoaded.value = true;
   }
+  /**
+   * 高度与表单高度保持一致
+   */
+  if (event.data.includes('height')) {
+    const height = event.data.split('height:')[1];
+    iframeHeight.value = height;
+  }
 });
 
 async function handleLoadInfo(task: TaskInfo | undefined) {
@@ -348,7 +356,8 @@ function handleReductionSignature(userList: User[]) {
             <iframe
               v-show="iframeLoaded"
               :src="`${task.formPath}/iframe?readonly=true&id=${task.businessId}`"
-              class="h-[300px] w-full"
+              :style="{ height: `${iframeHeight}px` }"
+              class="w-full"
             ></iframe>
             <Skeleton v-show="!iframeLoaded" :paragraph="{ rows: 6 }" active />
             <Divider />
diff --git a/apps/web-antd/src/views/workflow/leave/leave-form.vue b/apps/web-antd/src/views/workflow/leave/leave-form.vue
index 22f4ddbe..a78039ed 100644
--- a/apps/web-antd/src/views/workflow/leave/leave-form.vue
+++ b/apps/web-antd/src/views/workflow/leave/leave-form.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
 
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, useTemplateRef } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -45,6 +45,7 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
+const cardRef = useTemplateRef('cardRef');
 onMounted(async () => {
   // 只读 获取信息赋值
   if (id) {
@@ -58,7 +59,17 @@ onMounted(async () => {
      * 主要解决内嵌iframe卡顿的问题
      */
     if (readonly) {
+      // 渲染完毕才显示表单
       window.parent.postMessage('mounted', '*');
+      // 获取表单高度 内嵌时保持一致
+      setTimeout(() => {
+        const el = cardRef.value?.$el as HTMLDivElement;
+        // 获取高度
+        const height = el?.offsetHeight ?? 0;
+        if (height) {
+          window.parent.postMessage(`height:${height}`, '*');
+        }
+      });
     }
   }
 });
@@ -140,7 +151,7 @@ function handleComplete() {
 </script>
 
 <template>
-  <Card>
+  <Card ref="cardRef">
     <div id="leave-form">
       <BasicForm />
       <div v-if="showActionBtn" class="flex justify-end gap-2">