|
@@ -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">
|
|
@@ -20,8 +20,8 @@
|
|
|
<el-form-item :prop="`specList.${index}.vals`" :rules="{ required: true, message: '请完善规格值', trigger: ['blur', 'change'] }">
|
|
|
<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-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-input v-if="spec.editVals" v-model="specValTmp" ref="specedit" 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="addSpec(spec)">添加规格值</el-button>
|
|
|
<el-button v-if="spec.editVals" type="text" @click="checkSpecVal(spec, `specList.${index}.vals`)">确认</el-button>
|
|
|
</el-col>
|
|
|
</el-form-item>
|
|
@@ -31,15 +31,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 +53,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 +118,7 @@ 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' }]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -177,6 +177,16 @@ export default {
|
|
|
spec.editVals = false
|
|
|
this.$refs.spec.validateField([prop])
|
|
|
},
|
|
|
+ addSpec(spec) {
|
|
|
+ spec.editVals = true
|
|
|
+ console.log(this.$refs.specedit)
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log(this.$refs.specedit)
|
|
|
+ // if (this.$refs.specedit) {
|
|
|
+ // this.$refs.edittmp.focus()
|
|
|
+ // }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
checkSpecName(spec) {
|
|
|
if (this.specList.filter(item => item.name === spec.name).length > 1) {
|
|
|
this.$message.warning('规格名已存在')
|
|
@@ -310,6 +320,9 @@ export default {
|
|
|
td {
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .pd {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
.required {
|
|
|
position: relative;
|
|
|
span {
|