<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CardManage.aspx.cs" Inherits="SmartLogonServer.CardManage" %>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--必须的css引用-->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-table/bootstrap-table.min.css"  rel="stylesheet" />
    <link href="Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
     <link href="Content/fileinput/fileinput.css" rel="stylesheet" />
    <link href="Content/toastr/toastr.min.css"  rel="stylesheet" />
    <!-- <link href="Content/bootstrap-treeview.min.css"  rel="stylesheet" /> -->
    <!-- <link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css"  rel="stylesheet" />    -->
</head>
<body>
    <div class="panel-body" style="padding-bottom:0px;">
      
               <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <div class ="row">
                        <label class="control-label col-xs-1" for="txt_search_cardno">卡号</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_cardno"/>
                        </div>
                        <label class="control-label col-xs-1" for="txt_search_name">持卡人</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_name" />
                        </div>
                            </div>
                        <div class ="row">
                        <label class="control-label col-xs-1" for="txt_search_phone">电话</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_phone"/>
                        </div>
                        <label class="control-label col-xs-1" for="txt_search_group">所属组</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txt_search_group" />
                        </div>
   
                        <div class="col-xs-4" style="text-align:right;">
                            <button type="button" id="btn_clear"  class="btn">清空</button>
                            <button type="button" id="btn_query" class="btn btn-primary">查询</button>
                        </div>
                            </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <div class="col-md-4">
            <button id="btn_add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
                </div>
            <div class="col-md-4">
            <button id="btn_import" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-import" aria-hidden="true"></span>批量导入
            </button>
            </div>
        </div>

        <table id="tb_card"></table>
        </div>
        <!--
      <div class="row">
        <div class="col-sm-2">
          <h2>组别</h2>
          <div id="treeview1" class=""></div>
        </div>
        <div class="col-sm-10">
            <table id="tb_card"></table>
        </div>
    </div>
        -->

    <!--新增或者编辑的弹出框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">操作</h4>
                </div>
                <div  class="alert-info"><a href="YOWOReaderManageSetup.exe">读卡没反应，请点击下载读卡插件</a></div>
                <div class="modal-body">

                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">卡号</label>
                        <div class="col-xs-6">
                            <input type="text" name="edtAddCardNo" class="form-control" maxlength="10"  placeholder="0000000000"/>
                        </div>
                        <div class="col-xs-4">
                            <button type="button" name="btngetcardno" id="btngetcardno"  class="btn btn-primary"><span class="glyphicon glyphicon-play" aria-hidden="true"></span>读取卡号</button>
                            
                        </div>

                    </div>

                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">持卡人</label>
                        <div class="col-xs-10">
                            <input type="text" name="edtCardName" class="form-control" placeholder="姓名"/>
                        </div>
                    </div>
                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">电话</label>
                        <div class="col-xs-10">
                            <input type="text" name="edtCardPhone" class="form-control" placeholder="电话"/>
                        </div>
                    </div>
                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">证件</label>
                        <div class="col-xs-10">
                            <input type="text" name="edtCardID" class="form-control" placeholder="证件"/>
                        </div>
                    </div>
                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">地址</label>
                        <div class="col-xs-10">
                           <input type="text" name="edtCardAddr" class="form-control" placeholder="地址"/>
                        </div>
                    </div>
                      <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">域用户名</label>
                        <div class="col-xs-10">
                           <input type="text" name="edtDomainUser" class="form-control" placeholder="域用户名，选填"/>
                        </div>
                    </div>
                                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">域密码</label>
                        <div class="col-xs-10">
                           <input type="password" name="edtDomainPwd" class="form-control" placeholder="域密码，选填"/>
                           
                        </div>
                    </div>
                       <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">所属组</label>
                        <div class="col-xs-10">
     
                        <select name="selectgroup" id="selectgroup" class="form-control">
    
                            </select>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" id="sava-edit-btn" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
                
            </div>
        </div>
    </div>

 <!--导入的弹出框-->
    <div class="modal fade" id="ModalImport" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="ImportModalLabel">卡号批量导入</h4>
                </div>
            
                <div class="modal-body">
                        <div class=" alert-info">
                            <div class="col-xs-6">
                            <p ><a href="doc/cardimport.xls">智能卡导入excel模板下载</a></p>
                             </div>
                            <div class="col-xs-6">
                            <p ><a href="dGetCardNoFormat.zip">卡号格式工具下载</a></p>
                             </div>
                    </div>
                        <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">卡号格式类型</label>
                        <div class="col-xs-3">
     
                        <select name="selectcardnotype" id="selectcardnotype" class="form-control">
                            <option value="1">格式A</option>
                            <option value="2">格式B</option>
                            <option value="3">格式C</option>
                            <option value="4">格式D</option>
                            </select>

                        </div>
                       <label class="control-label col-xs-7">选择格式类型，请使用<a href="GetCardNoFormat.zip">卡号格式工具</a>判断excel的卡号类型，此处的选择与工具显示的保持一致</label>
                    </div>
                    <div class="row" style="padding:10px;">
                        <div class="file-loading">
                            <input type="file" id="excelfileimport" class="form-control form-control-lg"  />
                            
                        </div>
                        <div class="alert-warning">
                            <p >请选择Excel97-2003文件，如果不是，请另存为Excel97-2003文件，然后再上传</p>
                         </div>
                          <div class="alert-danger">
                            <p id="importstatus" >请选择excel文件，文件格式参考<a href="doc/cardimport.xls">excel导入模板</a>格式</p>
                         </div>
                    </div>



                 </div>
   
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>

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

        <!--必须的js文件-->
        <script src="Content/jquery-1.9.1.min.js"></script>
        <script src="Content/bootstrap/js/bootstrap.min.js"></script>
        <script src="Content/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
        <!--  <script src="Content/bootstrap-treeview.min.js"></script>  -->
        <script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="Content/fileinput/fileinput.js"></script>
        <script src="Content/fileinput/zh.js"></script>
        <!--   <script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script> -->
                <script src="Content/toastr/toastr.min.js"></script>
        <script src="Content/sweetalert/sweetalert.min.js"></script>

        <script src="Scripts/YOWOCloudRFIDReader.js"></script>
        <script src="Scripts/YOWOReaderBase.js"></script>
        <script type="text/javascript">
            //页面加载完成之后


            $(function () {

                rfidreader.onResult(function (resultdata) {
                    switch (resultdata.FunctionID) {

                        case 0:
                            if (resultdata.Result > 0) {
                                $("#myModal input[name='edtAddCardNo']").val(resultdata.strData);
                            }
                            else { alert(GetErrStr(resultdata.Result)); }
                            break;
                    }
                });

                $("#btngetcardno").click(function () {
                    rfidreader.Repeat = 0;
                    rfidreader.HaltAfterSuccess = 0;
                    rfidreader.RequestTypeACardNo(0, 0);
                });

                


                //表格的初始化
                $('#tb_card').bootstrapTable({
                    url: "Card.ashx",                         //直接从本地数据初始化表格
                    method: 'get',                      //请求方式（*）
                    //datatype: "json",
                    //contentType: "application/x-www-form-urlencoded",
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    idField: 'CardNo',
                    uniqueId: 'CardNo',
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: function (params) {
                        var pages = {
                            limit: params.pageSize, // 每页显示数量
                            offset: params.pageNumber, // SQL语句起始索引
                            cardno:  $("#txt_search_cardno").val(),
                            holdername: $("#txt_search_name").val(),
                            phone: $("#txt_search_phone").val(),
                            cardgroup: $("#txt_search_group").val()
                        }
       
                        return JSON.stringify(pages);
                    },                                  //传递参数（*）
                    queryParamsType: "",
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                      //初始化加载第一页，默认第一页
                    pageSize: 25,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列

                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    height: 800,
                    selectItemName: 'parentItem',
                    fixedColumns: true,
                    fixedNumber: 6,
                    showToggle: false,          //是否显示详细视图和列表视图的切换按钮
                    cardView: false,          //是否显示详细视图
                    showExport: true, //是否显示导出按钮
                    exportDataType: "all",
                    exportTypes: ['excel'], //导出文件类型
                    //注册加载子表的事件。注意下这里的三个参数！
                    onExpandRow: function (index, row, $detail) {
                        InitSubTable(index, row, $detail);
                    },
                    columns: [{
                        checkbox: false,
                        width: 20
                    }, {
                        field: 'CardNo',
                        title: '卡号',
                        width: 100

                    }, {
                        field: 'CardHolderName',
                        title: '持卡人',
                        width: 200

                    }, {
                        field: 'CardGroupName',
                        title: '组',
                        width: 200,
                        editable: {
                                type: 'text',
                                title: '换组'

                                }

                    }, {
                        field: 'CardHolderPhone',
                        title: '电话',
                        width: 200

                    }, {
                        field: 'CardHolderAddr',
                        title: '地址',
                        width: 300
                    }, {
                        field: 'CardHolderID',
                        title: '证件号码',
                        width: 200
                    },
                    {
                        field: 'CardAddTime',
                        title: '日期',
                        width: 100
                     }, {
     title: '操作',
     width: 200,
     formatter: function (value, row, index) {//这里的三个参数：value表示当前行当前列的值；row表示当前行的数据；index表示当前行的索引（从0开始）。
         var html = '<button type="button" onclick="editModel(' + row.CardNo + ')" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >编辑</button >&nbsp;&nbsp;' +
                    '<button type="button" onclick="deleteModel(' + row.CardNo + ')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >删除</button >';
         return html;
     }
 }],
                    onEditableSave: function (field, row, oldValue, $el) {
                       
                        //$.ajax({
                        //    type: "post",
                        //    url: "/Editable/Edit",
                        //    data: row,
                        //    dataType: 'JSON',
                        //    success: function (data, status) {
                        //        if (status == "success") {
                        //            alert('提交数据成功');
                        //        }
                        //    },
                        //    error: function () {
                        //        alert('编辑失败');
                        //    },
                        //    complete: function () {

                        //    }

                        //});
                    }
                });

                
                //新增事件
                $("#btn_add").on('click', function () {
                    $('#tb_card').bootstrapTable("resetView");
                    //弹出模态框
                    loadGroupdata("");
                    $("#myModal").modal();
                    //给弹出框里面的各个文本框赋值
                    $("#myModal input").val("");
                    $("#myModal input[name='edtAddCardNo']").prop("readonly", false);
                    $("#myModal button[name='btngetcardno']").prop("style", "display:block;");
                  
                });

                $("#excelfileimport").fileinput({
                    uploadUrl: "getupfile.ashx", //接受请求地址
                    uploadAsync: true, //默认异步上传
                    showUpload: true, //是否显示上传按钮,跟随文本框的那个
                    showRemove: true, //显示移除按钮,跟随文本框的那个
                    showCaption: true,//是否显示标题,就是那个文本框
                    showPreview: false, //是否显示预览,不写默认为true
                    dropZoneEnabled: true,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
                    uploadExtraData: function (previewId, index) {
                        var id = $('#selectcardnotype').val();
                        return { "cardformat": id };
                    },
                    //minImageWidth: 50, //图片的最小宽度
                    //minImageHeight: 50,//图片的最小高度
                    //maxImageWidth: 500,//图片的最大宽度
                    //maxImageHeight: 500,//图片的最大高度
                    //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    //allowedFileTypes: ['other'],//配置允许文件上传的类型
                    //allowedPreviewTypes: ['image'],//配置所有的被预览文件类型
                    //allowedPreviewMimeTypes: ['xls'],//控制被预览的所有mime类型
                    allowedFileExtensions: ['xls'],
                    msgInvalidFileExtension: '仅支持excel97-2003格式，后缀为xls',
                    language: 'zh'
                }).on("fileuploaded", function (event, data) { //异步上传成功后回调
                    
                    var s = "新增数量：" + data.response.CountNew + "<br>"
                         + "修改数量：" + data.response.CountEdit + "<br>"
                          + "失败数量：" + data.response.CountFail + "<br>"
                        + "错误信息：" + data.response.ImportError;
                    $("#importstatus").html(s);
                }).on("change", function () {
                    
                    var s = "文件选择后，请点击导入按钮导入";
                    $("#importstatus").html(s);
                }).on("filepreajax", function () {
                    
                    var s = "文件上传并导入中，等待导入结果，不要关闭此界面.<img width ='50' src='Images/pro.gif'>";
                    $("#importstatus").html(s);
                });

                $("#btn_import").on('click', function () {
                    //$('#tb_card').bootstrapTable("resetView");
                    //弹出模态框
                    $("#ModalImport").modal();
                    //给弹出框里面的各个文本框赋值
                   // $("#myModal input").val("");
                   // $("#myModal input[name='edtAddCardNo']").prop("readonly", false);
                   // $("#myModal button[name='btngetcardno']").prop("style", "display:block;");
                  
                 });

            });

           
            //编辑事件
            var editModel = function (id) {
                //根据当前行的id获取当前的行数据
                var row = $("#tb_card").bootstrapTable('getRowByUniqueId', id);
                //弹出模态框
                loadGroupdata(row.CardGroupID);
                $("#myModal").modal();
                //给弹出框里面的各个文本框赋值
                $("#myModal button[name='btngetcardno']").prop("style", "display:none;");
                $("#myModal input[name='edtAddCardNo']").prop("readonly", true);
                $("#myModal input[name='edtAddCardNo']").val(row.CardNo);
                $("#myModal input[name='edtCardName']").val(row.CardHolderName);
                $("#myModal input[name='edtCardPhone']").val(row.CardHolderPhone);
                $("#myModal input[name='edtCardID']").val(row.CardHolderID);
                $("#myModal input[name='edtCardAddr']").val(row.CardHolderAddr);
                $("#myModal input[name='edtDomainUser']").val(row.OtherName);
                $("#myModal input[name='edtDomainPwd']").val(row.OtherPwd);
                //$("#myModal select[name='selectgroup']").val(row.CardGroupID);
            }

            //删除事件
            var deleteModel = function (id) {
                
                swal({
                    title: "删除智能卡",
                    text: "是否删除卡号为" + id + "的智能卡?",
                    icon: "warning",
                    // buttons: true,
                    dangerMode: true,
                    buttons:{
                        cancel: '取消',
                        confirm: {
                            text: '删除',
                            value: 'confirm'
                        }
                    }
                })
    .then((value) => {
        if (value==='confirm') {

                    $.ajax({
                        type: "post",
                        url: "CardEdit.ashx",
                        data: {
                            'Edit': "delete",
                            'CardNo': id
     
                        },
                        dataType: 'JSON',
                        success: function (data, status) {
                            if (status == "success") {
                                if (data.result == true) {
                                    $("#tb_card").bootstrapTable("refresh", {
                                        silent: true //静态刷新
                                    });
                                    toastr.success('操作成功');
                                }
                                else {
                                    toastr.error('操作失败');
                                }
                            }
                        },
                        error: function () {
                            toastr.error('操作失败');
                        },
                        complete: function () {

                        }

                    });
            }
            });//then
            }

            
            $("#sava-edit-btn").click(function () {
                $('#myModal').modal('hide');
                
                $.ajax({
                    type: "post",
                    url: "CardEdit.ashx",
                    data: {
                        'Edit': $("#myModal input[name='edtAddCardNo']").prop("readonly"),
                'CardNo': $("#myModal input[name='edtAddCardNo']").val(),
                'CardHolderName': $("#myModal input[name='edtCardName']").val(),
                'CardHolderPhone': $("#myModal input[name='edtCardPhone']").val(),
                'CardHolderID': $("#myModal input[name='edtCardID']").val(),
                'CardHolderAddr': $("#myModal input[name='edtCardAddr']").val(),
                'OtherName': $("#myModal input[name='edtDomainUser']").val(),
                'OtherPwd': $("#myModal input[name='edtDomainPwd']").val(),
                'CardGroupID': $("#myModal select[name='selectgroup']").val()
                           },
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            if (data.result == true) {
                                $("#tb_card").bootstrapTable("refresh", {
                                    silent: true //静态刷新
                                });
                                toastr.success('操作成功');
                            }
                            else {
                                toastr.error('操作失败');
                            }
                        }
                    },
                    error: function () {
                        toastr.error('操作失败');
                    },
                    complete: function () {

                    }

                });


            })


            $("#btn_clear").click(function () {
                $("#txt_search_cardno").val("");
                $("#txt_search_name").val("");
                $("#txt_search_phone").val("");
                $("#txt_search_group").val("");
            })

            $("#btn_query").click(function () {
                $('#tb_card').bootstrapTable('refresh', {offset: 1});
            })

            function loadGroupdata(selectval) {
                $.ajax({
                    url : "CardGroup.ashx",    
                    type: 'GET',
                    data: {
                        'edit': 'loadgroup'
                    },
                    async : true,
                    datatype : 'JSON',
                    success : function(data) {
                        if (data) {
                            
                            var groupnames =[];
                            for(var i=0,len=data.length;i<len;i++){
                                var groupdata = data[i];
                                //拼接成多个<option><option/>
                                if (selectval == groupdata.ID)
                                    groupnames.push('<option value="' + groupdata.ID + '" selected>' + groupdata.CardGroupName + '</option>');
                                else
                                groupnames.push('<option value="' + groupdata.ID + '">' + groupdata.CardGroupName + '</option>')
                            }
                            $("#selectgroup").html(groupnames.join(' '));   
                        }
                    },
                    error: function () {
                        toastr.error("error");
                    }
                });
            }
            toastr.options.positionClass = 'toast-top-center';
        </script>
</body>
</html>
