20210928

xiaoyong931011

2021-09-28 041f8683651a19ebe041c239a3ca19822c53470c

 src/main/resources/templates/febs/views/modules/goods/goodsUpdate.html

@@ -29,13 +29,13 @@
            <div class="layui-col-lg6">
                <label class="layui-form-label febs-form-item-require">商品名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="goodsName" class="layui-input" readonly>
                    <input type="text" name="goodsName" class="layui-input" >
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label febs-form-item-require">商品编号：</label>
                <div class="layui-input-block">
                    <input type="text" name="goodsNo" class="layui-input" readonly>
                    <input type="text" name="goodsNo" class="layui-input" >
                </div>
            </div>
        </div>
@@ -43,7 +43,7 @@
            <div class="layui-col-lg6">
                <label class="layui-form-label febs-form-item-require">所属分类：</label>
                <div class="layui-input-block">
                    <select name="parentId" class="categary-goods-update-category" id="categarySelect" readonly>
                    <select name="parentId" class="categary-goods-update-category" id="categarySelect" >
                        <option value="">请选择</option>
                    </select>
                </div>
@@ -75,24 +75,61 @@
                <input type="text" name="goodsIntrodution" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <!--        <div class="layui-row layui-col-space10 layui-form-item">-->
        <!--            <div class="layui-col-lg6">-->
        <!--                <label class="layui-form-label">规格：</label>-->
        <!--                <div class="layui-input-block">-->
        <!--                    <input type="text" name="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName">-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="layui-col-lg6">-->
        <!--                <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test3" >添加</button>-->
        <!--            </div>-->
        <!--        </div>-->
                <div class="layui-row layui-col-space10 layui-form-item">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">规格：</label>
                        <div class="layui-input-block">
                            <input type="text" name="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test3" >添加</button>
                    </div>
                </div>
        <div id="attrWrap"></div>

        <div class="layui-form-item">
            <label class="layui-form-label">缩略图链接：</label>
            <label class="layui-form-label febs-form-item-require">缩略图：</label>
            <div class="layui-input-block">
                <img alt="缩略图" data-th-src="${mailGoodsUpdate.thumb}"  style="width: 100px">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test2">上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">缩略图链接：</label>
                <div class="layui-input-block">
                    <input type="text" id="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label febs-form-item-require">轮播图：</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="thumbsBanner">上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="thumbsBanners"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">缩略图链接：</label>
                <div class="layui-input-block">
                    <input type="text" id="thumbs" lay-verify="required" name="thumbs" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">缩略图链接：</label>-->
<!--            <div class="layui-input-block">-->
<!--                <img alt="缩略图" data-th-src="${mailGoodsUpdate.thumb}"  style="width: 100px">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">商品详情：</label>
            <div class="layui-input-block">
@@ -108,23 +145,27 @@
                </div>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="goods-update-form-submit" id="submit"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','layedit'], function () {
        var $ = layui.$,
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            layer = layui.layer,
            formSelects = layui.formSelects,
            treeSelect = layui.treeSelect,
            form = layui.form,
            laydate = layui.laydate,
            eleTree = layui.eleTree,
            mailGoodsUpdate = [[${mailGoodsUpdate}]],
            $view = $('#goods-update'),
            validate = layui.validate,
            $view = $('#goods-add'),
            layedit = layui.layedit,
            _deptTree;
            upload = layui.upload,
            validate = layui.validate;

        form.render();

@@ -139,6 +180,50 @@
                $("#categarySelect").val(mailGoodsUpdate.categoryId)
                form.render();
            });
        });

        //多图片上传
        upload.render({
            elem: '#thumbsBanner'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#thumbsBanners').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">')
                });
            }
            ,done: function(res){
                var thumbs = $("#thumbs").val();
                if(thumbs == ''){
                    $("#thumbs").val(res.data.src);
                }else{
                    $("#thumbs").val(thumbs + ',' + res.data.src);
                }
                // alert($("#thumb").val());
            }
        });

        //图片上传
        upload.render({
            elem: '#test2'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">')
                });
            }
            ,done: function(res){
                // var thumbs = $("#thumb").val();
                // if(thumbs == ''){
                $("#thumb").val(res.data.src);
                // }else{
                //     $("#thumb").val(thumbs + ',' + res.data.src);
                // }
                // alert($("#thumb").val());
            }
        });

        layedit.set({   //设置图片接口
@@ -175,32 +260,32 @@
                        <div class="layui-input-block layui-form-item item">
                            <div style="float:left" >
                                <div>
                                    <input type="text" class="layui-input" value="` + attrNameVal + `" readonly >
                                    <input type="text" class="layui-input" value="` + attrNameVal + `"  >
                                </div>
                            </div>
                            <div  style="float:left" >
                                <div>
                                    <img class="layui-upload-img" src="` + skuImage + `" style="width: 100px" readonly>
                                    <img class="layui-upload-img" src="` + skuImage + `" style="width: 100px" >
                                </div>
                            </div>
                            <div style="float:left" >
                                <div>
                                    <input type="text" value="` + stockVal + `" placeholder="库存" autocomplete="off" class="layui-input" readonly>
                                    <input type="text" value="` + stockVal + `" placeholder="库存" autocomplete="off" class="layui-input" >
                                </div>
                            </div>
                            <div style="float:left" >
                                <div>
                                    <input type="text" value="` + skuVolume + `" placeholder="销售数量" autocomplete="off" class="layui-input" readonly>
                                    <input type="text" value="` + skuVolume + `" placeholder="销售数量" autocomplete="off" class="layui-input" >
                                </div>
                            </div>
                            <div style="float:left" >
                                <div>
                                    <input type="text" value="` + originalPrice + `" placeholder="原价" autocomplete="off" class="layui-input" readonly>
                                    <input type="text" value="` + originalPrice + `" placeholder="原价" autocomplete="off" class="layui-input" >
                                </div>
                            </div>
                            <div style="float:left" >
                                <div>
                                    <input type="text" value="` + presentPrice + `" placeholder="现价" autocomplete="off" class="layui-input" readonly>
                                    <input type="text" value="` + presentPrice + `" placeholder="现价" autocomplete="off" class="layui-input" >
                                </div>
                            </div>
                        </div>
@@ -214,12 +299,25 @@
            for(var skuIndex = 0; skuIndex < skuLength; skuIndex++){
                appendSku(mailGoodsUpdate.mailGoodsSkuDetailVo[skuIndex],skuIndex);
            }
            //缩略图图片回显
            if(mailGoodsUpdate.thumb != null || mailGoodsUpdate.thumb != ''){
                $('#demo2').append('<img src="'+ mailGoodsUpdate.thumb +'" class="layui-upload-img" style="width: 100px">')
                $("#thumb").val(mailGoodsUpdate.thumb);
            }
            var imagesInitIndex = 0;
            let imagesInitIndexlength = mailGoodsUpdate.mailGoodsImagesVo.length;
            for(var imagesInitIndex = 0; imagesInitIndex < imagesInitIndexlength; imagesInitIndex++){
                console.log(mailGoodsUpdate.mailGoodsImagesVo);
                $('#thumbsBanners').append('<img src="'+ mailGoodsUpdate.mailGoodsImagesVo[imagesInitIndex] +'" class="layui-upload-img" style="width: 100px">')
                $("#thumbs").val(mailGoodsUpdate.mailGoodsImagesVo[imagesInitIndex] + ',');
            }

            form.val("goods-update-form", {
                "id": mailGoodsUpdate.id,
                "goodsNo": mailGoodsUpdate.goodsNo,
                "categoryId": mailGoodsUpdate.categoryId,
                "mailGoodsSkuDetailVo": mailGoodsUpdate.mailGoodsSkuDetailVo,
                "mailGoodsImagesVo": mailGoodsUpdate.mailGoodsImagesVo,
                "unit": mailGoodsUpdate.unit,
                "originalPrice": mailGoodsUpdate.originalPrice,
                "presentPrice": mailGoodsUpdate.presentPrice,
@@ -227,8 +325,133 @@
                "thumb": mailGoodsUpdate.thumb,
                "goodsDetails": mailGoodsUpdate.goodsDetails,
                "isHot": mailGoodsUpdate.isHot,
                "isHot": mailGoodsUpdate.isHot,
                "goodsName": mailGoodsUpdate.goodsName
            });
        }

        $('#test3').on('click', function (){
            var index = $("#attrWrap").children().length;
            let attrNameVal = $('#attrName').val();
            if(attrNameVal==null || attrNameVal==""){
                febs.alert.warn('样式名称不能为空');
                return false;
            }
            $('#attrWrap').append(`
                    <div class="layui-form-item item">
                    <div style="float:left" >
                            <input type="text" name="styleName` + index + `" value="` + $('#attrName').val() + `" autocomplete="off" class="layui-input"  readonly >
                    </div>
                    <div style="float:left" >
                        <div>
                            <input type="text" name="skuName` + index +`" placeholder="规格名称" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div  style="float:left" >
                        <label class="layui-form-label">图片：</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="skuImg` + index + `">上传</button>
                                    <img class="layui-upload-img" id="imageUrls` + index + `" style="width: 100px" >
                            </div>
                        </div>
                    </div>
                    <div style="float:left" class="febs-hide">
                        <div>
                            <input type="text" id="skuImage` + index +`" name="skuImage` + index + `" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div style="float:left" >
                        <div>
                            <input type="number" name="stock` + index +`" placeholder="库存" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div style="float:left" >
                        <div>
                            <input type="number" name="skuVolume` + index +`" placeholder="销售数量" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div style="float:left" >
                        <div>
                            <input type="number" name="originalPrice` + index +`" placeholder="原价" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div style="float:left" >
                        <div>
                            <input type="number" name="presentPrice` + index + `" placeholder="现价" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div style="float:left" >
                        <button type="button" class="layui-btn del-attr-btn" data-index="` + index +`">删除</button>
                    </div>
                </div>
            `)
            //普通图片上传
            upload.render({
                elem: '#skuImg' + index
                ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
                ,done: function(res){
                    febs.alert.success(res.data.src);
                    $('#imageUrls' + index).attr('src', res.data.src);
                    $('#skuImage'+ index).val(res.data.src);
                }
            });
        });
        upload.render({
            elem: '#skuImg'+index
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,done: function(res){
                febs.alert.success(res.data.src);
                $('#imageUrls' + index).attr('src', res.data.src);
                $('#skuImage'+ index).val(res.data.src);
            }
        });
        $("#attrWrap").on("click",".del-attr-btn",function(){
            var index = $(this).attr('data-index')
            $($("#attrWrap").find(".item")[index].remove());
        });
        form.on('submit(goods-add-form-submit)', function (data) {
            let skuArrs = [];
            var skuArr = $("#attrWrap").find(".item");
            for(var i = 0;i < skuArr.length;i++){
                skuArrs.push({
                    styleName: $("input[name='styleName" + i + "']").val(),
                    skuName: $("input[name='skuName" + i + "']").val(),
                    skuImage: $("input[name='skuImage" + i + "']").val(),
                    stock: $("input[name='stock" + i + "']").val(),
                    skuVolume: $("input[name='skuVolume" + i + "']").val(),
                    originalPrice:$("input[name='originalPrice" + i + "']").val(),
                    presentPrice: $("input[name='presentPrice" + i + "']").val()
                })
            }
            // if(skuArr.length < 0){
            //     febs.alert.warn("请填写商品规格");
            //     return false;
            // }
            // console.log(skuArrs)
            data.field.addMallGoodsSkuDtos = skuArrs;
            // console.log(data.field)
            $.ajax({
                'url':ctx + 'admin/goods/addMallGoods',
                'type':'post',
                'dataType':'json',
                'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
                'traditional': true,//ajax传递数组必须添加属性
                'data':JSON.stringify(data.field),
                'success':function (data) {
                    if(data.code==0){
                        febs.alert.success(data.message);
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }else{
                        febs.alert.warn(data.message);
                    }
                },
                'error':function () {
                    febs.alert.warn('服务器繁忙');
                }
            })
            return false;
        });
    });
</script>