<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="prodSkuNo"
|
show-overflow-tooltip></el-table-column>
|
<el-table-column label="商品主编码" width="170px" prop="prodNum"
|
show-overflow-tooltip></el-table-column>
|
<el-table-column label="商品名称" prop="prodName" show-overflow-tooltip
|
min-width="220px"></el-table-column>
|
<el-table-column label="商品类型" prop="prodTypeTrans" width="140px"></el-table-column>
|
<el-table-column label="剩余库存" prop="cnSpuStorage" width="120px" show-overflow-tooltip
|
v-if="isShowCnSpuStorage">
|
</el-table-column>
|
<el-table-column width="250px" label="商品规格/单位" v-if="isShowSpecUnit">
|
<template slot-scope="scope">
|
{{ `${scope.row.casesOfGauge} / ${scope.row.unitOfMeasurement}`}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品购买审核数量" width="200px" prop="buyQuantity"
|
v-if="isShowPurchaseQuantity">
|
<template slot="header">
|
商品购买审核数量
|
<el-tooltip class="item" effect="dark" content="该审核数量将按照用户实际购买数量最小单位进行审核限制"
|
placement="top">
|
<i class="el-icon-info"></i>
|
</el-tooltip>
|
</template>
|
<template slot-scope="scope">
|
<el-form-item :prop="'productSkuReview.'+scope.$index+'.buyQuantity'"
|
:rules="formRules.buyQuantity">
|
<el-input-number :min='0' :max='999' v-model="scope.row.buyQuantity"></el-input-number>
|
{{ scope.row.unitOfMeasurement}}
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<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>
|
<multi-spec-product-selected :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
@hand-selected-row-data="handSelectedRowData"
|
:isShowCnSpuStorage="isShowCnSpuStorage">
|
</multi-spec-product-selected>
|
</div>
|
</template>
|
<script>
|
import multiSpecProductSelected from '@/views/product/components/multiSpecProductSelected.vue'
|
export default {
|
name: "addMultiSpecProduct",
|
components: { multiSpecProductSelected },
|
props: {
|
productData: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
// 是否展示剩余库存列
|
isShowCnSpuStorage: {
|
type: Boolean,
|
default: false
|
},
|
// 是否展示商品规格/单位
|
isShowSpecUnit: {
|
type: Boolean,
|
default: true
|
},
|
// 是否展示商品购买审核数量
|
isShowPurchaseQuantity: {
|
type: Boolean,
|
default: false
|
},
|
formRules: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择多规格商品'
|
},
|
tableData: [],
|
}
|
},
|
watch: {
|
productData: {
|
immediate: true, // immediate选项可以开启首次赋值监听
|
deep: true, // 深度监听
|
handler: function (newValue, oldValue) {
|
this.tableData = newValue
|
}
|
},
|
tableData(newValue, oldValue) {
|
this.$emit('update:productData', newValue)
|
},
|
},
|
methods: {
|
/**
|
* 清空表格数据
|
*/
|
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.prodSkuNo === item.prodSkuNo
|
})) {
|
if (this.isConfig) {
|
rowItem = { ...rowItem, ...{ buyQuantity: 0 } }
|
}
|
this.tableData.push(rowItem)
|
}
|
})
|
this.$emit('hand-selected', rows)
|
}
|
}
|
}
|
</script>
|
<style>
|
.couponProduct .el-table {
|
margin-top: 20px;
|
}
|
</style>
|
