<style>
    
    .g{
        color:green;
        font-weight:bold;
    }
    
    #result {
        margin-top:10px;
    }
</style>



<script type="text/javascript">
    $(document).ready(function(){ 

        $('#fm .btn-file').click(function(){
            $('#xFile').click();
        });  

        //2024-08-16
        var cs={{cs|safe}};
        switch (cs.length){
            case 0:
                //没有给瓶盖厂指定客户
                break;
            case 1:
                //瓶盖厂只有一个客户
                break;
            default:
                //瓶盖厂有多个客户 需要瓶盖厂指定是当前上传的数据属于哪家客户
                $('#customer').prepend('<option value="">------------</option>');
                $('#customer').val('');
                break;        
        };


        //204-24-07-22 错误数据明细
        $('#result').on('click','a',function(event){             
            event.preventDefault();  
            var url=$(this).attr('href');
            var title=$(this).text()+":";
            RefreshErrs(url,title);
        });
        
        function RefreshErrs(url,title){           
            
            $.ajax({
                url:url,
                success:function (res){
                    $('#errs-details').DataTable({
                        //"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        //"bLengthChange":true,
                        dom: 'Bfrtip',
                        autoWidth: false,
                        destroy:true,
                        buttons: [{extend:'excelHtml5',text:'导出到Excel'}],
                        language:lng,
                        columns:res.clmns,			
                        data:res.data,
                    });            
                        
                    $('#dlg-errs-details .modal-title').text(title);
                    $('#dlg-errs-details').modal("show");
                    
                }
            })  
        };


        $('#fm').on('change','#xFile',function(target){
            var f = this.files[0];
            var fn = f.name;
            var sz = Math.ceil(f.size/1024);   
            $('#fn').val(fn+" ("+sz+"KB)");
            if(sz>20*1024){
                $('#xFile').val('');
                $('#fn').val('');
                toastr.error(
                    "ZIP文件大小不能超过20M",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return  false;                
            };    
　　        var ext = fn.substring(fn.lastIndexOf(".")+1).toLowerCase();
　　        if(ext !="zip"){
                $('#xFile').val('');
                $('#fn').val('');
                toastr.error(
                    "请选择zip格式文件上传",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return  false; 　　　　       
　　        };
            return false;
        });    

        
        $('.btn-upload').click(function(){
            
            if ($.isEmpty($('#fn').val())){
                toastr.error(
                    "请先选择要上传的zip文件",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return false;
            };
            
            
            //2024-08-16
            if ($.isEmpty($('#customer').val())){
                toastr.error(
                    "请先指定要上传的数据属于哪家客户",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return false;
            };
            //2024-09-24
            $('#result').html('');

            var data=new FormData(); 
            var f = document.getElementById('xFile').files[0];                
            data.append("files",  f);
            data.append('password', $('#pwd').val());            
    
            //2024-08-16
            data.append('customer_id', $('#customer').val());
            data.append('pos',$('#pos').val());

            //2024-09-24
            data.append('is_twincode',$('#is_twincode').val());

            $.ajax({
                url: '/bottlecap/ajax/zip/upload/',
                type: 'POST',
                data:data,
                processData: false, //这个必须有，不然会报错
                contentType: false, //这个必须有，不然会报错
                success:function(d){                   
                    if(d.e){
                        toastr.error(
                            d.e,
                            "操作错误：",
                            {timeOut: 1200, positionClass: "toast-center-center"}
                        );    
                    }else{    
                        data=d.data;
                        var html='';
                        var errs=data.errs;
                        var trs='';
                        html='<div class="col-sm-2">txt文件个数:<span class="g">'+data.txt_cnt+'</span></div>'+
                            '<div class="col-sm-2">总行数:<span  class="g">'+data.tt_lns+'</span></div>'+
                            '<div class="col-sm-2">总记录数:<span  class="g">'+data.tt_cnt+'</span></div>'+
                            '<div class="col-sm-2">内码写入总数:<span class="g">'+data.tt_ok_cap+'</span></div>'+
                            '<div class="col-sm-2">外码写入总数:<span class="g">'+data.tt_ok_outter+'</span></div>'

                        if(errs.length>0){                            
                            for(var i in errs){
                                trs=trs+'<tr>'+
                                    '<td>'+errs[i].e_type+'</td>'+
                                    '<td>'+errs[i].qty+'</td>'+                                    
                                    '</tr>'
                            };
                            html=html+'<div class="clearfix"></div>'+
                                '<div class="col-sm-9" style="margin-top:10px;">'+
                                    '<div style="color:black;">以下数据上传失败：</div>'+
                                    '<div  class="table-responsive">'+
                                        '<table id="tb-errs" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">'+
                                        '<thead>'+
                                        '<th>原因</th><th>数量</th>'+
                                        '</thead>'+
                                    '<tbody>'+trs+'</tbody></table></div>'+
                                '</div>'
                        };
                        $('#result').html(html);                

                    }
                    return false;    
                },
                error:function(){
                    alert('网络通讯错误');
                    return false;
                }
            });   
        });

    })
</script>

<ol class="breadcrumb">
        <li>瓶盖码数据管理</li> 
        <li>绑定数据上传</li>            
</ol>


<div class="x_panel">
    <div id='fm'>                    
            <div style='font-weight:bold'>
                瓶盖码绑定数据上传流程及文件格式要求： 
            </div>
            <div style='color:black;margin-top:10px;'>
                <div>
                    1.txt文件数据,每行至少包含盖内码和盖外码<span class='g'>两列</span>,之间用<span class='g'>逗号</span>分隔.
                </div>
                <div>
                    2.zip文件内,只能有txt文件,<span class='g'>不能有文件夹</span>.
                </div>                
                <div>
                    3.为减少文件尺寸和网络流量,内外码都可以只写码值,前面的扫码链接 http://tjl.me/?t= 可不写入文本.
                </div>                
                <div>
                    4.做好的txt文本只有压缩成<span class='g'>zip格式</span>文件后才可以上传.
                </div>
                <div>
                    5.可以将多个txt文本压缩到zip文件内.
                </div>
                <div>
                    6.要上传的zip文件大小不能超过<span class='g'>20MB</span>.
                </div>  
            </div>
            
           
            <div style='margin-top:15px;' >                
                <label class="col-sm-1 control-label">客户名称:</label>                            
                <div class="col-sm-11 input-group">  
                    <div class='col-sm-5'>
                    <select id='customer' class='form-control'>
                        {% for c in cs %}
                        <option value='{{c.id}}'>{{c.name}}</option>
                        {% endfor %}
                    </select>             
                    </div>

                    <div class='col-sm-4'>
                    <select id='is_twincode' class='form-control'>                        
                        <option value='0'>内码和外码对应</option>
                        <option value='1'>两个外码对应</option>                        
                    </select> 
                    </div>
                </div>
           
                <label class="col-sm-1 control-label">zip文件名:</label>   
                <div class='col-sm-11'>
                <div class="col-sm-9 input-group">                    
                    <input id='fn' type="text" disabled="disabled" class="form-control" placeholder="请选择要上传的zip文件" />
                    <span class='input-group-btn'>
                        <button type="button" class='btn btn-primary btn-file'>
                            <span class='glyphicon glyphicon-folder-open'></span>
                        </button>
                    </span>     
                </div>                                        
                </div>
                              
                <label class="col-sm-1 control-label ">zip文件密码:</label>
                <div class="col-sm-11 input-group">
                    <div class='col-sm-9'>
                    <input type='text' id="pwd" class='form-control' placeholder="无密码" />
                    </div>
                </div> 
            </div> 
            <input type="file" id="xFile" accept=".zip"  style="position:absolute;clip:rect(0 0 0 0);" />    


            <div class='col-sm-11 col-sm-offset-1'>
                <div class="col-sm-9 input-group">                 
                    <button class='btn btn-primary btn-upload pull-right'>上传zip数据文件</button>
                </div>                
            </div>
    
    </div>          

    
   
     
    <div class='clearfix'></div>

    <div id='result' style='margin-top:15px;'></div>
    
</div>





<!--上传结果显示对话框-->
<div class="modal fade bs-example-modal-lg" id='dlg-errs-details' tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog  modal-lg" >
        <div class="modal-content"  >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title"></h4>
            </div>            
            <div class="modal-body">                
                <div style='width:100%'>
                    <table id='errs-details' class='table table-bordered table-condensed' style="width:100%">
                    <thead></thead>
                    <tbody></tbody>
                    </table>
                </div>
                <div class='clearfix'></div>
                <div></div>
            </div>            
        </div>
    </div>
</div>

