<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="170px" 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="isGift" width="140px">
|
<template slot-scope="scope">
|
{{ scope.row.isGift === '1' ? '赠品/物料' : '销售商品'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="剩余库存" :prop="spuStorageFieldName" width="120px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column width="250px" label="商品规格*数量">
|
<template slot-scope="scope">
|
<div v-if="JSON.parse(scope.row.extparams)[0].skuProps.length">
|
<div v-for="item in JSON.parse(scope.row.extparams)" :key="item.skuId">
|
{{ item.skuProps.length ? `${item.prodSpecs}` : '-' }}
|
</div>
|
</div>
|
<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" :isShowSpuId="false"
|
:isShowSpuStorage="true" :isShowGoodsType="true" :restParams="restParams"
|
:spuStorageFieldName="spuStorageFieldName">
|
</product-selected>
|
</div>
|
</template>
|
<script>
|
import productSelected from '@/views/product/components/productSelected.vue'
|
export default {
|
name: "addProduct",
|
components: { productSelected },
|
props: {
|
productData: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
//针对某个模块传参
|
restParams: {
|
type: Object,
|
default: null
|
}
|
},
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
tableData: [],
|
spuStorageFieldName: 'cnSpuStorage'
|
}
|
},
|
watch: {
|
productData: {
|
immediate: true, // immediate选项可以开启首次赋值监听
|
deep: true, // 深度监听
|
handler: function (newValue, oldValue) {
|
this.tableData = newValue
|
}
|
},
|
tableData(newValue, oldValue) {
|
this.$emit('update:productData', newValue)
|
},
|
},
|
methods: {
|
/**
|
* 选择规格时触发，获取规格名称
|
*/
|
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 = []
|
this.$emit('hand-clear')
|
},
|
/**
|
* 删除表格数据
|
*/
|
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,
|
isGift: rowItem.isGift,
|
cnSpuStorage: rowItem.cnSpuStorage,
|
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,
|
shopId: rowItem.shopId
|
})
|
}
|
})
|
this.$emit('hand-selected', rows)
|
}
|
}
|
}
|
</script>
|
<style>
|
.couponProduct .el-table {
|
margin-top: 20px;
|
}
|
</style>
|
