修复删除操作

jianyun8023 · Sep 1, 2024 · cb47573 · cb47573
1 parent fa19d0c
commit cb47573
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 119 deletions.
diff --git a/app/calibre-pages/src/api/api.ts b/app/calibre-pages/src/api/api.ts
@@ -1,26 +1,28 @@
 // src/api/api.ts
+import {handleApiResponse} from "@/api/apiUtils";
+
 export async function fetchPublishers() {
     const response = await fetch('/api/publisher');
     if (!response.ok) {
         throw new Error('Failed to fetch publishers');
     }
-    return response.json().then((data) => data.data);
+    return handleApiResponse(response);
 }
 
 export async function fetchRandomBooks() {
     const response = await fetch('/api/random?limit=12')
     if (!response.ok) {
         throw new Error('Failed to random');
     }
-    return response.json().then((data) => data.data);
+    return handleApiResponse(response);
 }
 
 export async function fetchRecentBooks(limit: number, offset: number) {
     const response = await fetch(`/api/recently?limit=${limit}&offset=${offset}`)
     if (!response.ok) {
         throw new Error('Failed to random');
     }
-    return response.json().then((data) => data.data);
+    return handleApiResponse(response);
 }
 
 export async function fetchBooks(keyword: string, filter: string[], limit: number, offset: number) {
@@ -38,7 +40,7 @@ export async function fetchBooks(keyword: string, filter: string[], limit: numbe
     if (!response.ok) {
         throw new Error('Failed to fetch books');
     }
-    return response.json().then((data) => data.data);
+    return handleApiResponse(response);
 }
 
 export async function deleteBook(bookId: number) {
@@ -51,16 +53,34 @@ export async function deleteBook(bookId: number) {
     if (!response.ok) {
         throw new Error('Failed to delete book');
     }
-    return response.json().then((data) => data.data);
+    return handleApiResponse(response);
 }
 
 export async function fetchBook(id: string) {
     try {
         const response = await fetch(`/api/book/${id}`);
         if (!response.ok) throw new Error('Network response was not ok');
-        return await response.json();
+        return handleApiResponse(response);
     } catch (error) {
         console.error('There was a problem with the fetch operation:', error);
         throw error;
     }
-}
+}
+
+export async function updateBook(id: string, body: any) {
+    try {
+        const response = await fetch(`/api/book/${id}/update`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+        if (!response.ok) throw new Error('Network response was not ok');
+        return handleApiResponse(response);
+    } catch (error) {
+        console.error('There was a problem with the fetch operation:', error);
+        throw error;
+    }
+}
+
diff --git a/app/calibre-pages/src/api/apiUtils.ts b/app/calibre-pages/src/api/apiUtils.ts
@@ -0,0 +1,20 @@
+// src/api/apiUtils.ts
+import {ElNotification} from "element-plus";
+import {h} from "vue";
+
+export async function handleApiResponse(response: Response) {
+    const data = await response.json();
+    if (response.status === 200) {
+        if (data.code == 200) {
+            return data.data;
+        } else {
+            ElNotification({
+                title: 'ERROR: ' + data.message,
+                message: h('i', {style: 'color: red'}, data.message),
+                type: 'error'
+            })
+        }
+    } else {
+        throw new Error(data.message || 'API request failed');
+    }
+}
diff --git a/app/calibre-pages/src/components/MetadataEdit.vue b/app/calibre-pages/src/components/MetadataEdit.vue
@@ -9,6 +9,7 @@
   >
     <el-form
         v-loading="loading"
+        v-if="dialogEditVisible"
         :model="form"
         label-width="70px"
         class="book-form"
@@ -99,18 +100,18 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="emit('update:dialogEditVisible', false)">取消</el-button>
-        <el-button type="primary" @click="updateMetadata" :loading="loading" >更新</el-button>
+        <el-button type="primary" @click="updateMetadata" :loading="loading">更新</el-button>
       </div>
     </template>
   </el-dialog>
 
 
-
 </template>
 <script setup lang="ts">
-import {h, reactive, ref, watch} from 'vue';
+import {reactive, ref, watch} from 'vue';
 import {ElButton, ElInput, ElNotification} from 'element-plus';
 import {Book} from '@/types/book';
+import {updateBook} from "@/api/api";
 
 const props = defineProps<{
   book: Book;
@@ -131,17 +132,32 @@ const form = reactive({
   rating: props.book.rating,
 });
 
-watch(() => props.book, (newVal) => {
-  console.log(newVal)
-  form.title = newVal.title;
-  form.authors = newVal.authors;
-  form.publisher = newVal.publisher;
-  form.pubdate = newVal.pubdate;
-  form.isbn = newVal.isbn;
-  form.comments = newVal.comments;
-  form.tags = newVal.tags;
-  form.rating = newVal.rating;
-  console.log(form)
+// watch(() => props.book, (newVal) => {
+//   console.log(newVal)
+//   form.title = newVal.title;
+//   form.authors = newVal.authors;
+//   form.publisher = newVal.publisher;
+//   form.pubdate = newVal.pubdate;
+//   form.isbn = newVal.isbn;
+//   form.comments = newVal.comments;
+//   form.tags = newVal.tags;
+//   form.rating = newVal.rating;
+//   console.log(form)
+// });
+
+watch(() => props.dialogEditVisible, (newVal) => {
+
+  if (newVal) {
+    console.log(props.book)
+    form.title = props.book.title;
+    form.authors = props.book.authors;
+    form.publisher = props.book.publisher;
+    form.pubdate = props.book.pubdate;
+    form.isbn = props.book.isbn;
+    form.comments = props.book.comments;
+    form.tags = props.book.tags;
+    form.rating = props.book.rating;
+  }
 });
 
 const loading = ref(false);
@@ -150,40 +166,26 @@ const updateMetadata = async () => {
   loading.value = true;
   console.log(form);
 
-  try {
-    const response = await fetch(`/api/book/${props.book.id}/update`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(form),
-    });
-    if (response.ok) {
-      setTimeout(() => {
-        ElNotification({
-          title: '书籍更新成功',
-          message: form.title,
-          type: 'success',
-        });
+
+  await updateBook(String(props.book.id), form)
+      .then((response) => {
+        if (response) {
+          setTimeout(() => {
+            ElNotification({
+              title: '书籍更新成功',
+              message: form.title,
+              type: 'success',
+            });
+            loading.value = false;
+            emit('update:dialogEditVisible', false);
+            window.location.reload();
+          }, 1000);
+        }
+      })
+      .finally(() => {
         loading.value = false;
-        window.location.reload();
-      }, 1000);
-    } else {
-      ElNotification({
-        title: '书籍更新失败',
-        message: h('i', {style: 'color: red'}, form.title),
-        type: 'error',
       });
-      loading.value = false;
-    }
-  } catch (e: any) {
-    ElNotification({
-      title: '书籍更新失败',
-      message: h('i', {style: 'color: red'}, e.message),
-      type: 'error',
-    });
-    loading.value = false;
-  }
+
 };
 </script>
 

diff --git a/app/calibre-pages/src/components/MetadataUpdate.vue b/app/calibre-pages/src/components/MetadataUpdate.vue
@@ -159,8 +159,9 @@
 </template>
 <script setup lang="ts">
 import {ElNotification} from 'element-plus'
-import {h, reactive, ref, watch} from 'vue'
+import {reactive, ref, watch} from 'vue'
 import {Book} from '@/types/book'
+import {updateBook} from "@/api/api";
 
 const props = defineProps<{
   book: Book;
@@ -226,43 +227,23 @@ const updateMetadata = async () => {
   loading.value = true;
   console.log(form);
 
-  try {
-    const response = await fetch(`/api/book/${props.book.id}/update`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(form)
-    });
-    if (response.ok) {
-      setTimeout(() => {
-        ElNotification({
-          title: '书籍更新成功',
-          message: form.title,
-          type: 'success'
-        });
+  await updateBook(String(props.book.id), form)
+      .then((response) => {
+        if (response) {
+          setTimeout(() => {
+            ElNotification({
+              title: '书籍更新成功',
+              message: form.title,
+              type: 'success',
+            });
+            loading.value = false;
+            window.location.reload();
+          }, 1000);
+        }
+      })
+      .finally(() => {
         loading.value = false;
-        //刷新页面
-        window.location.reload();
-      }, 1000);
-    } else {
-      ElNotification({
-        title: '书籍更新失败',
-        message: h('i', {style: 'color: red'}, form.title),
-        type: 'error'
       });
-      loading.value = false;
-      // this.updateMetadataFlag = false
-    }
-  } catch (e: any) {
-    ElNotification({
-      title: '书籍更新失败',
-      message: h('i', {style: 'color: red'}, e.message),
-      type: 'error'
-    });
-    loading.value = false;
-    // this.updateMetadataFlag = false
-  }
 };
 
 watch(() => props.updateMetadataFlag, (val) => {

diff --git a/app/calibre-pages/src/views/Detail.vue b/app/calibre-pages/src/views/Detail.vue
@@ -314,20 +314,14 @@ export default {
       return tags.join(', ')
     },
     async deleteBook(bookId: string) {
-      const response = await deleteBook(Number(bookId))
-      if (response.ok) {
+      const data = await deleteBook(Number(bookId))
+      if (data) {
         ElNotification({
           title: 'Book deleted successfully',
           message: this.book.title,
           type: 'success'
         })
         this.$router.back()
-      } else {
-        ElNotification({
-          title: '删除书籍失败',
-          message: h('i', {style: 'color: red'}, this.book.title),
-          type: 'error'
-        })
       }
     },
     readBook() {