|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div v-if="multiSku === 1" style="padding: 16px 0px">
|
|
|
- <el-form ref="spec" :model="{ specList }" label-width="80px">
|
|
|
+ <el-form ref="spec" :model="{ specList }" :inline="false" label-width="80px" @submit.native.prevent>
|
|
|
<div v-for="(spec, index) in specList" :key="index" style="margin-bottom: 20px">
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-col :span="8">
|
|
|
@@ -17,12 +17,13 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <el-form-item :prop="`specList.${index}.vals`" :rules="{ required: true, message: '请完善规格值', trigger: ['blur', 'change'] }">
|
|
|
+ <el-form-item :prop="`specList.${index}.vals`">
|
|
|
<el-col :span="24">
|
|
|
<el-tag v-for="(tag, index) in spec.vals" :key="index" closable style="margin-right: 10px" @close="spec.vals.splice(index, 1)">{{ tag }}</el-tag>
|
|
|
- <el-input v-if="spec.editVals" v-model="specValTmp" style="display: inline-block;width: 120px; margin-right: 10px" size="mini" @keyup.enter.native="checkSpecVal(spec, `specList.${index}.vals`)" />
|
|
|
+ <el-input v-if="spec.editVals" v-model="specValTmp" v-focus style="display: inline-block;width: 120px; margin-right: 10px" size="mini" @keyup.enter.native="checkSpecVal(spec, `specList.${index}.vals`)" />
|
|
|
<el-button v-if="!spec.edit&&!spec.editVals" type="text" style="margin-left: 10px" icon="el-icon-plus" size="small" @click="spec.editVals = true">添加规格值</el-button>
|
|
|
<el-button v-if="spec.editVals" type="text" @click="checkSpecVal(spec, `specList.${index}.vals`)">确认</el-button>
|
|
|
+ <el-button v-if="spec.editVals" type="text" @click="spec.editVals = false;specValTmp = ''">取消</el-button>
|
|
|
</el-col>
|
|
|
</el-form-item>
|
|
|
</el-row>
|
|
|
@@ -31,15 +32,15 @@
|
|
|
<el-button type="primary" size="small" plain @click="specList.push({ name: '', vals: [], edit: true, editVals: false })" :disabled="!!specList.find(item => item.edit)" style="margin-bottom: 10px">添加规格</el-button>
|
|
|
<el-button type="primary" size="small" style="margin-bottom: 10px;margin-left: 10px" :disabled="specList.length === 0 || !!specList.find(item => item.edit)" @click="genSku">{{ skuList.length > 0 ? '重新生成SKU表格' : '生成SKU表格' }}</el-button>
|
|
|
<br>
|
|
|
- <el-form ref="sku" :model="{ skuList }">
|
|
|
+ <el-form ref="sku" :model="{ skuList }" :inline="false">
|
|
|
<table v-if="skuList instanceof Array && skuList.length > 0" class="spec-table" border="1" bordercolor="#CCC">
|
|
|
<tr>
|
|
|
<th :colspan="specListTmp.length">商品规格</th>
|
|
|
<th rowspan="2" class="required"><span>＊</span>SKU主图</th>
|
|
|
<th rowspan="2" class="required"><span>＊</span>名称</th>
|
|
|
- <th rowspan="2" class="required"><span>＊</span>价格</th>
|
|
|
- <th rowspan="2" class="required"><span>＊</span>兑换价格</th>
|
|
|
- <th rowspan="2">采购价格</th>
|
|
|
+ <th rowspan="2" class="required"><span>＊</span>价格(元)</th>
|
|
|
+ <th rowspan="2" class="required"><span>＊</span>兑换盲豆数量</th>
|
|
|
+ <th rowspan="2">采购价格(元)</th>
|
|
|
<th rowspan="2" class="required"><span>＊</span>库存</th>
|
|
|
<th rowspan="2">启用</th>
|
|
|
</tr>
|
|
|
@@ -53,30 +54,30 @@
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-form-item :prop="`skuList.${index}.picUrlArr`" :rules="{ required: true, message: '请上传SKU图片', trigger: ['blur', 'change'] }">
|
|
|
- <Upload v-model="sku.picUrlArr" :limit="1" :low="true" style="height: 40px;overflow: hidden" @change="$refs.sku.validateField([`skuList.${index}.picUrlArr`])" />
|
|
|
+ <Upload v-model="sku.picUrlArr" :limit="1" :low="true" style="width: 100%" @change="$refs.sku.validateField([`skuList.${index}.picUrlArr`])" />
|
|
|
</el-form-item>
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td class="pd">
|
|
|
<el-form-item :prop="`skuList.${index}.name`" :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }">
|
|
|
<el-input v-model="sku.name" />
|
|
|
</el-form-item>
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td class="pd">
|
|
|
<el-form-item :prop="`skuList.${index}.valueY`" :rules="valueYRules">
|
|
|
<el-input v-model="sku.valueY" />
|
|
|
</el-form-item>
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-form-item :prop="`skuList.${index}.valueY`" :rules="exchangeRules">
|
|
|
- <p>{{ sku.valueY * 10 }}</p>
|
|
|
+ <p>{{ (sku.valueY * 10).toFixed(0) }}</p>
|
|
|
</el-form-item>
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td class="pd">
|
|
|
<el-form-item :prop="`skuList.${index}.costY`" :rules="costYRules">
|
|
|
<el-input v-model="sku.costY" />
|
|
|
</el-form-item>
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td class="pd">
|
|
|
<el-form-item :prop="`skuList.${index}.quantity`" :rules="{ required: true, message: '请输入库存', trigger: 'blur' }">
|
|
|
<el-input-number v-model="sku.quantity" :min="0" @change="$event === 0 ? sku.status = false : sku.status = true" />
|
|
|
</el-form-item>
|
|
|
@@ -118,7 +119,14 @@ export default {
|
|
|
specifications: [],
|
|
|
valueYRules: [{ required: true, message: '请输入价格', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"]}],
|
|
|
costYRules: [{ required: false, message: '请输入采购价格', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2}\d[0])?|0|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }],
|
|
|
- exchangeRules: [{ required: true, message: '请输入兑换价格', trigger: 'blur' },{ pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"]}]
|
|
|
+ exchangeRules: [{ required: true, trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ focus: {
|
|
|
+ inserted: function (el) {
|
|
|
+ el.querySelector('input').focus()
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -132,7 +140,6 @@ export default {
|
|
|
specObj[key] = []
|
|
|
console.log(specObj[key])
|
|
|
}
|
|
|
-
|
|
|
specObj[key].push(p.split(':')[1])
|
|
|
})
|
|
|
})
|
|
|
@@ -147,7 +154,7 @@ export default {
|
|
|
this.specListTmp = JSON.parse(JSON.stringify(this.specList))
|
|
|
this.skuList = sku.map(item => {
|
|
|
this.$set(item, 'valueY', accDiv(item.value, 100))
|
|
|
- this.$set(item, 'costY', accDiv(item.cost, 100))
|
|
|
+ this.$set(item, 'costY', item.cost == '' ? '' : accMul(costY, 100) )
|
|
|
this.$set(item, 'picUrlArr', item.picUrl.split(',').map(item => { return { fileName: item }}))
|
|
|
this.$set(item, 'status', !!item.quantity)
|
|
|
return item
|
|
|
@@ -279,8 +286,8 @@ export default {
|
|
|
this.skuList.forEach(item => {
|
|
|
const { valueY, costY } = item
|
|
|
item.value = accMul(valueY, 100)
|
|
|
- item.exchangePrice = item.value * 10
|
|
|
- item.cost = accMul(costY, 100)
|
|
|
+ item.exchangePrice = accDiv(item.value, 10)
|
|
|
+ item.cost = costY == '' ? '' : accMul(costY, 100)
|
|
|
item.picUrl = item.picUrlArr.map(item => { return item.fileName }).toString()
|
|
|
})
|
|
|
this.$emit('valid', this.skuList)
|
|
|
@@ -310,6 +317,9 @@ export default {
|
|
|
td {
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .pd {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
.required {
|
|
|
position: relative;
|
|
|
span {
|
zhong chunping