车辆派遣管理系统-12-未收款明细

今日完成任务：未收款明细功能及页面设计

核心代码：见下列插入的代码

遇到的问题：无

解决的方法：无

 

功能模块：未收款明细

需要角色：任意

数据加载：未收款派车单列表、用车单位

数据验证：非空验证

导出报表：excel文件

列表分页：AJAX分页查询

业务描述：

按所属用车单位统计未收款的派车单信息，可以生成报表

点击左侧“查询统计”下的“未收款明细”菜单，在右侧主题区域加载未收款明细子页面，并加载所有派车单的明细信息进行分页显示，选择不同的用车单位查询不同用车单位的未收款明细，查询后可以点击“生成报表”生成查询统计的指定用车单位的未收款明细excel信息。

视频演示地址：https://www.bilibili.com/video/BV1Fa4y1J7dc/

图文演示：

未收款明细信息列表

用车单位未收款明细生成报表

未收款明细子页面html代码：

<table id="table0" width='100%' cellspacing="0" border='0'>
	<tr align="left">
		<td style="height:32px;">
			<div class="cxtjDiv">
				<input type="text" name="cxtj" value="" readonly="readonly"/>
				<ul>
				</ul>
			</div>
			<b id="tjtb"><img src="img/down.png" width="10px"/></b>
			<span style="margin-top:4px;margin-bottom:4px;margin-left:10px;">
				<button onclick="tjcx()">统 计 查 询</button>
			</span>
			<span style="margin-top:4px;margin-bottom:4px;margin-left:10px;">
				<button onclick="scbb()">生 成 报 表</button>
			</span>
		</td>
	</tr>
</table>
<table class="table1" width='100%' cellspacing="0" border='0'>
	<tr align="left">
		<td width="12%">派车单号</td>
		<td width="8%">登记日期</td>
		<td width="8%">出车日期</td>
		<td width="7%">车牌号</td>
		<td width="5%">业务员</td>
		<td width="5%">联系人</td>
		<td width="8%">客户电话</td>
		<td width="6%">租车费</td>
		<td width="5%">实收</td>
		<td width="5%">缴费</td>
		<td width="5%">审核</td>
		<td width="5%">油费</td>
		<td width="5%">过桥费</td>
		<td width="5%">停车费</td>
		<td width="5%">车补贴</td>
		<td width="">行驶公里</td>
	</tr>
</table>
<table class="list" width='100%' cellspacing="0">
</table>
<p class="pageManager">
	<span><input type="hidden" name="rows" value="10"/></span>
	<b >
	<button onclick="first()">首页</button>
	<button onclick="prev()">上一页</button>
	<button onclick="next()">下一页</button>
	<button onclick="last()">尾页</button>
	&nbsp;
	第
	<select name="toNumPage" onchange="changeNumPage()">
		<option value="1">1</option>
	</select>
	页
	&nbsp;
	共
	<span></span>
	页
	</b>
</p>

<div class="updatePageDiv">
	<div class="updatePage">
		<h2>派车月结算信息<span><sup onclick="closeUpdatePageDiv()">×</sup></span></h2>
		<form name="pcddjForm" class="layui-form pcddjForm">
		  	<table class="list1" width='' cellpadding="0" cellspacing="0">
		  		<tr>
		  			<td> &nbsp;</td>
		  		</tr>
		  		<tr >
		  			<td class="layui-form-label">车牌号</td>
		  			<td>
		  				<input type="text" name="cphm" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">结算年份</td>
		  			<td>
		  				<input type="text" name="jsnf" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">结算月份</td>
		  			<td>
		  				<input type="text" name="jsyf" class="layui-input" readonly="readonly"/>
		  			</td>
		  		</tr>
		  		<tr>
		  			<td> &nbsp;</td>
		  		</tr>
		  		<tr>
		  			<td class="layui-form-label">总营业额</td>
		  			<td>
		  				<input type="text" name="zyye" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">总公里数</td>
		  			<td>
		  				<input type="text" name="zgls" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">总油费</td>
		  			<td>
		  				<input type="text" name="yf" class="layui-input" readonly="readonly"/>
		  			</td>
		  		</tr>
		  		<tr>
		  			<td> &nbsp;</td>
		  		</tr>
		  		<tr>
		  			<td class="layui-form-label">总过桥费</td>
		  			<td>
		  				<input type="text" name="gqf" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">总停车费</td>
		  			<td>
		  				<input type="text" name="tcf" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">总修理费</td>
		  			<td>
		  				<input type="text" name="xlf" class="layui-input" readonly="readonly"/>
		  			</td>
		  		</tr>
		  		<tr>
		  			<td> &nbsp;</td>
		  		</tr>
		  		<tr>
		  			<td class="layui-form-label">轮胎耗损费</td>
		  			<td>
		  				<input type="text" name="ltf" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">总工资费</td>
		  			<td>
		  				<input type="text" name="gz" class="layui-input" readonly="readonly"/>
		  			</td>
		  			<td class="layui-form-label">运营毛利润</td>
		  			<td>
		  				<input type="text" name="mlr" class="layui-input" readonly="readonly"/>
		  			</td>
		  		</tr>
		  		<tr>
		  			<td> &nbsp;</td>
		  		</tr>
		  		<tr>
		  			<td> &nbsp;</td>
		  		</tr>
		  	</table>
	  	</form>
		<script>
			layui.use('form', function() {
				var form = layui.form;
			});
		</script>
		<p>
			<span class="bc">确认结算</span>
			<span onclick="closeUpdatePageDiv()">取消</span>
		</p>
	</div>
</div>

未收款明细子页面js代码：

function loadPage(rows,page,cxtj){
	$.ajax({
		url:'wskmxList',
		type:'post',
		data:'rows='+rows+'&row='+((page-1)*rows)+'&cxtj='+cxtj,
		async:false,
		success:function(data){
			var arr = eval(data);
			if(arr.length==0){
				var cxtj = $("input[name='cxtj']").val();
				if(cxtj==''){
					$("#message").html("暂无未收款派车单信息！");
				}else{
					$("#message").html("暂无["+cxtj+"]未收款派车单信息！");
				}
    			var left = $("#message").width()/2;
				$("#message").css("left",$(window).width()/2-left);
				$("#message").css("top",270);
    			$("#message").fadeIn(1000);
    			messageOut();
				return;
			}
			var row="";
			$.each(arr,function(i,o){
				row +="<tr>";
				row +="<td width='12%'>"+o.pcdh+"</td>";
				row +="<td width='8%'>"+o.djrq+"</td>";
				row +="<td width='8%'>"+o.ccrq+"</td>";
				row +="<td width='7%'>"+o.cphm+"</td>";
				row +="<td width='5%'>"+o.ywyxm+"</td>";
				row +="<td width='5%'>"+o.lxr+"</td>";
				row +="<td width='8%'>"+o.lxdh+"</td>";
				row +="<td width='5%'>"+o.zcf+".00</td>";
				if(typeof o.sjsf !='number'){
					row +="<td width='5%'>0.00</td>";
				}else{
					row +="<td width='5%'>"+o.sjsf+".00</td>";
				}
				if(o.zt=='未缴费'||o.zt=='未缴清'){
					row +="<td width='5%' style='color:#f66;'>"+o.zt+"</td>";
				}else{
					row +="<td width='5%'>"+o.zt+"</td>";
				}
				if(o.sh=='未审核'){
					row +="<td width='5%' style='color:#f66;'>"+o.sh+"</td>";
				}else{
					row +="<td width='5%'>"+o.sh+"</td>";
				}
				if(typeof o.yf !='number'){
					row +="<td width='5%'>0.00</td>";
				}else{
					row +="<td width='5%'>"+o.yf+".00</td>";
				}
				if(typeof o.gqf !='number'){
					row +="<td width='5%'>0.00</td>";
				}else{
					row +="<td width='5%'>"+o.gqf+".00</td>";
				}
				if(typeof o.tcf !='number'){
					row +="<td width='5%'>0.00</td>";
				}else{
					row +="<td width='5%'>"+o.tcf+".00</td>";
				}
				if(typeof o.cbf !='number'){
					row +="<td width='5%'>0.00</td>";
				}else{
					row +="<td width='5%'>"+o.cbt+".00</td>";
				}
				if(typeof o.xsgls !='number'){
					row +="<td width=''>0</td>";
				}else{
					row +="<td width=''>"+o.xsgls+"</td>";
				}
				row +="</tr>";
			});
			$(".list").html(row);
			$.ajax({
				url:'pcdtjPages',
				type:'post',
				data:'rows='+$('.pageManager>span>input').val(),
				aysnc:false,
				success:function(data){
					$(".pageManager>b>span").html(data);
					var options = "";
					var n = parseInt(data);
					for(var i=1;i<=n;i++){
						if(page==i){
							options+="<option value='"+i+"' selected>"+i+"</option>";
						}else{
							options+="<option value='"+i+"'>"+i+"</option>";
						}
					}
					$(".pageManager select[name='toNumPage']").html(options);
				}
			});
		}
	});
}
$(function(){
	var rows = $('.pageManager>span>input').val();
	var page = $('.pageManager>b>select').val();
	loadPage(rows,page,'');
});
function changeNumPage(){
	var rows = $(".pageManager input[name='rows']").val();
	var page = $(".pageManager select[name='toNumPage']").val();
	var cxtj = $("input[name='cxtj']").val();
	loadPage(rows,page,cxtj);
}
function first(){
	var rows = $(".pageManager input[name='rows']").val();
	var page = 1;
	var cxtj = $("input[name='cxtj']").val();
	loadPage(rows,page,cxtj);
}
function last(){
	var rows = $(".pageManager input[name='rows']").val();
	var pages = $(".pageManager>b>span").html();
	var cxtj = $("input[name='cxtj']").val();
	loadPage(rows,pages,cxtj);
}
function prev(){
	var rows = $(".pageManager input[name='rows']").val();
	var page = parseInt($(".pageManager select[name='toNumPage']").val());
	if(page-1<1){
		$(".pageManager select[name='toNumPage']").children(":last").prop("selected","true");
		last();
	}else{
		$(".pageManager select[name='toNumPage']").children(":eq("+(page-1)+")").prop("selected","true");
		var cxtj = $("input[name='cxtj']").val();
		loadPage(rows,page-1,cxtj);
	}
}
function next(){
	var rows = $(".pageManager input[name='rows']").val();
	var page = parseInt($(".pageManager select[name='toNumPage']").val());
	var pages = parseInt($(".pageManager>b>span").html());
	if(page+1>pages){
		$(".pageManager select[name='toNumPage']").children(":eq(0)").prop("selected","true");
		first();
	}else{
		$(".pageManager select[name='toNumPage']").children(":eq("+(page+1)+")").prop("selected","true");
		var cxtj = $("input[name='cxtj']").val();
		loadPage(rows,page+1,cxtj);
	}
}
var bj=0;
$(function(){
	$.ajax({
		url:'pcdtjYcdw',
		async:false,
		success:function(data){
			var arr = eval(data);
			var lis="";
			$.each(arr,function(i,o){
				if(i==0){
					$(".cxtjDiv input[name='cxtj']").val(o.ycdw);
				}
				lis+="<li>"+o.ycdw+"</li>";
			});
			$(".cxtjDiv ul").html(lis);
		}
	});
	$(".cxtjDiv input[name='cxtj'] , #tjtb").click(function(){
		$(".cxtjDiv>ul").slideDown();
		$("#tjtb>img").prop("src","img/up.png");
		bj=1;
	});
	$(document).mousedown(function(){
		if(bj==1){
			var ulLeft = $(".cxtjDiv ul").offset().left;
			var ulTop = $(".cxtjDiv ul").offset().top;
			if(event.x>=ulLeft && event.x<=ulLeft+180 &&event.y>=ulTop&&event.y<=ulTop+116){
			}else{
				$(".cxtjDiv ul").slideUp();
				bj=0;
			}
		}
	});
	$(".cxtjDiv ul li").click(function(){
		var cxtj = $(this).html();
		$(".cxtjDiv input[name='cxtj']").val(cxtj);
		$("#tjtb img").attr("src","img/down.png"); 
		$(".cxtjDiv input[name='cxtj']").css("padding-left","15px").css("color","#069");
		bj=0;
		$(".cxtjDiv ul").slideUp();
	});
});
function tjcx(){
	var cxtj = $("input[name='cxtj']").val();
	var rows = $('.pageManager>span>input').val();
	var page = $('.pageManager>b>select').val();
	loadPage(rows,page,cxtj);
}
function scbb(){
	var cxtj = $("input[name='cxtj']").val();
	$.ajax({
		url:'wskmxList2',
		type:'post',
		data:'cxtj='+cxtj,
		async:false,
		success:function(data){
			var arrData = eval(data);
			if(arrData.length==0){
				var cxtj = $("input[name='cxtj']").val();
				if(cxtj==''){
					$("#message").html("暂无未收款派车单信息，不能生成报表！");
				}else{
					$("#message").html("暂无["+cxtj+"]未收款派车单信息，不能生成报表！");
				}
    			var left = $("#message").width()/2;
				$("#message").css("left",$(window).width()/2-left);
				$("#message").css("top",270);
    			$("#message").fadeIn(1000);
    			messageOut();
				return;
			}
			var ShowLabel = [{ "value": "派车单号" },
				{ "value": "登记日期" }, 
				{ "value": "业务员编号" }, 
				{ "value": "业务员姓名" }, 
				{ "value": "客户编号" }, 
				{ "value": "用车单位" }, 
				{ "value": "联系人" },
				{ "value": "联系电话" },
				{ "value": "车牌号码" },
				{ "value": "驾驶员编号" },
				{ "value": "驾驶员姓名" },
				{ "value": "出车日期" },
				{ "value": "出车时间" },
				{ "value": "支付方式" },
				{ "value": "目的地点" },
				{ "value": "租车费" },
				{ "value": "实收" },
				{ "value": "缴费" },
				{ "value": "审核" },
				{ "value": "油费" },
				{ "value": "过桥费" },
				{ "value": "修理费" },
				{ "value": "停车费" },
				{ "value": "车补贴" },
				{ "value": "行驶公里" },
				{ "value": "备注" }
				];
	        var excel = '<table>';
	        var row = "<tr>";
	        for (var i = 0, l = ShowLabel.length; i < l; i++) {
	            row += "<td style=\"color:blue\">" + ShowLabel[i].value + '</td>';
	        }
	        excel += row + "</tr>";
	        for (var i = 0; i < arrData.length; i++) {
	            var row = "<tr>";
                row += '<td style="mso-number-format:\\@;">' + arrData[i].pcdh + '</td>';
                row += '<td>' + arrData[i].djrq + '</td>';
                row += '<td>' + arrData[i].ywybh + '</td>';
                row += '<td>' + arrData[i].ywyxm + '</td>';
                row += '<td>' + arrData[i].khbh + '</td>';
                row += '<td>' + arrData[i].ycdw + '</td>';
                row += '<td>' + arrData[i].lxr + '</td>';
                row += '<td>' + arrData[i].lxdh + '</td>';
                row += '<td>' + arrData[i].cphm + '</td>';
                row += '<td>' + arrData[i].jsybh + '</td>';
                row += '<td>' + arrData[i].jsyxm + '</td>';
                row += '<td>' + arrData[i].ccrq + '</td>';
                row += '<td>' + arrData[i].ccsj + '</td>';
                row += '<td>' + arrData[i].zffs + '</td>';
                row += '<td>' + arrData[i].mddd + '</td>';
                row += '<td>' + arrData[i].zcf + '</td>';
                if(typeof arrData[i].sjsf !='number'){
                	row += '<td>0.00</td>';
                }else{
                	row += '<td>' + arrData[i].sjsf + '</td>';
                }
                row += '<td>' + arrData[i].zt + '</td>';
                row += '<td>' + arrData[i].sh + '</td>';
                if(typeof arrData[i].yf !='number'){
                	row += '<td>0.00</td>';
                }else{
                	row += '<td>' + arrData[i].yf + '.00</td>';
                }
                if(typeof arrData[i].gqf !='number'){
                	row += '<td>0.00</td>';
                }else{
                	row += '<td>' + arrData[i].gqf + '.00</td>';
                }
                if(typeof arrData[i].xlf !='number'){
                	row += '<td>0.00</td>';
                }else{
                	row += '<td>' + arrData[i].xlf + '.00</td>';
                }
                if(typeof arrData[i].tcf !='number'){
                	row += '<td>0.00</td>';
                }else{
                	row += '<td>' + arrData[i].tcf + '.00</td>';
                }
                if(typeof arrData[i].cbf !='number'){
                	row += '<td>0.00</td>';
                }else{
                	row += '<td>' + arrData[i].cbf + '.00</td>';
                }
                if(typeof arrData[i].xsgls !='number'){
                	row += '<td>0</td>';
                }else{
                	row += '<td>' + arrData[i].xsgls + '.00</td>';
                }
                row += '<td>' + arrData[i].bz + '</td>';
	            excel += row + "</tr>";
	        }
	        excel += "</table>";
	        var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
	        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
	        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
	        excelFile += '; charset=UTF-8">';
	        excelFile += "<head>";
	        excelFile += "<!--[if gte mso 9]>";
	        excelFile += "<xml>";
	        excelFile += "<x:ExcelWorkbook>";
	        excelFile += "<x:ExcelWorksheets>";
	        excelFile += "<x:ExcelWorksheet>";
	        excelFile += "<x:Name>";
	        excelFile += "{worksheet}";
	        excelFile += "</x:Name>";
	        excelFile += "<x:WorksheetOptions>";
	        excelFile += "<x:DisplayGridlines/>";
	        excelFile += "</x:WorksheetOptions>";
	        excelFile += "</x:ExcelWorksheet>";
	        excelFile += "</x:ExcelWorksheets>";
	        excelFile += "</x:ExcelWorkbook>";
	        excelFile += "</xml>";
	        excelFile += "<![endif]-->";
	        excelFile += "</head>";
	        excelFile += "<body>";
	        excelFile += excel;
	        excelFile += "</body>";
	        excelFile += "</html>";
	        var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
	        var link = document.createElement("a");
	        link.href = uri;
	        link.style = "visibility:hidden";
	        link.download = "未收款明细报表.xls";
	        document.body.appendChild(link);
	        link.click();
	        document.body.removeChild(link);
		}
	});
}

未收款明细子页面css代码：

.xg{
	color:#fff;
	border-radius:5px;
	border:none;
	line-height:25px;
	width:70px;
	background-color:#01AAED;
	outline:none;
	cursor:pointer;
}
#table0{
	background-color:#01AAED;
	color:#fff;
	font-size:12px;
	padding-left:30px;
	font-weight:bolder;
	
}
#table0 span{
	float:left;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
	line-height:20px;
}
#table0 button{
	outline:none;
	border:none;
	padding:3px 15px;
	background-color:#fff;
	color:#069;
	cursor:pointer;
	margin-left:15px;
	box-shadow:2px 2px 2px #666;
}
#table0 button:hover{
	color:#01AAED;
}
.table1{
	background-color:#eef;
	line-height:41px;
	font-size:12px;
	padding-left:25px;
	font-weight:bolder;
	color:#666;
}
.table1 tr td{
	padding-left:10px;
}
.list{
	font-size:12px;
	padding-left:25px;
	margin-top:15px;
	color:#666;
}
.list tr{
	background-color:#fff;
	height:50px;
	outline:3px solid #def;
}
.list tr:hover{
	background-color:#aef;
}
.list tr td{
	padding-left:10px;
}
.pageManager{
	margin-top:10px;
	margin-left:25px;
	background-color:#fff;
	padding:5px 10px;
	color:#999;
	box-shadow:2px 2px 3px #999;
}
.pageManager>span{
	font-size:9px;
}
.pageManager>span>input{
	width:40px;
	border:1px solid #ccc;
	outline:none;
	padding-left:5px;
	border-radius:5px;
	margin-left:5px;
}
.pageManager>b{
	font-weight:100;
	font-size:9px;
	margin-left:15px;
}
.pageManager>b>select{
	border:1px solid #ccc;
	outline:none;
	border-radius:5px;
}
.pageManager>b>button{
	border:1px solid #ccc;
	outline:none;
	background-color:#fff;
	color:#666;
	font-size:9px;
	padding:1px 2px;
	cursor:pointer;
}
.pageManager>b>button:hover{
	color:white;
	font-weight:bolder;
	background-color:#0DE;
}
#xz{
	box-shadow:2px 2px 2px #aaa;
	cursor:pointer;
}
.pcddjForm{
	border:1px dotted #ccc;
	margin-bottom:0px;
	background-color:#fff;
}
.list1{
	font-size:12px;
	margin-top:15px;
	color:#666;
}
.pcddjForm input[type='text']{
	height:30px;
	color:#666;
}
.pcddjForm input[type='number']{
	height:30px;
}
.cxtjDiv{
	float:left;
	overflow: auto;
	box-shadow:2px 2px 2px #666;
}
.cxtjDiv ul{
	display:none;
	list-style:none;
	outline:none;
	position:absolute;
	background-color:#fff;
	margin-top:5px;
	width:168px;
	border:1px solid #eee;
	padding-bottom:10px;
	box-shadow:2px 2px 2px #666;
	height:250px;
	overflow:scroll;
}
.cxtjDiv ul li{
	padding-left:18px;
	line-height:25px;
	border-bottom:1px dotted #eee;
	cursor:pointer;
	color:#777;
}
.cxtjDiv ul li:hover{
	background-color:#01AAED;
	color:#fff;
}
.cxtjDiv>input{
	padding-left:15px;
	line-height:22px;
	margin-top:4px;
	width:170px;
	border:none;
	outline:none;
	color:#777;
	font-size:8px;
	font-family:'宋体';
	cursor:pointer;
}
#tjtb{
	float:left;
	margin-left:-18px;
	display:block;
	width:16px;
	height:16px;
	color:red;
	margin-top:7px;
	padding-top:6px;
	cursor:pointer;
}
#table0 input[type='date']{
	color:#069;
	border:none;
	outline:none;
	height:20px;
}