From 2a464134a0d6e417b7eeaf0a5b353bb69918ac49 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 15 Aug 2022 14:43:06 +0800
Subject: [PATCH] perf: reset form when close editing modal

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/modules/interface/menus/components/MenuEditingModal.vue   | 2 ++
 .../interface/menus/components/MenuItemEditingModal.vue       | 2 ++
 src/modules/system/roles/components/RoleEditingModal.vue      | 4 +++-
 src/modules/system/users/components/UserEditingModal.vue      | 3 ++-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/modules/interface/menus/components/MenuEditingModal.vue b/src/modules/interface/menus/components/MenuEditingModal.vue
index 05424be23..793170a3b 100644
--- a/src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuEditingModal.vue
@@ -8,6 +8,7 @@ import { apiClient } from "@halo-dev/admin-shared";
 import { submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
+import { reset } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -87,6 +88,7 @@ watch(props, (newVal) => {
   }
   formState.value = cloneDeep(initialFormState);
   formState.value.metadata.name = uuid();
+  reset("menu-form");
 });
 </script>
 <template>
diff --git a/src/modules/interface/menus/components/MenuItemEditingModal.vue b/src/modules/interface/menus/components/MenuItemEditingModal.vue
index 13eb7a17c..340c59759 100644
--- a/src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -8,6 +8,7 @@ import { apiClient } from "@halo-dev/admin-shared";
 import { submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
+import { reset } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -88,6 +89,7 @@ watch(props, (newVal) => {
   }
   formState.value = cloneDeep(initialFormState);
   formState.value.metadata.name = uuid();
+  reset("menuitem-form");
 });
 
 watchEffect(() => {
diff --git a/src/modules/system/roles/components/RoleEditingModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
index ff2d6a12d..827faacf9 100644
--- a/src/modules/system/roles/components/RoleEditingModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@@ -11,6 +11,7 @@ import {
 import cloneDeep from "lodash.clonedeep";
 import { submitForm } from "@formkit/core";
 import { useMagicKeys } from "@vueuse/core";
+import { reset } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -70,6 +71,7 @@ watch(props, (newVal) => {
   }
   formState.value = cloneDeep(initialFormState);
   selectedRoleTemplates.value.clear();
+  reset("role-form");
 });
 
 const tabActiveId = ref("general");
@@ -96,9 +98,9 @@ const handleVisibleChange = (visible: boolean) => {
 </script>
 <template>
   <VModal
+    :title="editingModalTitle"
     :visible="visible"
     :width="700"
-    :title="editingModalTitle"
     @update:visible="handleVisibleChange"
   >
     <VTabs v-model:active-id="tabActiveId" type="outline">
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index 61fc383e0..43657305d 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -17,7 +17,7 @@ import { rbacAnnotations } from "@/constants/annotations";
 import YAML from "yaml";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -103,6 +103,7 @@ watch(props, (newVal) => {
     return;
   }
   formState.value = cloneDeep(initialFormState);
+  reset("user-form");
 });
 
 const handleFetchRoles = async () => {