channels_web/src/pages/goods/addGoods/index.vue

<template>
    <div class="wrapper">
        <div class="title">新增商品</div>
        <el-form class="form" ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item class="single" label="商品名:" label-width="100px" prop="title">
                <el-input class="pr-50" placeholder="请输入" v-model="form.title" maxlength="60" :disabled="isdisable"
                    show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="类目:" label-width="100px" prop="third_cat_id">
                <el-select v-model="form.third_cat_id" placeholder="请选择" :disabled="isdisable" clearable filterable>
                    <el-option v-for="item in categoryList" :key="item.level3" :label="item.level3_name"
                        :value="item.level3">
                    </el-option>
                    <el-option label="无需审核类目" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品ID:" label-width="100px" prop="out_product_id">
                <el-input placeholder="请输入" :disabled="isdisable" type='number' v-model="form.out_product_id" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item label="品牌:" label-width="100px" prop="brand_id">
                <el-select v-model="form.brand_id" :disabled="isdisable" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in brandList" :key="item.brand_info_id" :label="item.trademark_registrant"
                        :value="item.brand_info_id">
                    </el-option>
                    <el-option label="无品牌" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品库存:" label-width="100px" prop="stock_num">
                <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25" v-model="form.stock_num">
                </el-input>
            </el-form-item>
            <el-form-item label="售卖价格:" label-width="100px" prop="sale_price">
                <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25"
                    v-model="form.sale_price">
                </el-input>
            </el-form-item>
            <el-form-item label="市场价格:" label-width="100px" prop="market_price">
                <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25"
                    v-model="form.market_price">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="小程序链接:" label-width="100px" prop="path">
                <el-input class="pr-50" :disabled="isdisable" placeholder="请输入" v-model="form.path" maxlength="100">
                </el-input>
            </el-form-item>
            <el-form-item label="一级类目:" v-if="false" label-width="100px">
                <el-input placeholder="请输入" :disabled="isdisable" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item label="二级类目:" v-if="false" label-width="100px">
                <el-input placeholder="请输入" :disabled="isdisable" maxlength="25">
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目:" v-if="form.third_cat_id=='-1'" label-width="100px"
                :rules="[{ required: form.third_cat_id=='-1', message: '请输入必填项', trigger: 'blur' }]">
                <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25" v-model="form.third">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="商品图片:" label-width="100px" required>
                <upload v-if="updatePic" :disabled="isdisable" ref="upload_goods" :file="goodsList" limitNum="1">
                </upload>
            </el-form-item>
            <el-form-item class="single" label="商品类目图片:" label-width="100px">
                <upload v-if="updatePic" :disabled="isdisable" ref="upload_zizhi" :file="goodszizhiList" limitNum="10">
                </upload>
            </el-form-item>
            <el-form-item class="commit" v-if="!isdisable">
                <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
                </el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import store from '@/store/index'
    import upload from '@/components/upload'
    import {
        validnumber,
        validPrice
    } from '@/utils/validate'
    import {
        add,
        editDetail,
        edit,
        authDetail
    } from "@/api/goods";
    import {
        getCategoryList
    } from '@/api/category'
    import {
        getBrandList
    } from '@/api/brand'
    export default {
        name: 'addGoods',
        components: {
            upload
        },
        props: {},
        data() {
            return {
                categoryList: [],
                brandList: [],
                goodsList: [],
                goodszizhiList: [],
                outProductId: 0,
                updatePic: true,
                commodity_id: 0,
                isdisable: false,
                form: {
                    title: '',
                    third_cat_audit: '',
                    out_product_id: '',
                    has_brand: '',
                    stock_num: '',
                    sale_price: '',
                    market_price: '',
                    path: '',
                    third_cat_id: '',
                    third: '',
                    brand_id: '',
                },
                loading: false,
                rules: {
                    title: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                    third_cat_id: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    out_product_id: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    brand_id: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    stock_num: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    sale_price: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    market_price: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    path: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                },
            };
        },
        watch: {},
        computed: {},
        methods: {
            commit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.goodsList.length == 0) {
                            this.$message.error('请选择至少一张商品图片');
                            return
                        }
                        let zizhiarray = []
                        this.goodszizhiList.forEach(element => {
                            zizhiarray.push(element.url)
                        });
                        let params = {
                            brand_id: this.form.brand_id == -1 ? 2100000000 : this.form.brand_id,
                            has_brand: this.form.brand_id == -1 ? 0 : 1,
                            market_price: this.form.market_price,
                            out_product_id: this.form.out_product_id,
                            path: this.form.path,
                            qualificationImgs: zizhiarray.join(","),
                            sale_price: this.form.sale_price,
                            stock_num: this.form.stock_num,
                            third_cat_audit: this.form.third_cat_id == -1 ? 0 : 1,
                            third_cat_id: this.form.third_cat_id == -1 ? this.form.third : this.form
                                .third_cat_id,
                            thumb_img: this.goodsList[0].url,
                            title: this.form.title
                        }
                        this.loading = true
                        if (this.outProductId == 0) { //新增
                            add(params).then(() => {
                                this.$message.success('添加成功');
                                store.commit('REMOVETAB', '新增商品')
                                this.$router.go(-1)
                            }).catch(() => {
                                this.loading = false
                            });
                        } else { //修改
                            params.commodity_id = this.commodity_id
                            edit(params).then(() => {
                                this.$message.success('修改成功');
                                store.commit('REMOVETAB', '新增商品')
                                store.commit('REMOVETAB', '商品详情')
                                this.$router.push('/goods')
                            }).catch(() => {
                                this.loading = false
                            });
                        }

                    }
                })

            },
            getDetail() {
                if (this.outProductId != 0) {
                    authDetail({
                        outProductId: this.outProductId
                    }).then(res => {
                        this.form.title = res.data.title
                        this.form.third_cat_audit = res.data.third_cat_audit
                        this.form.out_product_id = res.data.out_product_id
                        this.form.has_brand = res.data.has_brand
                        this.form.stock_num = res.data.stock_num
                        this.form.sale_price = res.data.sale_price
                        this.form.market_price = res.data.market_price
                        this.form.path = res.data.path
                        this.form.third_cat_id = res.data.third_cat_id
                        this.commodity_id = res.data.commodity_id
                        this.goodsList = [{
                            url: res.data.thumb_img
                        }]
                        this.goodszizhiList = []
                        if (res.data.qualificationImgs.length > 0) {
                            res.data.qualificationImgs.forEach(element => {
                                this.goodszizhiList.push({
                                    url: element
                                })
                            });
                        }
                        //刷新子组件
                        this.updatePic = false
                        this.$nextTick(() => {
                            this.updatePic = true
                        })

                    })
                }
            },
            getCategoryList() { //获取类目列表
                getCategoryList().then(res => {
                    this.categoryList = res.data
                })
            },
            getBrandList() { //获取品牌列表
                getBrandList().then(res => {
                    this.brandList = res.data
                })
            },
            initPage() {
                this.loading = false
                this.isdisable = false
                if (this.$route.params.outProductId) { //新增获取详情
                    this.outProductId = this.$route.params.outProductId
                    this.getDetail()
                    if (this.$route.params.isDisable) {
                        this.isdisable = true
                    }
                }
                if (this.$route.params.isNew) { //新增清空
                    this.outProductId = 0
                    this.form = {
                        title: '',
                        third_cat_audit: '',
                        out_product_id: '',
                        has_brand: '',
                        stock_num: '',
                        sale_price: '',
                        market_price: '',
                        path: '',
                        third_cat_id: '',
                        third: '',
                        brand_id: '',
                    }
                    this.goodsList = []
                    this.goodszizhiList = []
                    //刷新子组件
                    this.updatePic = false
                    this.$nextTick(() => {
                        this.updatePic = true
                    })
                }
            }
        },
        created() {},
        activated() {
            this.initPage()
            this.getCategoryList()
            this.getBrandList()
        },
        mounted() {}
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: bold;
            width: 100%;
            text-align: left;
            margin-left: 100px;
        }

        .form {
            margin-top: 20px;
            width: 75%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .el-form-item {
                color: #232323;
                font-weight: bold;
            }

            .el-select {
                width: 300px;
            }

            .el-input {
                width: 300px;
            }

            .single {
                width: 100%;

                .el-input {
                    width: 875px;
                }

                .el-select {
                    width: 875px;
                }
            }

            .commit {
                width: 100%;
                text-align: center;
            }
        }


    }
</style>