<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%> <c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set> <link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.css" /> <link rel="stylesheet" href="${contextPath}/static/assets/css/datepicker.css" /> <link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" /> <style> .hr-line-dashed { background-color: #ffffff; border-top: 1px dashed #e7eaec; color: #ffffff; height: 1px; margin: 20px 0; } </style> <div class="well well-sm"> <input type="text" class="input-sm" placeholder="搜索关键字" id="keyword" /> <input type="text" class="input-sm" placeholder="开始时间" id="startDate"/> <input type="text" class="input-sm" placeholder="结束时间" id="endDate"/> 订单状态 <select id="orderState"> <option value="">全部</option> <option value="0">待支付</option> <option value="1">待生效</option> <option value="2">已生效</option> <option value="3">已过期</option> </select> 是否有效 <select id="valid"> <option value="" >全部</option> <option value="-1">无效</option> <option value="0">有效</option> </select> 是否打官司 <select id="shushong"> <option value="" >全部</option> <option value="0">打官司</option> <option value="1">不打</option> </select> 是否申请费用 <select id="apply"> <option value="" >全部 </option> <option value="0">申请</option> <option value="1">不申请</option> </select> <button type="button" class="btn btn-purple btn-sm" id="searchd"> <span class="ace-icon fa fa-search icon-on-right bigger-110"></span> 查询 </button> </div> <div class="row"> <div class="col-xs-12"> <table id="grid-table"></table> <div id="grid-pager"></div> <script type="text/javascript"> var $path_base = "${contextPath}/static";//in Ace demo this will be used for editurl parameter </script> <!-- PAGE CONTENT ENDS --> </div> <!-- /.col --> </div> <!-- /.row --> <div id="modal-table" class="modal fade" tabindex="-1" data-backdrop="static"> <div class="modal-dialog" style="min-width: 650px;"> <div class="modal-content"> <div class="modal-header no-padding"> <div class="table-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span class="white">×</span> </button> 订单详情 </div> </div> <div class="modal-body" id="modal-table-body" style="max-height: 500px;overflow-y: scroll;"> </div> </div> </div> </div> <div id="modal-edit-order" class="modal fade" tabindex="-1" data-backdrop="static"> <div class="modal-dialog" style="min-width: 400px;"> <div class="modal-content"> <div class="modal-header no-padding"> <div class="table-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span class="white">×</span> </button> 平台建议 </div> </div> <div class="modal-body" id="modal-edit-order-body"> <form id="editOrderForm" class="form-horizontal"> <input type="hidden" name="orderId" id="mod-edit-orderId" /> <div class="form-group" id="mod-edit-fromName-div"> <label class="col-sm-2 control-label">借款人:</label> <div class="col-sm-10 text-left"> <input type="text" id="mod-edit-fromName" class="form-control" /> </div> </div> <div class="form-group" id="mod-edit-toName-div"> <label class="col-sm-2 control-label">出借人:</label> <div class="col-sm-10 text-left"> <input type="text" id="mod-edit-toName" class="form-control" /> </div> </div> <div class="form-group" id="mod-edit-serviceTerm-div"> <label class="col-sm-2 control-label">服务期限:</label> <div class="col-sm-10 text-left"> <select class="select form-control" id="mod-edit-serviceTerm"> <option value="6">6</option> <option value="12">12</option> <option value="18">18</option> <option value="24">24</option> <option value="30">30</option> <option value="36">36</option> </select> </div> </div> <div class="form-group" id="mod-edit-orderState-div"> <label class="col-sm-2 control-label">状态:</label> <div class="col-sm-10 text-left"> <select class="select form-control" id="mod-edit-orderState"> <option value="0">待付款</option> <option value="1">待生效</option> <option value="2">服务使用中</option> <option value="3">已过期</option> </select> </div> </div> <div class="form-group" id="mod-edit-remark-div"> <label class="col-sm-2 control-label">追加备注:</label> <div class="col-sm-10 text-left"> <input type="text" id="mod-edit-remark" class="form-control" /> </div> </div> <div class="form-group" id="mod-edit-valid-div"> <label class="col-sm-2 control-label">是否有效订单:</label> <div class="col-sm-10 text-left"> <select class="select form-control" id="mod-edit-valid"> <option value="">无</option> <option value="-1">无效</option> <option value="0">有效</option> </select> </div> </div> <div class="form-group" id="mod-edit-updateLog-div"> <label class="col-sm-2 control-label">修改记录:</label> <div class="col-sm-10 text-left" id="mod-edit-updateLog"> </div> </div> </form> </div> <div class="modal-footer no-margin-top"> <div class="text-center"> <button id="modal-edit-order-submit" type="button" class="btn btn-sm btn-primary"> <i class="ace-icon fa fa-floppy-o bigger-160"></i> 保存 </button> <button class="btn btn-sm" data-dismiss="modal"> <i class="ace-icon fa fa-share bigger-160"></i> 取消 </button> </div> </div> </div> </div> </div> <%@include file="/WEB-INF/page/back/auth.jsp"%> <!-- page specific plugin scripts --> <script type="text/javascript"> var hiddenModalBody = null; var myGrid = null; var scripts = [ null, "${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js", "${contextPath}/static/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js","${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js", "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js", "${contextPath}/static/assets/js/lazyload/jquery.lazyload.js", null ] $('.page-content-area').ace_ajax('loadScripts', scripts, function() { // inline scripts related to this page jQuery(function($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; // resize to fit page size $(window).on('resize.jqGrid', function() { $(grid_selector).jqGrid('setGridWidth', $(".page-content").width()); }); // resize on sidebar collapse/expand var parent_column = $(grid_selector).closest('[class*="col-"]'); $(document).on('settings.ace.jqGrid', function(ev, event_name, collapsed) { if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') { // setTimeout is for webkit only to give time for DOM changes and then redraw!!! setTimeout(function() { $(grid_selector).jqGrid('setGridWidth', parent_column.width()); }, 0); } }); $("#searchd").click(function(){ var keyword =$("#keyword").val(); var param = { 'keyword':keyword, 'startDate':$("#startDate").val(), 'endDate':$("#endDate").val(), 'orderState':$("#orderState").val(), 'valid':$("#valid").val(), 'shushong':$("#shushong").val(), 'apply':$("#apply").val() } myGrid.setGridParam({postData:param,url : '${contextPath}/sys/ssbOrder/getOrder'}).trigger('reloadGrid'); }); myGrid = jQuery(grid_selector).jqGrid({ subGrid : false, url : "${contextPath}/sys/ssbOrder/getOrder", datatype : "json", height : "auto", mtype: 'POST', colModel : [ { name : 'createDate',//1449829970000 index : 'createDate', label : '创建时间', width : 120, search : false, editable : false, formatter : formatCreateDate },{ name : 'orderId', index : 'orderId', label : '订单号', width : 120, search : false, editable : false, }, { name : 'userName', index : 'userName', label : '用户', width : 120, editable : false },{ name : 'userPhone', index : 'userPhone', label : '号码', width : 120, editable : false, }, { name : 'price', index :'price', label : '借款金额', width :120, editable : false, }, { name : 'loanTerm', index :'loanTerm', label : '借款期限', width :120, editable : false, }, { name : 'fwfbl', index :'fwfbl', label : '费率', width :120, editable : false, }, { name : 'fwf', index :'fwf', label : '服务价格', width :120, editable : false, }, { name : 'serviceTerm', index :'serviceTerm', label : '服务有效期(月)', width :120, editable : false, }, { name : 'remark', index :'remark', label : '备注', width :120, editable : false, }, { name : 'valid', index :'valid', label : '生效', hidden :true, editable : false, }, { name : 'servcieTerm', index :'servcieTerm', label : '服务周期', hidden :true, editable : false, }, { name : 'orderState', index :'orderState', label : '订单 ', hidden :true, editable : false, },{ name : 'id', index : '', label : '操作', width : 140, editable : false, search : false, sortable : false, fixed:true, formatter : optionFormatter }], //scroll : 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records sortname : "createDate", sortorder : "desc", viewrecords : true, rowNum : 10, rowList : [ 10, 20, 30 ], pager : pager_selector, altRows : true, //toppager : true, //multiselect : true, //multikey : "ctrlKey", //multiboxonly : true, loadComplete : function() { var table = this; setTimeout(function(){ styleCheckbox(table); updateActionIcons(table); updatePagerIcons(table); enableTooltips(table); }, 0); }, //caption : "用户管理列表", //autowidth : true, /** grouping : true, groupingView : { groupField : ['name'], groupDataSorted : true, plusicon : 'fa fa-chevron-down bigger-110', minusicon : 'fa fa-chevron-up bigger-110' }, */ }); function formatCommentFlag(cellvalue, options, rowObject){ if(cellvalue==1) return "已评论"; if(cellvalue==1) return "未评论"; return ""; } function formatCreateDate(cellvalue, options, rowObject){ var result = ""; if(cellvalue != null){ var d = new Date(cellvalue); result = d.getFullYear() + '-' + formatDate(d.getMonth() + 1) + "-" + formatDate(d.getDate()) + ' ' + formatDate(d.getHours()) + ":" + formatDate(d.getMinutes()) + ":" + formatDate(d.getSeconds()); } return result; } function formatDate(d){ var result = ""; if(d > 9){ result = d.toString(); }else{ result = '0' + d.toString(); } return result; } function formatPayType(cellvalue, options, rowObject){ var result = ""; if(cellvalue == 0){ result = "线下转账"; }else if(cellvalue == 1){ result = "微信"; }else if(cellvalue == 2){ result = "支付宝"; } return result; } function optionFormatter(cellvalue, options, cell) { var template = "<button data-toggle='modal' onclick='showdetail(\""+cell.orderId+"\")' class='btn btn-minier btn-yellow'><i class='ace-icon fa fa-hdd-o '></i>详细</button> | "; template += "<button data-toggle='modal' onclick='showEditOrder(\""+cell.orderId+"\")' class='btn btn-minier btn-yellow'><i class='ace-icon fa fa-hdd-o '></i>修改</button>"; return template; } $(window).triggerHandler('resize.jqGrid');// trigger window resize to make the grid get the correct size // enable search/filter toolbar // jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true}) // jQuery(grid_selector).filterToolbar({}); // switch element when editing inline function aceSwitch(cellvalue, options, cell) { setTimeout(function() { $(cell).find('input[type=checkbox]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>'); }, 0); } // navButtons jQuery(grid_selector).jqGrid('navGrid', pager_selector, { // navbar options edit : false, editicon : 'ace-icon fa fa-pencil blue', add : false, addicon : 'ace-icon fa fa-plus-circle purple', del : false, delicon : 'ace-icon fa fa-trash-o red', search : false, searchicon : 'ace-icon fa fa-search orange', refresh : true, refreshicon : 'ace-icon fa fa-refresh blue', view : false, viewicon : 'ace-icon fa fa-search-plus grey' }, { // edit record form // closeAfterEdit: true, // width: 700, recreateForm : true, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); }, errorTextFormat: function (response) { var result = eval('('+response.responseText+')'); return result.message; } }, { // new record form // width: 700, closeAfterAdd : true, recreateForm : true, viewPagerButtons : false, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); }, errorTextFormat: function (response) { var result = eval('('+response.responseText+')'); return result.message; } }, { // delete record form recreateForm : true, beforeShowForm : function(e) { var form = $(e[0]); if (form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); }, onClick : function(e) { // alert(1); } }, { // search form recreateForm : true, afterShowSearch : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') style_search_form(form); }, afterRedraw : function() { style_search_filters($(this)); }, multipleSearch : true /** * multipleGroup:true, showQuery: true */ }, { // view record form recreateForm : true, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') } }) function style_edit_form(form) { // form.find('input[name=statusCn]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>'); // don't wrap inside a label element, the checkbox value won't be submitted (POST'ed) // .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>'); // update buttons classes var buttons = form.next().find('.EditButton .fm-button'); buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();// ui-icon, s-icon buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>'); buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>') buttons = form.next().find('.navButton a'); buttons.find('.ui-icon').hide(); buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>'); buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>'); } function style_delete_form(form) { var buttons = form.next().find('.EditButton .fm-button'); buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();// ui-icon, s-icon buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>'); buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>') } function style_search_filters(form) { form.find('.delete-rule').val('X'); form.find('.add-rule').addClass('btn btn-xs btn-primary'); form.find('.add-group').addClass('btn btn-xs btn-success'); form.find('.delete-group').addClass('btn btn-xs btn-danger'); } function style_search_form(form) { var dialog = form.closest('.ui-jqdialog'); var buttons = dialog.find('.EditTable') buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet'); buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o'); buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search'); } function beforeDeleteCallback(e) { var form = $(e[0]); if (form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); } function beforeEditCallback(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); } // it causes some flicker when reloading or navigating grid // it may be possible to have some custom formatter to do this as the grid is being created to prevent this // or go back to default browser checkbox styles for the grid function styleCheckbox(table) { /** * $(table).find('input:checkbox').addClass('ace') .wrap('<label />') .after('<span class="lbl align-top" />') $('.ui-jqgrid-labels th[id*="_cb"]:first-child') * .find('input.cbox[type=checkbox]').addClass('ace') .wrap('<label />').after('<span class="lbl align-top" />'); */ } // unlike navButtons icons, action icons in rows seem to be hard-coded // you can change them like this in here if you want function updateActionIcons(table) { /** * var replacement = { 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue', 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red', 'ui-icon-disk' : 'ace-icon fa fa-check green', 'ui-icon-cancel' : * 'ace-icon fa fa-times red' }; $(table).find('.ui-pg-div span.ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement) * icon.attr('class', 'ui-icon '+replacement[$class]); }) */ } // replace icons with FontAwesome icons like above function updatePagerIcons(table) { var replacement = { 'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140', 'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140', 'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140', 'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140' }; $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() { var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]); }) } function enableTooltips(table) { $('.navtable .ui-pg-button').tooltip({ container : 'body' }); $(table).find('.ui-pg-div').tooltip({ container : 'body' }); } $(document).one('ajaxloadstart.page', function(e) { $(grid_selector).jqGrid('GridUnload'); $('.ui-jqdialog').remove(); }); $('#startDate').datepicker({ language: 'zh-CN', pickTime: false, todayBtn: true, autoclose: true, minView: '2', forceParse: false, format:"yyyy-mm-dd" }); $('#endDate').datepicker({ language: 'zh-CN', pickTime: false, todayBtn: true, autoclose: true, minView: '2', forceParse: false, format:"yyyy-mm-dd" }); $('#sendStart').datepicker({ language: 'zh-CN', pickTime: false, todayBtn: true, autoclose: true, minView: '2', forceParse: false, format:"yyyy-mm-dd" }); $('#sendEnd').datepicker({ language: 'zh-CN', pickTime: false, todayBtn: true, autoclose: true, minView: '2', forceParse: false, format:"yyyy-mm-dd" }); }); }); $(function(){ hiddenModalBody = '<div class="row">' + '<label class="col-sm-3 control-label">出借方:</label>' + '<label class="control-label text-left" id="mt-fromName"></label>' + '</div>' + '<div class="row">' + '<label class="col-sm-3 control-label">借款方:</label>' + '<label class="control-label text-left" id="mt-toName"></label>' + '</div>' + '<div class="row">' + '<label class="col-sm-3 control-label">付款时间:</label>' + '<label class="control-label text-left" id="mt-payDate"></label>' + '</div>' + '<div class="row">' + '<label class="col-sm-3 control-label">谁承担费用:</label>' + '<label class="control-label text-left" id="mt-feeBearDesc"></label>' + '</div>' + '<div class="row">' + '<label class="col-sm-3 control-label">支付方式:</label>' + '<label class="control-label text-left" id="mt-payChannelDesc"></label>' + '</div>' + '<div class="row">' + '<label class="col-sm-3 control-label">修改日志:</label>' + '<label class="control-label text-left" id="mt-updateLog"></label>' + '</div>' }); $('#modal-edit-order-submit').click(function(event) { editOrder(); }); function editOrder(){ var fromName = $('#mod-edit-fromName').val(); var toName = $('#mod-edit-toName').val(); if(fromName==null || fromName==""){ alert("出借人不能为空!") return; } if(toName==null || toName==""){ alert("借款人不能为空!") return; } $.post("${contextPath}/sys/ssbOrder/editInfo", { 'orderId' : $('#mod-edit-orderId').val(), 'fromName' : $('#mod-edit-fromName').val(), 'toName' : $('#mod-edit-toName').val(), 'serviceTerm' : $('#mod-edit-serviceTerm').val(), 'orderState' : $('#mod-edit-orderState').val(), 'remark' : $('#mod-edit-remark').val(), 'valid' : $('#mod-edit-valid').val() }, function(ret){ if(ret && ret.success){ $("#modal-edit-order").modal("toggle"); myGrid.trigger("reloadGrid"); }else{ alert(ret.message); } }); } function initModalTableBody(){ $('#modal-table-body').html(hiddenModalBody); } function showdetail(id){ $('#modal-table-body').html(''); $.post("${contextPath}/sys/ssbOrder/getOrderInfo", { 'orderId' : id }, function(ret){ if(ret.success){ initModalTableBody(); var keyObj = {"fromName":"mt-fromName","toName":"mt-toName","payDate":"mt-payDate","feeBearDesc":"mt-feeBearDesc","payChannelDesc":"mt-payChannelDesc","updateLog":"mt-updateLog"}; for(var key in keyObj){ $('#' + keyObj[key]).html(ret[key]); } $("#modal-table").modal("toggle"); }else{ alert(ret.message); } }); } function showEditOrder(orderId){ $.post("${contextPath}/sys/ssbOrder/getOrderInfo", { 'orderId' : orderId }, function(ret){ if(ret.success){ $('#mod-edit-orderId').val(ret.orderId); $('#mod-edit-fromName').val(ret.fromName); $('#mod-edit-toName').val(ret.toName); $('#mod-edit-serviceTerm').val(ret.serviceTerm); $('#mod-edit-orderState').val(ret.orderState); $('#mod-edit-valid').val(ret.valid==null?"":ret.valid); $('#mod-edit-remark').val(ret.remark); $('#mod-edit-updateLog').html(ret.updateLog==null?"":ret.updateLog); $("#modal-edit-order").modal("toggle"); }else{ alert(ret.message); } }); } function formatStr(str){ var result = ''; if(str != undefined && str != null){ result = str; } return result; } function isNotBlank(obj){ var result = true; if(obj == undefined || obj == null || obj == 'null' || obj.length < 1){ result = false; } return result; } </script>