<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">
|
<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="90">
|
<template slot-scope="scope">
|
<el-button @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>
|
|
<el-form-item label="团购人数限制" prop="limit_num">
|
<el-input-number v-model="form.limit_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 label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="1">启用</el-radio>
|
<el-radio :label="0">禁用</el-radio>
|
</el-radio-group>
|
</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>
|
</div>
|
</template>
|
|
<script>
|
import PlusApi from '@/api/plus/groupbuy'
|
import ProductApi from '@/api/product.js'
|
import { mergeTable } from '@/utils/table.js'
|
|
export default {
|
name: 'GroupbuyProductEdit',
|
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,
|
limit_num: 100,
|
stock: 100,
|
status: 1,
|
tableData: [],
|
product_del_ids: []
|
},
|
formRules: {
|
groupbuy_active_id: [{ required: true, message: '请选择团购活动', trigger: 'change' }],
|
groupbuy_num: [{ required: true, message: '请输入团购成团人数', trigger: 'blur' }],
|
limit_num: [{ required: true, message: '请输入团购人数限制', trigger: 'blur' }],
|
stock: [{ required: true, message: '请输入团购库存', trigger: 'blur' }],
|
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
},
|
activeList: [],
|
selectedProduct: {},
|
skuList: [],
|
/*是否打开规格选择*/
|
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'
|
}]
|
}
|
},
|
async created() {
|
await this.getActiveList()
|
this.getDetail()
|
},
|
methods: {
|
// 获取详情
|
getDetail() {
|
const productId = this.$route.params.id || this.$route.query.groupbuy_product_id
|
if (!productId) {
|
this.$message.error('缺少团购商品ID')
|
this.$router.back()
|
return
|
}
|
PlusApi.productDetail({ groupbuy_product_id: productId }).then(res => {
|
const detail = res.data.detail
|
// 在展开detail时，确保保留groupbuy_active_id的值
|
this.form = {
|
...this.form, // 保留初始表单结构
|
...detail,
|
product_name: (detail.product && detail.product.product_name) || detail.product_name,
|
groupbuy_active_id: detail.groupbuy_active_id || this.form.groupbuy_active_id
|
}
|
|
// 初始化表格数据
|
this.form.tableData = [];
|
// 使用 detail.groupbuySku 来构建表格数据
|
if (detail.groupbuySku && detail.groupbuySku.length > 0) {
|
let arr = [];
|
// 这里我们只有一个商品，但可能有多个SKU
|
for (let j = 0; j < detail.groupbuySku.length; j++) {
|
let sku = detail.groupbuySku[j];
|
let obj = {
|
product_name: (detail.product && detail.product.product_name) || detail.product_name,
|
product_id: (detail.product && detail.product.product_id) || detail.product_id,
|
stock_num: (detail.product && detail.product.product_stock) || detail.stock_num,
|
spec_name: sku.product_attr,
|
product_price: (detail.product && detail.product.product_price) || detail.product_price,
|
spec_type: (detail.product && detail.product.spec_type) || detail.spec_type,
|
is_delete: detail.is_delete,
|
product_sku_id: sku.product_sku_id,
|
groupbuy_product_sku_id: sku.groupbuy_product_sku_id,
|
sales_num: detail.total_sales,
|
groupbuy_price: sku.groupbuy_price,
|
groupbuy_stock: sku.groupbuy_stock,
|
groupbuy_product_id: sku.groupbuy_product_id,
|
join_num: detail.join_num,
|
limit_num: detail.limit_num,
|
groupbuy_num: detail.groupbuy_num,
|
sort: detail.sort,
|
sales_initial: detail.sales_initial,
|
};
|
arr.push(obj);
|
}
|
this.form.tableData = mergeTable(arr);
|
} else if (detail.product) {
|
// 如果没有SKU，使用商品信息构建一行数据
|
let obj = {
|
product_name: detail.product && detail.product.product_name,
|
product_id: detail.product && detail.product.product_id,
|
stock_num: detail.product && detail.product.product_stock,
|
spec_name: "",
|
product_price: detail.product && detail.product.product_price,
|
spec_type: detail.product && detail.product.spec_type,
|
is_delete: detail.is_delete,
|
product_sku_id: (detail.product && detail.product.product_sku_id) || 0,
|
groupbuy_product_sku_id: 0,
|
sales_num: detail.total_sales,
|
groupbuy_price: (detail.groupbuySku && detail.groupbuySku[0] && detail.groupbuySku[0].groupbuy_price) || detail.groupbuy_price,
|
groupbuy_stock: (detail.groupbuySku && detail.groupbuySku[0] && detail.groupbuySku[0].groupbuy_stock) || detail.groupbuy_stock,
|
groupbuy_product_id: detail.groupbuy_product_id,
|
join_num: detail.join_num,
|
limit_num: detail.limit_num,
|
groupbuy_num: detail.groupbuy_num,
|
sort: detail.sort,
|
sales_initial: detail.sales_initial,
|
};
|
this.form.tableData = [obj];
|
}
|
})
|
},
|
// 获取活动列表
|
getActiveList() {
|
return PlusApi.activeList({}).then(res => {
|
this.activeList = res.data.list.data
|
// 如果当前有选定的活动ID，确保在列表加载后仍然保留
|
if (this.form && this.form.groupbuy_active_id) {
|
this.$nextTick(() => {
|
// 确保下拉框显示正确的值
|
this.$set(this.form, 'groupbuy_active_id', this.form.groupbuy_active_id)
|
})
|
}
|
return res
|
})
|
},
|
|
/*表格合并行*/
|
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;
|
}
|
},
|
|
/*删除*/
|
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 (e.tempProduct != true) {
|
let groupbuy_product_id = item.groupbuy_product_id;
|
this.form.product_del_ids.push(groupbuy_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);
|
},
|
|
/*打开规格*/
|
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;
|
},
|
|
/*显示隐藏*/
|
showFunc(i, e) {
|
if (e.is_delete === 0) {
|
e.is_delete = 1;
|
} else {
|
e.is_delete = 0;
|
}
|
},
|
|
// 提交
|
onSubmit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
// 整理SKU数据
|
const skuData = this.form.tableData.map(item => {
|
const skuItem = {
|
product_sku_id: item.product_sku_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
|
};
|
|
// 如果是已有SKU，保留其ID
|
if (item.groupbuy_product_sku_id) {
|
skuItem.groupbuy_product_sku_id = item.groupbuy_product_sku_id;
|
}
|
|
return skuItem;
|
});
|
|
const params = {
|
...this.form,
|
sku_list: skuData,
|
tableData: undefined, // 移除临时数据
|
product_list: undefined // 移除临时数据
|
}
|
|
// 如果有要删除的商品ID，也要一并提交
|
if (this.form.product_del_ids && this.form.product_del_ids.length > 0) {
|
params.product_del_ids = this.form.product_del_ids
|
}
|
|
PlusApi.updateProduct(params).then(res => {
|
this.$message.success('更新成功')
|
this.$router.back()
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.product-add {
|
padding: 20px;
|
background: #fff;
|
}
|
.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>
|
