vue3.2/Vite/Ts72: SKU上架和下架
·
Yin灏
目录结构
└─src
├─api
│ └─product
│ └─sku
│ └─index.ts
└─views
└─product
└─sku
└─index.vue
src/views/product/sku/index.vue
<template>
<el-card :data="skuArr">
<el-table border>
<!-- ... -->
<el-table-column label="操作" width="250px" fixed="right">
<template #="{ row }">
<!-- 上架和下架 -->
<el-button
type="primary"
size="small"
:icon="row.isSale === 1 ? 'Bottom' : 'Top'"
@click="updateSale(row)"
></el-button>
<!-- ... -->
</template>
</el-table-column>
</el-table>
<!-- ... -->
</el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqSkuList, reqSaleSku, reqCancelSaleSku } from "@/api/product/sku";
import type { SkuData } from "@/api/product/sku/type";
//...
const updateSale = async (row: SkuData) => {
if (row.isSale === 1) {
// 上架中
await reqCancelSaleSku(row.id as number);
ElMessage({
type: "success",
message: "下架成功",
});
getHasSku(pageNo.value);
} else {
// 下架中
await reqSaleSku(row.id as number);
ElMessage({
type: "success",
message: "上架成功",
});
getHasSku(pageNo.value);
}
};
</script>
上架和下架接口处理
src/api/product/sku/index.ts
enum API {
SALE_URL = "/admin/product/onSale/",
CANCELSALE_URL = "/admin/product/cancelSale/",
}
//...
export const reqSaleSku = (skuId: number) =>
request.get<any, any>(API.SALE_URL + skuId);
export const reqCancelSaleSku = (skuId: number) =>
request.get<any, any>(API.cancelSale + skuId);