Advertisement

车辆派遣管理系统-06-车辆信息管理

阅读量：

今日完成任务：车辆信息管理及页面设计

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

遇到的问题：无

解决的方法：无

功能模块：车辆信息管理

需要角色：管理员（其他角色不能操作）

数据加载：车辆信息列表

数据验证：非空验证、是否存在同名车牌验证

列表分页：AJAX分页查询

业务描述：

公司欲调配车辆必须先登记车辆相关信息,只有配备足够的调配资源才可以实施派车管理

管理员登录以后可对车辆信息进行管理，在登录界面中找到档案管理模块并打开车辆信息管理选项，在右侧内容区加载对应车辆信息列表，并通过AJAX技术实时加载所有相关资料。
右键单击列表顶端显示加号图标以调出新增窗口，在新增窗口内完成各项车辆信息记录设置。
通过右键点击列表中的修改按钮来更新相应记录。
无论添加还是修改都会验证车牌号码是否已存在, 不能重复添加。
确认后即可删除对应记录。

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

图文演示：

车辆信息列表

车辆信息登记

车辆信息修改

车辆信息删除

车辆信息管理子页面HTML代码：

复制代码 
 <table class="table1" width='100%' cellspacing="0" border='0'>

    
 	<tr align="left">
    
 		<td width="5%"><img id="xz" src="img/xz1.jpg" width="25px"/></td>
    
 		<td width="8%">车辆编号</td>
    
 		<td width="12%">车牌号码</td>
    
 		<td width="15%">登记时间</td>
    
 		<td width="10%">座位数</td>
    
 		<td width="12%">厂牌型号</td>
    
 		<td width="12%">车架号码</td>
    
 		<td width="8%">状态</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>
    
 		<option value="2">2</option>
    
 		<option value="3">3</option>
    
 	</select>
    
 	页
    
 	&nbsp;
    
 	共
    
 	<span></span>
    
 	页
    
 	</b>
    
 </p>
    
 <div class="addPageDiv">
    
 	<div class="addPage">
    
 		<h2>登记车辆信息<span><sup onclick="closeAddPageDiv()">×</sup></span></h2>
    
 		<form>
    
 		<table>
    
 			<tr>
    
 				<td align="right">车牌号码：</td>
    
 				<td>
    
 		  			<input type="text" name="cphm" placeholder="例：豫K55555"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">座位数：</td>
    
 				<td>
    
 		  			<input type="text" name="zws"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">厂牌型号：</td>
    
 				<td>
    
 		  			<input type="text" name="cpxh"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">车架号码：</td>
    
 				<td>
    
 		  			<input type="text" name="cjhm"/><br/>
    
 				</td>
    
 			</tr>
    
 		</table>
    
   		</form>
    
 		<p>
    
 			<span class="bc" onclick="add()">保存</span>
    
 			<span onclick="closeAddPageDiv()">取消</span>
    
 		</p>
    
 	</div>
    
 </div>
    
 <div class="updatePageDiv">
    
 	<div class="updatePage">
    
 		<h2>更新车辆信息<span><sup onclick="closeUpdatePageDiv()">×</sup></span></h2>
    
 		<form>
    
 		<table>
    
 			<tr>
    
 				<td align="right">车牌号码：</td>
    
 				<td>
    
 		  			<input type="hidden" name="clbh"/>
    
 		  			<input type="text" name="cphm"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">登记时间：</td>
    
 				<td>
    
 		  			<input type="text" name="djsj" readonly="readonly"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">座位数：</td>
    
 				<td>
    
 		  			<input type="text" name="zws"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">厂牌型号：</td>
    
 				<td>
    
 		  			<input type="text" name="cpxh"/><br/>
    
 				</td>
    
 			</tr>
    
 			<tr>
    
 				<td align="right">车架号码：</td>
    
 				<td>
    
 		  			<input type="text" name="cjhm"/><br/>
    
 				</td>
    
 			</tr>
    
 		</table>
    
   		</form>
    
 		<p>
    
 			<span class="bc" onclick="update()">保存</span>
    
 			<span onclick="closeUpdatePageDiv()">取消</span>
    
 		</p>
    
 	</div>
    
 </div>

车辆信息管理子页面js代码：

复制代码 
 function loadPage(rows,page){

    
 	$.ajax({
    
 		url:'carList',
    
 		type:'post',
    
 		data:'rows='+rows+'&row='+((page-1)*rows),
    
 		async:false,
    
 		success:function(data){
    
 			var arr = eval(data);
    
 			if(arr.length==0){
    
 				$("#message").html("暂无车辆信息！");
    
     			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='5%'><input type='checkbox' name='ckDel'/></td>";
    
 				row +="<td width='8%'>"+o.clbh+"</td>";
    
 				row +="<td width='12%'>"+o.cphm+"</td>";
    
 				row +="<td width='15%'>"+o.djsj+"</td>";
    
 				row +="<td width='10%'>"+o.zws+"</td>";
    
 				row +="<td width='12%'>"+o.cpxh+"</td>";
    
 				row +="<td width='12%'>"+o.cjhm+"</td>";
    
 				if(o.zt==0){
    
 					row +="<td width='8%'>未出车</td>";
    
 				}else{
    
 					row +="<td width='8%' style='color:#f66;'>已出车</td>";
    
 				}
    
 				row +="<td width=''>";
    
 				row +="<button class='xg' onclick='showUpdatePageDiv(this)'>修改</button> ";
    
 				row +="<button class='sc' onclick='showDeletePageDiv(this,"+o.clbh+")'>删除</button>";
    
 				row +="</td></tr>";
    
 			});
    
 			$(".list").html(row);
    
 			$.ajax({
    
 				url:'carPages',
    
 				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);
    
 	$("#xz").mouseover(function(){
    
 		$("#xz").prop("src","img/xz2.jpg");
    
 	});
    
 	$("#xz").mouseout(function(){
    
 		$("#xz").prop("src","img/xz1.jpg");
    
 	});
    
 	$("#xz").click(function(){
    
 		showAddPageDiv();
    
 	});
    
 });
    
 function showAddPageDiv(button){
    
 	$(".addPageDiv").fadeIn(1000);
    
 	$(".addPageDiv form input[name='cphm']").focus();
    
 }
    
 function closeAddPageDiv(){
    
 	$(".addPageDiv form input").val('');
    
 	$(".addPageDiv").fadeOut();
    
 }
    
 function checkAdd(){
    
 	var cphm = $(".addPage input[name='cphm']").val();
    
   		if(cphm==null||cphm.length==0){
    
   			$("#message").html("请输入车牌号码！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".addPage").offset().top;
    
 		var offsetLeft = $(".addPage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".addPage input[name='cphm']").focus();
    
   			return false;
    
   		}
    
   		cphm=cphm.toUpperCase();
    
   		var tm=0;
    
   		$.ajax({
    
 		url:'cphmTM',
    
 		type:'post',
    
 		data:'cphm='+cphm,
    
 		aysnc:false,
    
 		success:function(data){
    
   				if(data!=0){
    
     			tm=1;
    
     			$("#message").html("车牌号码已存在，请重新输入！");
    
     			var left = $("#message").width()/2;
    
 				var offsetTop = $(".addPage").offset().top;
    
 				var offsetLeft = $(".addPage").offset().left;
    
 				$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 				$("#message").css("top",offsetTop+70);
    
     			$("#message").fadeIn(1000);
    
     			messageOut();
    
     			$(".addPage input[name='cphm']").focus();
    
   				}
    
 		}
    
 	});
    
   		if(tm==1){
    
   			return;
    
   		}
    
 	var zws = $(".addPage input[name='zws']").val();
    
   		if(zws==null||zws.length==0){
    
   			$("#message").html("请输入座位数！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".addPage").offset().top;
    
 		var offsetLeft = $(".addPage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".addPage input[name='zws']").focus();
    
   			return false;
    
   		}
    
 	var cpxh = $(".addPage input[name='cpxh']").val();
    
   		if(cpxh==null||cpxh.length==0){
    
   			$("#message").html("请输入厂牌型号！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".addPage").offset().top;
    
 		var offsetLeft = $(".addPage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".addPage input[name='cpxh']").focus();
    
   			return false;
    
   		}
    
 	var cjhm = $(".addPage input[name='cjhm']").val();
    
   		if(cjhm==null||cjhm.length==0){
    
   			$("#message").html("请输入车架号码！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".addPage").offset().top;
    
 		var offsetLeft = $(".addPage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".addPage input[name='cjhm']").focus();
    
   			return false;
    
   		}
    
   		return true;
    
 }
    
 function add(){
    
 	if(checkAdd()){
    
 		var formData = $(".addPageDiv form").serialize();
    
 		$.ajax({
    
 			url:'addCar',
    
 			type:'post',
    
 			data:formData,
    
 			async:false,
    
 			success:function(data){
    
 				if(data!=0){
    
 					$("#message").html("添加成功！");
    
 	    			var left = $("#message").width()/2;
    
 					var offsetTop = $(".addPage").offset().top;
    
 					var offsetLeft = $(".addPage").offset().left;
    
 					$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 					$("#message").css("top",offsetTop+70);
    
 	    			$("#message").fadeIn(1000);
    
 	    			messageOut();
    
 					carList();
    
 				}else{
    
 					$("#message").html("添加失败！");
    
 	    			var left = $("#message").width()/2;
    
 					var offsetTop = $(".addPage").offset().top;
    
 					var offsetLeft = $(".addPage").offset().left;
    
 					$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 					$("#message").css("top",offsetTop+70);
    
 	    			$("#message").fadeIn(1000);
    
 	    			messageOut();
    
 				}
    
 			}
    
 		});
    
 	}
    
 }
    
  
    
 function showUpdatePageDiv(button){
    
 	var clbh = $(button).parent().parent().children(":eq(1)").text();
    
 	var cphm = $(button).parent().parent().children(":eq(2)").text();
    
 	var djsj = $(button).parent().parent().children(":eq(3)").text();
    
 	var zws = $(button).parent().parent().children(":eq(4)").text();
    
 	var cpxh = $(button).parent().parent().children(":eq(5)").text();
    
 	var cjhm = $(button).parent().parent().children(":eq(6)").text();
    
 	$(".updatePageDiv form input[name='clbh']").val(clbh);
    
 	$(".updatePageDiv form input[name='cphm']").val(cphm);
    
 	$(".updatePageDiv form input[name='djsj']").val(djsj);
    
 	$(".updatePageDiv form input[name='zws']").val(zws);
    
 	$(".updatePageDiv form input[name='cpxh']").val(cpxh);
    
 	$(".updatePageDiv form input[name='cjhm']").val(cjhm);
    
 	$(".updatePageDiv").fadeIn(1000);
    
 	$(".updatePageDiv form input[name='cphm']").focus();
    
 	
    
 }
    
 function closeUpdatePageDiv(){
    
 	$(".updatePageDiv form input").val('');
    
 	$(".updatePageDiv").fadeOut(1000);
    
 }
    
 function checkUpdate(){
    
 	var cphm = $(".updatePage input[name='cphm']").val();
    
   		if(cphm==null||cphm.length==0){
    
   			$("#message").html("请输入车牌号码！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".updatePage").offset().top;
    
 		var offsetLeft = $(".updatePage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".updatePage input[name='cphm']").focus();
    
   			return false;
    
   		}
    
 	var zws = $(".updatePage input[name='zws']").val();
    
   		if(zws==null||zws.length==0){
    
   			$("#message").html("请输入座位数！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".updatePage").offset().top;
    
 		var offsetLeft = $(".updatePage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".updatePage input[name='zws']").focus();
    
   			return false;
    
   		}
    
 	var cpxh = $(".updatePage input[name='cpxh']").val();
    
   		if(cpxh==null||cpxh.length==0){
    
   			$("#message").html("请输入厂牌型号！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".updatePage").offset().top;
    
 		var offsetLeft = $(".updatePage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".updatePage input[name='cpxh']").focus();
    
   			return false;
    
   		}
    
 	var cjhm = $(".updatePage input[name='cjhm']").val();
    
   		if(cjhm==null||cjhm.length==0){
    
   			$("#message").html("请输入车架号码！");
    
   			var left = $("#message").width()/2;
    
 		var offsetTop = $(".updatePage").offset().top;
    
 		var offsetLeft = $(".updatePage").offset().left;
    
 		$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);
    
 		$("#message").css("top",offsetTop+70);
    
   			$("#message").fadeIn(1000);
    
   			messageOut();
    
   			$(".updatePage input[name='cjhm']").focus();
    
   			return false;
    
   		}
    
   		return true;
    
 }
    
 function update(){
    
 	if(checkUpdate()){
    
 		var formData = $(".updatePageDiv form").serialize();
    
 		$.ajax({
    
 			url:'updateCar',
    
 			type:'post',
    
 			data:formData,
    
 			async:false,
    
 			success:function(data){
    
 				if(data!=0){
    
 					$("#message").html("修改成功！");
    
 	    			var left = $("#message").width()/2;
    
 					var offsetTop = $(".updatePage").offset().top;
    
 					var offsetLeft = $(".updatePage").offset().left;
    
 					$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);
    
 					$("#message").css("top",offsetTop+70);
    
 	    			$("#message").fadeIn(1000);
    
 	    			messageOut();
    
 					carList();
    
 				}else{
    
 					$("#message").html("修改失败！");
    
 	    			var left = $("#message").width()/2;
    
 					var offsetTop = $(".updatePage").offset().top;
    
 					var offsetLeft = $(".updatePage").offset().left;
    
 					$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);
    
 					$("#message").css("top",offsetTop+70);
    
 	    			$("#message").fadeIn(1000);
    
 	    			messageOut();
    
 				}
    
 			}
    
 		});
    
 	}
    
 }
    
  
    
 function showDeletePageDiv(button,clbh){
    
 	$("#confirm h3").html("是否确认删除车辆信息？");
    
 	$("#confirmDiv").fadeIn(1000);
    
 	var left = window.innerWidth/2-$("#confirm").width()/2;
    
 	$("#confirm").css("left",left);
    
 	$("#confirm").css("top",200);
    
 	$("#confirm .yes").click(function(){
    
 		$("#confirmDiv").fadeOut(1000);
    
    		$.ajax({
    
    			url:'deleteCar',
    
    			type:'post',
    
    			data:'clbh='+clbh,
    
    			async:false,
    
    			success:function(data){
    
    				if(data!=0){
    
    					$("#message").html("删除成功！");
    
 	    			var left = $("#message").width()/2;
    
 					$("#message").css("left",window.innerWidth/2-left);
    
 					$("#message").css("top",250);
    
 	    			$("#message").fadeIn(1000);
    
 	    			messageOut();
    
     				carList();
    
    				}else{
    
    					$("#message").html("删除失败！");
    
 	    			var left = $("#message").width()/2;
    
 					$("#message").css("left",window.innerWidth/2-left);
    
 					$("#message").css("top",250);
    
 	    			$("#message").fadeIn(1000);
    
 	    			messageOut();
    
    				}
    
    			}
    
    		});
    
 	});
    
 	$("#confirm .no").click(function(){
    
 		$("#confirmDiv").fadeOut(1000);
    
 	});
    
 }
    
 function changeNumPage(){
    
 	var rows = $(".pageManager input[name='rows']").val();
    
 	var page = $(".pageManager select[name='toNumPage']").val();
    
 	loadPage(rows,page);
    
 }
    
 function first(){
    
 	var rows = $(".pageManager input[name='rows']").val();
    
 	var page = 1;
    
 	loadPage(rows,page);
    
 }
    
 function last(){
    
 	var rows = $(".pageManager input[name='rows']").val();
    
 	var pages = $(".pageManager>b>span").html();
    
 	loadPage(rows,pages);
    
 }
    
 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");
    
 		loadPage(rows,page-1);
    
 	}
    
 }
    
 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");
    
 		loadPage(rows,page+1);
    
 	}
    
 }

车辆信息管理子页面css代码：

复制代码 
 .xg,.sc{

    
 	color:#fff;
    
 	border-radius:5px;
    
 	border:none;
    
 	line-height:25px;
    
 	width:40px;
    
 }
    
 .xg{
    
 	background-color:#01AAED;
    
 	outline:none;
    
 	cursor:pointer;
    
 }
    
 .sc{
    
 	background-color:#FF5722;
    
 	outline:none;
    
 	cursor:pointer;
    
 }
    
 .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;
    
 }
    
 .addPageDiv{
    
 	display:none;
    
 	position:absolute;
    
 	left:0px;
    
 	top:0px;
    
 	width:100%;
    
 	height:100%;
    
 	background-color:rgba(0,0,0,0.3);
    
 }
    
 .addPage{
    
 	width:370px;
    
 	border-radius:5px;
    
 	background-color:#fff;
    
 	margin:200px auto;
    
 	box-shadow:3px 3px 3px 3px #555;
    
 }
    
 .addPage input{
    
 	outline:none;
    
 	line-height:25px;
    
 }
    
 .addPage>h2{
    
 	border-bottom:1px solid #ccc;
    
 	padding:15px 20px;
    
 	color:#fff;
    
 	background-color:#0cf;
    
 }
    
 .addPage h2 span{
    
 	float:right;
    
 	color:#fff;
    
 	margin-top:-10px;
    
 	margin-right:-5px;
    
 	cursor:pointer;
    
 }
    
 .addPage table{
    
 	color:#666;
    
 	font-size:14px;
    
 	margin:10px auto;
    
 }
    
 .addPage table input{
    
 	border:1px solid #ccc;
    
 	padding-top:3px;
    
 	padding-left:10px;
    
 	border-radius:2px;
    
 }
    
 .addPage table tr{
    
 	line-height:50px;
    
 }
    
 .addPage p{
    
 	border-top:1px solid #ccc;
    
 	padding:15px 15px;
    
 	overflow: auto;
    
 }
    
 .addPage p span{
    
 	float:right;
    
 	border:1px solid #999;
    
 	border-radius:3px;
    
 	font-size:9px;
    
 	padding:3px 5px;
    
 	letter-spacing:2px;
    
 	margin-right:10px;
    
 	font-weight:500;
    
 	cursor:pointer;
    
 }
    
 .addPage p .bc{
    
 	background-color:#0cf;
    
 	color:#fff;
    
 }
    
 .updatePageDiv{
    
 	display:none;
    
 	position:absolute;
    
 	left:0px;
    
 	top:0px;
    
 	width:100%;
    
 	height:100%;
    
 	background-color:rgba(0,0,0,0.3);
    
 }
    
 .updatePage{
    
 	width:370px;
    
 	border-radius:5px;
    
 	background-color:#fff;
    
 	margin:200px auto;
    
 	box-shadow:3px 3px 3px 3px #555;
    
 }
    
 .updatePage input{
    
 	outline:none;
    
 	line-height:25px;
    
 }
    
 .updatePage>h2{
    
 	border-bottom:1px solid #ccc;
    
 	padding:15px 20px;
    
 	color:#fff;
    
 	background-color:#0cf;
    
 }
    
 .updatePage h2 span{
    
 	float:right;
    
 	color:#fff;
    
 	margin-top:-10px;
    
 	margin-right:-5px;
    
 	cursor:pointer;
    
 }
    
 .updatePage table{
    
 	color:#666;
    
 	font-size:14px;
    
 	margin:10px auto;
    
 }
    
 .updatePage table input{
    
 	border:1px solid #ccc;
    
 	padding-top:3px;
    
 	padding-left:10px;
    
 	border-radius:2px;
    
 }
    
 .updatePage table tr{
    
 	line-height:50px;
    
 }
    
 .updatePage p{
    
 	border-top:1px solid #ccc;
    
 	padding:15px 15px;
    
 	overflow: auto;
    
 }
    
 .updatePage p span{
    
 	float:right;
    
 	border:1px solid #999;
    
 	border-radius:3px;
    
 	font-size:9px;
    
 	padding:3px 5px;
    
 	letter-spacing:2px;
    
 	margin-right:10px;
    
 	font-weight:500;
    
 	cursor:pointer;
    
 }
    
 .updatePage p .bc{
    
 	background-color:#0cf;
    
 	color:#fff;
    
 }
    
 .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;
    
 }

全部评论 (0)

还没有任何评论哟~

相关文章推荐

车辆派遣管理系统-06-车辆信息管理

今日完成任务：车辆信息管理及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：车辆信息管理 需要角色：管理员（其他角色不能操作） 数据加载：车辆信息列表 数据验证：非空验...

车辆派遣管理系统-07-驾驶员信息管理

今日完成任务：驾驶员信息管理及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：驾驶员信息管理 需要角色：管理员（其他角色不能操作） 数据加载：驾驶员信息列表 数据验证：...

车辆派遣管理系统——需求

文章目录 一、背景 二、用户的特点 三、系统范围 四、系统体系结构 系统总体架构描述： 五、数据库设计 ER图 数据字典 六、工作量估算 七、项目燃尽图 一、背景 车辆派遣管理系统是提供对车辆派遣高效...

车辆派遣管理系统-09-派车单统计

今日完成任务：派车单统计功能及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：派车单统计 需要角色：任意 数据加载：派车单信息列表、用车单位、车牌号码、驾驶员、业务员 ...

车辆派遣管理系统-02-派车单审核

今日完成任务：派车单审核功能及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：派车单审核 需要角色：管理员（其他角色不能操作） 数据加载：派车单信息列表 数据验证：非空...

车辆派遣管理系统-01-派车单登记

今日完成任务：派车单登记功能及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：派车单登记 需要角色：业务员（其他角色不能操作） 数据加载：自动派车单号、业务员信息、客户...

车辆派遣管理系统-15-单车查询

今日完成任务：单车查询功能及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：单车查询 需要角色：任意 数据加载：车辆信息，加载月结算对应的派车单数据列表 数据验证：非空...

车辆派遣管理系统-查询统计

本周完成任务：派车单统计、出车率分析、已收款明细、未收款明细、结算明细、车补贴查询、单车查询及页面设计和生成报表 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 项目燃尽图：见页面最后 前...

车辆派遣管理系统-10-出车率分析

今日完成任务：出车率分析功能及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：出车率分析 需要角色：任意 数据加载：出车率分析列表 数据验证：非空验证、历史日期验证 导...

车辆派遣管理系统-04-单车月结算

今日完成任务：单车月结算功能及页面设计 核心代码：见下列插入的代码 遇到的问题：无 解决的方法：无 功能模块：单车月结算 需要角色：财务（其他角色不能操作） 数据加载：月结算信息列表、车辆信息、动态加...