elementui+vue 商品列表模块之 Steps 步骤条

商品列表之新增 Steps 步骤条

一 思路：做商品列表新增模块需要首先设置步骤条将几个页面绑定到一起，因为一个表单为一个页面

二 步骤：

1.首先在点击新增按钮时跳转到填写商品信息页面

//打开页面 openAdd为新增按钮事件
            openAdd() {
            //跳转到填写商品信息页面
               this.$router.push("/productAdd")
            },

2.在router文件夹的index.js中配置路由
1.
{
                    // 新增商品
                    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为商品修改内部注入页面
1.
<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>
-----------------------------------
https://blog.51cto.com/u_15781933/5655062