vue3.2/Vite/Ts68: SKU列表的展示
·
Yin灏
目录结构
└─src
├─api
│ └─product
│ └─spu
│ ├─index.ts
│ └─type.ts
└─views
└─product
└─spu
└─index.vue
展示 SKU 列表的接口
src/api/product/spu/index.ts
import type { SkuInfoData } from "./type";
//...
enum API {
SKUINGO_URL = "/admin/product/findBySpuId/",
}
//...
export const reqSkuList = (spuId: number | string) =>
request.get<any, SkuInfoData>(API.SKUINGO_URL + spuId);
定义接口数据类型
src/api/product/spu/type.ts
//...
export interface SkuData {
category3Id: string | number;
spuId: string | number;
tmId: string | number;
skuName: string;
price: string | number;
weight: string | number;
skuDesc: string;
skuAttrValueList?: Attr[];
skuSaleAttrValueList?: SaleAttr[];
skuDefaultImg: string;
}
//...
export interface SkuInfoData extends ResponseData {
data: SkuData[];
}
组件中处理
src/views/product/spu/index.vue
<template>
<div>
<!-- ... -->
<el-card>
<div v-show="scene === 0">
<!-- .... -->
<el-table border :data="records">
<!-- ... -->
<el-table-column label="SPU操作">
<template #="{row}">
<!-- ... -->
<el-button
type="primary"
size="small"
icon="View"
title="查看SKU列表"
@click="findSku(row)"
></el-button>
<el-button
type="primary"
size="small"
icon="Delete"
title="删除SPU"
></el-button>
</template>
</el-table-column>
</el-table>
<!-- ... -->
</div>
<!-- ... -->
<!-- dialog -->
<el-dialog v-mode="show" title="SKU列表">
<el-table>
<el-table-column label="SKU名字" prop="skuName"></el-table-column>
<el-table-column label="SKU价格" prop="price"></el-table-column>
<el-table-column label="SKU重量" prop="weight"></el-table-column>
<el-table-column label="SKU图片">
<template #="{row}">
<img :src="row.skuDefaultImg" :width="100" :height="100" />
</template>
</el-table-column>
</el-table>
</el-dialog>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { reqSkuList } from "@/api/product/spu";
import { SkuInfoData, SkuData } from "@/api/product/spu/type";
//...
let skuArr = ref<SkuData[]>([]);
let show = ref<boolean>(false);
//...
const findSku = async (row: SkuInfoData) => {
const result: any = await reqSkuList(row.id as number);
if (result.code === 200) {
skuArr.value = result.data;
show.value = true;
}
};
</script>