<link href="../CSS/bootstrap.min.css" rel="stylesheet" />
<link href="../CSS/bootstrap-icons.css" rel="stylesheet" />
<link href="../CSS/bootstrap-select.min.css" rel="stylesheet" />
<link href="../CSS/bootstrap-table.min.css" rel="stylesheet" />

<div class="container-fluid" style="margin-top: 30px;">
    <!--头部-->
    <div class="alert alert-info form-inline  shadow p-3  bg-white border border-info" role="alert">
        <div class="row">
            <div class="form-inline">
                <div class=" form-group mb-2 ml-5">
                    <label class="col-form-label" for="dateinput" style="margin-right: 12px;">开始日期</label>
                    <input class="form-control" type="date" id="dateinput" name="dateinput" value="2019-01-01" />
                </div>
                <div class=" form-group  mb-2  ml-5">
                    <label class="col-form-label" for="dateinputend" style="margin-right: 12px;">结束日期</label>
                    <input class="form-control" type="date" id="dateinputend" name="dateinputend" value="" />
                </div>
            </div>

            <div class="mb-2 ml-5">
                <select class="selectpickers" data-width="fit" data-style="btn-primary">
                </select>

                <button type="button" class="btn btn-success" id="query">查询</button>
            </div>
        </div>
    </div>
    <!--内容区-->
    <div class="table-responsive" style="border-radius: 7px; margin-top: -16px;">
        <table class="table table-bordered table-hover  table-sm" id="tab" style="text-align: center;">
        </table>
    </div>

</div>
<script src="../JS/jquery-1.10.2.min.js"></script>
<script src="../JS/bootstrap.bundle.min.js"></script>
<script src="../JS/poper.js"></script>
<script src="../JS/bootstrap-select.min.js"></script>
 <script src="../JS/bootstrap-table.min.js"></script>
<script src="../JS/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        endt();
        setSelectValue();
        $("#query").click(function () {
            $('#tab').bootstrapTable('destroy');
            getData();    
        });
    })

    function getData() {
        var pm = $('.selectpickers').val();
        $.ajax({
            type: "post",
            url: "../Ashx/orderList.ashx",
            data: { pma: pm, begtime: $('#dateinput').val(), endtime: $('#dateinputend').val()},
            success: function (d) {
                var jsonstr = JSON.parse(d);
                var seq = 0;
                //需要显示的数据
                var data = [];
                for (var i = 0; i < jsonstr.ulist.length; i++) {
                    var item = {
                        xh: (seq+1),
                        Date: jsonstr.ulist[i].Date,
                        Place: jsonstr.ulist[i].Place,
                        Machine: jsonstr.ulist[i].Machine,
                        Status: jsonstr.ulist[i].Status,
                        Matername: jsonstr.ulist[i].Matername,
                        Qty: jsonstr.ulist[i].Qty,
                        Note: jsonstr.ulist[i].Note,
                        Foperdate: jsonstr.ulist[i].Foperdate
                    };
                    data.push(item);
                    seq++;
                };
                //bootstrap table初始化数据
                $('#tab').bootstrapTable({
                    data: data,
                    classes: "table table-bordered table-striped", //table-striped表示隔行变色
                    showRefresh: false,                                    // 是否刷新按钮
                    sortStable: true,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber:1,
                    pageSize: 10,
                    paginationHAlign: "left",
                    paginationDetailHAlign: "right",
                    search: true, //******开启搜索框****//
                    searchOnEnterKey: false, //******回车后执行搜索****//
                    strictSearch: true,  //******完全匹配****//
                    trimOnSearch: true, //去除关键词空格//
                    formatLoadingMessage: function () {
                        return "请稍后，正在加载....";
                    },
                    columns: [{
                        field: 'xh',
                        title: '序号'
                    }, {
                        field: 'Date',
                        title: '日期'
                    }, {
                        field: 'Place',
                        title: '类型'
                    }, {
                        field: 'Machine',
                        title: '机号'
                    }, {
                        field: 'Status',
                        title: '状态'
                    }, {
                        field: 'Matername',
                        title: '物料'
                    }, {
                        field: 'Qty',
                        title: '数量'
                    }, {
                        field: 'Note',
                        title: '备注'
                    }, {
                        field: 'Foperdate',
                        title: '操作日期'
                    }]
                });
                //$('.pagination').html(jsonstr.page);
                //$('.text-muted').html("共" + jsonstr.c + "行数据");
            }
        });
    }
    function setSelectValue() {
        $.ajax({
            type: "post",
            url: "../Ashx/GetMapping.ashx",
            data: "",
            success: function (d) {
                $(".selectpickers").val("");
                var jsonstr1 = JSON.parse(d);
                for (var i = 0; i < jsonstr1.ulist.length; i++) {
                    $(".selectpickers").append("<option>" + (jsonstr1.ulist[i].Place + "_" + jsonstr1.ulist[i].Machine) + "</option>");
                }
                if (jsonstr1.ulist.length > 0) {
                    $('.selectpickers').val(jsonstr1.ulist[0].Place + "_" + jsonstr1.ulist[0].Machine);                     
                }
                $('.selectpickers').selectpicker('render');
            }
        });
    }
    function endt() {
        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + (month) + "-" + (day);
        $('#dateinputend').val(today);
    }
  
</script>