fix: build bugs
xingyu4j
parent
b55c291af1
commit
f317508d39
|
|
@ -45,7 +45,8 @@ const props = defineProps({
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'selectionChange', value: MallSpuApi.Sku[]): void;
|
(e: 'selectionChange', value: MallSpuApi.Sku[]): void;
|
||||||
}>(); const formData = ref<MallSpuApi.Spu>(); // 表单数据
|
}>();
|
||||||
|
const formData = ref<MallSpuApi.Spu>(); // 表单数据
|
||||||
const skuList = ref<MallSpuApi.Sku[]>([
|
const skuList = ref<MallSpuApi.Sku[]>([
|
||||||
{
|
{
|
||||||
price: 0, // 商品价格
|
price: 0, // 商品价格
|
||||||
|
|
@ -88,7 +89,7 @@ const deleteSku = (row: MallSpuApi.Sku) => {
|
||||||
);
|
);
|
||||||
formData.value!.skus!.splice(index, 1);
|
formData.value!.skus!.splice(index, 1);
|
||||||
};
|
};
|
||||||
const tableHeaders = ref<{ label: string; prop: string; }[]>([]); // 多属性表头
|
const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
|
||||||
/**
|
/**
|
||||||
* 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
|
* 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
|
||||||
*/
|
*/
|
||||||
|
|
@ -204,7 +205,7 @@ const validateData = (propertyList: any[]) => {
|
||||||
sku.properties
|
sku.properties
|
||||||
?.map((property: any) => property.propertyId)
|
?.map((property: any) => property.propertyId)
|
||||||
?.forEach((propertyId: number) => {
|
?.forEach((propertyId: number) => {
|
||||||
if (!skuPropertyIds.indexOf(propertyId!) === -1) {
|
if (!skuPropertyIds.includes(propertyId!)) {
|
||||||
skuPropertyIds.push(propertyId!);
|
skuPropertyIds.push(propertyId!);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
@ -463,333 +464,9 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
|
||||||
size="small"
|
size="small"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="deleteSku(row)"
|
@click="deleteSku(row)"
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</ElTable>
|
|
||||||
|
|
||||||
<!-- 情况二：作为活动组件 -->
|
|
||||||
<ElTable
|
|
||||||
v-if="isActivityComponent"
|
|
||||||
:data="formData!.skus!"
|
|
||||||
border
|
|
||||||
max-height="500"
|
|
||||||
size="small"
|
|
||||||
style="width: 99%"
|
|
||||||
>
|
|
||||||
<el-table-column v-if="isComponent" type="selection" width="45" />
|
|
||||||
<el-table-column align="center" label="图片" min-width="80">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-image :src="row.picUrl" class="h-60px w-60px" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<template v-if="formData!.specType">
|
|
||||||
<!-- 根据商品属性动态添加 -->
|
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in tableHeaders"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
align="center"
|
|
||||||
min-width="80"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<span style="font-weight: bold; color: #40aaff">
|
|
||||||
{{ row.properties?.[index]?.valueName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</template>
|
|
||||||
<el-table-column align="center" label="商品条码" min-width="100">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row.barCode }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="销售价(元)" min-width="80">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ formatToFraction(row.price) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="市场价(元)" min-width="80">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ formatToFraction(row.marketPrice) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="成本价(元)" min-width="80">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ formatToFraction(row.costPrice) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="库存" min-width="80">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row.stock }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- 方便扩展每个活动配置的属性不一样 -->
|
|
||||||
<slot name="extension"></slot>
|
|
||||||
</ElTable>
|
|
||||||
</template>.includes(propertyId!)) {
|
|
||||||
skuPropertyIds.push(propertyId!);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const propertyIds = propertyList.map((item) => item.id);
|
|
||||||
return skuPropertyIds.length === propertyIds.length;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 构建所有排列组合 */
|
|
||||||
const build = (
|
|
||||||
propertyValuesList: MallSpuApi.Property[][],
|
|
||||||
): MallSpuApi.Property[] | MallSpuApi.Property[][] => {
|
|
||||||
if (!propertyValuesList || propertyValuesList.length === 0) {
|
|
||||||
return [];
|
|
||||||
} else if (propertyValuesList.length === 1) {
|
|
||||||
return propertyValuesList[0] || [];
|
|
||||||
} else {
|
|
||||||
const result: MallSpuApi.Property[][] = [];
|
|
||||||
const rest = build(propertyValuesList.slice(1));
|
|
||||||
if (propertyValuesList[0] && Array.isArray(rest)) {
|
|
||||||
for (let i = 0; i < propertyValuesList[0].length; i++) {
|
|
||||||
for (const restItem of rest) {
|
|
||||||
const currentItem = propertyValuesList[0][i];
|
|
||||||
// 第一次不是数组结构，后面的都是数组结构
|
|
||||||
if (Array.isArray(restItem)) {
|
|
||||||
result.push([currentItem!, ...restItem]);
|
|
||||||
} else if (restItem) {
|
|
||||||
// 确保restItem不是undefined，并进行类型断言
|
|
||||||
result.push([currentItem!, restItem as MallSpuApi.Property]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 监听属性列表，生成相关参数和表头 */
|
|
||||||
watch(
|
|
||||||
() => props.propertyList,
|
|
||||||
(propertyList: PropertyAndValues[]) => {
|
|
||||||
// 如果不是多规格则结束
|
|
||||||
if (!formData.value!.specType) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 如果当前组件作为批量添加数据使用，则重置表数据
|
|
||||||
if (props.isBatch) {
|
|
||||||
skuList.value = [
|
|
||||||
{
|
|
||||||
price: 0,
|
|
||||||
marketPrice: 0,
|
|
||||||
costPrice: 0,
|
|
||||||
barCode: '',
|
|
||||||
picUrl: '',
|
|
||||||
stock: 0,
|
|
||||||
weight: 0,
|
|
||||||
volume: 0,
|
|
||||||
firstBrokeragePrice: 0,
|
|
||||||
secondBrokeragePrice: 0,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断代理对象是否为空
|
|
||||||
if (JSON.stringify(propertyList) === '[]') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 重置表头
|
|
||||||
tableHeaders.value = [];
|
|
||||||
// 生成表头
|
|
||||||
propertyList.forEach((item, index) => {
|
|
||||||
// name加属性项index区分属性值
|
|
||||||
tableHeaders.value.push({ prop: `name${index}`, label: item.name });
|
|
||||||
});
|
|
||||||
// 如果回显的 sku 属性和添加的属性一致则不处理
|
|
||||||
if (validateData(propertyList)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 添加新属性没有属性值也不做处理
|
|
||||||
if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 生成 table 数据，即 sku 列表
|
|
||||||
generateTableData(propertyList);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const activitySkuListRef = ref<InstanceType<typeof ElTable>>();
|
|
||||||
|
|
||||||
const getSkuTableRef = () => {
|
|
||||||
return activitySkuListRef.value;
|
|
||||||
};
|
|
||||||
// 暴露出生成 sku 方法，给添加属性成功时调用
|
|
||||||
defineExpose({ generateTableData, validateSku, getSkuTableRef });
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<!-- 情况一：添加/修改 -->
|
|
||||||
<ElTable
|
|
||||||
v-if="!isActivityComponent"
|
|
||||||
:data="isBatch ? skuList : formData!.skus!"
|
|
||||||
border
|
|
||||||
class="tabNumWidth"
|
|
||||||
max-height="500"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<el-table-column align="center" label="图片" min-width="120">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<UploadImg
|
|
||||||
v-model="row.picUrl"
|
|
||||||
height="50px"
|
|
||||||
width="50px"
|
|
||||||
:show-description="false"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<template v-if="formData!.specType && !isBatch">
|
|
||||||
<!-- 根据商品属性动态添加 -->
|
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in tableHeaders"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
align="center"
|
|
||||||
min-width="120"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<span style="font-weight: bold; color: #40aaff">
|
|
||||||
{{ row.properties?.[index]?.valueName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</template>
|
|
||||||
<el-table-column align="center" label="商品条码" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input v-model="row.barCode" class="w-100%" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="销售价" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.price"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="市场价" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.marketPrice"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="成本价" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.costPrice"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="库存" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.stock"
|
|
||||||
:min="0"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="重量(kg)" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.weight"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="体积(m^3)" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.volume"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<template v-if="formData!.subCommissionType">
|
|
||||||
<el-table-column align="center" label="一级返佣(元)" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.firstBrokeragePrice"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center" label="二级返佣(元)" min-width="168">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-input-number
|
|
||||||
v-model="row.secondBrokeragePrice"
|
|
||||||
:min="0"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
class="w-100%"
|
|
||||||
controls-position="right"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</template>
|
|
||||||
<el-table-column
|
|
||||||
v-if="formData?.specType"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
label="操作"
|
|
||||||
width="80"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button
|
|
||||||
v-if="isBatch"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
@click="batchAdd"
|
|
||||||
>
|
>
|
||||||
批量添加
|
删除
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
|
||||||
v-else
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
@click="deleteSku(row)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</ElTable>
|
</ElTable>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue