Skip to content

Commit f36f47c

Browse files
YunaiVYunaiV
committed
review 商品的 save 界面
1 parent e60b412 commit f36f47c

File tree

1 file changed

+23
-28
lines changed

1 file changed

+23
-28
lines changed

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

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<template>
22
<div class="container">
3+
<!-- TODO 样式优化：表单宽度、表单项对齐、hr 粗细； -->
34
<el-tabs v-model="activeName" class="tabs">
45
<!-- 基础设置 -->
6+
<!-- TODO @luowenfeng：基础设置，分成商品类型、基础信息、配送信息 -->
7+
<!-- TODO @luowenfeng：base=》basic 会更好哈 -->
58
<el-tab-pane label="基础设置" name="base">
69
<el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
710
<el-form-item label="商品名称" prop="name">
8-
<el-input v-model="baseForm.name" placeholder="请输入商品名称"/>
11+
<el-input v-model="baseForm.name" placeholder="请输入商品名称" />
912
</el-form-item>
1013
<el-form-item label="促销语">
1114
<el-input type="textarea" v-model="baseForm.sellPoint" placeholder="请输入促销语"/>
@@ -16,7 +19,6 @@
1619
<el-form-item label="商品视频" prop="videoUrl">
1720
<VideoUpload v-model="baseForm.videoUrl" :value="baseForm.videoUrl"/>
1821
</el-form-item>
19-
2022
<el-form-item label="商品品牌" prop="brandId">
2123
<el-select v-model="baseForm.brandId" placeholder="请选择商品品牌">
2224
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -28,20 +30,20 @@
2830
</el-form-item>
2931
<el-form-item label="是否上架" prop="status">
3032
<el-radio-group v-model="baseForm.status">
31-
<el-radio :label="0">立即上架</el-radio>
32-
<el-radio :label="1">放入仓库</el-radio>
33+
<el-radio :label="1">立即上架</el-radio>
34+
<el-radio :label="0">放入仓库</el-radio>
3335
</el-radio-group>
3436
</el-form-item>
3537
</el-form>
3638
</el-tab-pane>
3739

3840
<!-- 价格库存 -->
41+
<!-- TODO @luowenfeng：rates=》priceStack 会更好哈 -->
3942
<el-tab-pane label="价格库存" name="rates" class="rates">
4043
<el-form ref="rates" :model="ratesForm" :rules="rules">
4144
<el-form-item label="启用多规格">
42-
<el-switch v-model="specSwitch" @change="changeSpecSwitch"></el-switch>
45+
<el-switch v-model="specSwitch" @change="changeSpecSwitch"/>
4346
</el-form-item>
44-
4547
<!-- 动态添加规格属性 -->
4648
<div v-show="ratesForm.spec === 2">
4749
<div v-for="(specs, index) in dynamicSpec" :key="index" class="dynamic-spec">
@@ -59,8 +61,7 @@
5961
</template>
6062
</div>
6163
</div>
62-
<el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []">添加规格项目
63-
</el-button>
64+
<el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []">添加规格项目</el-button>
6465
</div>
6566

6667
<!-- 规格明细 -->
@@ -76,24 +77,21 @@
7677
</template>
7778
<el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90">
7879
<template slot-scope="scope">
79-
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
80-
style="width: 100px; height: 50px"/>
80+
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false" style="width: 100px; height: 50px"/>
8181
</template>
8282
</el-table-column>
8383
<template v-if="this.specSwitch">
8484
<el-table-column label="sku名称" :render-header="addRedStar" key="91">
8585
<template slot-scope="scope">
86-
<el-form-item :prop="'rates.'+ scope.$index + '.name'"
87-
:rules="[{required: true, trigger: 'change'}]">
86+
<el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
8887
<el-input v-model="scope.row.name"/>
8988
</el-form-item>
9089
</template>
9190
</el-table-column>
9291
</template>
9392
<el-table-column label="市场价(元)" :render-header="addRedStar" key="92">
9493
<template slot-scope="scope">
95-
<el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'"
96-
:rules="[{required: true, trigger: 'change'}]">
94+
<el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'" :rules="[{required: true, trigger: 'change'}]">
9795
<el-input v-model="scope.row.marketPrice"
9896
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
9997
</el-form-item>
@@ -104,25 +102,22 @@
104102
<el-form-item :prop="'rates.'+ scope.$index + '.price'"
105103
:rules="[{required: true, trigger: 'change'}]">
106104
<el-input v-model="scope.row.price"
107-
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
105+
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''" />
108106
</el-form-item>
109107
</template>
110108
</el-table-column>
111109
<el-table-column label="成本价" :render-header="addRedStar" key="94">
112110
<template slot-scope="scope">
113111
<el-form-item :prop="'rates.'+ scope.$index + '.costPrice'"
114112
:rules="[{required: true, trigger: 'change'}]">
115-
<el-input
116-
v-model="scope.row.costPrice"
117-
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
118-
></el-input>
113+
<el-input v-model="scope.row.costPrice"
114+
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''" />
119115
</el-form-item>
120116
</template>
121117
</el-table-column>
122118
<el-table-column label="库存" :render-header="addRedStar" key="95">
123119
<template slot-scope="scope">
124-
<el-form-item :prop="'rates.'+ scope.$index + '.stock'"
125-
:rules="[{required: true, trigger: 'change'}]">
120+
<el-form-item :prop="'rates.'+ scope.$index + '.stock'" :rules="[{required: true, trigger: 'change'}]">
126121
<el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
127122
</el-form-item>
128123
</template>
@@ -134,17 +129,17 @@
134129
</el-table-column>
135130
<el-table-column label="体积" key="97">
136131
<template slot-scope="scope">
137-
<el-input v-model="scope.row.volume"></el-input>
132+
<el-input v-model="scope.row.volume" />
138133
</template>
139134
</el-table-column>
140135
<el-table-column label="重量" key="98">
141136
<template slot-scope="scope">
142-
<el-input v-model="scope.row.weight"></el-input>
137+
<el-input v-model="scope.row.weight" />
143138
</template>
144139
</el-table-column>
145140
<el-table-column label="条码" key="99">
146141
<template slot-scope="scope">
147-
<el-input v-model="scope.row.barCode"></el-input>
142+
<el-input v-model="scope.row.barCode" />
148143
</template>
149144
</el-table-column>
150145
<template v-if="this.specSwitch">
@@ -169,6 +164,7 @@
169164
</el-tab-pane>
170165

171166
<!-- 商品详情 -->
167+
<!-- TODO @luowenfeng：third=》detail 会更好哈 -->
172168
<el-tab-pane label="商品详情" name="third">
173169
<el-form ref="third" :model="baseForm" :rules="rules">
174170
<el-form-item prop="description">
@@ -178,6 +174,7 @@
178174
</el-tab-pane>
179175

180176
<!-- 销售设置 -->
177+
<!-- TODO @luowenfeng：fourth=》senior 会更好哈 -->
181178
<el-tab-pane label="高级设置" name="fourth">
182179
<el-form ref="fourth" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
183180
<el-form-item label="排序字段">
@@ -421,15 +418,13 @@ export default {
421418
if (form.id == null) {
422419
createSpu(form).then(() => {
423420
this.$modal.msgSuccess("新增成功");
424-
})
425-
.then(()=>{
421+
}).then(()=>{
426422
this.cancel();
427423
})
428424
} else {
429425
updateSpu(form).then(() => {
430426
this.$modal.msgSuccess("修改成功");
431-
})
432-
.then(()=>{
427+
}).then(()=>{
433428
this.cancel();
434429
})
435430
}

0 commit comments

Comments
 (0)