<template>
|
<div>
|
<el-form-item class="formItemContent" required>
|
<el-button @click="addProduct" type="primary">选择活动商品</el-button>
|
<el-button @click="clearTable">清空</el-button>
|
</el-form-item>
|
<el-form-item prop="promotionProducts" class="formItemContent">
|
<table-pagination :tableData="tableData">
|
<template>
|
<el-table-column label="商品主编码" prop="prodMainCode" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="prodName" 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" show-overflow-tooltip
|
v-if="isShowSpuStorage"></el-table-column>
|
<el-table-column label="秒杀价" width="170px">
|
<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"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="秒杀库存" width="200px" align="center">
|
<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}.ensalequantity`"
|
:rules="[{...formRules.ensalequantity[0],...{index:scope.$index}}]">
|
<el-input-number :min="0" v-model="scope.row.ensalequantity"></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" size="mini" @click="deleteItem(scope.row,scope.$index)">删除
|
</el-button>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</template>
|
</table-pagination>
|
</el-form-item>
|
<product-selected :show.sync='selectedDialog.show' :multipleSKuId="true"
|
:selectedTable="tableData" :multipleSelected="false"
|
:title="selectedDialog.title" @hand-selected-row-data="handSelectedRowData"
|
:isShowSpuStorage="isShowSpuStorage"></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', '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,
|
spuStorage: rowItem.spuStorage, // 剩余库存
|
prodId: rowItem.spuId,
|
prodName: rowItem.spuName,
|
prodSpecs: rowItem.prodSpecs,
|
skuId: rowItem.skuId,
|
shopId: rowItem.shopId,
|
salePrice: null, // 秒杀价
|
ensalequantity: 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>
|
.formItemContent .el-form-item__content {
|
margin-left: 0 !important;
|
}
|
</style>
|
