qxp
/
suishenbang-oneportal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
							<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增弹框配置')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: cropbox-css"/>
    <style>
        .bg-sm {
            width: 119px;
            height: 109px;
            font-size: 75px;
            color: black;
            text-align: center
        }

        .bg-md {
            width: 180px;
            height: 150px;
            font-size: 105px;
            color: black;
            text-align: center
        }

        .bg-lg {
            width: 365px;
            height: 160px;
            font-size: 115px;
            color: black;
            text-align: center
        }

        .thumbBox_S {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 238px;
            height: 218px;
            margin-left: -119px;
            margin-top: -109px;
            box-sizing: border-box;
            border: 1px solid rgb(102, 102, 102);
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
            background: none repeat scroll 0% 0% transparent;
        }

        .thumbBox_M {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 360px;
            height: 300px;
            margin-left: -180px;
            margin-top: -150px;
            box-sizing: border-box;
            border: 1px solid rgb(102, 102, 102);
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
            background: none repeat scroll 0% 0% transparent;
        }

        .thumbBox_L {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 730px;
            height: 320px;
            margin-left: -365px;
            margin-top: -160px;
            box-sizing: border-box;
            border: 1px solid rgb(102, 102, 102);
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
            background: none repeat scroll 0% 0% transparent;
        }

        .imageBox_S {
            margin: 0 auto;
            width: 400px;
        }

        .imageBox_M {
            margin: 0 auto;
            width: 400px;
        }

        .imageBox_L {
            margin: 0 auto;
            width: 800px;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div1">
    <form class="form-horizontal m" id="form-configuration-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">弹框类型：</label>
            <div class="col-sm-3">
                <select title="请选择" id="alertType" name="alertType" class="form-control m-b selectpicker" th:with="type=${@dict.getType('alert_configuration_type')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group" id="alertImageItem">
            <label class="col-sm-3 control-label">弹框图片：</label>
            <div class="col-sm-8">
                <input id="input_bgUrl" name="bgUrl" type="hidden"/>
                <div class="thumbnail slideshow_span" id="div-bgUrl" onclick="javascript:bgUpload('bg')">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </div>
        <div class="form-group" id="alertContentItem">
            <label class="col-sm-3 control-label">弹框内容：</label>
            <div class="col-sm-8">
                <textarea id="alertContent" name="alertContent" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">弹框开始时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input id="alertStartTime" name="alertStartTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">弹框结束时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input id="alertEndTime" name="alertEndTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">弹框每日可弹次数：</label>
            <div class="col-sm-8">
                <input id="alertNum" name="alertNum" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">用户类型：</label>
            <div class="col-sm-8">
                <select title="请选择" id="userType" name="userType" class="form-control m-b selectpicker" th:with="type=${@dict.getType('sys_lantern_permission')}" multiple>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">部门类型：</label>
            <div class="col-sm-3">
                <select title="请选择公司" id="deptType1" class="form-control m-b selectpicker">
                </select>
            </div>
            <div class="col-sm-3">
                <select title="请选择大区" id="deptType2" class="form-control m-b selectpicker">
                </select>
            </div>
            <div class="col-sm-3">
                <select title="请选择销售部" id="deptType3" class="form-control m-b selectpicker">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-3">
                <a class="btn btn-primary btn-rounded btn-sm" id="clearSelect">清空部门类型</a>
            </div>
        </div>
<!--        <div class="form-group">
            <label class="col-sm-3 control-label">是否启动：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_ziti_show_hide')}">
                    <input type="radio" th:id="${dict.dictCode}" name="alertStatus" th:value="${dict.dictValue}"
                           th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>-->
    </form>
</div>

<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div2" style="display: none">
    <div class="imageBox">
        <div class="thumbBox" style="width:200px;height:200px;"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action" style="margin: 10px auto;">
        <div class="new-contentarea tc">
            <a href="javascript:void(0)" class="upload-img"> <label for="avatar">选择图片</label> </a>
            <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
        </div>
        <input type="button" id="submitbuttonBg" onclick="upBg()" class="btn-info Btnsty_peyton" value="上传"/>
        <input type="button" id="submitbuttonQr" onclick="upQr()" class="btn-info Btnsty_peyton" value="上传"/>
        <input type="button" onclick="back()" class="btn-info Btnsty_peyton " value="返回"/>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: cropbox-js"/>
<script type="text/javascript">
    var prefix = ctx + "system/configuration"
    // var getCompanyListPrefix = "http://localhost:10001/wxportal-api/sysuser/searchOrg";
    var getCompanyListPrefix = "http://suishenbangtest.nipponpaint.com.cn/wxportal-api/sysuser/searchOrg";
    var cropper;
    var options = {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: ctx + 'img/profile.jpg'
    }

    $(document).ready(function () {
        var obj = {
            parType: "diy_level",
            parValue: ""
        }
        $("#alertContentItem").hide();
        $("#alertImageItem").hide();
        getCompanyList(obj);
        $('#avatar').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                //根据MIME判断上传的文件是不是图片类型
                if ((options.imgSrc).indexOf("image/") == -1) {
                    $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                } else {
                    cropper = $('.imageBox').cropbox(options);
                }
            }
            reader.readAsDataURL(this.files[0]);
        })
        console.log('ctx',ctx);
    })

    $("#alertType").on('change',function () {
        if ($(this).val() != -1){
            if ($(this).val() == 0){
                $("#alertContentItem").show();
                $("#alertImageItem").hide();
            }
            if ($(this).val() == 1){
                $("#alertImageItem").show();
                $("#alertContentItem").hide();
            }
        }
    })

    $("#deptType1").on('change',function () {
        if ($(this).val() != -1){
            var obj1 = {
                parType: "company_level",
                parValue: $(this).val()
            }
            $("#deptType2").empty().append("");
            $("#deptType2").selectpicker('refresh');
            $("#deptType3").empty().append("");
            $("#deptType3").selectpicker('refresh');
            getCompanyList(obj1);
        }
    })

    $("#deptType2").on('change',function () {
        if ($(this).val() != -1){
            var obj2 = {
                parType: "office_level",
                parValue: $(this).val()
            }
            $("#deptType3").empty().append("");
            $("#deptType3").selectpicker('refresh');
            getCompanyList(obj2);
        }
    })

    $("#clearSelect").on('click',function () {
        var obj3 = {
            parType: "diy_level",
            parValue: ""
        }
        $("#deptType1").empty().append("");
        $("#deptType1").selectpicker('refresh');
        $("#deptType2").empty().append("");
        $("#deptType2").selectpicker('refresh');
        $("#deptType3").empty().append("");
        $("#deptType3").selectpicker('refresh');
        getCompanyList(obj3,"");
    })

    $("#form-configuration-add").validate({
        focusCleanup: true,
        rules:{
            alertContent:{
                required:true
            },
            alertStartTime:{
                required:true
            },
            alertEndTime:{
                required:true
            },
            alertNum: {
                required:true
            },
            userType: {
                required:true
            }
        },
    });

    function back() {
        $("#div1").show();
        $("#div2").hide();
    }

    /*上传背景图片*/
    function bgUpload(value) {
        if (value == 'bg') {
            $("#submitbuttonQr").hide();
            $("#submitbuttonBg").show();
        } else if (value == 'qr') {
            $("#submitbuttonBg").hide();
            $("#submitbuttonQr").show();
        }
        $("#div1").hide();
        $("#div2").show();
        var imgUrl = ctx + 'img/profile.jpg';
        options = {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: imgUrl
        }
        cropper = $('.imageBox').cropbox(options);
    }

    function upBg() {
        var img = cropper.getBlob();
        var formdata = new FormData();
        formdata.append("file", img);
        $.ajax({
            url: ctx + "common/upload",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.code == 0) {
                    $("#input_bgUrl").val(result.data.fileName);
                    $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width；100%;height:100%;'>");
                    $("#div1").show();
                    $("#div2").hide();
                } else {
                    $("#div1").show();
                    $("#div2").hide();
                    $.modal.alertWarning(result.msg);
                }
            }
        })
    }

    function sizeChange() {
        size = $("#sel_magnetSize").val();
        $("#div-bgUrl").removeClass("bg-sm");
        $("#div-bgUrl").removeClass("bg-md");
        $("#div-bgUrl").removeClass("bg-lg");
        $("#imageBox").removeClass();
        $("#thumbBox").removeClass();
        if (size == "l" || size == "L") {
            $("#div-bgUrl").addClass("bg-lg");
            size = "L";
            $("#imageBox").addClass("imageBox imageBox_L");
            $("#thumbBox").addClass("thumbBox_L");
        } else if (size == "m" || size == "M") {
            $("#div-bgUrl").addClass("bg-md");
            size = "M";
            $("#imageBox").addClass("imageBox imageBox_M");
            $("#thumbBox").addClass("thumbBox_M");
        } else if (size == "s" || size == "S") {
            $("#div-bgUrl").addClass("bg-sm");
            size = "S";
            $("#imageBox").addClass("imageBox imageBox_S");
            $("#thumbBox").addClass("thumbBox_S");
        }
    }

    function submitHandler() {
        if ($.validate.form()) {
            var contentVal = $('#alertContent').val();
            var startTime = $('#alertStartTime').val();
            var endTime = $('#alertEndTime').val();
            var alertNum = $('#alertNum').val();
            var userType = $('#userType').val().join();
            var objSubmit = {
                alertContent:contentVal,
                alertStartTime:startTime,
                alertEndTime:endTime,
                alertNum:alertNum,
                userType:userType,
                alertStatus:'0'
            }
            if ($('#deptType3').val() != "") {
                objSubmit.salesLevel = 'suboffice_level';
                objSubmit.orgCode = $('#deptType3').val();
                objSubmit.orgName = $('#deptType3').find("option:selected")[0].label
            }
            if ($('#deptType2').val() != "" && $('#deptType3').val() == "") {
                objSubmit.salesLevel = 'office_level';
                objSubmit.orgCode = $('#deptType2').val();
                objSubmit.orgName = $('#deptType2').find("option:selected")[0].label
            }
            if ($('#deptType1').val() != "" && $('#deptType2').val() == "" && $('#deptType3').val() == "") {
                objSubmit.salesLevel = 'company_level';
                objSubmit.orgCode = $('#deptType1').val();
                objSubmit.orgName = $('#deptType1').find("option:selected")[0].label
            }
            if ($('#deptType1').val() == "" && $('#deptType2').val() == "" && $('#deptType3').val() == "") {
                objSubmit.salesLevel = 'diy_level';
            }
            console.log('objSubmit', objSubmit);
            var configSubmit = {
                url: prefix + "/add",
                type: "post",
                dataType: "json",
                data: objSubmit,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success:function (result) {
                    $.modal.closeLoading();
                    $.operate.successCallback(result);
                }
            }
            $.ajax(configSubmit)
            // $.operate.save(prefix + "/add", $('#form-configuration-add').serialize());
        }
    }

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

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

    /* 获取公司列表 */
    function getCompanyList(obj) {
        var config = {
            url: getCompanyListPrefix,
            type: "post",
            dataType: "json",
            data: obj,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                var companyList = result.dataList;
                if (companyList && companyList.length != 0){
                    var options = '';
                    if (obj.parType == 'diy_level'){
                        companyList.forEach(item=>{
                            options += "<option value='" + item.company_code + "'>" + item.company_name + "</option>"
                        })
                        $("#deptType1").append(options);
                        $("#deptType1").selectpicker('refresh');
                        $("#deptType1").selectpicker('render');
                    } else if (obj.parType == 'company_level') {
                        companyList.forEach(item=>{
                            options += "<option value='" + item.office_code + "'>" + item.office_name + "</option>"
                        })
                        $("#deptType2").append(options);
                        $("#deptType2").selectpicker('refresh');
                        $("#deptType2").selectpicker('render');
                    }else {
                        companyList.forEach(item=>{
                            options += "<option value='" + item.suboffice_code + "'>" + item.suboffice_name + "</option>"
                        })
                        $("#deptType3").append(options);
                        $("#deptType3").selectpicker('refresh');
                        $("#deptType3").selectpicker('render');
                    }
                }
            }
        };
        $.ajax(config)
    }
</script>
</body>
</html>