<template>
|
<!--
|
作者：luoyiming
|
时间：2020-06-25
|
描述：插件中心-限时拼团-活动列表-活动商品
|
-->
|
<div>
|
<div class="common-form">活动商品</div>
|
|
<el-form-item label="商品管理" prop="tableData" :rules="rulesProduct">
|
<el-button icon="el-icon-plus" @click="changeProduct(form.tableData)">选择商品</el-button>
|
<div class="d-s-c pt16 max-w460 active-all-set">
|
<div style="width: 60px;">批量设置：</div>
|
<div class="flex-1"><el-input v-model="all_assemble_price" type="number" min="0" placeholder="拼团价"></el-input></div>
|
<div class="flex-1 ml10"><el-input v-model="all_assemble_stock" type="number" min="0" placeholder="拼团库存"></el-input></div>
|
<div class="flex-1 ml10"><el-input v-model="all_assemble_num" type="number" min="0" placeholder="开团人数"></el-input></div>
|
<div class="flex-1 ml10"><el-input v-model="all_limit_num" type="number" min="0" placeholder="限购数量"></el-input></div>
|
<div class="ml10"><el-button @click="allApply">应用</el-button></div>
|
</div>
|
<div class="pt16">
|
<el-table size="mini" :data="form.tableData" :span-method="objectSpanMethod" border style="width: 100%;">
|
<el-table-column label="商品名称" width="300">
|
<template slot-scope="scope">
|
<p class="text-ellipsis-2">{{ scope.row.product_name }}</p>
|
</template>
|
</el-table-column>
|
<el-table-column label="规格" width="180">
|
<template slot-scope="scope">
|
<div class="gray" v-if="scope.row.spec_type == 10">暂无规格</div>
|
<div v-if="scope.row.spec_type == 20">
|
<div class="spec-min-box" v-if="scope.row.spec_name != null && scope.row.spec_name != ''">
|
<p class="text-ellipsis" :title="scope.row.spec_name">{{ scope.row.spec_name }}</p>
|
<i class="el-icon-close" @click="deleteClick(scope.$index)"></i>
|
<i class="el-icon-caret-right" @click="specsFunc(scope.$index, scope.row, true)"></i>
|
</div>
|
<el-button v-else size="mini" icon="el-icon-plus" @click="specsFunc(scope.$index, scope.row)">添加规格</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="product_price" label="售价"></el-table-column>
|
<el-table-column label="拼团价">
|
<template slot-scope="scope">
|
<el-input size="small" :class="{ isvalid: scope.row.priceValid == true }" type="number" min="0" step="0.01" v-model="scope.row.assemble_price"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="拼团库存">
|
<template slot-scope="scope">
|
<el-input size="small" :class="{ isvalid: scope.row.stockValid == true }" type="number" min="0" v-model="scope.row.assemble_stock"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="sales_num" label="已售"></el-table-column>
|
<el-table-column label="开团人数">
|
<template slot-scope="scope">
|
<el-input size="small" :class="{ isvalid: scope.row.assemble_numValid == true }" type="number" min="0" v-model="scope.row.assemble_num"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="限购数量">
|
<template slot-scope="scope">
|
<el-input size="small" :class="{ isvalid: scope.row.limit_numValid == true }" type="number" min="1" v-model="scope.row.limit_num"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="虚拟销量">
|
<template slot-scope="scope">
|
<el-input size="small" :class="{isvalid:scope.row.sortValid==true}" type="number" min="0" v-model="scope.row.sales_initial"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="排序">
|
<template slot-scope="scope">
|
<el-input size="small" :class="{ isvalid: scope.row.sortValid == true }" type="number" min="0" v-model="scope.row.sort"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" :width="type == 'edit' ? 90 : 60">
|
<template slot-scope="scope">
|
<el-button v-if="type == 'edit'" @click="showFunc(scope.$index, scope.row)" type="text" size="small">{{ scope.row.is_delete == 0 ? '隐藏' : '显示' }}</el-button>
|
<el-button @click="deleteClick(scope.$index, true)" type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
|
<!--商品选择-->
|
<Product :isproduct="isproduct" :excludeIds="excludeIds" :islist="true" @closeDialog="closeDialogFunc"></Product>
|
|
<!--规格选择-->
|
<Specs :isspecs="isspecs" :productId="curProduct.product_id" :excludeIds="SpecExcludeIds" :islist="true" @close="closeSpecs"></Specs>
|
</div>
|
</template>
|
|
<script>
|
import PorductApi from '@/api/product.js';
|
import Product from '@/components/product/Product.vue';
|
import Specs from '@/components/product/Specs.vue';
|
import { mergeTable } from '@/utils/table.js';
|
export default {
|
components: {
|
/*选择商品组件*/
|
Product,
|
/*选择规格*/
|
Specs
|
},
|
data() {
|
/*验证名称*/
|
const validatorProduct = (rule, value, callback) => {
|
if (value.length < 1) {
|
return callback(new Error('请选择商品'));
|
} else {
|
let flag = false;
|
for (let i = 0; i < this.form.tableData.length; i++) {
|
let item = this.form.tableData[i];
|
|
if (!flag) {
|
let reg = item.assemble_price == '' || item.assemble_stock == '' || item.limit_num == '' || item.sort == '';
|
let reg2 = parseFloat(item.assemble_price) == 0 || parseInt(item.assemble_stock) < 1 || parseInt(item.limit_num) < 1|| (item.spec_type == 20 && !item.spec_name);
|
if (reg || reg2) {
|
flag = true;
|
}
|
}
|
|
if (parseInt(item.assemble_stock) > 0) {
|
item.stockValid = true;
|
} else {
|
item.stockValid = false;
|
}
|
|
if (parseInt(item.assemble_price) > 0) {
|
item.priceValid = true;
|
} else {
|
item.priceValid = false;
|
}
|
|
if (parseInt(item.limit_num) > 0) {
|
item.limit_numValid = true;
|
} else {
|
item.limit_numValid = false;
|
}
|
|
if (parseInt(item.sort) > 0) {
|
item.sortValid = true;
|
} else {
|
item.sortValid = false;
|
}
|
this.$set(this.form.tableData, i, item);
|
}
|
if (flag) {
|
return callback(new Error('请填写正确的信息'));
|
} else {
|
callback();
|
}
|
}
|
};
|
|
return {
|
/*是否打开选择商品*/
|
isproduct: false,
|
/*产品去重*/
|
excludeIds: [],
|
/*是否打开规格选择*/
|
isspecs: false,
|
/*查询规格当前商品*/
|
curProduct: {},
|
/*当前的角标索引*/
|
curIndex: -1,
|
/*选择规格*/
|
specType: false,
|
/*规格去重*/
|
SpecExcludeIds: [],
|
/*批量拼团价*/
|
all_assemble_price: null,
|
/*批量拼团库存*/
|
all_assemble_stock: null,
|
/*批量限购*/
|
all_limit_num: null,
|
/*开团人数*/
|
all_assemble_num: null,
|
/*验证商品*/
|
rulesProduct: [{ validator: validatorProduct, required: true, trigger: 'blur' }]
|
};
|
},
|
props: {
|
form: Object,
|
type: String
|
},
|
created() {},
|
methods: {
|
/*打开添加*/
|
changeProduct(list) {
|
let arr = [];
|
list.forEach(item => {
|
arr.push(item.product_id);
|
});
|
this.excludeIds = arr;
|
this.isproduct = true;
|
},
|
|
/*关闭弹窗*/
|
closeDialogFunc(e) {
|
let self = this;
|
self.isproduct = false;
|
if (e.type == 'success') {
|
let arr = [];
|
for (let i = 0; i < e.params.length; i++) {
|
let item = e.params[i];
|
let obj = {
|
product_name: item.product_name,
|
product_id: item.product_id,
|
product_price: item.product_price,
|
stock_num: item.product_stock,
|
product_sku_id: item.product_sku.product_sku_id,
|
sales_num: 0,
|
spec_type: item.spec_type,
|
assemble_price: null,
|
assemble_stock: 0,
|
limit_num: 1,
|
sort: 100,
|
tempProduct: true,
|
is_delete: 0,
|
assemble_num: 0,
|
assemble_product_id:0,
|
assemble_product_sku_id: 0,
|
sales_initial:0
|
};
|
arr.push(obj);
|
}
|
self.form.tableData = self.form.tableData.concat(arr);
|
self.form.tableData = mergeTable(this.form.tableData);
|
}
|
},
|
|
/*打开规格*/
|
specsFunc(i, e, type) {
|
this.curProduct = e;
|
this.curIndex = i;
|
let arr = [];
|
|
if (type) {
|
this.specType = true;
|
this.form.tableData.forEach(item => {
|
if (this.curProduct.product_id == item.product_id) {
|
arr.push(item.product_sku_id);
|
}
|
});
|
} else {
|
this.specType = false;
|
}
|
this.SpecExcludeIds = arr;
|
this.isspecs = true;
|
},
|
|
/*关闭规格*/
|
closeSpecs(e) {
|
this.isspecs = false;
|
if (e.type == 'success') {
|
let arr = [];
|
for (let i = 0; i < e.params.length; i++) {
|
let item = e.params[i];
|
let obj = {
|
product_name: this.curProduct.product_name,
|
product_id: this.curProduct.product_id,
|
product_price: item.spec_form.product_price,
|
spec_type: this.curProduct.spec_type,
|
product_sku_id: this.curProduct.product_sku_id,
|
assemble_product_id: this.curProduct.assemble_product_id,
|
stock_num: item.product_stock,
|
sales_num: 0,
|
spec_name: item.spec_name,
|
product_sku_id: item.product_sku_id,
|
assemble_price: null,
|
assemble_stock: 0,
|
limit_num: 1,
|
sort: 100,
|
tempProduct: true,
|
is_delete: 0,
|
assemble_num: 0,
|
assemble_product_sku_id: 0,
|
sales_initial:0
|
};
|
arr.push(obj);
|
}
|
|
let params = [this.curIndex, this.specType ? 0 : 1].concat(arr);
|
|
this.form.tableData.splice(...params);
|
this.form.tableData = mergeTable(this.form.tableData);
|
}
|
},
|
|
/*删除*/
|
deleteClick(e, isType) {
|
let curItem=this.form.tableData[e];
|
if(curItem.join_num>0){
|
this.$message({
|
message: '此商品有人参加活动，无法删除！',
|
type: 'warning'
|
});
|
return;
|
}
|
if (isType) {
|
/*判断能删除产品*/
|
for (let i = 0; i < this.form.tableData.length; i++) {
|
let item = this.form.tableData[i];
|
if (curItem.product_id == item.product_id) {
|
if (item.sales_num > 0) {
|
this.$message({
|
message: '已售商品不能删除！',
|
type: 'warning'
|
});
|
return;
|
}
|
}
|
}
|
for (let i = 0; i < this.form.tableData.length; i++) {
|
let item = this.form.tableData[i];
|
if (curItem.product_id == item.product_id) {
|
if (this.type == 'edit' && e.tempProduct != true) {
|
let assemble_product_id = item.assemble_product_id;
|
this.form.product_del_ids.push(assemble_product_id);
|
}
|
this.form.tableData.splice(i, 1);
|
i--;
|
}
|
}
|
} else {
|
/*删除规格*/
|
if (parseInt(e.sales_num) > 0) {
|
this.$message({
|
message: '已售商品规格不能删除！',
|
type: 'warning'
|
});
|
return;
|
}
|
let count = 0;
|
for (let i = 0; i < this.form.tableData.length; i++) {
|
let item = this.form.tableData[i];
|
if (curItem.product_id == item.product_id) {
|
count++;
|
if (count > 1) {
|
break;
|
}
|
}
|
}
|
if (count > 1) {
|
this.form.tableData.splice(e, 1);
|
} else {
|
curItem.spec_name = null;
|
}
|
}
|
|
this.form.tableData = mergeTable(this.form.tableData);
|
},
|
|
/*表格合并行*/
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10) {
|
if (row.rowSpan != null) {
|
return {
|
rowspan: row.rowSpan,
|
colspan: 1
|
};
|
} else {
|
return {
|
rowspan: 0,
|
colspan: 0
|
};
|
}
|
}
|
},
|
|
/*全部应用*/
|
allApply() {
|
let arr = [];
|
for (let i = 0; i < this.form.tableData.length; i++) {
|
let item = this.form.tableData[i];
|
if (item.assemble_price == null) {
|
if (parseInt(this.all_assemble_price) > parseInt(item.product_price)) {
|
item.assemble_price = item.product_price;
|
} else {
|
item.assemble_price = this.all_assemble_price;
|
}
|
}
|
item.assemble_stock = item.assemble_stock <= 1 ? this.all_assemble_stock : item.assemble_stock;
|
item.limit_num = item.limit_num <= 1 ? this.all_limit_num : item.limit_num;
|
item.assemble_num = item.assemble_num <= 1 ? this.all_assemble_num : item.assemble_num;
|
}
|
},
|
|
/*显示隐藏*/
|
showFunc(i, e) {
|
if (e.is_delete === 0) {
|
e.is_delete = 1;
|
} else {
|
e.is_delete = 0;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.spec-min-box > i {
|
position: absolute;
|
right: 0;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
.spec-min-box .el-icon-close {
|
top: 0;
|
color: red;
|
visibility: hidden;
|
}
|
td:hover .spec-min-box .el-icon-close {
|
visibility: visible;
|
}
|
.spec-min-box .el-icon-caret-right {
|
bottom: 0;
|
transform: rotate(45deg);
|
color: #3a8ee6;
|
}
|
.el-form-item.is-error .active-all-set .el-input__inner,
|
.el-form-item.is-error .isvalid .el-input__inner {
|
border-color: #c0c4cc;
|
}
|
</style>
|
