vue3.2/Vite/Ts66: 获取添加SKU数据展示
·
Yin灏
目录结构
└─src
└─views
└─product
└─spu
├─index.vue
└─skuform.vue
获取 SKU 数据展示
src/views/product/spu/skuform.vue
<template>
<el-form label-width="100px">
<el-form-item label="SKU名称">
<el-input placeholder="SKU名称"></el-input>
</el-form-item>
<el-form-item label="价格(元)">
<el-input placeholder="价格(元)" type="number"></el-input>
</el-form-item>
<el-form-item label="重量(g)">
<el-input placeholder="重量(g)" type="number"></el-input>
</el-form-item>
<el-form-item label="SKU描述">
<el-input placeholder="SKU描述" type="textarea"></el-input>
</el-form-item>
<!-- 平台属性 -->
<el-form-item label="平台属性">
<el-form :inline="true">
<el-form-item
v-for="(item, index) in attrArr"
:key="item.id"
:label="item.attrName"
>
<el-select>
<el-option
v-for="(item1, index) in item.attrValueList"
:key="item1.id"
:label="item1.valueName"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-form-item>
<el-form-item label="销售属性">
<el-form :inline="true">
<el-form-item
v-for="(item, index) in saleArr"
:key="item.id"
:label="item.saleAttrName"
>
<el-select>
<el-option
v-for="(item1, index) in item.spuSaleAttrValueList"
:key="item1.id"
:label="item1.saleAttrValueName"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-form-item>
<el-form-item label="图片名称">
<el-table :data="imgArr">
<el-table-column
type="selection"
width="80px"
align="center"
></el-table-column>
<el-table-column label="图片">
<template #="{row}">
<img :src="row.imgUrl" widht="100" height="100" />
</template>
</el-table-column>
<el-table-column label="名称" prop="imgName"></el-table-column>
<el-table-column label="操作">
<template #="{row}">
<el-button type="primary" size="small">设置默认</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 按钮 -->
<el-form-item>
<el-button type="primary" size="small">保存</el-button>
<el-button type="primary" size="small" @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { reqAttr } from "@/api/product/attr";
import { reqSpuImageList, reqSpuHasSaleAttr } from "@/api/product/spu";
let $emit = defineEmits(["changeScene"]);
let attrArr = ref<any>([]);
let saleArr = ref<any>([]);
let imgArr = ref<any>([]);
const cancel = () => {
$emit("changeScene", {
flag: 0,
params: "",
});
};
const initSkuData = async (
c1Id: number | string,
c2Id: number | string,
spu: any
) => {
const result: any = await reqAttr(c1Id, c2Id, spu.category3Id);
const result1: any = await reqSpuHasSaleAttr(spu.id);
const result2: any = await reqSpuImageList(spu.id);
attrArr.value = result.data;
saleArr.value = result1.data;
imgArr.value = result2.data;
};
defineExpose({
initSkuData,
});
</script>
点击按钮,父组件调用子组件的方法,在子组件内部调用接口获取展示的数据
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="Plus"
title="添加SKU"
@click="addSku(row)"
></el-button>
<!-- ... -->
</template>
</el-table-column>
</el-table>
<!-- ... -->
</div>
<!-- ... -->
<SkuForm v-show="scene === 2" ref="sku"></SkuForm>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { SpuData } from "@/api/product/spu/type";
// 引入仓库
import useCategoryStore from "@/store/modules/category";
let categoryStore = useCategoryStore();
//...
let scene = ref<number>(0);
let sku = ref<any>(0);
//...
const addSku = (row: SpuData) => {
scene.value = 2;
sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
};
</script>