🎨 add useReset to reset form state

src/hooks/useReset.ts

@@ -0,0 +1,17 @@
+import { isArray, isObject } from "@/helper/utils";
+
+const useReset = <T extends Record<string, any>>(fields: T): T => {
+  Object.keys(fields).forEach((field) => {
+    let fieldValue = fields[field];
+    if (isObject(fieldValue)) fieldValue = {};
+    else if (isArray(fieldValue)) fieldValue = [];
+    else if (typeof fieldValue === "string" || typeof fieldValue === "number")
+      fieldValue = "";
+    else if (typeof fieldValue === "boolean") fieldValue = false;
+    (fields[field] as T[keyof T]) = fieldValue;
+  });
+
+  return fields as T;
+};
+
+export default useReset;

src/views/put/put-book.vue

@@ -25,16 +25,16 @@
     <!-- 添加 -->
     <a-modal title="投放书籍添加"
              width="400px"
+             destroy-on-close
              v-model:visible="open"
-             :confirm-loading="addFormState.inConfirm"
-             :after-close="onReset"
+             :confirm-loading="inConfirm"
              @ok="onAdd">
       <a-form :model="addFormState"
               :labelCol="labelCol"
               :wrapperCol="wrapperCol">
         <a-form-item label="公众号名称">
           <a-select v-model:value="addFormState.official_id">
-            <a-select-option v-for="official in addFormState.officials"
+            <a-select-option v-for="official in officials"
                              :key="official.value"
                              :value="official.value">
               {{official.label}}
@@ -60,7 +60,7 @@
         </a-form-item>
         <a-form-item label="流量平台">
           <a-select v-model:value="addFormState.platform">
-            <a-select-option v-for="platform in addFormState.platforms"
+            <a-select-option v-for="platform in platforms"
                              :key="platform.value"
                              :value="platform.value">
               {{platform.label}}
@@ -99,6 +99,7 @@ import {
 } from "@/api";
 import { TableColumnOfPutBooks } from "../_pageOptions/table-put";
 import { IBookSearchResult, IDeliveryBook } from "@/types/api";
+import useReset from "../../hooks/useReset";
 
 const PutBooks = defineComponent({
   components: {
@@ -112,8 +113,11 @@ const PutBooks = defineComponent({
     const { labelCol, wrapperCol } = useFormLayout();
 
     const state = reactive({
+      officials: computed(() => store.getters.officials),
+      platforms: computed(() => store.getters.platforms),
       searching: false,
       open: false,
+      inConfirm: false,
       list: ref<IDeliveryBook[]>([]),
       columns: TableColumnOfPutBooks,
       official_name: "",
@@ -121,13 +125,10 @@ const PutBooks = defineComponent({
     });
 
     const addFormState = reactive({
-      officials: computed(() => store.getters.officials),
-      platforms: computed(() => store.getters.platforms),
       official_id: "",
       book: ref<Partial<IBookSearchResult>>({}),
       platform: "",
       books: ref<IBookSearchResult[]>([]),
-      inConfirm: false,
     });
 
     const onSearch = (fields: Record<string, string>) => {
@@ -156,8 +157,9 @@ const PutBooks = defineComponent({
       }
     };
 
-    // 添加书籍弹窗
+    // 弹窗书籍搜索
     const onBookSearch = useDebounceFn(async (keywords: string) => {
+      addFormState.books.length = 0;
       if (!keywords) return;
       const { data } = await getBooksByName(keywords);
       addFormState.books.push(...data.list);
@@ -186,7 +188,7 @@ const PutBooks = defineComponent({
     async onAdd() {
       try {
         // TODO 没做字段校验 字段校验封装
-        this.addFormState.inConfirm = true;
+        this.inConfirm = true;
         const { official_id, platform, book } = this.addFormState;
         // useValidate({ official_id, platform });
         await addDeliveryBook(
@@ -199,11 +201,12 @@ const PutBooks = defineComponent({
         this.open = false;
         this.$message.success("添加成功");
         this.onBookLoaded();
+        this.addFormState = useReset(this.addFormState);
       } catch (error) {
         console.log("error while add delivery book");
         error.message && this.$message.error(error.message);
       } finally {
-        this.addFormState.inConfirm = false;
+        this.inConfirm = false;
       }
     },
     onStop(data: IDeliveryBook) {
@@ -213,12 +216,6 @@ const PutBooks = defineComponent({
         this.onBookLoaded();
       });
     },
-    onReset() {
-      this.addFormState.official_id = "";
-      this.addFormState.platform = "";
-      this.addFormState.book = {};
-      this.addFormState.books = [];
-    },
   },
 });