<template>
|
<div>
|
<el-form-item required label="赠品：">
|
<el-button type="primary" v-show="!tableData.length" @click="showProd">选择赠品</el-button>
|
</el-form-item>
|
<el-form-item prop="tableData">
|
<el-table size="mini" :data="tableData" border>
|
<el-table-column label="赠品名称" prop="prodName"></el-table-column>
|
<el-table-column label="赠品编码" prop="spuNum">
|
</el-table-column>
|
<el-table-column label="赠品图片">
|
<template slot-scope="scope">
|
<div v-viewer>
|
<el-tooltip placement="left" effect="light">
|
<div slot="content"><img :src="scope.row.imageUrl" width="100px" /></div>
|
<img :src="scope.row.imageUrl" />
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="赠品规格">
|
<template slot-scope="scope">
|
<el-form-item :prop="'tableData.'+ scope.$index + '.skuId'" :rules="formRules.skuId"
|
v-if="scope.row.skuInfos[0]&&scope.row.skuInfos[0].skuProps.length">
|
<el-select v-model="scope.row.skuId" @change="changeSkuId(scope.row)">
|
<el-option v-for="item in scope.row.skuInfos" :key="item.skuId" :value="item.skuId"
|
:label=" item.skuProps.length ? item.skuProps.map(item => item.propValueName).join('/') : '-'">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="剩余库存" prop="spuStorage" v-if="isShowSpuStorage"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="danger" @click="deleteItem(scope.row, scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<gift-prod-selected :show.sync='selectedDialog.show' :appendToBody="true"
|
:title="selectedDialog.title" :multipleSelected="false"
|
:isShowSpuStorage="isShowSpuStorage">
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceProd(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</gift-prod-selected>
|
</div>
|
</template>
|
|
<script>
|
import giftProdSelected from '@/views/giftMgt/components/giftProdSelected.vue'
|
export default {
|
props: ['tableData', 'formRules', 'isShowSpuStorage'],
|
components: { giftProdSelected },
|
data () {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择赠品'
|
}
|
}
|
},
|
methods: {
|
showProd () {
|
this.selectedDialog.show = true // 打开选择赠品弹窗
|
},
|
/**
|
* 选择规格时触发，获取扣减数
|
*/
|
changeSkuId (row) {
|
row.skuInfos.forEach(item => {
|
if (item.skuId === row.skuId) {
|
row.skuReduceStorage = item.skuReduceStorage// 扣减数
|
}
|
})
|
},
|
// 选择赠品
|
choiceProd (row) {
|
this.tableData.push({
|
commonId: row.shopSpuId,
|
prodName: row.spuName,
|
spuNum: row.spuNum, // 主编码
|
spuStorage: row.spuStorage,
|
imageUrl: row.imageUrl,
|
skuInfos: row.skuInfos,
|
skuId: null,
|
shopId: row.shopId,
|
quantity: 1,
|
spuUnit: '瓶'
|
})
|
this.selectedDialog.show = false
|
this.$parent.clearValidate('tableData')
|
},
|
deleteItem (row, index) {
|
this.tableData.splice(index, 1)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
