qxp
/
suishenbang-oneportal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
							<!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" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-configuration-edit" th:object="${alertConfiguration}">
            <input name="alertId" th:field="*{alertId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">弹框类型：</label>
                <div class="col-sm-8">
                    <select style="margin-bottom: 10px;" name="alertType" id="alertType" class="form-control m-b"
                            th:with="type=${@dict.getType('alert_configuration_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                th:field="*{alertType}"></option>
                    </select>
                    <span style="font-size: 12px;color: #999999;">切换类型后需要重新配置信息</span>
                </div>
            </div>
            <div class="form-group" id="alertImageItem">
                <label class="col-sm-3 control-label">弹框图片：</label>
                <div class="col-sm-8">
                    <div id="div-bgUrl"></div>
                    <div class="action">
                        <input type="file" class="" name="avatar" id="avatar" accept="image/*" value="上传"/>
                    </div>
                    <span style="font-size: 12px;color: #999999">建议图片宽度260px,高度300px</span>
                </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">[[*{alertContent}]]</textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">弹框开始时间：</label>
                <div class="col-sm-8">
                    <input id="alertStartTime" name="alertStartTime" th:value="${#dates.format(alertConfiguration.alertStartTime, 'yyyy-MM-dd HH:mm')}" class="form-control" type="datetime-local">
                    <!--<div class="input-group date">-->
                        <!--<span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
                        <!--<input id="alertStartTime" name="alertStartTime" th:value="${#dates.format(alertConfiguration.alertStartTime, 'yyyy-MM-dd hh:mm')}" class="form-control" placeholder="yyyy-MM-dd hh:mm" type="text">-->
                    <!--</div>-->
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">弹框结束时间：</label>
                <div class="col-sm-8">
                    <input id="alertEndTime" name="alertEndTime" th:value="${#dates.format(alertConfiguration.alertEndTime, 'yyyy-MM-dd HH:mm')}" class="form-control" type="datetime-local">
                    <!--<div class="input-group date">-->
                        <!--<span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
                        <!--<input id="alertEndTime" name="alertEndTime" th:value="${#dates.format(alertConfiguration.alertEndTime, 'yyyy-MM-dd hh:mm')}" class="form-control" placeholder="yyyy-MM-dd hh:mm" type="text">-->
                    <!--</div>-->
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">弹框每日可弹次数：</label>
                <div class="col-sm-8">
                    <input name="alertNum" th:field="*{alertNum}" class="form-control" type="number">
                </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_alert_permission')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{userType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <input name="alertId" th:field="*{alertId}" style="display: none;">
                <input name="salesLevel" th:field="*{salesLevel}" style="display: none;">
                <input name="orgCode" th:field="*{orgCode}" style="display: none;">
                <input name="orgName" th:field="*{orgName}" style="display: none;">
                <input name="userTypeStr" th:field="*{userType}" style="display: none;">
                <input name="userTypeStr" th:field="*{photoUrl}" style="display: none;">
            </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:field="*{alertStatus}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-select-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 photoUrl;
        var options = {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: ctx + 'img/profile.jpg'
        }

        $(document).ready(function () {
            var formArray = $('#form-configuration-edit').serializeArray();
            var formData = {};
            $(formArray ).each(function(index, obj){
                formData[obj.name] = obj.value;
            });
            console.log(1,formData);
            if (formData.alertType == '0'){
                $("#alertImageItem").hide();
            } else {
                $("#alertContentItem").hide();
                $("#div-bgUrl").html("<img src='" + formData.photoUrl + "' style='width:300px;margin-bottom: 5px;'>");
            }
            $("#userType").selectpicker('val',formData.userType);
            if (formData.salesLevel == 'company_level'){
                var objhx1 = {
                    parType: 'company_level',
                    parValue: formData.orgCode
                }
                var confighuixian1 = {
                    url: getCompanyListPrefix,
                    type: "post",
                    dataType: "json",
                    data: objhx1,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                    },
                    success: function(result) {
                        $.modal.closeLoading();
                        var objList = {
                            parType: 'diy_level',
                            parValue: ''
                        }
                        getCompanyList(objList,result.levelInfo.company_code);
                        var objList1 = {
                            parType: 'company_level',
                            parValue: result.levelInfo.company_code
                        }
                        getCompanyList(objList1,"");
                    }
                }
                $.ajax(confighuixian1)
            }else if (formData.salesLevel == 'office_level') {
                var objhx1 = {
                    parType: 'office_level',
                    parValue: formData.orgCode
                }
                var confighuixian1 = {
                    url: getCompanyListPrefix,
                    type: "post",
                    dataType: "json",
                    data: objhx1,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                    },
                    success: function(result) {
                        $.modal.closeLoading();
                        var objList = {
                            parType: 'diy_level',
                            parValue: ''
                        }
                        getCompanyList(objList,result.levelInfo.company_code);
                        var objList1 = {
                            parType: 'company_level',
                            parValue: result.levelInfo.company_code
                        }
                        getCompanyList(objList1,result.levelInfo.office_code);
                        var objList2 = {
                            parType: 'office_level',
                            parValue: result.levelInfo.office_code
                        }
                        getCompanyList(objList2,"");
                    }
                }
                $.ajax(confighuixian1)
            }else if (formData.salesLevel == 'suboffice_level') {
                var objhx1 = {
                    parType: 'suboffice_level',
                    parValue: formData.orgCode
                }
                var confighuixian1 = {
                    url: getCompanyListPrefix,
                    type: "post",
                    dataType: "json",
                    data: objhx1,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                    },
                    success: function(result) {
                        $.modal.closeLoading();
                        var objList = {
                            parType: 'diy_level',
                            parValue: ''
                        }
                        getCompanyList(objList,result.levelInfo.company_code);
                        var objList1 = {
                            parType: 'company_level',
                            parValue: result.levelInfo.company_code
                        }
                        getCompanyList(objList1,result.levelInfo.office_code);
                        var objList2 = {
                            parType: 'office_level',
                            parValue: result.levelInfo.office_code
                        }
                        getCompanyList(objList2,result.levelInfo.suboffice_code);
                    }
                }
                $.ajax(confighuixian1)
            }else {
                var objList = {
                    parType: "diy_level",
                    parValue: ""
                }
                getCompanyList(objList,"");
            }
        })

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

        function submitHandler() {
            if ($.validate.form()) {
                var alertId = $('#alertId').val();
                var alertType = $('#alertType').val();
                var contentVal = $('#alertContent').val();
                var startTime = $('#alertStartTime').val().replace('T',' ');
                var endTime = $('#alertEndTime').val().replace('T',' ');
                var alertNum = $('#alertNum').val();
                var userType = $('#userType').val();
                if (new Date(startTime).getTime() - new Date(endTime).getTime() >= 0){
                    $.modal.alertWarning("弹框结束时间不能小于开始时间");
                }else {
                    var objSubmit = {
                        alertId:alertId,
                        alertType:alertType,
                        photoUrl:photoUrl,
                        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 + "/edit",
                        type: "post",
                        dataType: "json",
                        data: objSubmit,
                        beforeSend: function () {
                            $.modal.loading("正在处理中，请稍后...");
                        },
                        success:function (result) {
                            $.modal.closeLoading();
                            $.operate.successCallback(result);
                        }
                    }
                    $.ajax(configSubmit)
                }
            }
            // $.operate.save(prefix + "/edit", $('#form-configuration-edit').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
        // });

        $('#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后缀的文件。");
                }
            }
            reader.readAsDataURL(this.files[0]);
            upBg(this.files[0]);
        })

        $("#alertStartTime").on('change',function () {
            if ($(this).val() != -1){
                var startTimeChange1 = $('#alertStartTime').val().replace('T',' ');
                var endTimeChange1 = $('#alertEndTime').val().replace('T',' ');
                if (new Date(startTimeChange1).getTime() - new Date(endTimeChange1).getTime() >= 0){
                    $.modal.alertWarning("弹框结束时间不能小于开始时间");
                }
            }
        })

        $("#alertEndTime").on('change',function () {
            if ($(this).val() != -1){
                var startTimeChange2 = $('#alertStartTime').val().replace('T',' ');
                var endTimeChange2 = $('#alertEndTime').val().replace('T',' ');
                if (new Date(startTimeChange2).getTime() - new Date(endTimeChange2).getTime() >= 0){
                    $.modal.alertWarning("弹框结束时间不能小于开始时间");
                }
            }
        })

        $("#alertType").on('change',function () {
            if ($(this).val() != -1){
                if ($(this).val() == 0){
                    $("#alertContentItem").show();
                    $("#alertImageItem").hide();
                    $("#div-bgUrl").html("<div></div>");
                    photoUrl = "";
                }
                if ($(this).val() == 1){
                    $("#alertImageItem").show();
                    $("#alertContentItem").hide();
                    $('#alertContent').val('');
                }
            }
        })

        $("#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,"");
        })

        function upBg(imgFile) {
            var formdata = new FormData();
            formdata.append("file", imgFile);
            $.ajax({
                url: ctx + "common/upload",
                data: formdata,
                type: "post",
                processData: false,
                contentType: false,
                success: function (result) {
                    if (result.code == 0) {
                        photoUrl = result.data.url;
                        $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width:300px;margin-bottom: 5px;'>");
                    } else {
                        $.modal.alertWarning(result.msg);
                    }
                }
            })
        }

        /* 获取公司列表 */
        function getCompanyList(obj,chooseId) {
            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=>{
                                if(item.company_code == chooseId){
                                    options += "<option value='" + item.company_code + "' selected='selected'>" + item.company_name + "</option>"
                                }else{
                                    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=>{
                                if(item.office_code == chooseId){
                                    options += "<option value='" + item.office_code + "' selected='selected'>" + item.office_name + "</option>"
                                }else{
                                    options += "<option value='" + item.office_code + "'>" + item.office_name + "</option>"
                                }
                            })
                            $("#deptType2").append(options);
                            $("#deptType2").selectpicker('refresh');
                            $("#deptType2").selectpicker('render');
                        }else {
                            companyList.forEach(item=>{
                                if(item.suboffice_code == chooseId){
                                    options += "<option value='" + item.suboffice_code + "' selected='selected'>" + item.suboffice_name + "</option>"
                                }else{
                                    options += "<option value='" + item.suboffice_code + "'>" + item.suboffice_name + "</option>"
                                }
                            })
                            $("#deptType3").append(options);
                            $("#deptType3").selectpicker('refresh');
                            $("#deptType3").selectpicker('render');
                        }
                    }
                }
            };
            $.ajax(config)
        }
    </script>
</body>
</html>