<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"></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>
|
<slot name="insertColumn"></slot>
|
<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" ></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'],
|
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)
|
},
|
/**
|
* 打开添加商品弹窗
|
*/
|
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
|
})) {
|
this.tableData.push({
|
prodMainCode: rowItem.spuNum,
|
prodImgUrl: rowItem.imageUrl,
|
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
|
})
|
}
|
})
|
this.$emit('hand-selected', rows)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.formItemContent .el-form-item__content{
|
margin-left: 0 !important;
|
}
|
</style>
|
