<template>
|
<div>
|
<el-form-item class="formItemContent" required>
|
<el-button @click="addProduct" type="primary">选择活动商品</el-button>
|
<el-button @click="clearTable" v-if="!isHide">清空</el-button>
|
</el-form-item>
|
<el-form-item prop="promotionProducts" class="formItemContent">
|
<table-pagination :tableData="tableData">
|
<template>
|
<el-table-column label="商品主编码" prop="prodMainCode" width="160px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="prodName" width="160px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品图片" prop="prodImgUrl">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.prodImgUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品规格*数量" width="160px">
|
<template slot-scope="scope">
|
<span v-if="scope.row.prodSpecs">{{scope.row.prodSpecs}}</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品价格" prop="prodPrice">
|
<template slot-scope="scope">
|
{{ scope.row.prodPrice ? '￥ '+scope.row.prodPrice : '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="剩余库存" prop="spuStorage" width="100px" show-overflow-tooltip
|
align="center" v-if="isShowSpuStorage"></el-table-column>
|
<el-table-column label="拼团价" width="210px">
|
<template slot-scope="scope">
|
<el-form-item :prop="`promotionProducts.${scope.$index}.salePrice`"
|
:rules="formRules.salePrice">
|
￥
|
<el-input-number :min="0" v-model="scope.row.salePrice"
|
:disabled="scope.row.isShow"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="拼团库存" width="195px">
|
<template slot="header">
|
拼团库存
|
<el-popover placement="top" width="260" trigger="click"
|
content="注：拼团活动创建保存后即扣减【剩余库存】数量至拼团库存进行锁定，活动结束后返还余下拼团库存至剩余库存中">
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<el-form-item :prop="`promotionProducts.${scope.$index}.reservestock`"
|
:rules="formRules.ensalequantity">
|
<el-input-number :min="0" v-model="scope.row.reservestock"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="限购数量" width="165px">
|
<template slot-scope="scope">
|
<el-form-item :prop="`promotionProducts.${scope.$index}.maxbuyquantity`"
|
:rules="formRules.maxbuyquantity">
|
<el-input-number :min="0" v-model="scope.row.maxbuyquantity"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column width="80px" label="操作">
|
<template slot-scope="scope">
|
<el-form-item>
|
<el-button type="danger" :disabled="scope.row.isShow" size="mini"
|
@click="deleteItem(scope.row,scope.$index)">删除</el-button>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</template>
|
</table-pagination>
|
<div class="prodTip">注：拼团库存不得高于商品库存</div>
|
</el-form-item>
|
<product-selected :show.sync='selectedDialog.show' :multipleSKuId="true"
|
:selectedTable="tableData" :multipleSelected="false"
|
:title="selectedDialog.title" :isShowSpuStorage="isShowSpuStorage"
|
@hand-selected-row-data="handSelectedRowData">
|
</product-selected>
|
</div>
|
</template>
|
|
<script>
|
import tablePagination from '../../blindBoxActivity/components/tablePagination.vue'
|
import productSelected from '@/views/product/components/productSelected.vue'
|
import productImg from '@/views/product/components/productImg.vue'
|
export default {
|
components: { tablePagination, productSelected, productImg },
|
props: ['productData', 'formRules', 'isHide', 'isShowSpuStorage'],
|
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.extparams) {
|
item.extparams = {
|
shopSpuId: item.shopSpuId,
|
shopSkuId: item.shopSkuId,
|
shopId: item.shopId,
|
skuId: item.skuId
|
}
|
item.extparams = JSON.stringify(item.extparams)
|
}
|
resultTable.push(item)
|
})
|
return resultTable
|
},
|
/**
|
* 清空表格数据
|
*/
|
clearTable() {
|
this.tableData = []
|
},
|
/**
|
* 删除表格数据
|
*/
|
deleteItem(row, index) {
|
this.tableData.splice(index, 1)
|
this.$emit('hand-clear-validate')
|
},
|
/**
|
* 打开添加商品弹窗
|
*/
|
addProduct() {
|
this.selectedDialog.show = true
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
handSelectedRowData(rows) {
|
// 当取消勾选后表格数据删除
|
if (!rows.length) {
|
this.tableData = []
|
}
|
var length = this.tableData.length
|
for (let i = 0; i < length; i++) {
|
let index = 1
|
if (this.tableData[i]) {
|
index = rows.find(rowItem => {
|
return rowItem.skuId === this.tableData[i].skuId
|
})
|
}
|
if (!index) {
|
this.tableData.splice(i, 1)
|
i--
|
length--
|
}
|
}
|
this.$parent.clearValidate()
|
// 勾选后的数增加
|
rows.forEach(rowItem => {
|
if (!this.tableData.find(item => {
|
return rowItem.skuId === item.skuId
|
})) {
|
const row = rowItem.skuInfos.find(v => v.skuId === rowItem.skuId)
|
this.tableData.push({
|
prodMainCode: rowItem.spuNum,
|
prodImgUrl: rowItem.imageUrl,
|
prodId: rowItem.spuId,
|
prodName: rowItem.spuName,
|
spuStorage: rowItem.spuStorage,
|
prodSpecs: rowItem.prodSpecs,
|
skuId: rowItem.skuId,
|
shopId: rowItem.shopId,
|
salePrice: null, // 拼团价
|
reservestock: null, // 拼团库存
|
maxbuyquantity: null, // 限购数量
|
prodPrice: rowItem.salePrice,
|
shopSpuId: rowItem.shopSpuId,
|
shopSkuId: rowItem.shopSkuId,
|
skuArr: rowItem.skuInfos,
|
spuNum: rowItem.spuNum,
|
skuReduceStorage: row && Number(row.skuReduceStorage)
|
})
|
console.log(this.tableData)
|
}
|
})
|
this.$emit('hand-selected', rows)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.formItemContent {
|
.el-form-item__content {
|
margin-left: 0 !important;
|
}
|
.prodTip {
|
color: #d70012;
|
}
|
}
|
</style>
|
