<template>
|
<div>
|
|
|
<!-- 商品表格 -->
|
<el-table
|
:data="modifiedProducts"
|
border
|
style="width: 100%"
|
>
|
|
<el-table-column
|
label="商品"
|
>
|
<template slot-scope="{row}">
|
<div class="product-cell">
|
<el-image
|
:src="row.image"
|
fit="cover"
|
style="width: 50px; height: 50px; margin-right: 10px"
|
></el-image>
|
<span>{{ row.product_name }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="规格"
|
>
|
<template slot-scope="{row}">
|
<div class="product-cell">
|
<span>{{ row.product_sku_name }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="当前价格"
|
>
|
<template slot-scope="{row}">
|
¥{{ row.product_price }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="新价格"
|
>
|
<template slot-scope="{row}">
|
<el-input-number
|
v-model="row.product_new_price"
|
:min="0"
|
:precision="2"
|
@change="handleConfirm"
|
controls-position="right"
|
style="width: 150px"
|
></el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
width="80"
|
>
|
<template slot-scope="{row}">
|
<el-button
|
type="text"
|
size="small"
|
@click="handleDelPrice(row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'SimpleProductPriceModal',
|
props: {
|
title: {
|
type: String,
|
default: '商品价格设置'
|
},
|
products: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
batchPrice: null,
|
selectedProducts: [],
|
modifiedProducts: []
|
}
|
},
|
watch: {
|
products(newVal) {
|
|
this.initProducts()
|
|
},
|
},
|
created() {
|
this.initProducts()
|
},
|
methods: {
|
initProducts() {
|
this.modifiedProducts = this.products.map(product => ({
|
...product,
|
product_new_price: product.product_new_price ? product.product_new_price :product.product_price
|
}))
|
this.batchPrice = null
|
},
|
handleDelPrice(row) {
|
const itemToRemove = this.modifiedProducts.find(item => item.product_id === row.product_id);
|
if (itemToRemove) {
|
const index = this.modifiedProducts.indexOf(itemToRemove);
|
this.modifiedProducts.splice(index, 1);
|
this.handleConfirm();
|
}
|
},
|
handleConfirm(row) {
|
const changedProducts = this.modifiedProducts;
|
console.log('输出修改的',row,changedProducts);
|
this.$emit('confirm', changedProducts)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.batch-actions {
|
margin-bottom: 15px;
|
}
|
|
.product-cell {
|
display: flex;
|
align-items: center;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
