qxp
/
SteelfurnitureManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
							<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品基础详情')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
    <style type="text/css">
        .slideshow_span{
            width: 140px;
            height: 140px;
            float: left;
            margin-right: 10px;
            position: relative;
        }
        .img-slideshow{
            max-width:100%;
            max-height:100%
        }

    </style>

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-add"  th:object="${sysCompany}">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>商品名称：</label>
                        <div class="col-sm-8">
                            <input name="name" class="form-control required" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>一口价：</label>
                        <div class="col-sm-8">
                            <input name="price" class="form-control number" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <!--封面和轮播图-->
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <input id="input_cover" name="cover" type="hidden"/>
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>封面图：</label>
                        <div class="col-sm-8">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                                    <!--<img th:src="@{/img/profile.jpg}">-->
                                </div>
                                <div id="fmz" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 300px;">

                                </div>
                                <div>
                                    <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
                                    <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="form-group">
                        <input id="input_slideshow" name="slideshow" type="hidden"/>
                        <label class="col-sm-1 control-label">轮播图：</label>
                        <div class="col-sm-11">
                            <div id="div-slideshow-list">

                            </div>
                            <input type="file" id="input-slideshow-add" style="display: none;" onchange="upload_slideshow()"/>
                            <div class="thumbnail slideshow_span" style="width:70px;height: 70px; font-size: 40px;color: black; text-align: center" id="btn-slideshow-add" >
                                <i class="fa fa-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <input name="typeId" type="hidden" id="input_typeId">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>所属分类：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="typeName" onclick="selectTypeTree()" id="input_typeTreeName" type="text" placeholder="请选择所属分类"
                                       class="form-control required" readonly="readonly" required>
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input name="companyId" type="hidden" id="input_companyId" th:value="*{id}">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>所属商户：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="companyName" onclick="selectCompanyList()" id="input_companyTreeName" type="text" placeholder="请选择所属商户"
                                       th:value="*{companyName}"  class="form-control required" th:disabled="@{!${isSystemUser}}" required>
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>生产地点：</label>
                        <div class="col-sm-8">
                            <textarea name="producedAddress" class="form-control required" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>仓库地址：</label>
                        <div class="col-sm-8">
                            <textarea name="warehouseAddress" class="form-control required" required></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>生产日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input name="producedTime" class="form-control required" placeholder="yyyy-MM-dd" type="text" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>配送方式：</label>
                        <div class="col-sm-8">
                            <input name="delivery"  class="form-control required" placeholder="请输入配送方式" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>单重：</label>
                        <div class="col-sm-8">
                            <input name="weight" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <!--规格和颜色-->
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-6">
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr style="background-color: #1ab394;color: white;">
                                    <th >规格</th>
                                </tr>
                                </thead>
                                <tbody id="tbody-size">
                                </tbody>
                            </table>
                        </div>
                        <div class="col-sm-2">
                            <a class="btn btn-white btn-bitbucket" id="btn-size-add">
                                <i class="fa fa-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-6">
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr style="background-color: #1ab394;color: white;">
                                    <th >颜色</th>
                                </tr>
                                </thead>
                                <tbody id="tbody-color">
                                </tbody>
                            </table>
                        </div>
                        <div class="col-sm-2">
                            <a class="btn btn-white btn-bitbucket" id="btn-color-add">
                                <i class="fa fa-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--动态属性-->
            <div class="row" >
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red; ">*</span>属性：</label>
                    <div class="col-sm-10">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h5>动态属性列表（选择分类后加载）</h5>
                            </div>
                            <div class="panel-body">
                                <div class="row" id="div_area">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red; ">*</span>描述：</label>
                    <div class="col-sm-10">
                        <input id="input_des" name="des" type="hidden" required>
                        <div class="summernote"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: jasny-bootstrap-js" />
    <script type="text/javascript">
        var isSystemUser = [[${isSystemUser}]];
        var prefix = ctx + "goods/info"
        var sizeIndex=0;
        var colorIndex=0;
        $('.summernote').summernote({
            placeholder: '请输入内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        $("#form-info-add").validate({
            focusCleanup: true
        });

        /************************上传文件******************************/
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.data.url, result.data.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }

        /*********************提交*********************************/
        function submitHandler() {

            if ($.validate.form()) {
                /*遍历轮播图*/
                var obj = $("img[class='img-slideshow']")
                var srcStr ='';
                if(obj.length>0){
                    for(var i =0;i<obj.length;i++){
                        srcStr += $(obj[i]).attr('src');
                        srcStr += ',';
                    }
                    srcStr =  srcStr.substr(0,srcStr.length-1)
                    $("#input_slideshow").val(srcStr);
                }
                var sHTML = $('.summernote').summernote('code');
                $("#input_des").val(sHTML);
                if(sHTML==undefined||sHTML==''){
                    $.modal.alertWarning("请添加商品描述");
                    return;
                }
                var file = $('#fmz').find('img').attr('src');
                if(file == undefined){
                    $.modal.alertWarning("请上传图片");
                    return;
                }
                $('#input_cover').val(file);
                $.operate.save(prefix + "/add", $('#form-info-add').serialize());
            }else{
                $.modal.alertError("表单填写有误，请重新填写后提交");
            }
        }

        $("input[name='producedTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        /******************选择分类树**********************************/
        function selectTypeTree() {
            var typeId = "0";
            var url = ctx + "goods/type/selectTypeTree/" + typeId;
            var options1 = {
                title: '选择商品类型',
                width: "380",
                url: url,
                callBack: selectType
            };
            $.modal.openOptions(options1);
        }
        function selectType(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            var body = layer.getChildFrame('body', index);
            $("#input_typeId").val(body.find('#treeId').val());
            $("#input_typeTreeName").val(body.find('#treeName').val());
            getTypyAttributu($("#input_typeId").val());
            layer.close(index);
        }
        /**********************获取分类信息****************************/
        function getTypyAttributu(id){
            console.log(id)
            $.ajax({
                type: "POST",
                url: ctx + "goods/type/getInfo/"+id,
                contentType: false,
                cache: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        resolverType(result.data)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("获取分类属性失败！");
                }
            });
        }
        /************************解析分类属性类表***************************/
        function resolverType(goodsType){
            $("#div_area").html("");
            var objs = goodsType.goodsTypeAttributes;
            var len= objs.length;
            var str ="";
            for (i = 0; i < len; i++) {
                 str += ' <div class="col-sm-6">' +
                    '                    <div class="form-group">' +
                    '                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>'+objs[i].attributeName+'：</label>' +
                    '                        <div class="col-sm-8">' +
                    '                            <input name="goodsAttributes['+i+'].attributeId" class="form-control" type="hidden" value="'+objs[i].id+'" >' +
                    '                            <input name="goodsAttributes['+i+'].attributeName" class="form-control" type="hidden" value="'+objs[i].attributeName+'" >' +
                    '                            <input name="goodsAttributes['+i+'].value" class="form-control required" type="text" required>' +
                    '                        </div>' +
                    '                    </div>' +
                    '                </div>'
            }
            $("#div_area").html(str);
        }

        /******************选择商户列表**********************************/
        function selectCompanyList() {
            if(!isSystemUser){
                return
            }
            var url = ctx + "company/tree";
            var options2 = {
                title: '选择商户',
                width: "700",
                url: url,
                callBack: selectCompany
            };
            $.modal.openOptions(options2);
        }
        function selectCompany(index, layero){
            var body = layer.getChildFrame('body', index);
            $("#input_companyId").val(body.find('#treeId').val());
            $("#input_companyTreeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        /*******************规格表格动态添加值*********************************************/
        $("#btn-size-add").click(function(){
            var htmlStr='';
            htmlStr+='<tr><td class="input-group" style="padding: 0">';
            htmlStr+='  <input name="goodsSizes['+sizeIndex+'].size" class="form-control required" type="text" required>'
            htmlStr+='  <span class="input-group-addon"><i class="fa fa-remove remove"></i></span>'
            htmlStr+='</td></tr>';
            sizeIndex++
            $("#tbody-size").append(htmlStr)
            $('.remove').on('click',function(){
                $(this).parent().parent().parent('tr').remove();
            });
        })
        /*******************颜色表格动态添加值*********************************************/
        $("#btn-color-add").click(function(){
            var htmlStr='';
            htmlStr+='<tr><td class="input-group" style="padding: 0">';
            htmlStr+='  <input name="goodsColors['+colorIndex+'].color" class="form-control required" type="text" required>'
            htmlStr+='  <span class="input-group-addon"><i class="fa fa-remove remove"></i></span>'
            htmlStr+='</td></tr>';
            colorIndex++
            $("#tbody-color").append(htmlStr);
            $('.remove').on('click',function(){
                $(this).parent().parent().parent('tr').remove();
            });
        })

        /*******************轮播图添加图片************************/
        $("#btn-slideshow-add").click(function(){
            $("#input-slideshow-add").click();
        })
        function  upload_slideshow(){
            if ($("#input-slideshow-add").val() == '') {
                return;
            }var data = new FormData();
            data.append('file', document.getElementById('input-slideshow-add').files[0]);
            $.ajax({
                url:ctx+"common/upload",
                type:"post",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        var htmlStr='';
                        htmlStr+='<div class="thumbnail slideshow_span" >'+
                            '   <img class="img-slideshow" src="'+result.data.fileName+'">' +
                            '   <a class="close-link" style="position: absolute;right: 3%; top: 0;"' +
                            '       onclick="remove_slideshow(this)"><i class="fa fa-times"></i></a>'+
                            '</div>'
                        $("#div-slideshow-list").append(htmlStr);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error:function(result) {
                    alert("上传失败")
                }
            });
        }
        function remove_slideshow(self){
            console.log(self)
            var _this = $(self).parent();
            _this.remove();
        }
    </script>
</body>
</html>