车辆派遣管理系统-08-业务员信息管理

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

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

遇到的问题：无

解决的方法：无

 

功能模块：业务信息管理

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

数据加载：业务员信息列表

数据验证：非空验证、电话验证

列表分页：AJAX分页查询

业务描述：

公司租车业务由业务员进行联系，需要进行业务员信息的管理

管理员登录以后才可以进行业务员信息的管理，点击左侧“档案管理”下的“业务员信息管理”，在右侧主体区域加载业务员信息的子页面，并ajax加载所有的业务员信息资料，点击列表上面的“加号状图标”可以打开业务员添加窗口，在业务员添加窗口完成业务员信息的登记操作，点击列表后的“修改”按钮可以修改业务员信息，点击列表后的“删除”按钮可以删除业务员信息，点击删除弹窗的“是”即可完成删除。

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

图文演示：

业务员信息列表

业务员信息登记

业务员信息修改

业务员信息删除

业务员信息子页面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="9%">业务员姓名</td>
		<td width="9%">业务员性别</td>
		<td width="9%">业务员年龄</td>
		<td width="13%">入职时间</td>
		<td width="17%">身份证号</td>
		<td width="13%">联系电话</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="ywyxm" placeholder="例：方世玉"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">业务员性别：</td>
				<td>
		  			<input type="radio" name="ywyxb" value="男" checked/> 男
		  			&nbsp;
		  			<input type="radio" name="ywyxb" value="女"/> 女
		  			<br/>
				</td>
			</tr>
			<tr>
				<td align="right">业务员年龄：</td>
				<td>
		  			<input type="text" name="ywynl"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">身份证号：</td>
				<td>
		  			<input type="text" name="sfzh"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">联系电话：</td>
				<td>
		  			<input type="text" name="lxdh"/><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="ywybh"/>
		  			<input type="text" name="ywyxm"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">业务员性别：</td>
				<td>
		  			<input type="radio" name="ywyxb" value="男"/> 男
		  			&nbsp;
		  			<input type="radio" name="ywyxb" value="女"/> 女
		  			<br/>
				</td>
			</tr>
			<tr>
				<td align="right">业务员年龄：</td>
				<td>
		  			<input type="text" name="ywynl"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">入职时间：</td>
				<td>
		  			<input type="text" name="rzsj" readonly="readonly"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">身份证号：</td>
				<td>
		  			<input type="text" name="sfzh"/><br/>
				</td>
			</tr>
			<tr>
				<td align="right">联系电话：</td>
				<td>
		  			<input type="text" name="lxdh"/><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:'salesList',
		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.ywybh+"</td>";
				row +="<td width='9%'>"+o.ywyxm+"</td>";
				row +="<td width='9%'>"+o.ywyxb+"</td>";
				row +="<td width='9%'>"+o.ywynl+"</td>";
				row +="<td width='13%'>"+o.rzsj+"</td>";
				row +="<td width='17%'>"+o.sfzh+"</td>";
				row +="<td width='13%'>"+o.lxdh+"</td>";
				row +="<td width=''>";
				row +="<button class='xg' onclick='showUpdatePageDiv(this)'>修改</button> ";
				row +="<button class='sc' onclick='showDeletePageDiv(this,"+o.ywybh+")'>删除</button>";
				row +="</td></tr>";
			});
			$(".list").html(row);
			$.ajax({
				url:'salesPages',
				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='ywyxm']").focus();
}
function closeAddPageDiv(){
	$(".addPageDiv form input").val('');
	$(".addPageDiv").fadeOut();
}
function checkAdd(){
	var ywyxm = $(".addPage input[name='ywyxm']").val();
  		if(ywyxm==null||ywyxm.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='ywyxm']").focus();
  			return false;
  		}
	var ywynl = $(".addPage input[name='ywynl']").val();
  		if(ywynl==null||ywynl.length==0||ywynl<20||ywynl>60){
  			$("#message").html("请输入业务员年龄[20-60]！");
  			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='ywynl']").focus();
  			return false;
  		}
	var sfzh = $(".addPage input[name='sfzh']").val();
  		if(sfzh==null||sfzh.length!=18){
  			$("#message").html("请输入18位身份证号码！");
  			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='sfzh']").focus();
  			return false;
  		}
	var lxdh = $(".addPage input[name='lxdh']").val();
  		if(lxdh==null||lxdh.length!=11){
  			$("#message").html("请输入11位联系电话号码！");
  			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='lxdh']").focus();
  			return false;
  		}
  		return true;
}
function add(){
	if(checkAdd()){
		var formData = $(".addPageDiv form").serialize();
		$.ajax({
			url:'addSales',
			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();
					salesList();
				}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 ywybh = $(button).parent().parent().children(":eq(1)").text();
	var ywyxm = $(button).parent().parent().children(":eq(2)").text();
	var ywyxb = $(button).parent().parent().children(":eq(3)").text();
	var ywynl = $(button).parent().parent().children(":eq(4)").text();
	var rzsj = $(button).parent().parent().children(":eq(5)").text();
	var sfzh = $(button).parent().parent().children(":eq(6)").text();
	var lxdh = $(button).parent().parent().children(":eq(7)").text();
	$(".updatePageDiv form input[name='ywybh']").val(ywybh);
	$(".updatePageDiv form input[name='ywyxm']").val(ywyxm);
	if(ywyxb=='男'){
		$(".updatePageDiv form input[value='男']").prop("checked",true);
	}else{
		$(".updatePageDiv form input[value='女']").prop("checked",true);
	}
	$(".updatePageDiv form input[name='ywynl']").val(ywynl);
	$(".updatePageDiv form input[name='rzsj']").val(rzsj);
	$(".updatePageDiv form input[name='sfzh']").val(sfzh);
	$(".updatePageDiv form input[name='lxdh']").val(lxdh);
	$(".updatePageDiv").fadeIn(1000);
	$(".updatePageDiv form input[name='ywyxm']").focus();
}
function closeUpdatePageDiv(){
	$(".updatePageDiv form input").val('');
	$(".updatePageDiv").fadeOut(1000);
}
function checkUpdate(){
	var ywyxm = $(".updatePage input[name='ywyxm']").val();
  		if(ywyxm==null||ywyxm.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='ywyxm']").focus();
  			return false;
  		}
	var ywynl = $(".updatePage input[name='ywynl']").val();
  		if(ywynl==null||ywynl.length==0||ywynl<20||ywynl>60){
  			$("#message").html("请输入业务员年龄[20-60]！");
  			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='ywynl']").focus();
  			return false;
  		}
	var sfzh = $(".updatePage input[name='sfzh']").val();
  		if(sfzh==null||sfzh.length!=18){
  			$("#message").html("请输入18位身份证号码！");
  			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='sfzh']").focus();
  			return false;
  		}
	var lxdh = $(".updatePage input[name='lxdh']").val();
  		if(lxdh==null||lxdh.length!=11){
  			$("#message").html("请输入11位联系电话号码！");
  			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='lxdh']").focus();
  			return false;
  		}
  		return true;
}
function update(){
	if(checkUpdate()){
		var formData = $(".updatePageDiv form").serialize();
		$.ajax({
			url:'updateSales',
			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();
					salesList();
				}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,ywybh){
	$("#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:'deleteSales',
   			type:'post',
   			data:'ywybh='+ywybh,
   			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();
    				salesList();
   				}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;
}