Skip to content

Commit 03eed3b

Browse files
Why1092164058Why1092164058
committed
feature(uniapp商品): 新增商品
1 parent 0c122da commit 03eed3b

File tree

3 files changed

+144
-84
lines changed

3 files changed

+144
-84
lines changed

‎src/components/ImageUpload/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ export default {
8585
value: {
8686
handler(val) {
8787
if (val) {
88-
// 首先将值转为数组
89-
const list = Array.isArray(val) ? val : this.value.split(',');
88+
// 首先将值转为数组, 当只穿了一个图片时，会报map方法错误
89+
const list = Array.isArray(val) ? val : Array.isArray(this.value.split(',')) ? this.value.split(','): Array.of(this.value);
9090
// 然后将数组转为对象数组
9191
this.fileList = list.map(item => {
9292
if (typeof item === "string") {

‎src/views/mall/product/spu/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178
/>
179179

180180

181-
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close>
181+
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false" >
182182
<save @closeDialog="open = false; getList()"/>
183183
</el-dialog>
184184
</div>

‎src/views/mall/product/spu/save.vue

Lines changed: 141 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<div class="container">
3-
<el-tabs v-model="activeName" class="tabs">
3+
<el-tabs v-model="activeName" class="tabs" :before-leave="confirmLeave">
44
<!-- 基础设置 -->
55
<el-tab-pane label="基础设置" name="base">
6-
<el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
6+
<el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
77
<el-form-item label="商品名称" prop="name">
88
<el-input v-model="baseForm.name" placeholder="请输入商品名称"/>
99
</el-form-item>
10-
<el-form-item label="卖点" prop="sellPoint">
10+
<el-form-item label="卖点">
1111
<el-input v-model="baseForm.sellPoint" placeholder="请输入卖点"/>
1212
</el-form-item>
1313
<el-form-item label="分类id" prop="categoryIds">
@@ -20,30 +20,27 @@
2020
clearable
2121
></el-cascader>
2222
</el-form-item>
23-
<el-form-item label="商品主图" prop="bannerUrl">
24-
<ImageUpload v-model="baseForm.bannerUrl" :limit="1"/>
25-
</el-form-item>
2623
<el-form-item label="商品轮播图" prop="picUrls">
27-
<ImageUpload v-model="baseForm.picUrls" :limit="10"/>
24+
<ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10"/>
2825
</el-form-item>
29-
<el-form-item label="排序字段" prop="sort">
30-
<el-input v-model="baseForm.sort" placeholder="请输入排序字段"/>
26+
<el-form-item label="排序字段">
27+
<el-input v-model="baseForm.sort" placeholder="请输入排序字段" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
3128
</el-form-item>
3229
</el-form>
3330
</el-tab-pane>
3431

3532
<!-- 价格库存 -->
3633
<el-tab-pane label="价格库存" name="rates" class="rates">
37-
<el-form :model="ratesForm" :rules="rules.ratesForm">
34+
<el-form ref="rates" :model="ratesForm" :rules="rules">
3835
<el-form-item label="商品规格">
3936
<el-radio-group v-model="ratesForm.spec" @change="changeRadio">
40-
<el-radio :label="0">单规格</el-radio>
41-
<el-radio :label="1">多规格</el-radio>
37+
<el-radio :label="1">单规格</el-radio>
38+
<el-radio :label="2">多规格</el-radio>
4239
</el-radio-group>
4340
</el-form-item>
4441

4542
<!-- 动态添加规格属性 -->
46-
<div v-show="ratesForm.spec === 1">
43+
<div v-show="ratesForm.spec === 2">
4744
<div
4845
v-for="(specs, index) in dynamicSpec"
4946
:key="index"
@@ -71,14 +68,8 @@
7168
</div>
7269
<div class="spec-values">
7370
<template v-for="(v, i) in specs.specValue">
74-
<el-input v-model="v.name" class="spec-value" :key="i"/>
71+
<el-input v-model="v.name" class="spec-value" :key="i" disabled/>
7572
</template>
76-
<!-- <el-button
77-
type="primary"
78-
icon="el-icon-plus"
79-
circle
80-
@click="dialogForSpec = true; currentSpec = index"
81-
></el-button> -->
8273
</div>
8374
</div>
8475
<el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []"
@@ -89,9 +80,8 @@
8980

9081
<!-- 规格明细 -->
9182
<el-form-item label="规格明细">
92-
<el-table :data="ratesForm.rates" border style="width: 100%" ref="rates">
93-
94-
<template v-if="ratesForm.spec == 1">
83+
<el-table :data="ratesForm.rates" border style="width: 100%" ref="ratesTable">
84+
<template v-if="ratesForm.spec == 2">
9585
<el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v=>v.specName != undefined)"
9686
:label="item.specName">
9787
<template slot-scope="scope">
@@ -103,71 +93,117 @@
10393
</template>
10494
</el-table-column>
10595
</template>
106-
107-
<el-table-column label="规格图片" width="120px">
96+
<el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90">
10897
<template slot-scope="scope">
109-
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
98+
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
11099
style="width: 100px; height: 50px"/>
111100
</template>
112101
</el-table-column>
113-
<el-table-column label="市场价(元)">
102+
<template v-if="ratesForm.spec == 2">
103+
<el-table-column label="sku名称" :render-header="addRedStar" key="91">
104+
<template slot-scope="scope">
105+
<el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
106+
<el-input
107+
v-model="scope.row.name"
108+
></el-input>
109+
</el-form-item>
110+
</template>
111+
</el-table-column>
112+
</template>
113+
114+
<el-table-column label="市场价(元)" :render-header="addRedStar" key="92">
114115
<template slot-scope="scope">
115-
<el-input
116-
v-model="scope.row.marketPrice"
117-
type="number"
118-
></el-input>
116+
<el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'" :rules="[{required: true, trigger: 'change'}]">
117+
<el-input
118+
v-model="scope.row.marketPrice"
119+
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
120+
></el-input>
121+
</el-form-item>
119122
</template>
120123
</el-table-column>
121-
<el-table-column label="销售价(元)" re>
124+
<el-table-column label="销售价(元)" :render-header="addRedStar" key="93">
122125
<template slot-scope="scope">
123-
<el-input v-model="scope.row.price" type="number"></el-input>
126+
<el-form-item :prop="'rates.'+ scope.$index + '.price'" :rules="[{required: true, trigger: 'change'}]">
127+
<el-input v-model="scope.row.price" oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
128+
</el-form-item>
124129
</template>
125130
</el-table-column>
126-
<el-table-column label="成本价">
131+
<el-table-column label="成本价" :render-header="addRedStar" key="94">
127132
<template slot-scope="scope">
133+
<el-form-item :prop="'rates.'+ scope.$index + '.costPrice'" :rules="[{required: true, trigger: 'change'}]">
128134
<el-input
129135
v-model="scope.row.costPrice"
130-
type="number"
136+
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
131137
></el-input>
138+
</el-form-item>
139+
</template>
140+
</el-table-column>
141+
<el-table-column label="库存" :render-header="addRedStar" key="95">
142+
<template slot-scope="scope">
143+
<el-form-item :prop="'rates.'+ scope.$index + '.stock'" :rules="[{required: true, trigger: 'change'}]">
144+
<el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
145+
</el-form-item>
132146
</template>
133147
</el-table-column>
134-
<el-table-column label="库存">
148+
<el-table-column label="预警库存" key="96">
135149
<template slot-scope="scope">
136-
<el-input v-model="scope.row.stock" type="number"></el-input>
150+
<el-input v-model="scope.row.warnStock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
137151
</template>
138152
</el-table-column>
139-
<el-table-column label="体积">
153+
<el-table-column label="体积" key="97">
140154
<template slot-scope="scope">
141-
<el-input v-model="scope.row.volume" type="number"></el-input>
155+
<el-input v-model="scope.row.volume" ></el-input>
142156
</template>
143157
</el-table-column>
144-
<el-table-column label="重量">
158+
<el-table-column label="重量" key="98">
145159
<template slot-scope="scope">
146-
<el-input v-model="scope.row.weight" type="number"></el-input>
160+
<el-input v-model="scope.row.weight" ></el-input>
147161
</template>
148162
</el-table-column>
149-
<el-table-column label="条码">
163+
<el-table-column label="条码" key="99">
150164
<template slot-scope="scope">
151165
<el-input v-model="scope.row.barCode"></el-input>
152166
</template>
153167
</el-table-column>
168+
<template v-if="ratesForm.spec == 2">
169+
<el-table-column
170+
fixed="right"
171+
label="操作"
172+
width="50"
173+
key="100">
174+
<template slot-scope="scope">
175+
<el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
176+
<el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">启用</el-button>
177+
</template>
178+
</el-table-column>
179+
</template>
154180
</el-table>
155181
</el-form-item>
156182
</el-form>
157183
</el-tab-pane>
158184

159185
<!-- 商品详情 -->
160186
<el-tab-pane label="商品描述" name="third">
161-
<editor v-model="baseForm.description" :min-height="400"/>
187+
<el-form ref="third" :model="baseForm" :rules="rules">
188+
<el-form-item prop="description">
189+
<editor v-model="baseForm.description" :min-height="380"/>
190+
</el-form-item>
191+
</el-form>
162192
</el-tab-pane>
163193

164194
<!-- 销售设置 -->
165195
<el-tab-pane label="销售设置" name="fourth">
166-
<el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
167-
<el-form-item label="库存数量" prop="totalStock">
168-
<el-input v-model="baseForm.totalStock" placeholder="请输入库存数量"/>
196+
<el-form ref="fourth" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
197+
<el-form-item label="虚拟销量" prop="virtualSalesCount">
198+
<el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
169199
</el-form-item>
170-
<el-form-item label="上下架状态" prop="status">
200+
<el-form-item label="是否展示库存" prop="showStock">
201+
<el-radio-group v-model="baseForm.showStock">
202+
<el-radio :label="true">是</el-radio>
203+
<el-radio :label="false">否</el-radio>
204+
</el-radio-group>
205+
</el-form-item>
206+
<el-form-item label="商品状态" prop="status">
171207
<el-radio-group v-model="baseForm.status">
172208
<el-radio :label="0">上架</el-radio>
173209
<el-radio :label="1">下架</el-radio>
@@ -212,15 +248,15 @@ export default {
212248
categoryIds: null,
213249
sort: null,
214250
description: null,
215-
bannerUrl: null,
216-
picUrls: [],
217-
totalStock: null,
218-
status: 0
251+
picUrls: null,
252+
status: 0,
253+
virtualSalesCount: 0,
254+
showStock: true,
219255
},
220256
categoryList: [],
221257
// 价格库存
222258
ratesForm: {
223-
spec: 0,
259+
spec: 1,
224260
// 规格明细
225261
rates: [{}]
226262
},
@@ -239,28 +275,39 @@ export default {
239275
240276
// 表单校验
241277
rules: {
242-
description: [
243-
{required: true, message: "描述不能为空", trigger: "blur"},
244-
],
245-
categoryIds: [
246-
{required: true, message: "分类id不能为空", trigger: "blur"},
247-
],
248-
bannerUrl: [{required: true, message: "商品主图地址", trigger: "blur"}],
249-
sort: [
250-
{required: true, message: "排序字段不能为空", trigger: "blur"},
251-
],
278+
name:[{required: true, message: "商品名称不能为空", trigger: "blur"},],
279+
description: [{required: true, message: "描述不能为空", trigger: "blur"},],
280+
categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"},],
281+
status: [{required: true, message: "商品状态不能为空", trigger: "blur"}],
282+
picUrls: [{required: true, message: "商品轮播图地址不能为空", trigger: "blur"}],
283+
virtualSalesCount: [{required: true, message: "虚拟销量不能为空", trigger: "blur"}],
252284
},
253285
};
254286
},
287+
255288
created() {
256289
this.getListCategory();
257290
this.getPropertyPageList();
258291
},
259292
methods: {
293+
async confirmLeave(active, old){
294+
await this.$refs[old].validate((valid) => {
295+
console.log(valid)
296+
if (!valid) {
297+
return reject();
298+
}
299+
});
300+
},
301+
// 必选标识
302+
addRedStar(h, { column }) {
303+
return [
304+
h('span', { style: 'color: #F56C6C' }, '*'),
305+
h('span', ' ' + column.label)
306+
];
307+
},
260308
changeRadio() {
261-
262-
this.$refs.rates.doLayout()
263-
if (this.ratesForm.spec == 0) {
309+
this.$refs.ratesTable.doLayout()
310+
if (this.ratesForm.spec == 1) {
264311
this.ratesForm.rates = [{}]
265312
} else {
266313
this.ratesForm.rates = []
@@ -289,7 +336,7 @@ export default {
289336
return array;
290337
})
291338
.forEach(v => {
292-
rates.push({spec: v})
339+
rates.push({spec: v, status: 0, name: Array.of(v).join()})
293340
});
294341
this.ratesForm.rates = rates
295342
},
@@ -304,38 +351,51 @@ export default {
304351
this.$emit("closeDialog");
305352
},
306353
submit() {
354+
this.$refs[this.activeName].validate((valid) => {
355+
if (!valid) {
356+
return;
357+
}
307358
let rates = this.ratesForm.rates;
308359
// 动态规格调整字段
309-
if (this.ratesForm.spec == 1) {
360+
if (this.ratesForm.spec == 2) {
310361
rates.forEach(r => {
311362
let properties = []
312-
if(r.spec instanceof Array){
313-
r.spec.forEach((v, i) => {
363+
Array.of(r.spec).forEach((v, i) => {
314364
let specValue = this.dynamicSpec[i].specValue.find(o => o.name == v);
315365
let propertie = {};
316366
propertie.propertyId = this.dynamicSpec[i].specId;
317367
propertie.valueId = specValue.id;
318368
properties.push(propertie);
319369
})
320-
}else{
321-
let specValue = this.dynamicSpec[0].specValue.find(o => o.name == r.spec);
322-
let propertie = {};
323-
propertie.propertyId = this.dynamicSpec[0].specId;
324-
propertie.valueId = specValue.id;
325-
properties.push(propertie);
326-
}
327370
r.properties = properties;
328371
})
372+
}else{
373+
rates[0].name = this.baseForm.name;
374+
rates[0].status = this.baseForm.status;
329375
}
330-
this.baseForm.skus = rates;
331-
this.baseForm.specType = this.ratesForm.spec;
332-
this.baseForm.categoryId = this.baseForm.categoryIds[this.baseForm.categoryIds.length - 1];
333-
createSpu(this.baseForm).then((response) => {
376+
377+
console.log(rates)
378+
379+
let form = this.baseForm
380+
if(form.picUrls instanceof Array){
381+
form.picUrls = form.picUrls.flatMap(m=>m.split(','))
382+
}else if(form.picUrls.split(',') instanceof Array){
383+
form.picUrls = form.picUrls.split(',').flatMap(m=>m.split(','))
384+
}else{
385+
form.picUrls = Array.of(form.picUrls)
386+
}
387+
388+
form.skus = rates;
389+
form.specType = this.ratesForm.spec;
390+
form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
391+
createSpu(form).then((response) => {
334392
console.log(response)
335393
this.$modal.msgSuccess("新增成功");
336394
this.$emit("closeDialog");
395+
}).catch((err) => {
396+
console.log(this.baseForm.picUrls)
397+
});
337398
});
338-
339399
},
340400
/** 查询规格 */
341401
getPropertyPageList() {

0 commit comments

Comments
 (0)