fix: 修复 SkuList TODO 优化相关算法

This commit is contained in:
puhui999 2023-05-17 01:39:51 +08:00
parent 6ac8c78d57
commit 9c06832d7e

View File

@ -1,6 +1,6 @@
<template>
<el-table
:data="isBatch ? SkuData : formData.skus"
:data="isBatch ? skuList : formData.skus"
border
class="tabNumWidth"
max-height="500"
@ -14,7 +14,7 @@
<template v-if="formData.specType && !isBatch">
<!-- 根据商品属性动态添加 -->
<el-table-column
v-for="(item, index) in tableHeaderList"
v-for="(item, index) in tableHeaders"
:key="index"
:label="item.label"
align="center"
@ -32,65 +32,45 @@
</template>
</el-table-column>
<!-- TODO @puhui999用户输入的时候是按照元分主要是我们自己用 -->
<el-table-column align="center" label="销售价()" min-width="168">
<el-table-column align="center" label="销售价()" min-width="168">
<template #default="{ row }">
<el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" />
<el-input-number v-model="row.price" :min="0" class="w-100%" />
</template>
</el-table-column>
<el-table-column align="center" label="市场价()" min-width="168">
<el-table-column align="center" label="市场价()" min-width="168">
<template #default="{ row }">
<el-input-number
v-model="row.marketPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
<el-input-number v-model="row.marketPrice" :min="0" class="w-100%" />
</template>
</el-table-column>
<el-table-column align="center" label="成本价()" min-width="168">
<el-table-column align="center" label="成本价(元)" min-width="168">
<template #default="{ row }">
<el-input-number
v-model="row.costPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
<el-input-number v-model="row.costPrice" :min="0" 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.stock" :min="0" class="w-100%" controls-position="right" />
<el-input-number v-model="row.stock" :min="0" class="w-100%" />
</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" class="w-100%" controls-position="right" />
<el-input-number v-model="row.weight" :min="0" class="w-100%" />
</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" class="w-100%" controls-position="right" />
<el-input-number v-model="row.volume" :min="0" class="w-100%" />
</template>
</el-table-column>
<template v-if="formData.subCommissionType">
<el-table-column align="center" label="一级返佣()" min-width="168">
<el-table-column align="center" label="一级返佣()" min-width="168">
<template #default="{ row }">
<el-input-number
v-model="row.subCommissionFirstPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
<el-input-number v-model="row.subCommissionFirstPrice" :min="0" class="w-100%" />
</template>
</el-table-column>
<el-table-column align="center" label="二级返佣()" min-width="168">
<el-table-column align="center" label="二级返佣(元)" min-width="168">
<template #default="{ row }">
<el-input-number
v-model="row.subCommissionSecondPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
<el-input-number v-model="row.subCommissionSecondPrice" :min="0" class="w-100%" />
</template>
</el-table-column>
</template>
@ -107,9 +87,8 @@
<script lang="ts" name="SkuList" setup>
import { UploadImg } from '@/components/UploadFile'
import { PropType } from 'vue'
import { SpuType } from '@/api/mall/product/management/type/spuType'
import type { Property, SkuType, SpuType } from '@/api/mall/product/spu'
import { propTypes } from '@/utils/propTypes'
import { SkuType } from '@/api/mall/product/management/type/skuType'
import { copyValueToTarget } from '@/utils'
const props = defineProps({
@ -121,66 +100,35 @@ const props = defineProps({
type: Array,
default: () => []
},
isBatch: propTypes.bool.def(false) //
isBatch: propTypes.bool.def(false) //
})
const formData = ref<SpuType>() //
// TODO @puhui999
const SkuData = ref<SkuType[]>([
const skuList = ref<SkuType[]>([
{
/**
* 商品价格单位
*/
price: 0,
/**
* 市场价单位
*/
marketPrice: 0,
/**
* 成本价单位
*/
costPrice: 0,
/**
* 商品条码
*/
barCode: '',
/**
* 图片地址
*/
picUrl: '',
/**
* 库存
*/
stock: 0,
/**
* 商品重量单位kg 千克
*/
weight: 0,
/**
* 商品体积单位m^3 平米
*/
volume: 0,
/**
* 一级分销的佣金单位
*/
subCommissionFirstPrice: 0,
/**
* 二级分销的佣金单位
*/
subCommissionSecondPrice: 0
price: 0, //
marketPrice: 0, //
costPrice: 0, //
barCode: '', //
picUrl: '', //
stock: 0, //
weight: 0, //
volume: 0, //
subCommissionFirstPrice: 0, //
subCommissionSecondPrice: 0 //
}
])
]) //
/** 批量添加 */
const batchAdd = () => {
formData.value.skus.forEach((item) => {
copyValueToTarget(item, SkuData.value[0])
copyValueToTarget(item, skuList.value[0])
})
}
const tableHeaderList = ref<{ prop: string; label: string }[]>([])
const tableHeaders = ref<{ prop: string; label: string }[]>([]) //
/**
* 将传进来的值赋值给SkuData
* 将传进来的值赋值给skuList
*/
watch(
() => props.propFormData,
@ -197,21 +145,18 @@ watch(
// TODO @ chatgpt
/** 生成表数据 */
const generateTableData = (data: any[]) => {
//
const propertiesItemList = []
for (const item of data) {
const objList = []
for (const v of item.values) {
const obj = { propertyId: 0, valueId: 0, valueName: '' }
obj.propertyId = item.id
obj.valueId = v.id
obj.valueName = v.name
objList.push(obj)
}
propertiesItemList.push(objList)
}
// fix: 使mapfor
const propertiesItemList = data.map((item) =>
item.values.map((v) => ({
propertyId: item.id,
propertyName: item.name,
valueId: v.id,
valueName: v.name
}))
)
const buildList = build(propertiesItemList)
// sku,
// sku,
// fix:
if (
buildList.length === formData.value.skus.length ||
data.some((item) => item.values.length === 0)
@ -222,7 +167,7 @@ const generateTableData = (data: any[]) => {
formData.value!.skus = []
buildList.forEach((item) => {
const row = {
properties: [],
properties: Array.isArray(item) ? item : [item],
price: 0,
marketPrice: 0,
costPrice: 0,
@ -234,32 +179,25 @@ const generateTableData = (data: any[]) => {
subCommissionFirstPrice: 0,
subCommissionSecondPrice: 0
}
//
if (Array.isArray(item)) {
row.properties = item
} else {
row.properties.push(item)
}
formData.value.skus.push(row)
})
}
/** 构建所有排列组合 */
const build = (list: any[]) => {
if (list.length === 0) {
const build = (propertyValuesList: Property[][]) => {
if (propertyValuesList.length === 0) {
return []
} else if (list.length === 1) {
return list[0]
} else if (propertyValuesList.length === 1) {
return propertyValuesList[0]
} else {
const result = []
const rest = build(list.slice(1))
for (let i = 0; i < list[0].length; i++) {
const result: Property[][] = []
const rest = build(propertyValuesList.slice(1))
for (let i = 0; i < propertyValuesList[0].length; i++) {
for (let j = 0; j < rest.length; j++) {
//
if (Array.isArray(rest[j])) {
result.push([list[0][i], ...rest[j]])
result.push([propertyValuesList[0][i], ...rest[j]])
} else {
result.push([list[0][i], rest[j]])
result.push([propertyValuesList[0][i], rest[j]])
}
}
}
@ -270,12 +208,12 @@ const build = (list: any[]) => {
/** 监听属性列表生成相关参数和表头 */
watch(
() => props.attributeList,
(data) => {
(attributeList) => {
//
if (!formData.value.specType) return
// 使
if (props.isBatch) {
SkuData.value = [
skuList.value = [
{
price: 0,
marketPrice: 0,
@ -291,15 +229,15 @@ watch(
]
}
//
if (JSON.stringify(data) === '[]') return
if (JSON.stringify(attributeList) === '[]') return
//
tableHeaderList.value = []
tableHeaders.value = []
//
data.forEach((item, index) => {
attributeList.forEach((item, index) => {
// nameindex
tableHeaderList.value.push({ prop: `name${index}`, label: item.name })
tableHeaders.value.push({ prop: `name${index}`, label: item.name })
})
generateTableData(data)
generateTableData(attributeList)
},
{
deep: true,