select 默认

<template>
    <div id="contents">
        <el-steps :active="dian" finish-status="success" simple style="margin-top: 20px;width: 60%;margin-left:auto;margin-right: auto;">
            <el-step title="基本信息"></el-step>
            <el-step title="其他属性"></el-step>
            <el-step title="商品详情"></el-step>
        </el-steps>
        <div style="padding:20px 20px; margin-top: 20px;z-index: 1000;">
            <el-form ref="form" :model="form" label-width="132px">
                <el-row :gutter="20" v-show="firstnext">
                    <el-col :span="5">
                        <el-form-item label="" :required="true">
                            <el-upload 
                                id="yizhang"
                                :class="{'showitself':isActive}" 
                                class="avatar-uploader" 
                                accept="image/jpg,image/png,image/jpeg" 
                                action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do" 
                                list-type="picture-card" 
                                :before-upload="beforeload" 
                                :file-list="upImgList" 
                                :on-remove="handleRemove" 
                                :on-exceed="handleExceed" 
                                :on-success='smallIMG' 
                                :limit="1" 
                                name="imgFileTmp"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <span style="display:block;text-align: center;">
                                <i style="display: inline-block;margin-right: 4px;color: red;">*</i>缩略图上传
                            </span>
                            <el-button type="primary" style="margin:auto; display: block;padding: 12px 0px;" @click="chosesmall">从图库中选取缩略图</el-button>
                        </el-form-item>

                    </el-col>
                    <el-col :span="13">
                        <el-form-item class="changeclass">
                            <el-col :span="12" class="wocao">
                                <el-form-item label="商品编码：" :required="true">
                                    <el-input v-model="form.editproNumber" type="number" @blur="firsttime()"></el-input>
                                </el-form-item>
                                <el-form-item label="商品名称：" :required="true">
                                    <el-input v-model="form.editproName" maxlength="60"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="wocao">
                                <el-form-item label="商品条码：" :required="true">
                                    <el-input v-model="form.editbarCode"  type="number" @blur="Limitedlength($event)"></el-input>
                                </el-form-item>
                                <el-form-item label="货名：" :required="true">
                                    <el-input v-model="form.editgoodName" maxlength="60" @blur="firsttime()"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="标签：">
                            <el-tag v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
                            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" :maxlength=10>
                            </el-input>
                            <el-button v-else class="button-new-tag" @click="showInput">点击添加标签</el-button>
                        </el-form-item>

                        <el-col :span="12">
                            <el-form-item label="重量(kg)：" :required="true">
                                <el-input type="number" v-model="form.editweight" min="0"></el-input>
                            </el-form-item>

                            <el-form-item label="市场价(元)：">
                                <input type="text" class="sichangjia" v-model="form.editmarketPrice" placeholder="市场价" min=0 maxlength=4>
                                </input>
                            </el-form-item>

                            <el-form-item label="保质期：" :required="true" class="baozhiqi">
                                <el-input type="number" v-model="form.Shelflife" min="0" style="width: 40%;"></el-input>
                                <el-select v-model="form.lifeTime" style="width: 40%; margin-left: 10%;" @change="leftsel">
                                    <el-option v-for="item in timelist" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="商品滚动图: (400*400)" :required="true">
                                <el-upload
                                    accept="image/jpg,image/png,image/jpeg" 
                                    action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do" 
                                    list-type="picture-card" 
                                    :before-upload="uploadform" 
                                    :on-progress="handleProgress" 
                                    :file-list="imgUrls" 
                                    :on-remove="delupimgs" 
                                    :on-exceed="handleExceed" 
                                    :on-success='uploadSuc' 
                                    v-loading.fullscreen.lock="fullscreenLoading" 
                                    :limit="4" 
                                    name="imgFileTmp"
                                >
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-button type="primary" style="margin-top: 20px;padding: 12px 0px;" @click="chosesroll" >从图库中选取滚动图</el-button>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>

                <gallerysmall 
                    @clickedHidePanel=hidePanel 
                    v-show="panelShow" 
                    :panelShow="panelShow" 
                    v-bind:objgallery="objgallery" 
                    v-on:childByValue="childByValue"
                >
                </gallerysmall>
                
                <galleryRoll 
                    @clickedHideroll=hideroll 
                    v-show="rollShow" 
                    :rollShow="rollShow" 
                    v-bind:objgallery="objgallery" 
                    v-on:childByroll="childByroll"
                >
                </galleryRoll>

                <span class="nextclick" @click="nextclick" v-if="firstnext">下一步</span>

                <!-------------------------------------------------第二步开始----------------------------------------------------------------->

                <el-row :gutter="20" v-if="twostep">
                    <el-col :span="14">
                        <el-form-item label="商品模板：" style="overflow: hidden;clear: both;" :required="true" class="xuansel">
                            <el-select v-model="editselvalue" placeholder="模板选择" @change="currentSel" value-key="id" style="">
                                <el-option v-for="item in templets" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <div style="overflow: hidden;padding: 4px; " class="mobanall">
                            <el-col :span="12" v-for="(item,index ) in buildmouldlist">
                                <div v-if="item.attribute === 0">
                                    <el-form-item :label="item.name">
                                        <i v-if="item.isMandatory===0" class="vip">*</i>
                                        <el-input v-model="item.inputtxt"></el-input>
                                    </el-form-item>
                                </div>

                                <div v-if="item.attribute === 1">
                                    <el-form-item :label="item.name">
                                        <i v-if="item.isMandatory===0" class="vip">*</i>
                                        <el-select v-model="item.inputtxt">
                                            <el-option v-for="(amount,index)  in item.pushdata" :key="index" :label="amount" :value="amount">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </div>
                    </el-col>
                </el-row>
                <p class="zhuanxiang">
                    <span class="" @click="twoclick" v-if="twostep">下一步</span>
                    <span class="" @click="backclick" v-if="twostep">上一步</span>
                </p>
                <!-------------------------------------------------第三步开始----------------------------------------------------------------->
                <el-row :gutter="20" v-show="threestep">
                    <div style="width: 60%;margin: auto;">
                        <div class="buildeditorElem">
                            <el-form-item label="">
                            </el-form-item>
                            <div id="editorElem" style="text-align:left; border-bottom: 1px solid #e1e1e1;"></div>
                        </div>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="viewsee">预览文本框内容</el-button>
                            <el-button type="primary" @click="onSubmit">提 交</el-button>
                        </div>
                        <div class="el-dialog  made" v-show="viewlan" style="padding:20px 20px; margin-top: -20px; top: -200px; z-index: 999999999; width: 100%;">
                            <h4>预览</h4>
                            <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeview">
                                <i class="el-dialog__close el-icon el-icon-close"></i>关闭
                            </button>
                            <div class="yulanmain" v-html="editorContent"></div>
                        </div>
                    </div>
                    <span class="nextclick" @click="backtwo" v-if="threestep">上一步</span>
                </el-row>
            </el-form>

        </div>
    </div>
</template>

<script>
    import E from 'wangeditor'
    import pages from '../../component/pagination/pagination'
    import gallerysmall from '../../component/gallerysmall'
    import galleryRoll from '../../component/galleryRoll'
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import { API } from '../../lib/api'
    import Qs from 'qs'
    export default {
        name: 'editor',
        data() {
            return {
                objgallery: [],
                panelShow: false,
                rollShow: false,
                timelist: [{
                    name: '天',
                    label: '天',
                    id: 0,
                }, {
                    name: '月',
                    label: '月',
                    id: 1,
                }, {
                    name: '年',
                    label: '年',
                    id: 2,
                }],
                xindeshuju: "",
                fullscreenLoading: false,
                buildidmain: '',
                editor: {},
                transfer: [],
                viewlan: false,
                buildmouldlist: [],
                editselvalue: '',
                mouldid: '',
                editorContent: '',
                buildTitle: '',
                //标签初始化
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                //上传商品图片初始化
                dialogImageUrl: '',
                //上传商品缩略图的列表
                upImgList: [],
                picsList: [],
                imgUrls: [],
                builddata: [],
                dialogVisible: false,
                //表单初始化
                form: {
                    editproNumber: '', //条码
                    editproName: '', //商品名称
                    editbarCode: '', //货名
                    editgoodName: '', //展示名称
                    editweight: '', //保质期
                    editmarketPrice: '', //市场价
                    goodsSales: '', //销量
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    value: '',
                    Shelflife: '',
                    lifeTime: '',
                },
                formLabelWidth: '80px',
                dialogFormVisible: false,
                buildNewmain: false,
                showFlag: false,
                resizable: false,
                input9: '',
                value5: '',
                options: [],
                value1: -1,
                value2: '2',
                value3: '1',
                input: '',
                tableData: [],
                htmlTitle: '表格数据',
                searchValue: '',
                total: null,
                value4: '',
                currentPage: 1,
                excelData: [],
                formDate: "",
                form: {},
                fileList: [],
                formInline: {
                    user: '',
                    region: ''
                },
                templets: [],
                value: '',
                obj: {},
                viewinames: '',
                viewbarCode: '',
                viewproductNumber: '',
                viewgoodName: '',
                viewproductName: '',
                viewid: '',
                viewtags: '',
                viewimgall: [],
                viewheight: '',
                viewprice: '',
                viewclass: '',
                viewtodo: [],
                vieweditor: '',
                editimgnum: [],
                smallimgall: [],
                moreimgall: [],
                smallname: '',
                smallurl: '',
                togoodName: '',
                tobarCode: '',
                toproductNumber: '',
                toproductName: '',
                mustfill: false,
                againfill: false,
                firstnext: true,
                twostep: false,
                threestep: false,
                dian: 1,
                isActive: false,
                toimgsamll:[],
                toimgsbig:[],
                hasError: false,
                isdisabledFn:false,
                rollview:[]

            }
        },
        created() {
            this.form.lifeTime= 1;
            this.axios({
                method: 'POST',
                url: `${API}/sku/productTemplate/list`,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    uuid: localStorage.getItem('uuid')
                })
            }).then(res => {
                //console.log(res.data.msg)
                if(res.data.code === 200) {
                    console.log(res.data.data.listStockDetail)
                    this.templets = res.data.data.listStockDetail;
                }

            });
        },
        components: {
            pages,
            gallerysmall,
            galleryRoll
        },
        methods: {
            leftsel(){
                this.$forceUpdate()
            },
            //缩略图选择
            childByValue: function (childValue) {
                this.toimgsamll =childValue //这一步是直接可以提交不用循环处理
                this.isActive = true;
                let suoimgobg =[];          //这是回显的步骤
                let suoimgurl  = {
                    "url": childValue[0].url+childValue[0].name,
                };
                suoimgobg.push(suoimgurl)
                this.upImgList = suoimgobg;
            },
            //滚动图选择
            childByroll: function (childrolldata) {
                if(childrolldata.length>0){ //控制不可以本地图片上传
                    this.hasError = true;
                }
                this.rollview = childrolldata //这一步是直接可以提交不用循环处理
                
                
                
                var toRollbig = [];  //这是回显的步骤
                childrolldata.map((item) => {
                    let obj = {
                        "url": item.url+item.name,
                    };
                    toRollbig.push(obj)
                    
                });
                this.imgUrls =this.imgUrls.concat(toRollbig)
                console.log("突然没了")
                console.log(this.imgUrls )
                if(this.imgUrls.length >4){
                    this.imgUrls.length =4
                    this.$message.error('滚动图最多为4张');
                }else{}
            },
            hidePanel() {
                this.panelShow = false;
            },
            hideroll(){
                this.rollShow = false;
            },
            //请求滚动图数据
            chosesroll(){
                if(this.form.editproName== undefined ){
                    this.$message.error('商品名称不可为空');
                    return false;
                }
                if(this.form.editproName=="" ){
                    this.$message.error('商品名称不可为空');
                    return false;
                }
                const loading = this.$loading({
                    lock: false,
                    text: '请等待...',
                    spinner: 'el-icon-loading',
                    background: 'white'
                });
                var that = this;
                $.ajax({
                    //url:'http://pic.tongchengxianggou.com:9010/api/Api/getPicList?title='+'蒙牛特仑苏牛奶',
                    url:'http://pic.tongchengxianggou.com:9010/api/Api/getPicList?title='+this.form.editproName,
                    type : 'get',
                    dataType:'jsonp',
                    success : function(resp){
                        loading.close();
                        that.objgallery =resp;
                        that.rollShow = true;
                    },
                    error : function(resp){
                    }
                });
            },
            //请求缩略图数据
            chosesmall() {
                var that = this;
                if(this.form.editproName== undefined ){
                    this.$message.error('商品名称不可为空');
                    return false;
                }
                if(this.form.editproName=="" ){
                    this.$message.error('商品名称不可为空');
                    return false;
                }
                const loading = this.$loading({
                    text: '请等待...',
                    spinner: 'el-icon-loading',
                    background: 'white'
                });
                $.ajax({
                    //url:'http://pic.tongchengxianggou.com:9010/api/Api/getPicList?title='+'蒙牛特仑苏牛奶',
                    url:'http://pic.tongchengxianggou.com:9010/api/Api/getPicList?title='+this.form.editproName,
                    type : 'get',
                    dataType:'jsonp',
                    success : function(resp){
                        loading.close();
                        that.objgallery =resp;
                        that.panelShow = true;
                    },
                    error : function(resp){
                    }
                });
            },
            //第一次点击下一步的时候
            nextclick() {
                if(this.form.editproName == "" ||
                    this.form.editbarCode == "" ||
                    this.form.editgoodName == "" ||
                    this.form.editproNumber == "" ||
                    this.form.editweight == "" ||
                    this.form.Shelflife == "" ||
                    this.form.lifeTime == ""
                ) {
                    this.$message({
                        showClose: true,
                        message: '带"*"为必填，请填写完整后，再次提交',
                        type: 'error'
                    });
                } else if(this.form.editproName == undefined ||
                    this.form.editbarCode == undefined ||
                    this.form.editgoodName == undefined ||
                    this.form.editproNumber == undefined ||
                    this.form.editweight == undefined ||
                    this.form.Shelflife == undefined ||
                    this.form.lifeTime == undefined
                ) {
                    this.$message({
                        showClose: true,
                        message: '带"*"为必填，请填写完整后，再次提交',
                        type: 'error'
                    });
                }else {
                    this.dian = 2
                    this.firstnext = false
                    this.twostep = true
                };

            },
            //第二次点击下一步
            twoclick() {
                //              this.dian=3
                //              this.threestep = true;
                //              this.twostep = false;
                if(this.editselvalue == "") {
                    this.$message({
                        showClose: true,
                        message: '带"*"为必填，请填写完整后，再次提交',
                        type: 'error'
                    });
                    return false;
                }
                this.buildmouldlist.map((item) => {
                    if(item.isMandatory == 0) {
                        if(item.inputtxt == "") {
                            this.mustfill = true
                        } else {
                            this.mustfill = false
                        }
                    }
                });
                if(this.mustfill == true) {
                    this.$message({
                        showClose: true,
                        message: '模板必填项请填写完整',
                        type: 'error'
                    });
                    return false;
                }
                this.dian = 3
                this.threestep = true;
                this.twostep = false;
            },
            backclick() {
                this.dian = 1
                this.firstnext = true
                this.twostep = false
            },
            backtwo() {
                this.dian = 2
                this.firstnext = false
                this.twostep = true
                this.threestep = false
            },
            //验证不可以重复的问题
            firsttime() {
                if(this.form.editbarCode == undefined) {
                    this.form.editbarCode = "";
                } else {
                    this.form.editbarCode = this.form.editbarCode
                }

                if(this.form.editproNumber == undefined) {
                    this.form.editproNumber = "";
                } else {
                    this.form.editproNumber = this.form.editproNumber
                }

                if(this.form.editgoodName == undefined) {
                    this.form.editgoodName = "";
                } else {
                    this.form.editgoodName = this.form.editgoodName
                }

                let myData = Qs.stringify({
                    barCode: this.form.editbarCode, //商品条码
                    productNumber: this.form.editproNumber, //商品编码
                    goodName: this.form.editgoodName,
                    uuid: localStorage.getItem('uuid')
                });
                this.axios({
                    method: 'POST',
                    url: `${API}/sku/o-product/flag`,
                    data: myData,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                }).then(res => {
                    if(res.data.code == 200) {

                    } else {
                        this.$message({
                            type: 'warning',
                            message: '不可以重复输入，请重新输入'
                        });
                        this.form.editgoodName = "";
                        this.form.editproNumber = "";
                        this.form.editbarCode = ""
                    }
                })
            },
            Limitedlength(limitval){
                if(limitval.target.value.length>=12&&limitval.target.value.length<=13){
                    this.form.editbarCode = limitval.target.value
                }else{
                    this.$message.error('商品条码为12或者13位请充填');
                    this.form.editbarCode="";
                    limitval.target.value="";
                }
                
            },
            //缩略图
            beforeload(file) {
                let _this = this
                if(file.type.indexOf('image') < 0) {
                    this.$alert({
                        message: '图片格式不正确',
                        btn: false
                    })
                    return false
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                const isSize = new Promise(function(resolve, reject) {
                    let width = 360;
                    let height = 360;
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function() {
                        let valid = img.width <= width && img.height <= height;
                        console.log("实际长度" + img.width)
                        console.log("控制的长度" + width)
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    _this.$message({
                        type: 'error',
                        message: '上传的缩略图不得大于360*360!'
                    });
                    return Promise.reject();
                });
                console.log(isSize)
                return isSize
            },
            uploadform(file) {
                let _this = this
                if(file.type.indexOf('image') < 0) {
                    this.$alert({
                        message: '图片格式不正确',
                        btn: false
                    })
                    return false
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                const isSize = new Promise(function(resolve, reject) {
                    let width = 400;
                    let height = 400;
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    console.log(img)
                    img.onload = function() {
                        let valid = img.width <= width && img.height <= height;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    _this.$message({
                        type: 'error',
                        message: '上传的缩略图不得大于400*400!'
                    });
                    return Promise.reject();
                });
                return isSize
            },

            smallIMG(response, file, fileList) {
                this.isActive = true;
                this.smallimgall = fileList;
                
            },
            uploadSuc(response, file, fileList) {
                this.isdisabledFn = true;//控制不可以图库选择滚动图
                this.fileChange(fileList);
            },
            delupimgs(file, fileList) {
                this.fileChange(fileList);
            },
            fileChange(fileList) {
                this.moreimgall = fileList;
                console.log(this.moreimgall)
            },
            //商品模板
            currentSel(val) {
                this.mouldid = val.id;
                if(this.mouldid !== -1) {
                    this.axios({
                        method: 'POST',
                        url: `${API}/sku/productTemplateAttr/list` + "?ptId=" + this.mouldid,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: Qs.stringify({
                            uuid: localStorage.getItem('uuid'),
                            max: 1000
                        })
                    }).then(res => {
                        console.log(res)
                        //比较烦开始 input为一个数组   下拉为一个数组
                        res.data.data.listStockDetail.map((item) => {
                            var inputtxt = "";
                            var seltxt = "";
                            var newsel = [];
                            newsel.push(item.attributeValue.split(';'))
                            this.$set(item, 'pushdata', item.attributeValue.split(';'))
                            this.$set(item, 'inputtxt', inputtxt)
                            console.log(item.pushdata)
                        });
                        console.log("变更后的数据")
                        console.log(res.data.data.listStockDetail)
                        this.buildmouldlist = res.data.data.listStockDetail

                    });
                } else {
                    this.buildmouldlist = [];
                }
            },

            //标签初始化
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                if(this.dynamicTags.length > 3) {
                    this.inputVisible = false;
                    this.$message({
                        type: 'warning',
                        message: '最多只能上传4个标签！'
                    });
                    this.inputValue = '';
                    return false;
                }
                let inputValue = this.inputValue;
                if(inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            //上传超过的提示
            handleExceed(files, fileList) {
                this.$message.warning(`超出限制上传张数了!`);
            },
            andleRemove(file, fileList) {},
            handlePreview(file) {},
            //上传商品图片初始化
            //删除图片的事件
            handleRemove(file, fileList) {
                this.isActive = false
            },
            handleRemove2(file, fileList) {},
            uploadFile(file) {
                this.formDate.append('file', file.file);
            },
            //编辑和新增的表单提交事件
            handleProgress() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                }, 1000);
            },
            //详情图
            pictsBefore(file) {
                var that = this;
            },
            onSubmit() {
                var that = this;
                let param = new FormData();
                //var toimgsamll = [];
                this.smallimgall.map((item) => {
                    var datasmall = JSON.parse(item.response.data)
                    let obj = {
                        "name": datasmall[0].name,
                        "url": datasmall[0].url,
                    };
                    that.toimgsamll.push(obj)
                });
                //新增滚动图
                var toimgsbig = [];
                this.moreimgall.map((item) => {
                    if(item.response){
                        var datasmall = JSON.parse(item.response.data)
                        ////console.log(datasmall[0].name)
                        toimgsbig.push({
                            name:datasmall[0].name,
                            url:datasmall[0].url,
                        })
                    }
                });
                toimgsbig = toimgsbig.concat(this.rollview)
                this.transfer = [];
                this.buildmouldlist.map((item) => {
                    this.transfer.push({
                        "attrName": item.name,
                        "atrrValue": item.inputtxt, //店名称
                        "id": item.id,
                        "attribute": item.attribute,
                        "isMandatory": item.isMandatory //这是我改动的一步
                    })
                });

                if(this.form.editmarketPrice == undefined) {
                    param.append('marketPrice', '') //市场价
                } else {
                    param.append('marketPrice', this.form.editmarketPrice) //市场价
                }

                param.append('lifetime', this.form.Shelflife) //保质期
                param.append('lifeState', this.form.lifeTime) //商品名称

                param.append('productNumber', this.form.editproNumber) //商品名称
                param.append('productName', this.form.editproName) //商品名称
                param.append('barCode', this.form.editbarCode) //条形码
                param.append('goodName', this.form.editgoodName) //货名
                param.append('tags', this.dynamicTags) //标签
                param.append('weight', this.form.editweight) //重量
                param.append('productClassId', this.mouldid) //商品模板id
                param.append('productClassAtrrValue', JSON.stringify(this.transfer)) //模板json
                param.append('detailHtmlText', this.editorContent) //富文本

                param.append('thumbPicStr', JSON.stringify(that.toimgsamll)) //suoluetu
                param.append('  scrollPicStr', JSON.stringify(toimgsbig)) //suoluetu
                console.log(param)
                this.axios({
                    method: 'POST',
                    url: `${API}/sku/o-product/add/do`,
                    data: param,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                }).then(res => {
                    if(res.data.code === 200) {
                        this.buildNewmain = false;
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        setTimeout(function() {
                            that.$router.push({
                                path: '../commodity/toview'
                            });
                        }, 2000);
                    } else {
                        this.buildNewmain = true;
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(function(res) {

                });

            },
            update() {
                this.dialogFormVisible = false;
            },
            radioEvent() {
                this.showFlag = false;
            },
            changepages(a) {
                this.currentPage = a
            },

            //table 展示数据的接口
            viewsee() {
                this.viewlan = true;
            },
            closeview() {
                this.viewlan = false;
            },
            printContent() {
                let wpt = document.getElementById('mytable');
                let newContent = wpt.innerHTML;
                let oldContent = document.body.innerHTML;
                document.body.innerHTML = newContent;
                window.print(); //打印方法
                window.localtion.reload();
                document.body.innerHTML = oldContent
            },
        },
        computed: {
            tableDatas: function() {
                var search = this.searchValue;
                if(search) {
                    return this.tableData.filter(function(product) {
                        return Object.keys(product).some(function(key) {
                            return String(product[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.tableData;
            }
        },
        watch: {

        },
        mounted() {
            this.$nextTick(() => {
                this.editor = new E('#editorElem');
                this.editor.customConfig.onchange = (html) => {
                    this.editorContent = html
                }
                this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
                this.editor.customConfig.uploadImgServer = "http://ha.tongchengxianggou.com/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服务器端地址
                //this.editor.customConfig.uploadImgServer = "http://192.168.124.45:8080/web/web/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服务器端地址
                this.editor.customConfig.uploadFileName = "imgFileTmp"; // 后端接受上传文件的参数名
                this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
                this.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
                this.editor.customConfig.uploadImgTimeout = 2 * 60 * 1000; // 设置超时时间
                this.editor.customConfig.zindex = 20000;
                this.editor.customConfig.menus = [
                    "head", // 标题
                    "bold", // 粗体
                    "fontSize", // 字号
                    "fontName", // 字体
                    "italic", // 斜体
                    "underline", // 下划线
                    "strikeThrough", // 删除线
                    "foreColor", // 文字颜色
                    "backColor", // 背景颜色
                    "link", // 插入链接
                    "list", // 列表
                    "justify", // 对齐方式
                    "quote", // 引用
                    "image", // 插入图片
                    "undo", // 撤销
                    "redo", // 重复
                ];
                //下面是最重要的的方法
                this.editor.customConfig.uploadImgHooks = {
                    before: function(xhr, editor, files) {
                        // 图片上传之前触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                        // return {
                        //    prevent: true,
                        //    msg: '放弃上传'
                        // }

                    },
                    success: function(xhr, editor, result) {
                        // 图片上传并返回结果，图片插入成功之后触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                        //this.imgUrl = Object.values(result.data).toString();
                    },
                    fail: function(xhr, editor, result) {
                        // 图片上传并返回结果，但图片插入错误时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    },
                    error: function(xhr, editor) {
                        // 图片上传出错时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    },
                    timeout: function(xhr, editor) {
                        // 图片上传超时时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    },
                    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                    customInsert: function(insertImg, result, editor) {
                        var databack = JSON.parse(result.data);
                        var datanew = [];
                        databack.map((item) => {
                            let obj = {
                                "url": item.url + item.name,
                            };
                            datanew.push(obj);
                        });
                        var newurl = datanew[0].url
                        insertImg(newurl);

                    }
                };
                this.editor.create();
            })
        },
    }
</script>

<style>
    .wocao .el-form-item {
        padding: 20px 0px 0px 0px;
    }
    
    .sichangjia {
        height: 40px;
        line-height: 40px;
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }
    
    .yulanmain {
        width: 60%;
        margin: auto;
        border: 1px solid #e1e1e1;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 0px 8px;
    }
    
    .changeclass div:nth-child(1) {
        margin-left: 0px!important;
    }
    
    .dialog-footer {
        margin-top: 20px;
    }
    
    .yulan {
        width: 100%;
        position: relative;
        width: 80%;
        height: 100%;
        z-index: 1000;
        background: white;
        position: absolute;
        top: 0px;
    }
    
    .el-table td,
    .el-table th {
        text-align: center!important;
    }
    
    .el-col-12 span {
        display: inline-block;
        margin: 9px 0px;
    }
    
    .el-col-12 span:nth-child(1) {
        width: 108px;
        text-align: center;
        display: inline-block!important;
    }
    
    .disabled .el-upload--picture-card {
        display: none;
    }
    
    .el-form-item__content span {
        margin: 0px 10px;
    }
    
    .imgview {
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 148px;
        height: 148px;
        margin: 0 8px 8px 0;
        display: inline-block;
    }
    
    .imgsallwall img {
        display: inline-block;
        margin: 0px 10px;
    }
    
    .imgparts {
        overflow: hidden;
        margin: 10px 0px;
        clear: both;
    }
    
    .made {
        margin-top: 0px!important;
    }
    
    .nimabide .el-upload--picture-card {
        display: none!important;
    }
    
    .el-form-item .el-select {
        width: 100%;
    }
    
    .xuansel .el-select {
        width: 42%!important;
    }
    
    .el-upload-list__item-actions {
        margin: 0px!important;
    }
    
    .mobanall .el-form-item__label {
        width: 100px!important;
        overflow: hidden!important;
        display: inline-block;
        white-space: nowrap!important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 20px!important;
    }
    
    .vip {
        display: inline-block;
        color: red;
        position: absolute;
        right: 428px;
    }
    
    .zhuanxiang {
        box-sizing: border-box;
        width: 320px;
        margin: auto;
        text-align: center;
        display: block;
        padding: 10px 15px;
        cursor: pointer
    }
    
    .zhuanxiang span {
        box-sizing: border-box;
        width: 120px;
        margin: auto 10px;
        text-align: center;
        display: block;
        float: left;
        border: 1px solid #D1DBE5;
        padding: 10px 15px;
        cursor: pointer
    }
    
    .nextclick {
        border: 1px solid #D1DBE5;
        box-sizing: border-box;
        width: 120px;
        margin: auto;
        text-align: center;
        display: block;
        padding: 10px 15px;
        cursor: pointer
    }
    
    .showitself .el-upload--picture-card {
        display: none;
    }
    
    .baozhiqi .el-input__suffix-inner i {
        position: relative!important;
        left: 20px!important;
    }
    
    #yizhang {
        margin: auto;
        text-align: center;
    }
    .text-danger .el-upload--picture-card{
        display: none!important;
    }
</style>

<style scoped>
    .made {
        top: -407px!important;
    }
</style>