guoyao-jiankang/application/admin/view/device/all_print.html

{extend name="common/common2" /}
<link rel="stylesheet" href="/static/bootstrap-multiselect-0.9.15/dist/css/bootstrap-multiselect.css">
{block name="main"}
<style>
    .printerbox{
        border:1px solid #ccc;
        margin: 0 auto;
        background-color: #fff;
        padding: 10px;
    }
    .printerbox img{
        width: 100%;
    }
    .printerbox p{
        padding-top: 10px;
    }
    .duoxuan span.multiselect-native-select{
        position:relative;
    }
    .duoxuan span.multiselect-native-select select {
        left: 50%;
        top: 30px;
        clip: rect(0px, 0px, 0px, 0px) !important;
        height: 1px !important;
        position: absolute !important;
        width: 1px !important;
        border-width: 0px !important;
        border-style: initial !important;
        border-color: initial !important;
        border-image: initial !important;
        margin: -1px -1px -1px -3px !important;
        overflow: hidden !important;
        padding: 0px !important;
    }
</style>
<div class="ibox">
    <div class="ibox-content">
        <div class="row">
            <div class="col-xs-4">
                <a href="javascript:;" class="btn btn-sm btn-primary" onclick="print()"><i class="glyphicon glyphicon-print"> 打印</i></a>
            </div>
            <div class="col-xs-8" style="text-align: right;">
                <form class="form-inline" action="{:url('allPrint')}" method="get" id="form-search">
                    <div class="input-group">
                        <select name="colNum" class="form-control">
                            <option value="4" {if $colNum== 4}selected{/if}>一行三列</option>
                            <option value="6" {if $colNum== 6}selected{/if}>一行两列</option>
                            <option value="3" {if $colNum== 3}selected{/if}>一行四列</option>
                        </select>
                    </div>

                    <div class="input-group duoxuan">
                        <select id="dids" name="ids[]" multiple="multiple">
                            {volist name="deviceList" id="v"}
                            <option value="{$v['id']}" {if condition="isset($ids) and in_array($v['id'],$ids)"}selected{/if}>{$v['title']}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn-sm btn-primary" title="搜索" type="button" id ="searchBtn" ><i class="fa fa-search"></i></button>
                        </span>&nbsp;
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>


<div id="printer" class="text-center">
   {foreach $list as $key => $value}
    <div class="col-xs-{$colNum} printerbox">
        <img src="{:url('Qrcode/qrcode')}?code={$value['qCode']}" alt="二维码">
        <p class="text-center">{$value['title']}</p>
    </div>
    {/foreach}
</div>
<div class="text-center">
    <br>

</div>
<script src="/static/jquery-1.11.3.min.js"></script>
<script src="/static/browser.js"></script>
<script src="/static/jquery.jqprint-0.3.js"></script>
<script src="/static/bootstrap-multiselect-0.9.15/dist/js/bootstrap-multiselect.js"></script>
<script>
    function print(){
        $("#printer").jqprint();
    }
</script>
<script>
    // var index = layer.load(1, {
    //     shade: [0.1,'#fff'] //0.1透明度的白色背景
    // });
    // document.onreadystatechange = function() 　　//当页面加载状态改变的时候执行function
    // {
    //     if(document.readyState == "complete") { 　　//当页面加载状态为完全结束时进入
    //         layer.closeAll();
    //         window.print();
    //     }
    // }

    $('#dids').multiselect({
        buttonText: function(options, select) {
            if (options.length === 0) {
                return '请选择设备';
            }
            else if (options.length > 2) {
                return '已选择'+options.length+'项';
            }
            else {
                var labels = [];
                options.each(function() {
                    if ($(this).attr('label') !== undefined) {
                        labels.push($(this).attr('label'));
                    }
                    else {
                        labels.push($(this).html());
                    }
                });
                return labels.join(', ') + '';
            }
        },
        filterPlaceholder: '搜索',
        includeSelectAllOption: true, // 显示全选
        selectAllText: '全选',
        maxHeight: 300,
        // enableClickableOptGroups: true, // 分组可选
        // enableCollapsibleOptGroups: true, // 分组可折叠
        enableFiltering: true, // 开启搜索
        buttonClass: 'btn btn-primary',
        onChange: function(option, checked) {
            console.log(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
        }
    });

    //搜索
    $('#searchBtn').on('click', function() {
        var that = this;
        var self = $("#form-search").serialize();
        var url = "{:url('Device/allPrint')}?"+self;
        window.location.href = url;
    });


</script>
{/block}