chore: iframe通信 加载完毕后才显示表单 解决卡顿问题

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

@@ -7,11 +7,13 @@ import { computed, onUnmounted, ref, watch } from 'vue';
 import { Fallback, useVbenModal, VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
+import { useEventListener } from '@vueuse/core';
 import {
   Card,
   Divider,
   Modal,
   Popconfirm,
+  Skeleton,
   Space,
   TabPane,
   Tabs,
@@ -56,11 +58,21 @@ const currentFlowInfo = ref<FlowInfoResponse>();
  * card的loading状态
  */
 const loading = ref(false);
+const iframeLoaded = ref(false);
+useEventListener('message', (event) => {
+  /**
+   * iframe通信 加载完毕后才显示表单 解决卡顿问题
+   */
+  if (event.data === 'mounted') {
+    iframeLoaded.value = true;
+  }
+});
 
 async function handleLoadInfo(task: TaskInfo | undefined) {
   try {
     if (!task) return null;
     loading.value = true;
+    iframeLoaded.value = false;
     const resp = await flowInfo(task.businessId);
     currentFlowInfo.value = resp;
   } catch (error) {
@@ -153,9 +165,11 @@ function handleTermination() {
           <div class="h-fulloverflow-y-auto">
             <!-- 约定${task.formPath}/frame 为内嵌表单 用于展示 需要在本地路由添加 -->
             <iframe
+              v-show="iframeLoaded"
               :src="`${task.formPath}/iframe?readonly=true&id=${task.businessId}`"
               class="h-[300px] w-full"
             ></iframe>
+            <Skeleton v-show="!iframeLoaded" :paragraph="{ rows: 6 }" active />
             <Divider />
             <ApprovalTimeline :list="currentFlowInfo.list" />
           </div>

apps/web-antd/src/views/workflow/leave/leave-form.vue

@@ -52,6 +52,14 @@ onMounted(async () => {
     await formApi.setValues(resp);
     const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
     await formApi.setFieldValue('dateRange', dateRange);
+
+    /**
+     * window.parent（最近的上一级父页面）
+     * 主要解决内嵌iframe卡顿的问题
+     */
+    if (readonly) {
+      window.parent.postMessage('mounted', '*');
+    }
   }
 });
 

apps/web-antd/src/views/workflow/leave/leave-modal.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-
-import { leaveAdd, leaveInfo, leaveUpdate } from './api';
-import { modalSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 80,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await leaveInfo(id);
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues());
-    await (isUpdate.value ? leaveUpdate(data) : leaveAdd(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[550px]">
-    <BasicForm />
-  </BasicModal>
-</template>