<template>
|
<div class="couponProduct">
|
<el-button type="success" size="mini" @click="addProduct">添加商品</el-button>
|
<el-button size="mini" @click="clearTable">清空</el-button>
|
<el-table :data="tableData" border>
|
<el-table-column label="商品主编码" width="180px" prop="spuNum" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="prodName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="剩余库存" prop="spuStorage" show-overflow-tooltip v-if="isShowSpuStorage">
|
</el-table-column>
|
<el-table-column width="250px" label="商品规格*数量">
|
<template slot-scope="scope">
|
<el-form-item v-if="JSON.parse(scope.row.extparams)[0].skuProps.length"
|
:prop="'promotionProducts.'+ scope.$index + '.skuId'"
|
:rules="formRules.couponSkuId">
|
<el-select v-model="scope.row.skuId" multiple @change="changeSkuId(scope.row)">
|
<el-option v-for="item in JSON.parse(scope.row.extparams)" :key="item.skuId"
|
:value="item.skuId" :label=" item.skuProps.length ? item.prodSpecs : '-'">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<slot name="productTableRow"></slot>
|
<el-table-column width="100px" label="操作">
|
<template slot-scope="scope">
|
<el-form-item>
|
<el-button type="danger" size="mini" @click="deleteItem(scope.row,scope.$index)">删除
|
</el-button>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
<product-selected :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
@hand-selected-row-data="handSelectedRowData"
|
:isShowSpuStorage="isShowSpuStorage" :isShowSpuId="isShowSpuId">
|
</product-selected>
|
</div>
|
</template>
|
<script>
|
import productSelected from '@/views/product/components/productSelected.vue'
|
export default {
|
components: { productSelected },
|
props: {
|
productData: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
formRules: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
},
|
extraVariables: {
|
type: String,
|
},
|
// 是否展示剩余库存列
|
isShowSpuStorage: {
|
type: Boolean,
|
default: false
|
},
|
// 是否展示商品编码列
|
isShowSpuId: {
|
type: Boolean,
|
default: true
|
},
|
},
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
tableData: []
|
}
|
},
|
watch: {
|
productData: {
|
immediate: true, // immediate选项可以开启首次赋值监听
|
handler: function(newValue, oldValue) {
|
this.tableData = newValue
|
}
|
},
|
tableData(newValue, oldValue) {
|
this.$emit('update:productData', newValue)
|
}
|
},
|
methods: {
|
/**
|
* 处理表格数据（把每个单品拆开）
|
*/
|
handTableData() {
|
const resultTable = []
|
this.tableData.forEach(item => {
|
if (item.skuId instanceof Array) {
|
let obj = {}
|
for (let s = 0; s < item.skuId.length; s++) {
|
const { prodId, prodName, extparams, spuUnit, shopId, spuNum } = item
|
obj = { prodId, prodName, spuNum, skuReduceStorage: item.skuReduceStorageArr[s], prodSpecs: item.prodSpecs[s], skuId: item.skuId[s], extparams, spuUnit, shopId }
|
if (this.extraVariables) obj[this.extraVariables] = item[this.extraVariables][s]
|
resultTable.push(obj)
|
}
|
} else {
|
item.prodSpecs = null
|
item.skuReduceStorage = item.skuReduceStorageArr[0]
|
// item.skuId = item.skuId.join()
|
resultTable.push(item)
|
}
|
})
|
return resultTable
|
},
|
/**
|
* 选择规格时触发，获取规格名称
|
*/
|
changeSkuId(row) {
|
row.prodSpecs = []
|
row.skuReduceStorageArr = []
|
JSON.parse(row.extparams).forEach(item => {
|
const rowItem = row.skuId.find(i => i === item.skuId)
|
if (rowItem) {
|
row.prodSpecs.push(item.prodSpecs)
|
row.skuReduceStorageArr.push(item.skuReduceStorage)
|
}
|
})
|
},
|
/**
|
* 清空表格数据
|
*/
|
clearTable() {
|
this.tableData = []
|
},
|
/**
|
* 删除表格数据
|
*/
|
deleteItem(row, index) {
|
this.tableData.splice(index, 1)
|
},
|
/**
|
* 打开添加商品弹窗
|
*/
|
addProduct() {
|
this.selectedDialog.show = true
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
handSelectedRowData(rows) {
|
rows.forEach(rowItem => {
|
if (!this.tableData.find(item => {
|
return rowItem.spuId === item.prodId
|
})) {
|
this.tableData.push({
|
prodId: rowItem.spuId,
|
prodName: rowItem.spuName,
|
spuNum: rowItem.spuNum, // 主编码
|
spuStorage: rowItem.spuStorage,
|
skuReduceStorageArr: rowItem.defaultSku ? rowItem.skuInfos[0].skuReduceStorage : [], // 扣减数
|
prodSpecs: [],
|
skuId: rowItem.defaultSku ? rowItem.skuInfos[0].skuId : [],
|
extparams: JSON.stringify(rowItem.skuInfos),
|
spuUnit: rowItem.spuUnit,
|
[this.extraVariables]: rowItem.defaultSku ? null : [],
|
shopId: rowItem.shopId
|
})
|
}
|
})
|
this.$emit('hand-selected', rows)
|
}
|
}
|
}
|
</script>
|
<style>
|
.couponProduct .el-table {
|
margin-top: 20px;
|
}
|
</style>
|
