商品列表之新增 Steps 步骤条
一 思路：做商品列表新增模块需要首先设置步骤条将几个页面绑定到一起，因为一个表单为一个页面
二 步骤：
1.首先在点击新增按钮时跳转到填写商品信息页面
//打开页面 openAdd为新增按钮事件
openAdd() {
//跳转到填写商品信息页面
this.$router.push("/productAdd")
},
2.在router文件夹的index.js中配置路由
{
// 新增商品
path: '/productAdd',
component: () => import( '../views/pms/productlist/productAdd.vue'),
meta: {
title: '新增商品' }
},
{
//商品列表
path: '/productlist',
component: () => import( '../views/pms/productlist/productlist.vue'),
meta: {
title: '商品列表' }
},
介绍：
（1）productlist为商品列表展示页面
（2）productAdd为商品新增内部注入页面
（3）productUpdete为商品修改内部注入页面
（4）ProductDetail 配置步骤条页面
（5）ProductInfoDetail填写商品信息页面
（6）ProductSaleDetail填写商品促销页面
（7）ProductAttrDetail填写商品属性页面
（8）ProductRelationDetail填写商品关联页面
三 具体代码：
（1）productAdd为商品新增内部注入页面
<template>
<product-detail :is-edit='false'></product-detail>
</template>
<script>
//内部导入
import ProductDetail from "./components/ProductDetail"
export default {
name: "productAdd",
components: {
ProductDetail},
}
</script>
<style scoped>
</style>
（2）productUpdete为商品修改内部注入页面
<template>
<div>
<product-detail :is-edit='true'></product-detail>
</div>
</template>
<script>
//导入
import ProductDetail from "./components/ProductDetail"
export default {
name: "productUpdete",
components: {
ProductDetail}
}
</script>
<style scoped>
</style>
（ 3）ProductDetail 配置步骤条页面
<template>
<el-card class="form-container" shadow="never">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="填写商品信息"></el-step>
<el-step title="填写商品促销"></el-step>
<el-step title="填写商品属性"></el-step>
<el-step title="选择商品关联"></el-step>
</el-steps>
<product-info-detail
v-show="showStatus[0]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep">
</product-info-detail>
<product-sale-detail
v-show="showStatus[1]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep"
@prevStep="prevStep">
</product-sale-detail>
<product-attr-detail
v-show="showStatus[2]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep"
@prevStep="prevStep">
</product-attr-detail>
<product-relation-detail
v-show="showStatus[3]"
v-model="productParam"
:is-edit="isEdit"
@prevStep="prevStep"
@finishCommit="finishCommit">
</product-relation-detail>
</el-card>
</template>
<script>
import ProductInfoDetail from './ProductInfoDetail';
import ProductSaleDetail from './ProductSaleDetail';
import ProductAttrDetail from './ProductAttrDetail';
import ProductRelationDetail from './ProductRelationDetail';
// import {createProduct,getProduct,updateProduct} from '@/api/product';
const defaultProductParam = {
//默认值
/* albumPics: '',
brandId: null,
brandName: '',
deleteStatus: 0,
description: '',
detailDesc: '',
detailHtml: '',
detailMobileHtml: '',
detailTitle: '',
feightTemplateId: 0,
flashPromotionCount: 0,
flashPromotionId: 0,
flashPromotionPrice: 0,
flashPromotionSort: 0,
giftPoint: 0,
giftGrowth: 0,
keywords: '',
lowStock: 0,
name: '',
newStatus: 0,
note: '',
originalPrice: 0,
pic: '',
previewStatus: 0,
price: 0,
productAttributeCategoryId: null,
//商品属性相关{productAttributeId: 0, value: ''}
productAttributeValueList: [],
//商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
skuStockList: [],
//商品相关专题{subjectId: 0}
subjectProductRelationList: [],
//商品相关优选{prefrenceAreaId: 0}
prefrenceAreaProductRelationList: [],
productCategoryId: null,
productCategoryName: '',
productSn: '',
promotionEndTime: '',
promotionPerLimit: 0,
promotionPrice: null,
promotionStartTime: '',
promotionType: 0,
publishStatus: 0,
recommandStatus: 0,
sale: 0,
serviceIds: '',
sort: 0,
stock: 0,
subTitle: '',
unit: '',
usePointLimit: 0,
verifyStatus: 0,
weight: 0*/
};
export default {
name: 'ProductDetail',
components: {
ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
active: 0,
productParam: Object.assign({
}, defaultProductParam),
showStatus: [true, false, false, false]
}
},
created(){
if(this.isEdit){
getProduct(this.$route.query.id).then(response=>{
this.productParam=response.data;
});
}
},
methods: {
hideAll() {
for (let i = 0; i < this.showStatus.length; i++) {
this.showStatus[i] = false;
}
},
prevStep() {
if (this.active > 0 && this.active < this.showStatus.length) {
this.active--;
this.hideAll();
this.showStatus[this.active] = true;
}
},
nextStep() {
if (this.active < this.showStatus.length - 1) {
this.active++;
this.hideAll();
this.showStatus[this.active] = true;
}
},
finishCommit(isEdit) {
this.$confirm('是否要提交该产品', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(isEdit){
//修改提交
updateProduct(this.$route.query.id,this.productParam).then(response=>{
this.$message({
type: 'success',
message: '提交成功',
duration:1000
});
this.$router.back();
});
}else{
//新增提交
createProduct(this.productParam).then(response=>{
this.$message({
type: 'success',
message: '提交成功',
duration:1000
});
location.reload();
});
}
})
}
}
}
</script>
<style>
.form-container {
width: 800px;
margin: 0 auto;
}
</style>
（4）ProductInfoDetail填写商品信息页面
<template>
<div>
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
<el-form-item style="text-align: center">
<el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "ProductInfoDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
methods:{
handleNext(){
this.$emit('nextStep');
}
}
}
</script>
<style scoped>
</style>
（5）ProductSaleDetail填写商品促销页面
<template>
<div>
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "ProductSaleDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
methods:{
handlePrev() {
this.$emit('prevStep')
},
handleNext() {
this.$emit('nextStep')
}
}
}
</script>
<style scoped>
</style>
（6）ProductAttrDetail填写商品属性页面
<template>
<div>
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "ProductAttrDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
methods:{
handlePrev() {
this.$emit('prevStep')
},
handleNext() {
this.$emit('nextStep')
}
}
}
</script>
<style scoped>
</style>
（6）ProductRelationDetail填写商品关联页面
<template>
<div>
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
<el-form-item style="text-align: center">
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
<el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
</el-form-item>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "ProductRelationDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
methods:{
handlePrev(){
this.$emit('prevStep')
},
handleFinishCommit(){
//跳转步骤条页面进行发送请求
this.$emit('finishCommit',this.isEdit);
}
}
}
</script>
<style scoped>
</style>