ConstructionOperation/public/scHintBox.html

<!----------------------------------------------------------------------------------------------------------------------
    chenshilong, 2018-04-29
    自定义对话框，通用，用于替代系统对话框。系统自带的比较简陋，最严重的是一旦被浏览器屏蔽则无法再弹出。
    自定义对话框包括：
        1、只有一个按钮的信息提示框。
        2、有两个按钮的操作确认询问框。
        3、有三个按钮的多分支选择询问框。
        4、输入文本值对话框。
   使用示例：ConstructionCost/test/public/test_Box.html (直接运行该文件查看效果)
----------------------------------------------------------------------------------------------------------------------->
<div class="modal fade" id="hintBox_form" data-backdrop="static" style="z-index: 9999">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="hintBox_title" class="modal-title">标题</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="hintBox_btn_cross">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div id = "hintBox_caption" style="margin:5px 10px 10px 10px; max-height:300px; overflow: auto">提示明细</div>
                <div style="margin:5px 10px 5px 10px;">
                    <input id="hintBox_value" type="text" class="form-control" value="" />
                    <p id="hintBox_error" style="margin-top:7px; color:red; display:none;">“xxx”已存在!</p>
                </div>
            </div>

            <div class="modal-footer" style="justify-content: center">
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="hintBox_btn_yes">是</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="hintBox_btn_no">否</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="hintBox_btn_cancel">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="waitBox_form" style="z-index: 9999; cursor: wait"></div>

<script>
    const hintBox = {
        value: null,
        btnType: {yes: 1, yesNo: 2, yesNoCancel: 3},
        defalultEvent: function () {
            $.bootstrapLoading.end();
//            alert('defalultEvent');
            return;
        },
        init: function (){
            // 事件类
            $("#hintBox_value").unbind();
            $("#hintBox_btn_yes").unbind();
            $('#hintBox_btn_no').unbind();
            $('#hintBox_btn_cancel').unbind();

            $("#hintBox_value").keyup(
                function (event) {
                    hintBox.value = $('#hintBox_value').val();
                    if (event.keyCode === 13) {
                        $('#hintBox_btn_yes').click();
                        return false;
                    }
                }
            );
            $('#hintBox_btn_cancel').click(
                hintBox.defalultEvent
            );

            // 显示类
            $('#hintBox_caption').hide();
            $('#hintBox_value').hide();
            $('#hintBox_error').hide();
            $('#hintBox_btn_yes').hide();
            $('#hintBox_btn_no').hide();
            $('#hintBox_btn_cancel').hide();
            $('#hintBox_btn_cross').show();
        },
        font: function(str){
            return `<span style='color:red;font-weight:bold;font-size:15px'> ${str} </span>`;
        },
        fontRed: function(str){
            return `<span style='color:red;'> ${str} </span>`;
        },
        fontBlue: function(str){
            return `<span style='color:blue;'> ${str} </span>`;
        },
        error: function (err) {   // 注意：该方法只能用在valueBox()的doOK回调函数中。
            $('#hintBox_error').text(err);
            $('#hintBox_error').show(200);
            $("#hintBox_value").focus();
            $("#hintBox_value").select();
        },
        infoBox: function (title, caption, btnType,
                           doYes, doNo = hintBox.defalultEvent,
                           btnTextArr = null, showCrossBtn = true) {
            this.init();
            if (!showCrossBtn)
                $('#hintBox_btn_cross').hide();
            $('#hintBox_title').text(title);
            $('#hintBox_caption').html(caption);
            $('#hintBox_caption').show();

            switch (btnType) {
                case this.btnType.yes:
                    if (btnTextArr){
                        $('#hintBox_btn_yes').text(btnTextArr[0]);
                    }else
                        $('#hintBox_btn_yes').text('确定');

                    $('#hintBox_btn_yes').show();
                    break;
                case this.btnType.yesNo:
                    if (btnTextArr){
                        $('#hintBox_btn_yes').text(btnTextArr[0]);
                        $('#hintBox_btn_no').text(btnTextArr[1]);
                    }else{
                        $('#hintBox_btn_yes').text('是');
                        $('#hintBox_btn_no').text('否');
                    }

                    $('#hintBox_btn_yes').show();
                    $('#hintBox_btn_no').show();
                    break;
                case this.btnType.yesNoCancel:
                    if (btnTextArr){
                        $('#hintBox_btn_yes').text(btnTextArr[0]);
                        $('#hintBox_btn_no').text(btnTextArr[1]);
                        $('#hintBox_btn_cancel').text(btnTextArr[2]);
                    }else{
                        $('#hintBox_btn_yes').text('是');
                        $('#hintBox_btn_no').text('否');
                        $('#hintBox_btn_cancel').text('取消');
                    }

                    $('#hintBox_btn_yes').show();
                    $('#hintBox_btn_no').show();
                    $('#hintBox_btn_cancel').show();
                    break;
            }

            if (doYes){
                $('#hintBox_btn_yes').click(doYes);
            }

            if (doNo){
                $('#hintBox_btn_no').click(doNo);
            }

            $("#hintBox_form").modal('show');

        },
        valueBox: function (title, value, doOK,row) {
            if(row && row>0){//默认为input,如果有row说明是要多行输入，把input换成textarea.
                $('#hintBox_value').remove();
                $("#hintBox_error").before(` <textarea id="hintBox_value" class="form-control" rows="${row}"></textarea>`);
            }
            this.init();
            $('#hintBox_title').text(title);
            this.value = value;
            $('#hintBox_value').show();
            $('#hintBox_value').val(value);
            $("#hintBox_value").focus();
            $("#hintBox_value").select();

            $('#hintBox_btn_yes').text('确定');
            $('#hintBox_btn_yes').show();
            $('#hintBox_btn_yes').click(doOK);   // doOK不能给参数

            $('#hintBox_btn_no').text('取消');
            $('#hintBox_btn_no').show();
            $('#hintBox_btn_no').click(hintBox.defalultEvent);

            $("#hintBox_form").modal('show');
        },
        waitBox: function () {
            $(`#waitBox_form`).modal({'backdrop': false});
        },
        unWaitBox: function () {
            $('#waitBox_form').modal('hide');
        }
    };

    $('#hintBox_form').on('hide.bs.modal', function() {
        if($.bootstrapLoading) $.bootstrapLoading.end();
        return;
    });
</script>