hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-10-31 10:18:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feature(uniapp商品): 新增商品

Browse Source
This commit is contained in:
luowenfeng
2022-08-23 20:27:39 +08:00
parent 81666e3b62
commit 8ad1439fda
6 changed files with 156 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
yudao-ui-admin/src/views/mall/product/spu/index.vue
View File

@@ -178,7 +178,7 @@
/>
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close>
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false" >
<save @closeDialog="open = false; getList()"/>
</el-dialog>
</div>

222
yudao-ui-admin/src/views/mall/product/spu/save.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="container">
<el-tabs v-model="activeName" class="tabs">
<el-tabs v-model="activeName" class="tabs" :before-leave="confirmLeave">
<!-- 基础设置 -->
<el-tab-pane label="基础设置" name="base">
<el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
<el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
<el-form-item label="商品名称" prop="name">
<el-input v-model="baseForm.name" placeholder="请输入商品名称"/>
</el-form-item>
<el-form-item label="卖点" prop="sellPoint">
<el-form-item label="卖点">
<el-input v-model="baseForm.sellPoint" placeholder="请输入卖点"/>
</el-form-item>
<el-form-item label="分类id" prop="categoryIds">
@@ -20,30 +20,27 @@
clearable
></el-cascader>
</el-form-item>
<el-form-item label="商品主图" prop="bannerUrl">
<ImageUpload v-model="baseForm.bannerUrl" :limit="1"/>
</el-form-item>
<el-form-item label="商品轮播图" prop="picUrls">
<ImageUpload v-model="baseForm.picUrls" :limit="10"/>
<ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10"/>
</el-form-item>
<el-form-item label="排序字段" prop="sort">
<el-input v-model="baseForm.sort" placeholder="请输入排序字段"/>
<el-form-item label="排序字段">
<el-input v-model="baseForm.sort" placeholder="请输入排序字段" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 价格库存 -->
<el-tab-pane label="价格库存" name="rates" class="rates">
<el-form :model="ratesForm" :rules="rules.ratesForm">
<el-form ref="rates" :model="ratesForm" :rules="rules">
<el-form-item label="商品规格">
<el-radio-group v-model="ratesForm.spec" @change="changeRadio">
<el-radio :label="0">单规格</el-radio>
<el-radio :label="1">多规格</el-radio>
<el-radio :label="1">单规格</el-radio>
<el-radio :label="2">多规格</el-radio>
</el-radio-group>
</el-form-item>
<!-- 动态添加规格属性 -->
<div v-show="ratesForm.spec === 1">
<div v-show="ratesForm.spec === 2">
<div
v-for="(specs, index) in dynamicSpec"
:key="index"
@@ -71,14 +68,8 @@
</div>
<div class="spec-values">
<template v-for="(v, i) in specs.specValue">
<el-input v-model="v.name" class="spec-value" :key="i"/>
<el-input v-model="v.name" class="spec-value" :key="i" disabled/>
</template>
<!-- <el-button
type="primary"
icon="el-icon-plus"
circle
@click="dialogForSpec = true; currentSpec = index"
></el-button> -->
</div>
</div>
<el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []"
@@ -89,9 +80,8 @@
<!-- 规格明细 -->
<el-form-item label="规格明细">
<el-table :data="ratesForm.rates" border style="width: 100%" ref="rates">
<template v-if="ratesForm.spec == 1">
<el-table :data="ratesForm.rates" border style="width: 100%" ref="ratesTable">
<template v-if="ratesForm.spec == 2">
<el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v=>v.specName != undefined)"
:label="item.specName">
<template slot-scope="scope">
@@ -103,54 +93,90 @@
</template>
</el-table-column>
</template>
<el-table-column label="规格图片" width="120px">
<el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90">
<template slot-scope="scope">
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
style="width: 100px; height: 50px"/>
</template>
</el-table-column>
<el-table-column label="市场价(元)">
<template v-if="ratesForm.spec == 2">
<el-table-column label="sku名称" :render-header="addRedStar" key="91">
<template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
<el-input
v-model="scope.row.name"
></el-input>
</el-form-item>
</template>
</el-table-column>
</template>
<el-table-column label="市场价(元)" :render-header="addRedStar" key="92">
<template slot-scope="scope">
<el-input
v-model="scope.row.marketPrice"
type="number"
></el-input>
<el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'" :rules="[{required: true, trigger: 'change'}]">
<el-input
v-model="scope.row.marketPrice"
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="销售价(元)" re>
<el-table-column label="销售价(元)" :render-header="addRedStar" key="93">
<template slot-scope="scope">
<el-input v-model="scope.row.price" type="number"></el-input>
<el-form-item :prop="'rates.'+ scope.$index + '.price'" :rules="[{required: true, trigger: 'change'}]">
<el-input v-model="scope.row.price" oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="成本价">
<el-table-column label="成本价" :render-header="addRedStar" key="94">
<template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.costPrice'" :rules="[{required: true, trigger: 'change'}]">
<el-input
v-model="scope.row.costPrice"
type="number"
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="库存">
<el-table-column label="库存" :render-header="addRedStar" key="95">
<template slot-scope="scope">
<el-input v-model="scope.row.stock" type="number"></el-input>
<el-form-item :prop="'rates.'+ scope.$index + '.stock'" :rules="[{required: true, trigger: 'change'}]">
<el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="体积">
<el-table-column label="预警库存" key="96">
<template slot-scope="scope">
<el-input v-model="scope.row.volume" type="number"></el-input>
<el-input v-model="scope.row.warnStock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
</template>
</el-table-column>
<el-table-column label="重量">
<el-table-column label="体积" key="97">
<template slot-scope="scope">
<el-input v-model="scope.row.weight" type="number"></el-input>
<el-input v-model="scope.row.volume" ></el-input>
</template>
</el-table-column>
<el-table-column label="条码">
<el-table-column label="重量" key="98">
<template slot-scope="scope">
<el-input v-model="scope.row.weight" ></el-input>
</template>
</el-table-column>
<el-table-column label="条码" key="99">
<template slot-scope="scope">
<el-input v-model="scope.row.barCode"></el-input>
</template>
</el-table-column>
<template v-if="ratesForm.spec == 2">
<el-table-column
fixed="right"
label="操作"
width="50"
key="100">
<template slot-scope="scope">
<el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
<el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">启用</el-button>
</template>
</el-table-column>
</template>
</el-table>
</el-form-item>
</el-form>
@@ -158,16 +184,26 @@
<!-- 商品详情 -->
<el-tab-pane label="商品描述" name="third">
<editor v-model="baseForm.description" :min-height="400"/>
<el-form ref="third" :model="baseForm" :rules="rules">
<el-form-item prop="description">
<editor v-model="baseForm.description" :min-height="380"/>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 销售设置 -->
<el-tab-pane label="销售设置" name="fourth">
<el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
<el-form-item label="库存数量" prop="totalStock">
<el-input v-model="baseForm.totalStock" placeholder="请输入库存数量"/>
<el-form ref="fourth" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
<el-form-item label="虚拟销量" prop="virtualSalesCount">
<el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
</el-form-item>
<el-form-item label="上下架状态" prop="status">
<el-form-item label="是否展示库存" prop="showStock">
<el-radio-group v-model="baseForm.showStock">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="商品状态" prop="status">
<el-radio-group v-model="baseForm.status">
<el-radio :label="0">上架</el-radio>
<el-radio :label="1">下架</el-radio>
@@ -212,15 +248,15 @@ export default {
categoryIds: null,
sort: null,
description: null,
bannerUrl: null,
picUrls: [],
totalStock: null,
status: 0
picUrls: null,
status: 0,
virtualSalesCount: 0,
showStock: true,
},
categoryList: [],
// 价格库存
ratesForm: {
spec: 0,
spec: 1,
// 规格明细
rates: [{}]
},
@@ -239,28 +275,39 @@ export default {
// 表单校验
rules: {
description: [
{required: true, message: "描述不能为空", trigger: "blur"},
],
categoryIds: [
{required: true, message: "分类id不能为空", trigger: "blur"},
],
bannerUrl: [{required: true, message: "商品主图地址", trigger: "blur"}],
sort: [
{required: true, message: "排序字段不能为空", trigger: "blur"},
],
name:[{required: true, message: "商品名称不能为空", trigger: "blur"},],
description: [{required: true, message: "描述不能为空", trigger: "blur"},],
categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"},],
status: [{required: true, message: "商品状态不能为空", trigger: "blur"}],
picUrls: [{required: true, message: "商品轮播图地址不能为空", trigger: "blur"}],
virtualSalesCount: [{required: true, message: "虚拟销量不能为空", trigger: "blur"}],
},
};
},
created() {
this.getListCategory();
this.getPropertyPageList();
},
methods: {
async confirmLeave(active, old){
await this.$refs[old].validate((valid) => {
console.log(valid)
if (!valid) {
return reject();
}
});
},
// 必选标识
addRedStar(h, { column }) {
return [
h('span', { style: 'color: #F56C6C' }, '*'),
h('span', ' ' + column.label)
];
},
changeRadio() {
this.$refs.rates.doLayout()
if (this.ratesForm.spec == 0) {
this.$refs.ratesTable.doLayout()
if (this.ratesForm.spec == 1) {
this.ratesForm.rates = [{}]
} else {
this.ratesForm.rates = []
@@ -289,7 +336,7 @@ export default {
return array;
})
.forEach(v => {
rates.push({spec: v})
rates.push({spec: v, status: 0, name: Array.of(v).join()})
});
this.ratesForm.rates = rates
},
@@ -304,38 +351,51 @@ export default {
this.$emit("closeDialog");
},
submit() {
this.$refs[this.activeName].validate((valid) => {
if (!valid) {
return;
}
let rates = this.ratesForm.rates;
// 动态规格调整字段
if (this.ratesForm.spec == 1) {
if (this.ratesForm.spec == 2) {
rates.forEach(r => {
let properties = []
if(r.spec instanceof Array){
r.spec.forEach((v, i) => {
Array.of(r.spec).forEach((v, i) => {
let specValue = this.dynamicSpec[i].specValue.find(o => o.name == v);
let propertie = {};
propertie.propertyId = this.dynamicSpec[i].specId;
propertie.valueId = specValue.id;
properties.push(propertie);
})
}else{
let specValue = this.dynamicSpec[0].specValue.find(o => o.name == r.spec);
let propertie = {};
propertie.propertyId = this.dynamicSpec[0].specId;
propertie.valueId = specValue.id;
properties.push(propertie);
}
r.properties = properties;
})
}else{
rates[0].name = this.baseForm.name;
rates[0].status = this.baseForm.status;
}
this.baseForm.skus = rates;
this.baseForm.specType = this.ratesForm.spec;
this.baseForm.categoryId = this.baseForm.categoryIds[this.baseForm.categoryIds.length - 1];
createSpu(this.baseForm).then((response) => {
console.log(rates)
let form = this.baseForm
if(form.picUrls instanceof Array){
form.picUrls = form.picUrls.flatMap(m=>m.split(','))
}else if(form.picUrls.split(',') instanceof Array){
form.picUrls = form.picUrls.split(',').flatMap(m=>m.split(','))
}else{
form.picUrls = Array.of(form.picUrls)
}
form.skus = rates;
form.specType = this.ratesForm.spec;
form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
createSpu(form).then((response) => {
console.log(response)
this.$modal.msgSuccess("新增成功");
this.$emit("closeDialog");
}).catch((err) => {
console.log(this.baseForm.picUrls)
});
});
},
/** 查询规格 */
getPropertyPageList() {