<template>
|
<div class="product-add">
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="formRules"
|
label-width="120px"
|
size="small">
|
<el-form-item label="团购活动" prop="groupbuy_active_id">
|
<el-select v-model="form.groupbuy_active_id" placeholder="请选择团购活动">
|
<el-option
|
v-for="item in activeList"
|
:key="item.groupbuy_active_id"
|
:label="item.active_name"
|
:value="item.groupbuy_active_id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<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_groupbuy_price" type="number" min="0" placeholder="团购价"></el-input>
|
</div>
|
<div class="flex-1 ml10">
|
<el-input v-model="all_groupbuy_stock" type="number" min="0" placeholder="团购库存"></el-input>
|
</div>
|
<div class="flex-1 ml10">
|
<el-input v-model="all_groupbuy_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.groupbuy_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.groupbuy_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.groupbuy_numValid == true }" type="number" min="2" v-model="scope.row.groupbuy_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="60">
|
<template slot-scope="scope">
|
<el-button @click="deleteClick(scope.$index, true)" type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="团购人数限制" prop="join_num">
|
<el-input-number v-model="form.join_num" :min="1" :max="9999" />
|
</el-form-item>
|
|
<el-form-item label="团购库存" prop="stock">
|
<el-input-number v-model="form.stock" :min="0" :max="999999" />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">提交</el-button>
|
<el-button @click="$router.back()">返回</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!--商品选择-->
|
<ProductComponent :isproduct="isproduct" :excludeIds="excludeIds" :islist="true" @closeDialog="closeDialogFunc"></ProductComponent>
|
|
<!--规格选择-->
|
<SpecsComponent :isspecs="isspecs" :productId="curProduct.product_id" :excludeIds="SpecExcludeIds" :islist="true" @close="closeSpecs"></SpecsComponent>
|
</div>
|
</template>
|
|
<script>
|
import PlusApi from '@/api/plus/groupbuy'
|
import ProductApi from '@/api/product.js'
|
import ProductComponent from '@/components/product/Product.vue'
|
import SpecsComponent from '@/components/product/Specs.vue'
|
import { mergeTable } from '@/utils/table.js'
|
|
export default {
|
name: 'GroupbuyProductAdd',
|
components: {
|
ProductComponent,
|
SpecsComponent
|
},
|
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.groupbuy_price == '' || item.groupbuy_stock == '' || item.limit_num == '' || item.sort == '';
|
let reg2 = parseFloat(item.groupbuy_price) == 0 || parseInt(item.groupbuy_stock) < 1 || parseInt(item.limit_num) < 1 || parseInt(item.groupbuy_num) < 1 || (item.spec_type == 20 && !item.spec_name);
|
|
if (reg || reg2) {
|
flag = true;
|
}
|
}
|
|
if (parseInt(item.groupbuy_stock) > 0) {
|
item.stockValid = true;
|
} else {
|
item.stockValid = false;
|
}
|
|
if (parseInt(item.groupbuy_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.groupbuy_num) > 1) {
|
item.groupbuy_numValid = true;
|
} else {
|
item.groupbuy_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 {
|
form: {
|
groupbuy_active_id: '',
|
product_id: '',
|
product_name: '',
|
groupbuy_num: 2,
|
join_num: 100,
|
stock: 100,
|
tableData: []
|
},
|
formRules: {
|
groupbuy_active_id: [{ required: true, message: '请选择团购活动', trigger: 'change' }],
|
groupbuy_num: [{ required: true, message: '请输入团购成团人数', trigger: 'blur' }],
|
join_num: [{ required: true, message: '请输入团购人数限制', trigger: 'blur' }],
|
stock: [{ required: true, message: '请输入团购库存', trigger: 'blur' }]
|
},
|
activeList: [],
|
selectedProduct: null,
|
skuList: [],
|
productLoading: false,
|
productSearch: {
|
keyword: ''
|
},
|
productPageInfo: {
|
page: 1,
|
limit: 10,
|
total: 0
|
},
|
/*是否打开选择商品*/
|
isproduct: false,
|
/*产品去重*/
|
excludeIds: [],
|
/*是否打开规格选择*/
|
isspecs: false,
|
/*查询规格当前商品*/
|
curProduct: {},
|
/*当前的角标索引*/
|
curIndex: -1,
|
/*选择规格*/
|
specType: false,
|
/*规格去重*/
|
SpecExcludeIds: [],
|
/*批量团购价*/
|
all_groupbuy_price: null,
|
/*批量团购库存*/
|
all_groupbuy_stock: null,
|
/*批量限购*/
|
all_limit_num: null,
|
/*成团人数*/
|
all_groupbuy_num: null,
|
/*验证商品*/
|
rulesProduct: [{
|
validator: validatorProduct,
|
required: true,
|
trigger: 'blur'
|
}]
|
}
|
},
|
created() {
|
this.getActiveList()
|
this.getProductList()
|
},
|
methods: {
|
// 获取活动列表
|
getActiveList() {
|
PlusApi.activeList({}).then(res => {
|
this.activeList = res.data.list.data
|
})
|
},
|
// 获取商品列表
|
getProductList() {
|
this.productLoading = true
|
const params = {
|
page: this.productPageInfo.page,
|
list_rows: this.productPageInfo.limit,
|
search: this.productSearch.keyword
|
}
|
|
PlusApi.productList(params).then(res => {
|
this.productList = res.data.list.data
|
this.productPageInfo.total = res.data.list.total
|
}).finally(() => {
|
this.productLoading = false
|
})
|
},
|
// 搜索商品
|
searchProduct() {
|
this.productPageInfo.page = 1
|
this.getProductList()
|
},
|
// 选择商品行
|
selectProductRow(row) {
|
this.selectProduct(row)
|
},
|
// 选择商品
|
selectProduct(product) {
|
console.log(product.product_id)
|
this.form.product_id = product.product_id
|
this.form.product_name = product.product_name
|
this.selectedProduct = product
|
|
// 获取商品规格信息
|
this.loadProductSku(product.product_id)
|
|
// 关闭popover
|
document.querySelectorAll('.el-popover').forEach(el => {
|
if (el.style.display !== 'none') {
|
el.style.display = 'none'
|
}
|
})
|
},
|
// 加载商品规格
|
loadProductSku(productId) {
|
PlusApi.getProductSku({ product_id: productId }).then(res => {
|
this.skuList = res.data.detail.product.sku.map(sku => ({
|
...sku,
|
groupbuy_price: sku.product_price, // 默认团购价等于原价
|
groupbuy_stock: this.form.stock // 默认团购库存等于总库存
|
}))
|
})
|
},
|
// 分页相关
|
handleSizeChange(val) {
|
this.productPageInfo.limit = val
|
this.productPageInfo.page = 1
|
this.getProductList()
|
},
|
handleCurrentChange(val) {
|
this.productPageInfo.page = val
|
this.getProductList()
|
},
|
|
/*打开添加*/
|
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];
|
this.form.product_id = item.product_id
|
console.log(item)
|
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 ? item.product_sku.product_sku_id : 0,
|
sales_num: 0,
|
spec_type: item.spec_type,
|
groupbuy_price: null,
|
groupbuy_stock: 0,
|
limit_num: 1,
|
sort: 100,
|
tempProduct: true,
|
is_delete: 0,
|
groupbuy_num: 2,
|
groupbuy_product_id:0,
|
groupbuy_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,
|
groupbuy_product_id: this.curProduct.groupbuy_product_id,
|
stock_num: item.product_stock,
|
sales_num: 0,
|
spec_name: item.spec_name,
|
groupbuy_price: null,
|
groupbuy_stock: 0,
|
limit_num: 2,
|
sort: 100,
|
tempProduct: true,
|
is_delete: 0,
|
groupbuy_num: 2,
|
groupbuy_product_sku_id: 0,
|
sales_initial: 2
|
};
|
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) {
|
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.groupbuy_price == null) {
|
if (parseInt(this.all_groupbuy_price) > parseInt(item.product_price)) {
|
item.groupbuy_price = item.product_price;
|
} else {
|
item.groupbuy_price = this.all_groupbuy_price;
|
}
|
}
|
item.groupbuy_stock = item.groupbuy_stock <= 1 ? this.all_groupbuy_stock : item.groupbuy_stock;
|
item.limit_num = item.limit_num <= 1 ? this.all_limit_num : item.limit_num;
|
item.groupbuy_num = item.groupbuy_num <= 1 ? this.all_groupbuy_num : item.groupbuy_num;
|
}
|
},
|
|
/*提交*/
|
onSubmit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
// 根据商品ID分组数据，准备批量添加
|
const groupedData = {};
|
this.form.tableData.forEach(item => {
|
if (!groupedData[item.product_id]) {
|
groupedData[item.product_id] = {
|
product_id: item.product_id,
|
product_name: item.product_name,
|
groupbuy_active_id: this.form.groupbuy_active_id,
|
limit_num: this.form.limit_num,
|
stock: this.form.stock,
|
join_num: this.form.join_num,
|
total_sales: 0,
|
sales_initial: item.sales_initial || 0,
|
groupbuy_num: item.groupbuy_num || 2,
|
sort: item.sort || 100,
|
status: 10,
|
state: 10,
|
sku_list: []
|
};
|
}
|
// 添加SKU数据
|
groupedData[item.product_id].sku_list.push({
|
product_sku_id: item.product_sku_id,
|
product_id: item.product_id,
|
groupbuy_price: item.groupbuy_price,
|
groupbuy_stock: item.groupbuy_stock,
|
product_attr: item.spec_name,
|
product_price: item.product_price,
|
groupbuy_num: item.groupbuy_num,
|
limit_num: item.limit_num,
|
sales_initial: item.sales_initial,
|
sort: item.sort
|
});
|
});
|
|
// 准备批量请求数据
|
const requestData = {
|
product_list: Object.values(groupedData)
|
};
|
|
PlusApi.addProduct(requestData).then(res => {
|
this.$message.success(res.msg || '添加成功');
|
this.$router.back();
|
}).catch(error => {
|
this.$message.error(error.message || '添加失败');
|
});
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.product-add {
|
padding: 20px;
|
background: #fff;
|
}
|
.select-product {
|
max-height: 500px;
|
overflow-y: auto;
|
}
|
.selected-product-info {
|
display: flex;
|
align-items: center;
|
}
|
.selected-product-info .product-details {
|
margin-left: 10px;
|
}
|
.selected-product-info .product-details p {
|
margin: 0;
|
line-height: 1.5;
|
}
|
.selected-product-info .product-details .price {
|
color: #f60;
|
font-weight: bold;
|
}
|
|
.d-s-c {
|
display: flex;
|
align-items: center;
|
}
|
.pt16 {
|
padding-top: 16px;
|
}
|
.max-w460 {
|
max-width: 460px;
|
}
|
.d-c-c {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.flex-1 {
|
flex: 1;
|
}
|
.pl16 {
|
padding-left: 16px;
|
}
|
.ml10 {
|
margin-left: 10px;
|
}
|
.ml10 {
|
margin-left: 10px;
|
}
|
.gray {
|
color: #999;
|
}
|
.text-ellipsis {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.text-ellipsis-2 {
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
.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>
|
