Skip to content

Commit 9c06832

Browse files
author
puhui999
committed
fix: 修复 SkuList TODO 优化相关算法
1 parent 6ac8c78 commit 9c06832

File tree

1 file changed

+60
-122
lines changed

1 file changed

+60
-122
lines changed

‎src/views/mall/product/spu/components/SkuList.vue

Lines changed: 60 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<el-table
3-
:data="isBatch ? SkuData : formData.skus"
3+
:data="isBatch ? skuList : formData.skus"
44
border
55
class="tabNumWidth"
66
max-height="500"
@@ -14,7 +14,7 @@
1414
<template v-if="formData.specType && !isBatch">
1515
<!-- 根据商品属性动态添加 -->
1616
<el-table-column
17-
v-for="(item, index) in tableHeaderList"
17+
v-for="(item, index) in tableHeaders"
1818
:key="index"
1919
:label="item.label"
2020
align="center"
@@ -32,65 +32,45 @@
3232
</template>
3333
</el-table-column>
3434
<!-- TODO @puhui999：用户输入的时候，是按照元；分主要是我们自己用； -->
35-
<el-table-column align="center" label="销售价(分)" min-width="168">
35+
<el-table-column align="center" label="销售价(元)" min-width="168">
3636
<template #default="{ row }">
37-
<el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" />
37+
<el-input-number v-model="row.price" :min="0" class="w-100%" />
3838
</template>
3939
</el-table-column>
40-
<el-table-column align="center" label="市场价(分)" min-width="168">
40+
<el-table-column align="center" label="市场价(元)" min-width="168">
4141
<template #default="{ row }">
42-
<el-input-number
43-
v-model="row.marketPrice"
44-
:min="0"
45-
class="w-100%"
46-
controls-position="right"
47-
/>
42+
<el-input-number v-model="row.marketPrice" :min="0" class="w-100%" />
4843
</template>
4944
</el-table-column>
50-
<el-table-column align="center" label="成本价(分)" min-width="168">
45+
<el-table-column align="center" label="成本价(元)" min-width="168">
5146
<template #default="{ row }">
52-
<el-input-number
53-
v-model="row.costPrice"
54-
:min="0"
55-
class="w-100%"
56-
controls-position="right"
57-
/>
47+
<el-input-number v-model="row.costPrice" :min="0" class="w-100%" />
5848
</template>
5949
</el-table-column>
6050
<el-table-column align="center" label="库存" min-width="168">
6151
<template #default="{ row }">
62-
<el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />
52+
<el-input-number v-model="row.stock" :min="0" class="w-100%" />
6353
</template>
6454
</el-table-column>
6555
<el-table-column align="center" label="重量(kg)" min-width="168">
6656
<template #default="{ row }">
67-
<el-input-number v-model="row.weight" :min="0" class="w-100%" controls-position="right" />
57+
<el-input-number v-model="row.weight" :min="0" class="w-100%" />
6858
</template>
6959
</el-table-column>
7060
<el-table-column align="center" label="体积(m^3)" min-width="168">
7161
<template #default="{ row }">
72-
<el-input-number v-model="row.volume" :min="0" class="w-100%" controls-position="right" />
62+
<el-input-number v-model="row.volume" :min="0" class="w-100%" />
7363
</template>
7464
</el-table-column>
7565
<template v-if="formData.subCommissionType">
76-
<el-table-column align="center" label="一级返佣(分)" min-width="168">
66+
<el-table-column align="center" label="一级返佣(元)" min-width="168">
7767
<template #default="{ row }">
78-
<el-input-number
79-
v-model="row.subCommissionFirstPrice"
80-
:min="0"
81-
class="w-100%"
82-
controls-position="right"
83-
/>
68+
<el-input-number v-model="row.subCommissionFirstPrice" :min="0" class="w-100%" />
8469
</template>
8570
</el-table-column>
86-
<el-table-column align="center" label="二级返佣(分)" min-width="168">
71+
<el-table-column align="center" label="二级返佣(元)" min-width="168">
8772
<template #default="{ row }">
88-
<el-input-number
89-
v-model="row.subCommissionSecondPrice"
90-
:min="0"
91-
class="w-100%"
92-
controls-position="right"
93-
/>
73+
<el-input-number v-model="row.subCommissionSecondPrice" :min="0" class="w-100%" />
9474
</template>
9575
</el-table-column>
9676
</template>
@@ -107,9 +87,8 @@
10787
<script lang="ts" name="SkuList" setup>
10888
import { UploadImg } from '@/components/UploadFile'
10989
import { PropType } from 'vue'
110-
import { SpuType } from '@/api/mall/product/management/type/spuType'
90+
import type { Property, SkuType, SpuType } from '@/api/mall/product/spu'
11191
import { propTypes } from '@/utils/propTypes'
112-
import { SkuType } from '@/api/mall/product/management/type/skuType'
11392
import { copyValueToTarget } from '@/utils'
11493
11594
const props = defineProps({
@@ -121,66 +100,35 @@ const props = defineProps({
121100
type: Array,
122101
default: () => []
123102
},
124-
isBatch: propTypes.bool.def(false) // 是否批量操作
103+
isBatch: propTypes.bool.def(false) // 是否作为批量操作组件
125104
})
126105
const formData = ref<SpuType>() // 表单数据
127-
// 批量添加时的零时数据 TODO @puhui999：小写开头哈；然后变量都尾注释
128-
const SkuData = ref<SkuType[]>([
106+
const skuList = ref<SkuType[]>([
129107
{
130-
/**
131-
* 商品价格，单位：分
132-
*/
133-
price: 0,
134-
/**
135-
* 市场价，单位：分
136-
*/
137-
marketPrice: 0,
138-
/**
139-
* 成本价，单位：分
140-
*/
141-
costPrice: 0,
142-
/**
143-
* 商品条码
144-
*/
145-
barCode: '',
146-
/**
147-
* 图片地址
148-
*/
149-
picUrl: '',
150-
/**
151-
* 库存
152-
*/
153-
stock: 0,
154-
/**
155-
* 商品重量，单位：kg 千克
156-
*/
157-
weight: 0,
158-
/**
159-
* 商品体积，单位：m^3 平米
160-
*/
161-
volume: 0,
162-
/**
163-
* 一级分销的佣金，单位：分
164-
*/
165-
subCommissionFirstPrice: 0,
166-
/**
167-
* 二级分销的佣金，单位：分
168-
*/
169-
subCommissionSecondPrice: 0
108+
price: 0, // 商品价格
109+
marketPrice: 0, // 市场价
110+
costPrice: 0, // 成本价
111+
barCode: '', // 商品条码
112+
picUrl: '', // 图片地址
113+
stock: 0, // 库存
114+
weight: 0, // 商品重量
115+
volume: 0, // 商品体积
116+
subCommissionFirstPrice: 0, // 一级分销的佣金
117+
subCommissionSecondPrice: 0 // 二级分销的佣金
170118
}
171-
])
119+
]) // 批量添加时的临时数据
172120
173121
/** 批量添加 */
174122
const batchAdd = () => {
175123
formData.value.skus.forEach((item) => {
176-
copyValueToTarget(item, SkuData.value[0])
124+
copyValueToTarget(item, skuList.value[0])
177125
})
178126
}
179127
180-
const tableHeaderList = ref<{ prop: string; label: string }[]>([])
128+
const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表头
181129
182130
/**
183-
* 将传进来的值赋值给SkuData
131+
* 将传进来的值赋值给skuList
184132
*/
185133
watch(
186134
() => props.propFormData,
@@ -197,21 +145,18 @@ watch(
197145
// TODO @芋艿：看看 chatgpt 可以进一步下面几个方法的实现不
198146
/** 生成表数据 */
199147
const generateTableData = (data: any[]) => {
200-
// 构建数据结构
201-
const propertiesItemList = []
202-
for (const item of data) {
203-
const objList = []
204-
for (const v of item.values) {
205-
const obj = { propertyId: 0, valueId: 0, valueName: '' }
206-
obj.propertyId = item.id
207-
obj.valueId = v.id
208-
obj.valueName = v.name
209-
objList.push(obj)
210-
}
211-
propertiesItemList.push(objList)
212-
}
148+
// 构建数据结构 fix: 使用map替换多重for循环
149+
const propertiesItemList = data.map((item) =>
150+
item.values.map((v) => ({
151+
propertyId: item.id,
152+
propertyName: item.name,
153+
valueId: v.id,
154+
valueName: v.name
155+
}))
156+
)
213157
const buildList = build(propertiesItemList)
214-
// 如果构建后的组合数跟sku数量一样的话则不用处理,添加新属性没有属性值也不做处理 （解决编辑表单时或查看详情时数据回显问题）
158+
// 如果构建后的组合数跟sku数量一样的话则不用处理,添加新属性没有属性值也不做处理
159+
// fix: 解决编辑表单时或查看详情时数据回显问题
215160
if (
216161
buildList.length === formData.value.skus.length ||
217162
data.some((item) => item.values.length === 0)
@@ -222,7 +167,7 @@ const generateTableData = (data: any[]) => {
222167
formData.value!.skus = []
223168
buildList.forEach((item) => {
224169
const row = {
225-
properties: [],
170+
properties: Array.isArray(item) ? item : [item],
226171
price: 0,
227172
marketPrice: 0,
228173
costPrice: 0,
@@ -234,32 +179,25 @@ const generateTableData = (data: any[]) => {
234179
subCommissionFirstPrice: 0,
235180
subCommissionSecondPrice: 0
236181
}
237-
// 判断是否是单一属性的情况
238-
if (Array.isArray(item)) {
239-
row.properties = item
240-
} else {
241-
row.properties.push(item)
242-
}
243182
formData.value.skus.push(row)
244183
})
245184
}
246-
247185
/** 构建所有排列组合 */
248-
const build = (list: any[]) => {
249-
if (list.length === 0) {
186+
const build = (propertyValuesList: Property[][]) => {
187+
if (propertyValuesList.length === 0) {
250188
return []
251-
} else if (list.length === 1) {
252-
return list[0]
189+
} else if (propertyValuesList.length === 1) {
190+
return propertyValuesList[0]
253191
} else {
254-
const result = []
255-
const rest = build(list.slice(1))
256-
for (let i = 0; i < list[0].length; i++) {
192+
const result: Property[][] = []
193+
const rest = build(propertyValuesList.slice(1))
194+
for (let i = 0; i < propertyValuesList[0].length; i++) {
257195
for (let j = 0; j < rest.length; j++) {
258196
// 第一次不是数组结构，后面的都是数组结构
259197
if (Array.isArray(rest[j])) {
260-
result.push([list[0][i], ...rest[j]])
198+
result.push([propertyValuesList[0][i], ...rest[j]])
261199
} else {
262-
result.push([list[0][i], rest[j]])
200+
result.push([propertyValuesList[0][i], rest[j]])
263201
}
264202
}
265203
}
@@ -270,12 +208,12 @@ const build = (list: any[]) => {
270208
/** 监听属性列表生成相关参数和表头 */
271209
watch(
272210
() => props.attributeList,
273-
(data) => {
211+
(attributeList) => {
274212
// 如果不是多规格则结束
275213
if (!formData.value.specType) return
276214
// 如果当前组件作为批量添加数据使用则重置表数据
277215
if (props.isBatch) {
278-
SkuData.value = [
216+
skuList.value = [
279217
{
280218
price: 0,
281219
marketPrice: 0,
@@ -291,15 +229,15 @@ watch(
291229
]
292230
}
293231
// 判断代理对象是否为空
294-
if (JSON.stringify(data) === '[]') return
232+
if (JSON.stringify(attributeList) === '[]') return
295233
// 重置表头
296-
tableHeaderList.value = []
234+
tableHeaders.value = []
297235
// 生成表头
298-
data.forEach((item, index) => {
236+
attributeList.forEach((item, index) => {
299237
// name加属性项index区分属性值
300-
tableHeaderList.value.push({ prop: `name${index}`, label: item.name })
238+
tableHeaders.value.push({ prop: `name${index}`, label: item.name })
301239
})
302-
generateTableData(data)
240+
generateTableData(attributeList)
303241
},
304242
{
305243
deep: true,

0 commit comments

Comments
 (0)