chore: 临时解决方案 for 弹窗组件内部表格

apps/web-antd/src/views/system/role-assign/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@@ -79,8 +79,24 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   },
 });
 
+const init = ref(true);
 const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: roleAssignDrawer,
+  /**
+   * TODO: 等待官方修复
+   * 临时解决方案 for https://github.com/vbenjs/vue-vben-admin/issues/4752
+   * 通过在关闭时使用v-if切换来造成Modal的重新渲染
+   * 目前Modal逻辑为每次打开 内部的元素会重新mount 但是Modal本身不会重新渲染
+   * 该方案会造成关闭动画丢失(应该放在afterClose中)
+   * @param isOpen 是否打开
+   */
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      init.value = false;
+      await nextTick();
+      init.value = true;
+    }
+  },
 });
 
 function handleAdd() {
@@ -156,6 +172,6 @@ function handleMultipleAuthCancel() {
         </Popconfirm>
       </template>
     </BasicTable>
-    <RoleAssignDrawer @reload="tableApi.query()" />
+    <RoleAssignDrawer v-if="init" @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-antd/src/views/tool/gen/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
@@ -188,8 +188,24 @@ function handleMultiDelete() {
   });
 }
 
+const init = ref(true);
 const [TableImportModal, tableImportModalApi] = useVbenModal({
   connectedComponent: tableImportModal,
+  /**
+   * TODO: 等待官方修复
+   * 临时解决方案 for https://github.com/vbenjs/vue-vben-admin/issues/4752
+   * 通过在关闭时使用v-if切换来造成Modal的重新渲染
+   * 目前Modal逻辑为每次打开 内部的元素会重新mount 但是Modal本身不会重新渲染
+   * 该方案会造成关闭动画丢失(应该放在afterClose中)
+   * @param isOpen 是否打开
+   */
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      init.value = false;
+      await nextTick();
+      init.value = true;
+    }
+  },
 });
 
 function handleImport() {
@@ -290,6 +306,6 @@ function handleImport() {
       </template>
     </BasicTable>
     <CodePreviewModal />
-    <TableImportModal @reload="tableApi.query()" />
+    <TableImportModal v-if="init" @reload="tableApi.query()" />
   </Page>
 </template>