<template>
|
<div>
|
<!-- <div class="formBlock">
|
<span>商品信息</span>
|
</div>
|
<el-form-item label="商品名称：" >{{form.prodSpu.spuName}}</el-form-item>
|
<el-form-item label="商品品牌：" >{{form.prodSpu.brandName }}</el-form-item>
|
<el-form-item label="商品分类：" >{{form.prodSpu.cascaderLabel}}</el-form-item> -->
|
<div class="formBlock">
|
<span>价格库存</span>
|
</div>
|
<el-form-item label="扣减方式：" prop="shopSpu.storageMinusType">
|
下单后扣减
|
<!-- <el-select placeholder="请选择扣减方式" v-model="form.shopSpu.storageMinusType" clearable>
|
<el-option v-for="item in reduceArray" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
</el-select> -->
|
</el-form-item>
|
<div v-if="form.prodSpu.spuType !== '3'">
|
<el-form-item label="商品总库存：" prop="shopSpu.spuStorage">
|
<el-input-number disabled v-model="form.shopSpu.spuStorage" :min='0'
|
@keydown.native="limiInputType" clearable></el-input-number>
|
</el-form-item>
|
<el-form-item label="商品库存预警：" prop="shopSpu.spuFreezeStorage">
|
<el-input-number disabled v-model="form.shopSpu.spuFreezeStorage" :min='0'
|
@keydown.native="limiInputType" clearable></el-input-number>
|
</el-form-item>
|
</div>
|
<!-- <div v-for="(item,index) in form.skuMetasArray" :key="index">
|
<el-form-item :label="item.productProp.propName+'：'" :prop="'skuMetasArray.'+index+'.checkList'" :rules="{type: 'array',required: showSkuMetas && item.productProp.propRequired ? true : false,message:`请选择${item.productProp.propName}`}">
|
<el-checkbox-group v-model="item.checkList" @change="selectedSkuMetas(item.checkList,item)">
|
<el-checkbox v-for="itemProp in item.propMetaValues" :key="itemProp.propValueId" :label="itemProp.propValueId">{{itemProp.propValue}}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</div>
|
<el-form-item v-show="setShowProductTip()">
|
<span class="productTip">温馨提示：请选择以上商品属性（至少选择一种属性）</span>
|
</el-form-item> -->
|
<!-- v-show="showTable" -->
|
<div>
|
<div v-if="isTip" class="itemTip">温馨提示：销售价格不应低于红线价格</div>
|
<el-form-item label="商品规格：">
|
<el-form ref="skuMetaForm" :model="skuMetaForm" size="mini"
|
:disabled="$route.query.pageTag === 'detail'">
|
<el-form-item>
|
<el-table ref="table" :data="skuMetaForm.tableData" border>
|
<!-- <el-table-column :label="form.tableLabel">
|
<template slot-scope="scope">
|
{{scope.row.columnsText}}
|
</template>
|
</el-table-column> -->
|
<el-table-column v-if="form.prodSpu.spuType === '3'" key="spuNum" label="商品主编码"
|
prop="spuNum" min-width="150px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column v-if="form.prodSpu.spuType === '3'" key="spuName" label="商品名称"
|
prop="spuName" show-overflow-tooltip min-width="220px">
|
</el-table-column>
|
<el-table-column label="商品类型" prop="spuTypeName" key="spuTypeName"
|
v-if="form.prodSpu.spuType === '3'" width="150px"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="规格" key="skuId" min-width="200px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.' + scope.$index + '.propValueId'"
|
:rules="formRules.skuPropValueId">
|
<el-select v-if="form.prodSpu.spuType !== '3'" v-model="scope.row.propValueId"
|
filterable remote reserve-keyword placeholder="请输入规格"
|
:remote-method="(query) => remoteMethod(query, scope.row)"
|
@change="changeSkuId(scope.row)"
|
@visible-change="(tag) => skuIdSelectVisible(tag, scope.row, scope.$index)"
|
:loading="scope.row.loading">
|
<el-option v-for="item in scope.row.options" :disabled="item.disabled"
|
:key="item.propValueId" :label="item.propValue"
|
:value="item.propValueId">
|
</el-option>
|
</el-select>
|
<span v-else>{{scope.row.columnsText}}</span>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="form.prodSpu.spuType !== '3'" key="file" label="规格图片"
|
align="center" width="120px">
|
<template slot-scope="scope">
|
<el-form-item class="table-item">
|
<custom-upload-img class="table-upload-img"
|
@handle-success="(param)=>handleSuccess(param,scope.row)"
|
@handle-remove="(file)=>handleRemove(file,scope.row)"
|
@handle-file-data="(arr)=>handleFileData(arr,scope.row)"
|
:isHideDelete="$route.query.pageTag !== 'detail'"
|
:fileList="scope.row.fileList">
|
</custom-upload-img>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="挂牌/横线价格" min-width="180px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.' + scope.$index + '.listPrice'"
|
:rules="formRules.listPrice">
|
<el-input-number :disabled="form.prodSpu.spuType === '3'"
|
v-model="scope.row.listPrice"
|
@keydown.native="limiInputType"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="红线价格(瓶)" min-width="150px" show-overflow-tooltip>
|
<template slot="header">
|
红线价格(瓶)
|
<el-popover placement="top" trigger="click">
|
1.指该商品规格最低销售价格，不得低于红线价<br />
|
2.该价统一由工管部规划
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<el-form-item>
|
{{scope.row.redLinePrice !== null ? '￥' + scope.row.redLinePrice.toFixed(2) : '-'}}
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="销售价格" width="180px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.' + scope.$index + '.salePrice'"
|
:rules="formRules.salePrice">
|
<el-input-number :class="scope.row.isTip ? 'inputTip':''"
|
:disabled="form.prodSpu.spuType === '3' || !scope.row.propValueId"
|
v-model="scope.row.salePrice"
|
@change="changeSalePrice(scope.row)"
|
@keydown.native="limiInputType"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="form.prodSpu.spuType === '3'" key="skuStorage" label="商品库存"
|
prop="skuStorage" width="150px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.skuStorage === +scope.row.skuStorage ? scope.row.skuStorage : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品扣减数" min-width="180px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.' + scope.$index + '.skuReduceStorage'"
|
:rules="formRules.skuReduceStorage">
|
<el-input-number :disabled="form.prodSpu.spuType === '3'"
|
v-model="scope.row.skuReduceStorage" :min='0'
|
@keydown.native="limiInputType"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column v-if="$route.query.spuId && form.prodSpu.spuType !== '3'" key="packageCode" prop="agglomerateOrderNum" >
|
<template slot="header">
|
平台套餐编码
|
<el-popover
|
placement="top"
|
width="200"
|
trigger="click"
|
content="注：此商品规格已关联渠道平台套餐，请谨慎操作，若确需操作，请修改后确认平台套餐是否正常（当前商品规格与套餐编码规格扣减数是否一致）"
|
>
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
{{scope.row.packageCode}}
|
</template>
|
</el-table-column> -->
|
<!-- <el-table-column label="商品库存" width="160px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.' + scope.$index + '.spuStorage'" :rules="formRules.spuStorage">
|
<el-input-number v-model="scope.row.spuStorage" :min='0' @keydown.native="limiInputType" ></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="预警库存" width="160px">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.' + scope.$index + '.spuFreezeStorage'" :rules="formRules.spuFreezeStorage">
|
<el-input-number v-model="scope.row.spuFreezeStorage" :min='0' @keydown.native="limiInputType" ></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column> -->
|
<el-table-column v-if="form.prodSpu.spuType !== '3'" key="action" label="操作"
|
width="80px">
|
<template slot-scope="scope">
|
<el-form-item>
|
<el-button type="danger"
|
@click="deleteSku(scope.row, scope.$index)">删除</el-button>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<div class="buttonPosition">
|
<el-button v-if="form.prodSpu.spuNum && form.prodSpu.spuType !== '3'" type="primary"
|
@click="addSpecs">添加规格</el-button>
|
</div>
|
</el-form>
|
</el-form-item>
|
<div v-if="form.prodSpu.spuType === '3'">
|
<el-form-item label="组套商品挂牌价：" prop="shopSpu.prodPrice.listPrice">
|
<el-input-number v-model="form.shopSpu.prodPrice.listPrice"
|
@keydown.native="limiInputType" clearable></el-input-number>
|
</el-form-item>
|
<el-form-item label="组套商品销售价：" prop="shopSpu.prodPrice.salePrice">
|
<el-input-number v-model="form.shopSpu.prodPrice.salePrice"
|
@keydown.native="limiInputType" clearable></el-input-number>
|
</el-form-item>
|
</div>
|
<!-- <div class="formBlock">
|
<span>单品图片</span>
|
</div>
|
<div v-for="(item,index) in skuMetaForm.tableData" :key='index'>
|
<div>{{item.columnsText}}：</div>
|
<el-form-item>
|
<custom-upload-img
|
:imageSize="'754 * 754'"
|
@handle-success="(param)=>handleSuccess(param,item)"
|
@handle-remove="(file)=>handleRemove(file,item)"
|
@handle-file-data="(arr)=>handleFileData(arr,item)"
|
:fileList="item.fileList">
|
</custom-upload-img>
|
</el-form-item>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
<script>
|
import { limiInputType } from '@/utils/limiInputType'
|
import productListApi from '@/api/productmanagement/productList'
|
|
export default {
|
props: ['form', 'reduceArray', 'showSkuMetas', 'formRules'],
|
data() {
|
return {
|
skuMetaForm: {
|
tableData: []
|
},
|
showTable: false,
|
dialogVisible: false,
|
dialogImageUrl: null
|
}
|
},
|
created() {
|
this.setShowProductTip()
|
},
|
computed: {
|
// 是否展示提示信息
|
isTip() {
|
for (const i of this.skuMetaForm.tableData) {
|
if (i.isTip) {
|
return true
|
}
|
}
|
return false
|
}
|
},
|
methods: {
|
changeSkuId(item) {
|
const row = item.options.find(i => i.propValueId === item.propValueId)
|
item.redLinePrice = row?.redLinePrice || null
|
},
|
// 展开propValueId时
|
skuIdSelectVisible(tag, row, $index) {
|
if (tag && row.propValueId) {
|
const arr = this.skuMetaForm.tableData
|
row.options.forEach(item => {
|
this.$set(item, 'disabled', false)
|
})
|
arr.forEach((item, index) => {
|
row.options.forEach(i => {
|
if ($index !== index && item.propValueId === i.propValueId) {
|
if (item.propValueId === i.propValueId) {
|
this.$set(i, 'disabled', true)
|
}
|
}
|
})
|
})
|
}
|
},
|
// 模糊搜索规格
|
remoteMethod(query, row) {
|
if (query !== '') {
|
row.loading = true
|
clearTimeout(this.timeout)
|
this.timeout = setTimeout(async () => {
|
const form = this.form.prodSpu
|
const res = await productListApi.querySpecsPropList({ spuNum: form.spuNum, catId: form.catId, keyWord: query })
|
if (res.data) {
|
row.options = []
|
const arr = this.skuMetaForm.tableData
|
res.data.forEach(item => {
|
if (arr.find(i => i.propValueId === item.propValueId)) {
|
item.disabled = true
|
}
|
})
|
row.options = res.data
|
row.loading = false
|
}
|
}, 2000)
|
} else {
|
row.options = []
|
}
|
},
|
// 添加规格
|
addSpecs() {
|
this.skuMetaForm.tableData.push({
|
propValueId: null,
|
fileList: [],
|
listPrice: null,
|
redLinePrice: null,
|
salePrice: null,
|
skuReduceStorage: null,
|
loading: false,
|
options: null,
|
isTip: false
|
})
|
},
|
// 当销售价格改变时
|
changeSalePrice(row) {
|
if (row.redLinePrice !== null && row.salePrice < row.redLinePrice) {
|
row.isTip = true
|
} else {
|
row.isTip = false
|
}
|
},
|
// 删除规格
|
deleteSku(row, index) {
|
this.skuMetaForm.tableData.splice(index, 1)
|
},
|
// 数组更新时重新获取数据
|
handleFileData(arr, item) {
|
item.fileList = arr
|
},
|
/**
|
* 设置商品属性展示的提示信息
|
*/
|
setShowProductTip() {
|
let isShow = false
|
for (const key of this.form.skuMetasArray) {
|
if (key.productProp.propRequired) {
|
isShow = false
|
break
|
} else {
|
isShow = true
|
}
|
}
|
return isShow
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(data, item) {
|
item.fileList.push({
|
id: data.id,
|
url: data.url
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(file, item) {
|
item.fileList = item.fileList.filter(v => {
|
return v.id !== file.id
|
})
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType(e) {
|
limiInputType(e)
|
},
|
/**
|
*初始化表格
|
*/
|
initTable() {
|
this.skuMetaForm.tableData = []
|
this.showTable = false
|
},
|
/**
|
* 处理表单数据
|
*/
|
handFormData() {
|
const formData = {
|
skuProps: [],
|
shopSpu: {
|
prodSkus: [],
|
spuFreezeStorage: this.form.shopSpu.spuFreezeStorage,
|
spuStorage: this.form.shopSpu.spuStorage
|
}
|
}
|
this.form.skuMetasArray.forEach(item => {
|
formData.skuProps.push({
|
propId: item.productProp.propId,
|
metaValues: this.skuMetaForm.tableData.map(item => { return { propValueId: item.propValueId } })
|
})
|
})
|
this.skuMetaForm.tableData.forEach((item, index, arr) => {
|
formData.shopSpu.prodSkus.push({
|
listProdImg: item.fileList.map((item, index) => { return { imgId: item.id, imgNum: index + 1, imgUrl: item.url } }),
|
prodPrice: { listPrice: item.listPrice, salePrice: item.salePrice },
|
skuPropValuesId: [item.propValueId],
|
skuReduceStorage: item.skuReduceStorage,
|
oldSkuId: item.skuId || null,
|
packageCode: item.packageCode || null
|
// listProdStorage: [{ spuStorage: item.spuStorage, spuFreezeStorage: item.spuFreezeStorage }]
|
})
|
})
|
formData.shopSpu.storageMinusType = this.form.shopSpu.storageMinusType
|
return formData
|
},
|
/**
|
* 选中单品信息时触发
|
*/
|
selectedSkuMetas(val, row) {
|
row.propId = row.productProp.propId
|
this.form.tableLabel = ''
|
for (const i of this.form.skuMetasArray) {
|
if (i.checkList.length <= 0 && i.productProp.propRequired) {
|
this.showTable = false
|
return
|
} else {
|
this.form.tableLabel += i.productProp.propName + '/'
|
row.propsLable = []
|
val.forEach(item => {
|
row.propMetaValues.forEach(v => {
|
if (item === v.propValueId) {
|
row.propsLable.push(v.propValue)
|
}
|
})
|
})
|
}
|
}
|
this.showTable = true
|
this.form.tableLabel = this.form.tableLabel.substring(0, this.form.tableLabel.length - 1)
|
|
this.getCheckedText() // 获取选中的checkBox的label
|
},
|
/**
|
* 获取选中的checkBox的label
|
*/
|
getCheckedText() {
|
const columnsArray = []
|
const columnsIdArray = []
|
this.form.skuMetasArray.forEach(item => {
|
if (item.checkList.length) {
|
columnsArray.push(item.propsLable)
|
columnsIdArray.push(item.checkList)
|
}
|
})
|
|
const combinationArray = this.getCombination(columnsArray) // 获取选中值的多种组合形式Label
|
const combinationPropIdArray = this.getCombination(columnsIdArray) // 获取选中值的多种组合形式propId
|
|
this.getColumnsText(combinationArray, combinationPropIdArray) // 获取选中的label
|
},
|
/**
|
* 删除
|
*/
|
del(row) {
|
const arr = []
|
this.skuMetaForm.tableData.forEach((v) => {
|
v.skuPropIds && v.skuPropIds.forEach(k => {
|
arr.push(k)
|
})
|
})
|
const idsBefore = Array.from(new Set(arr))
|
this.skuMetaForm.tableData = this.skuMetaForm.tableData.filter(v => {
|
return v.skuPropIds.sort().toString() !== row.skuPropIds.sort().toString()
|
})
|
const array = []
|
this.skuMetaForm.tableData.forEach((v) => {
|
v.skuPropIds.forEach(k => {
|
array.push(k)
|
})
|
})
|
const idsAfter = Array.from(new Set(array))
|
const delArray = idsBefore.filter((item) => {
|
return idsAfter.indexOf(item) === -1
|
})
|
this.form.skuMetasArray.forEach(v => {
|
v.checkList = v.checkList.filter(k => {
|
let flag = true
|
delArray.forEach(l => {
|
if (k === l) {
|
flag = false
|
}
|
})
|
return flag
|
})
|
// 获取对应ID的label
|
v.propsLable = []
|
v.checkList.forEach(item => {
|
v.propMetaValues.forEach(i => {
|
if (item === i.propValueId) {
|
v.propsLable.push(i.propValue)
|
}
|
})
|
})
|
})
|
},
|
/**
|
*获取选中的label
|
*/
|
getColumnsText(array, combinationPropIdArray) {
|
let tableData = []
|
array.forEach((item, index) => {
|
combinationPropIdArray[index] && tableData.push({
|
columnsText: item.join('/'),
|
salePrice: null,
|
listPrice: null,
|
skuPropIds: combinationPropIdArray[index],
|
fileList: [],
|
skuReduceStorage: null
|
})
|
})
|
this.skuMetaForm.tableData.forEach(v => {
|
tableData = tableData.map(k => {
|
if (v.skuPropIds.sort().toString() === k.skuPropIds.sort().toString()) {
|
return v
|
}
|
return k
|
})
|
})
|
this.skuMetaForm.tableData = JSON.parse(JSON.stringify(tableData))
|
},
|
/**
|
* 获取选中值的多种组合形式
|
*/
|
getCombination(array) {
|
let resultArr = []
|
array.forEach((arrItem) => {
|
if (resultArr.length === 0) {
|
const firstItem = []
|
arrItem.forEach(item => {
|
firstItem.push([item])
|
})
|
resultArr = firstItem
|
} else {
|
const emptyArray = []
|
resultArr.forEach((item) => {
|
arrItem.forEach((value) => {
|
emptyArray.push([...item, value])
|
})
|
})
|
resultArr = emptyArray
|
}
|
})
|
return resultArr
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
/* .disabled .el-upload--picture-card {
|
display: none!important;
|
}
|
.productTip{
|
color: #D70012;
|
} */
|
$wh: 80px;
|
.itemTip {
|
text-align: right;
|
margin-bottom: 5px;
|
}
|
.table-item {
|
margin-bottom: 0;
|
/deep/.el-form-item__content {
|
display: flex;
|
}
|
}
|
/deep/.table-upload-img {
|
// width: $wh;
|
// height: $wh;
|
margin: 0 auto;
|
.avatar-uploader-icon {
|
width: $wh;
|
height: $wh;
|
line-height: $wh !important;
|
font-size: 12px;
|
}
|
.upload-list__item {
|
margin: 0;
|
width: $wh !important;
|
height: $wh !important;
|
border-radius: 6px;
|
img {
|
border: 1px solid #c0ccda;
|
}
|
img,
|
.el-upload-list__item-actions {
|
width: $wh !important;
|
height: $wh !important;
|
line-height: $wh !important;
|
}
|
}
|
}
|
/deep/.el-dialog .el-dialog__body {
|
img,
|
video {
|
width: 100% !important;
|
}
|
}
|
.inputTip {
|
border: 1px solid #d70012;
|
border-radius: 4px;
|
}
|
</style>
|
