From bae08aa6c5fd45a17c58d37db361eb3db759ebf0 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 30 Oct 2024 09:47:07 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=B8=B4=E6=97=B6=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=96=B9=E6=A1=88=20for=20=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=86=85=E9=83=A8=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/role-assign/index.vue    | 20 +++++++++++++++++--
 apps/web-antd/src/views/tool/gen/index.vue    | 20 +++++++++++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/apps/web-antd/src/views/system/role-assign/index.vue b/apps/web-antd/src/views/system/role-assign/index.vue
index 3d20826f..fcf284a2 100644
--- a/apps/web-antd/src/views/system/role-assign/index.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/tool/gen/index.vue b/apps/web-antd/src/views/tool/gen/index.vue
index dbad1574..9dacbac4 100644
--- a/apps/web-antd/src/views/tool/gen/index.vue
+++ b/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>