<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：" inline>
|
<div class="title-style"><div>SKU配置</div><div class="btn" @click="addSku">添加规格</div></div>
|
<el-table
|
:data="skiuList"
|
border
|
>
|
<el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
|
<el-table-column label="规格名称" align="center" width="160">
|
<template slot-scope="{row}">
|
<el-input v-model="row.name" @change="row.name=$event" placeholder="请输入规格名称" v-trim/>
|
</template>
|
</el-table-column>
|
<el-table-column label="规格值" min-width="160px">
|
<template slot-scope="{row}">
|
<div class="sku-value">
|
<div v-for="(item, index) in row.skuValue" style="margin-right: 5px; margin-bottom: 5px;">
|
<el-input :key="index" v-model="item.value" placeholder="请输入规格值" @blur="builder" v-trim>
|
<el-button slot="append" @click="row.skuValue.splice(index, 1)">X</el-button>
|
</el-input>
|
</div>
|
<el-button type="text" @click="addValue(row)">添加规格值</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="60">
|
<template slot-scope="scope">
|
<!-- skiuList.splice(scope.$index, 1) -->
|
<el-button slot="append" @click="deleteSku(scope.$index)">X</el-button>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="title-style" style="margin-top: 30px;"><div>商品定价：</div><div class="sub-title">本系统以单个SKU定价和库存管理</div></div>
|
<el-table
|
:data="skuAttr"
|
border
|
>
|
<el-table-column type="index" width="120" align="center" label="SKU图片">
|
<template slot-scope="{row}">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': row.imgurlfull, 'imgurl': row.imgurl }"
|
@uploadSuccess="uploadSuccess($event, row)"
|
@uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="attrName" label="规格" align="center" min-width="160"></el-table-column>
|
<el-table-column label="市场价(元)" align="center" width="160">
|
<template slot-scope="{row}">
|
<el-input v-model="row.showPrice" placeholder="请输入市场价" v-trim/>
|
</template>
|
</el-table-column>
|
<el-table-column label="销售价(元)" align="center" width="160">
|
<template slot-scope="{row}">
|
<el-input v-model="row.price" placeholder="请输入销售价" v-trim/>
|
</template>
|
</el-table-column>
|
<el-table-column label="库存(0库存无法下单)" align="center" width="200">
|
<template slot-scope="{row}">
|
<el-input v-model="row.price" placeholder="请输入库存" v-trim/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="60">
|
<template slot-scope="{row}">
|
<el-button v-if="row.isdeleted" type="text" @click="row.isdeleted=false">恢复</el-button>
|
<el-button style="color: red" v-else type="text" @click="row.isdeleted=false">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
export default {
|
name: 'OperaGoodsSkuWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
creator: '',
|
createDate: '',
|
editor: '',
|
editDate: '',
|
isdeleted: '',
|
remark: '',
|
goodsId: '',
|
skuId: '',
|
name: '',
|
imgurl: '',
|
showPrice: '',
|
price: '',
|
stock: '',
|
weight: '',
|
status: ''
|
},
|
skiuList: [],
|
skuAttr: [],
|
// 验证规则
|
rules: {
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/goodsSku',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.skuList = []
|
this.skuAttr = []
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.addSku()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
},
|
addSku() {
|
let tempSkulist = this.skiuList
|
const count = tempSkulist.push(
|
{
|
name: '',
|
skuValue: [
|
{ value: '' }
|
]
|
}
|
)
|
this.skuList = tempSkulist
|
},
|
deleteSku(index) {
|
if (!index) {
|
this.$message.warning('至少保留一条SKU')
|
return
|
}
|
this.skiuList.splice(index, 1)
|
this.builder
|
},
|
addValue(row) {
|
row.skuValue.push({ value: '' })
|
},
|
builder() {
|
let attr = []
|
for (const item of this.skuList) {
|
if (item.skuValue.length) {
|
if (!attr.length) {
|
attr = item.skuValue.map(item => {
|
let newItem = {
|
attrName: item.value,
|
imgurlfull: '',
|
imgurl: '',
|
showPrice: '',
|
price: '',
|
inventory: '',
|
isdeleted: false,
|
}
|
return newItem
|
})
|
} else {
|
let tempAttr = [...attr]
|
attr = []
|
for (const attItem of tempAttr) {
|
for (const val of item.skuValue) {
|
// debugger
|
attr.push({
|
attrName: `${attItem.attrName}、${val.value}`,
|
imgurlfull: '',
|
imgurl: '',
|
showPrice: '',
|
price: '',
|
inventory: '',
|
isdeleted: false,
|
})
|
}
|
}
|
}
|
}
|
}
|
this.skuAttr = attr
|
},
|
uploadSuccess(file, row) {
|
row.imgurlfull=file.imgurlfull
|
row.imgurl=file.imgurl
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.title-style {
|
font-weight: 500;
|
font-size: 20px;
|
height: 20px;
|
|
line-height: 20px;
|
vertical-align: middle;
|
margin-bottom: 20px;
|
display: flex;
|
.btn {
|
font-weight: 400;
|
color: #216EEE;
|
margin-left: 10px;
|
border: #216EEE solid 1px;
|
font-size: 12px;
|
line-height: 12px;
|
padding: 4px 8px;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
.sub-title {
|
margin-top: 4px;
|
font-weight: normal;
|
font-size: 16px;
|
line-height: 16px;
|
color: #999;
|
vertical-align: baseline;
|
}
|
}
|
.sku-value {
|
display: flex;
|
flex-wrap: wrap;
|
::v-deep .el-input {
|
width: 200px;
|
}
|
}
|
|
</style>
|
