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

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>