ngds/backendEle/src/views/shop/goods-add.vue

<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-form ref="form"  label-width="250px" class="form-page">

                <el-form-item label="商品名称">
                    <el-input v-model="form.goodsName"></el-input>
                </el-form-item>
                <!-- <el-form-item label="商品来源">
                    <el-select v-model="form.type" placeholder="请选择商品来源">
                        <el-option v-for="(item,index) in goodsType" :key="index" :label="item.name"
                                   :value="index"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="会员折扣">
                    <el-input v-model="form.sellDiscount"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-checkbox  v-for="(value,key) in GiftTypeArr" v-model="form.giftType[key-1]" :key="key" >{{value.name}}</el-checkbox>
                </el-form-item>
                <!-- <el-form-item label="复消购买方式">
                    <el-checkbox  v-for="(value,key) in sellType" v-model="form.sellType[key-1]" :key="key" >{{value.name}}</el-checkbox>
                </el-form-item> -->
                <el-form-item label="商品分类">
                    <el-select v-model="form.categoryType" placeholder="">
                        <el-option v-for="item in categoryType" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品编号">
                    <el-input v-model="form.goodsNo"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="form.unit"></el-input>
                </el-form-item>
                <el-form-item label="标准价格($)" p>
                    <el-input v-model="form.sellPriceStandard"></el-input>
                </el-form-item>
                <el-form-item label="市场价格(n)">
                    <el-input v-model="form.marketPrice"></el-input>
                </el-form-item>
                <el-form-item label="销售价格(n)">
                    <el-input v-model="form.sellPrice"></el-input>
                </el-form-item>
                <el-form-item label="价格BV" v-show="pvDisabled">
                    <el-input v-model="form.pricePv"></el-input>
                </el-form-item>
                <!-- <el-form-item label="兑换积分">
                    <el-input v-model="form.point"></el-input>
                </el-form-item> -->
                <el-form-item label="库存">
                    <el-input v-model="form.storeNums"></el-input>
                </el-form-item>
                <el-form-item label="商品详情">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.content">
                    </el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="上传图片">
                    <div class='up_load'>
                        <leo-uploader
                            @on-success='upLoadSuccess'
                            :request-route="'shop/upload'"
                        ></leo-uploader>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addSubmit" :loading="submitButtonStat">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import store from '@/utils/vuexStore'
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import baseInfo from '../../utils/baseInfo'
    import LeoUploader from '@/components/Uploader';
    export default {
        name: "goods-add",
        components:{LeoUploader},
        mounted () {
            this.getData();
            this.getFileToken();
        },
        data(){
            return{
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                loading: false,
                file:null,
                uploadToken:'',
                form:{
                    goodsName:'',
                    type:'',
                    giftType:[false,false,false,false],
                    sellType:[false,false],
                    goodsNo:'',
                    unit:'',
                    marketPrice:'',
                    sellPrice:'',
                    pricePv:'',
                    point:'',
                    storeNums:'',
                    content:'',
                    sort:'',
                    discount:'',
                    cover:'',
                    textarea:'',
                    sellDiscount:'',
                    categoryType: '',
                    sellPriceStandard: '',
                },
                submitButtonStat: false,
                goodsType:[],
                GiftTypeArr:[],
                categoryType: [],
                sellType:null,
                width:'100px',
                height:'100px',
                pvDisabled: true,
                exchangeRate: baseInfo.exchangeRate(),
            }
        },
        watch:{
            dialogVisible(newVal,oldVal){
                console.log(newVal,oldVal)
            },
            // 监听商品分类,控制PV是否展示
            'form.categoryType': {
                deep: true,
                handler(modern, origin) {
                    this.pvDisabled = (parseInt(modern) === 1)
                }
            },
            // 监听商品标准价格,自动计算销售价格
            'form.sellPriceStandard': {
                deep: true,
                handler(modern, origin) {
                    this.form.sellPrice = modern * this.exchangeRate
                }
            },
        },
        methods: {
            handleRemove(file) {
                console.log(file);
            },
            upLoadSuccess(file){
                this.form.cover=file;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
                this.file=file;
                // console.log(file);

            },
            handleDownload(file) {
                console.log(file);
            },
            getFile(){
                let data={
                    uploadToken:this.uploadToken,
                    file:this.file
                }
                if(this.uploadToken){
                    network.postData('shop/upload',data)
                    .then(response=>{
                        console.log(response);
                    })
                }
            },
            getFileToken(){
                network.getData('shop/upload').then(response=>{
                   this.uploadToken=response;
                })
            },
            getData (page, pageSize) {
                let filterData = this.filterModel
                let vueObj = this
                network.getPageData(this, 'shop/goods-add', page, pageSize, this.filterModel, response=>{
                    this.categoryType = response.categoryType
                    this.goodsType=response.goodsType
                    this.GiftTypeArr=response.giftType
                    this.sellType=response.sellType
                    // this.form.sellType=this.form.sellType.map((item,index)=>{
                    //   return response.sellType.some(val=>(index+1).toString()==val)
                    // })
                })
            },
            addSubmit() {
                this.submitButtonStat = true
                let path = 'shop/goods-add';

                // let sellType =[]
                // this.form.sellType.map((item,index)=>{
                //   if(item){
                //     sellType.push((index+1).toString())
                //   }
                // });

                let sen_gift=[];
                this.form.giftType.map((item,index)=>{
                    if(item){
                        sen_gift.push((index+1).toString())
                    }
                })

                let postData = {
                    goodsName: this.form.goodsName,
                    sellDiscount: this.form.sellDiscount,
                    discount: this.form.type.discount,
                    type: this.form.type,
                    giftType: sen_gift,
                    // sellType: sellType,
                    sellType: this.form.sellType,
                    categoryType: this.form.categoryType,
                    goodsNo: this.form.goodsNo,
                    unit: this.form.unit,
                    marketPrice: this.form.marketPrice,
                    sellPrice: this.form.sellPrice,
                    sellPriceStandard: this.form.sellPriceStandard,
                    pricePv: this.form.pricePv,
                    // point: this.form.point,
                    storeNums: this.form.storeNums,
                    content: this.form.content,
                    sort: this.form.sort,
                    cover: this.form.cover,
                }

                return network.postData(path, postData).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.submitButtonStat = false
                    this.$router.go(-1)
                }).catch(() => {
                    this.submitButtonStat = false
                })
            },
           /*
            handleEdit() {
                this.dialogEditFormVisible = false
                this.$message({
                    message: '正在修改数据',
                    type: 'info'
                })
                let path = 'finance/deal-type-edit'
                network.postData(path, this.form).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.getData(this.currentPage, this.pageSize)
                }).catch(response => {
                })
            },*/
        }
    }
</script>

<style scoped>
.up_load{
    width: 100px;
}
</style>