灏天阁

vue3.2/Vite/Ts45: 品牌数据删除业务

· Yin灏

目录结构

└─src
    ├─api
    │  └─product
    │      └─trademark
    │          └─index.ts
    └─views
        └─product
            └─trademark
                └─index.vue

添加品牌商品删除接口

src/api/product/trademark/index.ts

//...
enum API {
  DELETE_URL = "/admin/product/baseTrademark/remove/",
}
//...
export const reqDeleteTrademark = (id: number) =>
  request.delete<any, any>(API.DELETE_URL + id);

src/views/product/trademark/index.vue

<template>
  <!-- ... -->
  <template #="{row}">
    <!-- 删除按钮 -->
    <el-popconfirm
      :title="`您确定要删除${row.tmName}?`"
      width="250px"
      icon="Delete"
      confime="remove(row.id)"
    >
      <template #reference>
        <el-button type="primary" size="small" icon="Delete"></el-button>
      </template>
    </el-popconfirm>
  </template>
  <!-- ... -->
</template>
<script setup lang="ts">
  //...
  import { reqDeleteTrademark } from "@/api/product/trademark";
  // 删除品牌
  const remove = async (id: number) => {
    const result = await reqDeleteTrademark(id);
    if (result.code === 200) {
      ElMessage({
        type: "success",
        message: "删除品牌成功",
      });
      // 重新获取所有商品
      // trademarkArr 是当前分页的数据数组
      getHasTrademark(
        trademarkArr.value.length > 1 ? pageNo.value : pageNo.value - 1
      );
    } else {
      ElMessage({
        type: "error",
        message: "删除品牌失败",
      });
    }
  };
</script>

- Book Lists -