|
@@ -52,49 +52,58 @@
|
|
|
<el-row v-if="!multipleSpec" :gutter="40">
|
|
|
<el-col :span="11">
|
|
|
<el-form-item label="价格:" prop="value">
|
|
|
- <el-input v-model="addData.value" placeholder="请输入商品价格">
|
|
|
+ <el-input v-model="addData.value" type="number" placeholder="请输入商品价格">
|
|
|
<template slot="append">元</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="兑换价格:" prop="exchangePrice">
|
|
|
- <el-input v-model="addData.exchangePrice" placeholder="请输入兑换价格" />
|
|
|
+ <el-form-item label="成本:" prop="cost">
|
|
|
+ <el-input v-model.number="addData.cost" type="number" placeholder="请输入商品成本">
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="11">
|
|
|
- <el-form-item label="成本:" prop="cost">
|
|
|
- <el-input v-model="addData.cost" placeholder="请输入商品成本">
|
|
|
+ <el-form-item label="原兑换价格:" prop="originPrice">
|
|
|
+ <el-input v-model="addData.originPrice" type="number" placeholder="请输入原兑换价格">
|
|
|
<template slot="append">元</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
+ <el-form-item label="现兑换价格:" prop="exchangePrice">
|
|
|
+ <el-input v-model="addData.exchangePrice" type="number" placeholder="请输入现兑换价格">
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
<el-form-item label="库存:" prop="quantity">
|
|
|
- <el-input v-model="addData.quantity" placeholder="请输入商品库存" />
|
|
|
+ <el-input-number v-model="addData.quantity" placeholder="请输入商品库存" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
- <div class="list-group" v-if="multipleSpec">
|
|
|
+ <div v-if="multipleSpec">
|
|
|
<div style="margin-bottom: 16px">
|
|
|
<el-button :plain="true" type="primary" size="small" @click="handleSpecificationShow">添加规格</el-button>
|
|
|
</div>
|
|
|
- <div class="list-group-header">
|
|
|
- <div class="f2">规格名</div>
|
|
|
- <div class="f2">规格值</div>
|
|
|
- <div class="f1 tr">操作</div>
|
|
|
- </div>
|
|
|
- <Draggable v-if="products.length > 0" v-model="specifications" :options="dragOptions">
|
|
|
- <transition-group type="transition" :name="'flip-list'">
|
|
|
- <div class="list-group-item" v-for="item in specifications" :key="item.specification + item.value">
|
|
|
- <div class="f2">{{item.specification}}</div>
|
|
|
- <div class="f2">{{item.value}}</div>
|
|
|
- <div class="f1 tr"><el-button type="danger" size="mini" @click="handleSpecificationDelete(item)">删除</el-button></div>
|
|
|
- </div>
|
|
|
- </transition-group>
|
|
|
- </Draggable>
|
|
|
- <div v-else class="list-empty">无内容</div>
|
|
|
+ <el-table :data="specifications">
|
|
|
+ <el-table-column property="specification" label="规格名"/>
|
|
|
+ <el-table-column property="value" label="规格值">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="primary">
|
|
|
+ {{ scope.row.value }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="danger" size="small" @click="handleSpecificationDelete(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
<el-dialog :visible.sync="specVisiable" title="设置规格" :close-on-click-modal="false" width="400px">
|
|
|
<el-form ref="specForm" :model="specForm" label-width="80px">
|
|
@@ -112,48 +121,47 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<br>
|
|
|
- <div class="list-group" v-if="multipleSpec">
|
|
|
- <div class="list-group-header">
|
|
|
- <div class="f2">商品规格</div>
|
|
|
- <div class="f1">商品售价</div>
|
|
|
- <div class="f1">折扣价格</div>
|
|
|
- <div class="f1">商品数量</div>
|
|
|
- <div class="f2">商品图片</div>
|
|
|
- <div class="f1 tr">操作</div>
|
|
|
- </div>
|
|
|
- <Draggable v-if="products.length > 0" v-model="products" :options="dragOptions">
|
|
|
- <transition-group type="transition" :name="'flip-list'">
|
|
|
- <div class="list-group-item" v-for="item in products" :key="item.specificationList.toString()">
|
|
|
- <div class="f2">{{item.specificationList.toString()}}</div>
|
|
|
- <div class="f1">{{item.price}}</div>
|
|
|
- <div class="f1">{{item.discountPrice}}</div>
|
|
|
- <div class="f1">{{item.number}}</div>
|
|
|
- <div class="f2"><img v-if="item.imgUrl" :src="IMG_URL+item.imgUrl" width="40"></div>
|
|
|
- <div class="f1 tr"><el-button type="primary" size="mini" @click="handleProductShow(item)">设置</el-button></div>
|
|
|
- </div>
|
|
|
- </transition-group>
|
|
|
- </Draggable>
|
|
|
- <div v-else class="list-empty">无内容</div>
|
|
|
- </div>
|
|
|
+ <el-table v-if="multipleSpec" :data="products">
|
|
|
+ <el-table-column property="name" label="sku名称" />
|
|
|
+ <el-table-column property="picUrl" width="100" label="商品图片">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img v-if="scope.row.picUrl" :src="IMG_URL+scope.row.picUrl" width="40">
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="value" label="价格"/>
|
|
|
+ <el-table-column property="originPrice" label="原兑换价格"/>
|
|
|
+ <el-table-column property="exchangePrice" label="现兑换价格"/>
|
|
|
+ <el-table-column property="cost" label="成本"/>
|
|
|
+ <el-table-column property="quantity" label="库存数量"/>
|
|
|
+ <el-table-column align="center" label="操作" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
<el-dialog :visible.sync="productVisiable" title="设置商品" :close-on-click-modal="false" width="400px">
|
|
|
<el-form ref="productForm" :model="productForm" label-width="100px">
|
|
|
- <el-form-item label="商品规格:" prop="specificationList">
|
|
|
- <el-tag v-for="tag in productForm.specificationList" :key="tag">
|
|
|
- {{ tag }}
|
|
|
- </el-tag>
|
|
|
+ <el-form-item label="sku名称:" prop="name">
|
|
|
+ <el-input v-model="productForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="价格:" prop="value">
|
|
|
+ <el-input-number v-model="productForm.value" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="原兑换价格:" prop="originPrice">
|
|
|
+ <el-input-number v-model="productForm.originPrice"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品原价:" prop="price">
|
|
|
- <el-input-number v-model="productForm.price"/>
|
|
|
+ <el-form-item label="现兑换价格:" prop="exchangePrice">
|
|
|
+ <el-input-number v-model="productForm.exchangePrice"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="折扣价:" prop="discountPrice">
|
|
|
- <el-input-number v-model="productForm.discountPrice"/>
|
|
|
+ <el-form-item label="成本:" prop="cost">
|
|
|
+ <el-input-number v-model="productForm.cost"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品数量:" prop="number">
|
|
|
- <el-input-number v-model="productForm.number"/>
|
|
|
+ <el-form-item label="库存数量:" prop="quantity">
|
|
|
+ <el-input-number v-model="productForm.quantity"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品图片:" prop="imgUrl">
|
|
|
- <Upload v-model="productForm.imgUrl" :limit="1" :type="4" />
|
|
|
+ <el-form-item label="商品图片:" prop="picUrl">
|
|
|
+ <Upload v-model="productForm.picUrl" :limit="1" :type="4" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
@@ -180,6 +188,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ IMG_URL: process.env.VUE_APP_IMG_URL,
|
|
|
id: this.$route.query.id,
|
|
|
addData: {
|
|
|
multiSku: 0
|
|
@@ -187,20 +196,15 @@ export default {
|
|
|
rules: {
|
|
|
title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
dragOptions: {
|
|
|
animation: 100,
|
|
|
},
|
|
|
specifications: [],
|
|
|
products: [],
|
|
|
-
|
|
|
- IMG_URL: process.env.IMG_URL,
|
|
|
-
|
|
|
specVisiable: false, // 规格弹窗
|
|
|
- specForm: { specification: '', value: '', imgUrl: '' }, // 规格暂存
|
|
|
+ specForm: {}, // 规格暂存
|
|
|
productVisiable: false,
|
|
|
- productForm: { id: 0, specificationList: [], price: 0.00, discountPrice: 0.00, number: 0, imgUrl: '' },
|
|
|
+ productForm: {},
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -226,7 +230,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handleSpecificationShow() {
|
|
|
- this.specForm = { specification: '', value: '', imgUrl: '' }
|
|
|
+ this.specForm = {}
|
|
|
this.specVisiable = true
|
|
|
},
|
|
|
handleSpecificationDelete(row) {
|
|
@@ -271,17 +275,22 @@ export default {
|
|
|
var isContinue = false
|
|
|
do {
|
|
|
var specifications = []
|
|
|
+ var properties = ''
|
|
|
for (var x = 0; x < n; x++) {
|
|
|
var z = specValues[x][combination[x]]
|
|
|
specifications.push(this.specifications[z].value)
|
|
|
+ properties = `${properties ? (properties + ';') : ''}${this.specifications[z].specification}:${this.specifications[z].value}`
|
|
|
}
|
|
|
products[productsIndex] = {
|
|
|
- id: productsIndex,
|
|
|
- specificationList: specifications,
|
|
|
- price: 0.00,
|
|
|
- discountPrice: 0.00,
|
|
|
- number: 0,
|
|
|
- imgUrl: ''
|
|
|
+ idx: productsIndex,
|
|
|
+ name: specifications.toString(),
|
|
|
+ picUrl: '',
|
|
|
+ originPrice: 0.00,
|
|
|
+ exchangePrice: 0.00,
|
|
|
+ value: 0.00,
|
|
|
+ cost: 0.00,
|
|
|
+ quantity: 0,
|
|
|
+ properties
|
|
|
}
|
|
|
productsIndex++
|
|
|
|
|
@@ -320,8 +329,7 @@ export default {
|
|
|
}
|
|
|
this.specifications.splice(index + 1, 0, {
|
|
|
specification: this.specForm.specification,
|
|
|
- value: element,
|
|
|
- imgUrl: ''
|
|
|
+ value: element
|
|
|
})
|
|
|
|
|
|
});
|
|
@@ -333,42 +341,26 @@ export default {
|
|
|
this.productVisiable = true
|
|
|
},
|
|
|
handleProductEdit() {
|
|
|
- if (this.multipleSpec) {
|
|
|
- for (var i = 0; i < this.products.length; i++) {
|
|
|
- const v = this.products[i]
|
|
|
- if (v.id === this.productForm.id) {
|
|
|
- this.products.splice(i, 1, this.productForm)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- for (var i = 0; i < this.productSingle.length; i++) {
|
|
|
- const v = this.productSingle[i]
|
|
|
- if (v.id === this.productForm.id) {
|
|
|
- this.productSingle.splice(i, 1, this.productForm)
|
|
|
- break
|
|
|
- }
|
|
|
+ for (var i = 0; i < this.products.length; i++) {
|
|
|
+ const v = this.products[i]
|
|
|
+ if (v.idx === this.productForm.idx) {
|
|
|
+ this.products.splice(i, 1, this.productForm)
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
this.productVisiable = false
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
updateItem() {
|
|
|
this.$refs.addItem.validate((valid, items) => {
|
|
|
if (valid) {
|
|
|
- const action = this.addData.id ? editGoods : publishProduct
|
|
|
- action({
|
|
|
- product: this.addData,
|
|
|
- appProductCommodities: this.multipleSpec? this.products:this.productSingle
|
|
|
- }).then(res => {
|
|
|
+ this.addData.skuList = this.products
|
|
|
+ addGoods(this.addData).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
this.$message({
|
|
|
- message: this.addData.id ? '修改成功!' : '添加成功!',
|
|
|
+ message: this.addData.goodsId ? '修改成功!' : '添加成功!',
|
|
|
type: 'success'
|
|
|
})
|
|
|
- this.$router.replace('/goods/list')
|
|
|
+ this.$router.go(-1)
|
|
|
}
|
|
|
})
|
|
|
} else {
|