<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="规格" width="120">
|
<template slot-scope="{row}">
|
<div class="product-cell">
|
<span>{{ row.product_sku_name }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="当前价格" width="100">
|
<template slot-scope="{row}">
|
¥{{ row.product_price }}
|
</template>
|
</el-table-column>
|
<el-table-column label="活动价格" width="180">
|
<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="60">
|
<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>
|
