Vue Nuxt 3 刪除訂單

本篇在Vue Nuxt 3專案使用DELETE API刪除資料。

目前專案[出口業務]只能[查詢訂單]和[新增訂單]，接下來要實作[刪除訂單]。

事前要求

參考「Vue Nuxt 3 Toast通知完成Toast通知元件。

建立API介面

在types/api/orders.ts中添加DeleteOrderResponse做為[刪除訂單API]的回應資料介面。

types/api/orders.ts

import type { Order } from "~/shared/types/order";
// ...
export interface DeleteOrderResponse {
  success: boolean;
  message: string;
}

建立刪除訂單API

目前已經有[查詢訂單API] server/api/orders.get.ts和[新增訂單API] server/api/orders.post.ts，根據Nuxt API的目錄命名可以統一放到server/api/orders目錄，也就是改為server/api/orders/index.get.ts和server/api/orders/index.post.ts。

建立[刪除訂單API] server/api/orders/[id].delete.ts，即API [DELETE] /api/orders/:id。

根據傳入的path變數id從[訂單資料]中找到[訂單]，若[訂單狀態]order.status為[已完成]done則不可刪除；反之則從原本的[訂單資料]中移除。

server/api/orders/[id].delete.ts

import { orders } from "~/server/data/orders";

export default defineEventHandler((event) => {
  const id = Number(event.context.params?.id);

  const order = orders.find((o) => o.id === id);

  if (!order) {
    return {
      success: false,
      message: "找不到訂單",
    };
  }

  if (order.status === "done") {
    return {
      success: false,
      message: "已完成訂單無法刪除",
    };
  }

  orders.splice(orders.indexOf(order), 1);

  return {
    success: true,
  };
});

修改出口業務頁面

修改[出口業務]頁面pages/home/export/index.vue，在訂單列表中添加[刪除]按鈕與點擊觸發的函式deleteOrder(id)。[刪除]按鈕在[訂單狀態]為[已完成]done則反灰無法點擊。

點擊[刪除]按鈕觸發deleteOrder(id)函式，帶入[訂單編號]id；先使用confirm()讓使用者確認是否刪除；呼叫[刪除訂單API]刪除該筆訂單資料；刪除完成後使用Toast通知刪除結果訊息，並用[查詢訂單API]返回的refresh函式重新查詢。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>

    <!--...-->
    <ul v-else>
      <li v-for="order in result?.data" :key="order.id">
        <NuxtLink :to="`/home/export/${order.id}`">
          訂單 #{{ order.id }},
          狀態: {{ order.status }},
          出口國家：{{ countryMap?.[order.country] ?? order.country }}
        </NuxtLink>
         
        <button @click="deleteOrder(order.id)" :disabled="order.status === 'done'">刪除</button>
      </li>
    </ul>

    <!--...-->
  </div>
</template>

<script setup lang="ts">
// ...
const toast = useToast()
// ...
const { data: result, pending: orderPending, error, refresh } = useFetch<OrdersResponse>('/api/orders', {
  //...
})
// ...
async function deleteOrder(id: number) {
  if (!confirm(`確定刪除訂單編號 #${id} ？`)) {
    return;
  }
  const response = await $fetch<DeleteOrderResponse>(`/api/orders/${id}`, {
    method: "DELETE",
  });

  if (response.success) {
    toast.showToast(`刪除訂單編號 #${id} 成功！`, 'success')
    await refresh();
  } else {
    toast.showToast(`刪除訂單失敗：${response.message}`, 'error')
  }
}
</script>
<!--...-->

github

測試

在[出口業務]頁面查詢的[訂單列表]後多了[刪除]按鈕，點選即可把該筆訂單刪除。