orderOut.jsp 6.9 KB
<%@ page import="com.myproject.util.StorageConstants" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<style type="text/css">

    .icon-cursor-move{
        margin-right:10px;
    }

    .panel-body {
        position: relative;
        padding: 15px;
        height: 300px;
        overflow-y: scroll;
    }

    .panel-move {
        border-color: #055cfb;
        margin-left:10px;
    }

</style>

<link href="${ctx}/scripts/lobibox/css/lobibox.min.css?id=2" rel="stylesheet" type="text/css"/>

<div class="row">
    <div class="portlet box yellow">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i>需求单出库
            </div>
            <div class="tools">
            </div>
        </div>
        <div class="portlet-body">
            <div class="panel-group accordion" id="executing">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#executing" href="#executingOrder">
                                <i class="icon-cursor-move"></i>
                                [首盘] 需求单: 80 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                            </a>
                        </h4>
                    </div>
                    <div id="executingOrder" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>厂别</th>
                                    <th>料站</th>
                                    <th>数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-11</td>
                                    <td>2006</td>
                                </tr>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-12</td>
                                    <td>1000</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<c:set var="scripts" scope="request">
    <script src="${ctx}/scripts/Sortable.min.js"></script>
    <script type="text/javascript">
        endFunc = function(evt){
            var targetSort = "";
            $(evt.to).find(".panel-collapse").each(function(){
                targetSort = targetSort + $(this).attr('id') + ",";
            });
            alert(targetSort);
        }

        function flushOutInfos(){
            $.post("${ctx}/service/store/qisda/outInfoList", {}, function (data) {

                var html = '';
                for(var i in data){
                    var outInfo = data[i];
                    var index = parseInt(i) + 1;
                    var outItems = data[i].outItems;
                    var tdHtml = '';
                    for(var j in outItems){
                        var outItem = outItems[j];
                        tdHtml = tdHtml +
                                '<tr>' +
                                '<td>'+outItem.slotlocation+'</td>' +
                                '<td>'+outItem.slotStr+'</td>' +
                                '<td>'+outItem.pn+'</td>' +
                                '<td>'+outItem.facility+'</td>' +
                                '<td>'+outItem.reelcut+'</td>' +
                                '<td>'+outItem.qty+'</td>' +
                                '<td>'+outItem.realLockQty+'</td>' +
                                '<td>'+outItem.outQty+'</td>' +
                                '<td>'+outItem.sendQty+'</td>' +
                                '</tr>';
                     }
                    var tableHtml = '<table class="table table-striped table-bordered table-hover">' +
                            '<thead><tr><th>料站序号</th><th>料站</th><th>料号</th><th>厂别</th><th>分盘料</th><th>需求数量</th><th>绑定数量</th><th>出库数量</th><th>发料数量</th></tr></thead>' +
                            '<tbody>' +
                            tdHtml +
                            '</tbody></table>';

                    var mdate = new Date(outInfo.mdate).Format("yyyy-MM-dd hh:mm:ss");
                    var sdate = new Date(outInfo.sdate).Format("yyyy-MM-dd hh:mm:ss");
                    var infoHtml = '<div class="panel panel-default" id='+data[i].hSerial+'>' +
                            '<div class="panel-heading">' +
                            '<h4 class="panel-title">' +
                            '<a class="accordion-toggle" data-toggle="collapse" data-parent="#executing" href="#'+data[i].hSerial+'">' +
                            '<i class="icon-cursor-move"></i>' +
                            ' ['+data[i].action+'] 需求单:'+ data[i].hSerial+' 工单: ' + data[i].so +' 备料单: ' + data[i].refno + '[' + data[i].sendStatus +']' +
                            '<span class="right">建议时间: '+sdate+'</span>' +
                            '</a></h4></div>' +
                            '<div id="'+data[i].hSerial+'" class="panel-collapse collapse">' +
                            '<div class="panel-body">' +
                            '<ul class="list-inline">' +
                            '<li><i class="fa fa-tasks"></i>工单: '+data[i].so+'</li>' +
                            '<li><i class="fa fa-briefcase"></i>备料单: '+data[i].refno+'</li>' +
                            '<li><i class="fa fa-calendar"></i>建议时间:'+sdate+'</li>' +
                            '<li><i class="fa fa-star"></i>必须出仓日期:'+mdate+'</li>' +
                            '</ul>' +
                            tableHtml +
                            '</div></div></div></div>';
                    html = html + infoHtml;
                }
                $("#executing").html(html);

            });
        }
        setInterval(function(){
            flushOutInfos();
        }, 1000);


//        var dragOptions = {
//            animation: 150,
//            handle: '.panel-heading',
//            ghostClass: 'panel-move',
//            onEnd:endFunc
//        };
//        var el = document.getElementById('accordion3');
//        var sortable = Sortable.create(el,dragOptions);
    </script>
</c:set>