Skip to content

Commit 6478d29

Browse files
author
puhui999
committed
商品管理: 调整相关组件优化逻辑
1 parent 64f6f67 commit 6478d29

File tree

6 files changed

+192
-75
lines changed

6 files changed

+192
-75
lines changed

‎src/api/mall/product/management/type/spuType.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { SkuType } from './skuType'
22

33
export interface SpuType {
44
name?: string // 商品名称
5-
categoryId?: number | undefined // 商品分类
5+
categoryId?: number | null // 商品分类
66
keyword?: string // 关键字
7-
unit?: string // 单位
7+
unit?: number | null // 单位
88
picUrl?: string // 商品封面图
99
sliderPicUrls?: string[] // 商品轮播图
1010
introduction?: string // 商品简介

‎src/utils/dict.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,5 +144,8 @@ export enum DICT_TYPE {
144144

145145
// ========== MP 模块 ==========
146146
MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
147-
MP_MESSAGE_TYPE = 'mp_message_type' // 消息类型
147+
MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
148+
149+
// ========== MALL 模块 ==========
150+
PRODUCT_UNIT = 'product_unit' // 商品单位
148151
}

‎src/views/mall/product/management/addForm.vue

Lines changed: 86 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@
3434
<script lang="ts" name="ProductManagementForm" setup>
3535
import { useTagsViewStore } from '@/store/modules/tagsView'
3636
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
37-
import type { SpuType } from '@/api/mall/product/management/type/spuType'
38-
// 业务api
37+
import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api
3938
import * as managementApi from '@/api/mall/product/management/spu'
4039
4140
const { t } = useI18n() // 国际化
@@ -50,18 +49,67 @@ const BasicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Re
5049
const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
5150
const OtherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
5251
const formData = ref<SpuType>({
53-
name: '', // 商品名称
54-
categoryId: undefined, // 商品分类
55-
keyword: '', // 关键字
56-
unit: '', // 单位
57-
picUrl: '', // 商品封面图
58-
sliderPicUrls: [], // 商品轮播图
59-
introduction: '', // 商品简介
52+
name: '213', // 商品名称
53+
categoryId: null, // 商品分类
54+
keyword: '213', // 关键字
55+
unit: null, // 单位
56+
picUrl:
57+
'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png', // 商品封面图
58+
sliderPicUrls: [
59+
{
60+
name: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png',
61+
url: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png'
62+
}
63+
], // 商品轮播图
64+
introduction: '213', // 商品简介
6065
deliveryTemplateId: 0, // 运费模版
61-
selectRule: '',
6266
specType: false, // 商品规格
6367
subCommissionType: false, // 分销类型
64-
description: '', // 商品详情
68+
skus: [
69+
{
70+
/**
71+
* 商品价格，单位：分
72+
*/
73+
price: 0,
74+
/**
75+
* 市场价，单位：分
76+
*/
77+
marketPrice: 0,
78+
/**
79+
* 成本价，单位：分
80+
*/
81+
costPrice: 0,
82+
/**
83+
* 商品条码
84+
*/
85+
barCode: '',
86+
/**
87+
* 图片地址
88+
*/
89+
picUrl: '',
90+
/**
91+
* 库存
92+
*/
93+
stock: 0,
94+
/**
95+
* 商品重量，单位：kg 千克
96+
*/
97+
weight: 0,
98+
/**
99+
* 商品体积，单位：m^3 平米
100+
*/
101+
volume: 0,
102+
/**
103+
* 一级分销的佣金，单位：分
104+
*/
105+
subCommissionFirstPrice: 0,
106+
/**
107+
* 二级分销的佣金，单位：分
108+
*/
109+
subCommissionSecondPrice: 0
110+
}
111+
],
112+
description: '5425', // 商品详情
65113
sort: 1, // 商品排序
66114
giveIntegral: 1, // 赠送积分
67115
virtualSalesCount: 1, // 虚拟销量
@@ -83,14 +131,38 @@ const getDetail = async () => {
83131
const submitForm = async () => {
84132
// 提交请求
85133
formLoading.value = true
134+
const newSkus = [...formData.value.skus] //复制一份skus保存失败时使用
86135
// TODO 三个表单逐一校验，如果有一个表单校验不通过则切换到对应表单，如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
87136
// 校验各表单
88137
try {
89138
await unref(BasicInfoRef)?.validate()
90139
await unref(DescriptionRef)?.validate()
91140
await unref(OtherSettingsRef)?.validate()
141+
// 处理掉一些无关数据
142+
formData.value.skus.forEach((item) => {
143+
// 给sku name赋值
144+
item.name = formData.value.name
145+
// 多规格情况移除skus相关属性值value
146+
if (formData.value.specType) {
147+
item.properties.forEach((item2) => {
148+
delete item2.value
149+
})
150+
}
151+
})
152+
// 处理轮播图列表
153+
const newSliderPicUrls = []
154+
formData.value.sliderPicUrls.forEach((item) => {
155+
// 如果是前端选的图
156+
if (typeof item === 'object') {
157+
newSliderPicUrls.push(item.url)
158+
} else {
159+
newSliderPicUrls.push(item)
160+
}
161+
})
162+
formData.value.sliderPicUrls = newSliderPicUrls
92163
// 校验都通过后提交表单
93164
const data = formData.value as SpuType
165+
// 移除skus.
94166
const id = query.id as unknown as number
95167
if (!id) {
96168
await managementApi.createSpu(data)
@@ -99,6 +171,9 @@ const submitForm = async () => {
99171
await managementApi.updateSpu(data)
100172
message.success(t('common.updateSuccess'))
101173
}
174+
} catch (e) {
175+
console.log(e)
176+
console.log(newSkus)
102177
} finally {
103178
formLoading.value = false
104179
}

‎src/views/mall/product/management/components/BasicInfoForm.vue

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@
2525
</el-col>
2626
<el-col :span="12">
2727
<el-form-item label="单位" prop="unit">
28-
<el-input v-model="formData.unit" placeholder="请输入单位" />
28+
<el-select v-model="formData.unit" placeholder="请选择单位">
29+
<el-option
30+
v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_UNIT)"
31+
:key="dict.value"
32+
:label="dict.label"
33+
:value="dict.value"
34+
/>
35+
</el-select>
2936
</el-form-item>
3037
</el-col>
3138
<el-col :span="12">
@@ -60,7 +67,7 @@
6067
</el-col>
6168
<el-col :span="12">
6269
<el-form-item label="商品规格" props="specType">
63-
<el-radio-group v-model="formData.specType">
70+
<el-radio-group v-model="formData.specType" @change="onChangeSpec">
6471
<el-radio :label="false" class="radio">单规格</el-radio>
6572
<el-radio :label="true">多规格</el-radio>
6673
</el-radio-group>
@@ -82,10 +89,15 @@
8289
</el-button>
8390
<ProductAttributes :attribute-data="attributeList" />
8491
</el-form-item>
85-
<el-form-item v-if="formData.specType" label="批量设置">
86-
<SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
87-
</el-form-item>
88-
<el-form-item>
92+
<template v-if="formData.specType && attributeList.length > 0">
93+
<el-form-item label="批量设置">
94+
<SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
95+
</el-form-item>
96+
<el-form-item label="属性列表">
97+
<SkuList :attributeList="attributeList" :prop-form-data="formData" />
98+
</el-form-item>
99+
</template>
100+
<el-form-item v-if="!formData.specType">
89101
<SkuList :attributeList="attributeList" :prop-form-data="formData" />
90102
</el-form-item>
91103
</el-col>
@@ -95,16 +107,15 @@
95107
</template>
96108
<script lang="ts" name="ProductManagementBasicInfoForm" setup>
97109
import { PropType } from 'vue'
110+
import { defaultProps, handleTree } from '@/utils/tree'
111+
import { ElInput } from 'element-plus'
112+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
98113
import type { SpuType } from '@/api/mall/product/management/type/spuType'
99114
import { UploadImg, UploadImgs } from '@/components/UploadFile'
100-
import SkuList from './SkuList/index.vue'
101-
import ProductAttributesAddForm from './ProductAttributesAddForm.vue'
102-
import ProductAttributes from './ProductAttributes.vue'
103115
import { copyValueToTarget } from '@/utils/object'
116+
import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
104117
// 业务Api
105118
import * as ProductCategoryApi from '@/api/mall/product/category'
106-
import { defaultProps, handleTree } from '@/utils/tree'
107-
import { ElInput } from 'element-plus'
108119
109120
const message = useMessage() // 消息弹窗
110121
const props = defineProps({
@@ -131,42 +142,7 @@ const formData = reactive<SpuType>({
131142
deliveryTemplateId: 1, // 运费模版
132143
specType: false, // 商品规格
133144
subCommissionType: false, // 分销类型
134-
skus: [
135-
{
136-
/**
137-
* 商品价格，单位：分
138-
*/
139-
price: 0,
140-
/**
141-
* 市场价，单位：分
142-
*/
143-
marketPrice: 0,
144-
/**
145-
* 成本价，单位：分
146-
*/
147-
costPrice: 0,
148-
/**
149-
* 商品条码
150-
*/
151-
barCode: '',
152-
/**
153-
* 图片地址
154-
*/
155-
picUrl: '',
156-
/**
157-
* 库存
158-
*/
159-
stock: 0,
160-
/**
161-
* 商品重量，单位：kg 千克
162-
*/
163-
weight: 0,
164-
/**
165-
* 商品体积，单位：m^3 平米
166-
*/
167-
volume: 0
168-
}
169-
]
145+
skus: []
170146
})
171147
const rules = reactive({
172148
name: [required],
@@ -223,6 +199,27 @@ const changeSubCommissionType = () => {
223199
item.subCommissionSecondPrice = 0
224200
}
225201
}
202+
// 选择规格
203+
const onChangeSpec = () => {
204+
console.log(111)
205+
// 重置商品属性列表
206+
attributeList.value = []
207+
// 重置sku列表
208+
formData.skus = [
209+
{
210+
price: 0,
211+
marketPrice: 0,
212+
costPrice: 0,
213+
barCode: '',
214+
picUrl: '',
215+
stock: 0,
216+
weight: 0,
217+
volume: 0,
218+
subCommissionFirstPrice: 0,
219+
subCommissionSecondPrice: 0
220+
}
221+
]
222+
}
226223
227224
const categoryList = ref() // 分类树
228225
onMounted(async () => {

0 commit comments

Comments
 (0)