本文介绍了车辆派遣管理系统中财务收款功能的设计与实现，包括核心代码展示、角色权限设定、数据验证和分页查询。财务人员在审核派车单后，可对租车费用进行收取，系统提供分页显示所有派车单信息，并对不同状态进行颜色标记，未审核或未收费的派车单不允许收费。
今日完成任务：财务收款功能及页面设计
核心代码：见下列插入的代码
遇到的问题：无
解决的方法：无
功能模块：财务收款
需要角色：财务（其他角色不能操作）
数据加载：派车单信息列表
数据验证：非空验证、费用必须为正数数字、是否缴费验证、是否缴清验证
列表分页：AJAX分页查询
业务描述：
管理员审核派车单以后，需要财务进行派车单费用的租车费的收费
财务人员登录以后，可以进行派车单的收款，点击左侧“业务管理”下的“财务收款”菜单后，加载打开财务收款子页面，页面内先加载出所有的派车单信息，派车单信息列表进行分页展示，缴费状态和审核状态如果非已完成状态则标红显示，点击“详情收款”可以查看派车单的具体信息，如果是未收费的派车单则可以进行收费操作，如果未审核则不能进行收费操作。
视频演示地址：https://www.bilibili.com/video/BV1Ph411d7T2/
图文演示：
派车单列表
已缴费
未缴费
未缴清
财务收款子页面HTML代码：
<table class="table1" width='100%' cellspacing="0" border='0'>
<tr align="left">
<td width="5%"> </td>
<td width="15%">派车单号</td>
<td width="12%">出车日期</td>
<td width="10%">出车时间</td>
<td width="10%">租车费</td>
<td width="10%">实收金额</td>
<td width="10%">缴费状态</td>
<td width="10%">审核状态</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>
第
<select name="toNumPage" onchange="changeNumPage()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
页
共
<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 class="layui-form-label">派车单号</td>
<td>
<input type="text" name="pcdh" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">登记日期</td>
<td>
<input type="text" name="djrq" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">业务员</td>
<td>
<input type="text" name="ywyxm" class="layui-input" readonly="readonly"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">用车单位</td>
<td>
<input type="text" name="ycdw" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">联系人</td>
<td>
<input type="hidden" name="khbh"/>
<input type="text" name="lxr" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">联系电话</td>
<td>
<input type="text" name="lxdh" class="layui-input" readonly="readonly"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">出车日期</td>
<td>
<input type="text" name="ccrq" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">出车时间</td>
<td>
<input type="text" name="ccsj" class="layui-input" readonly="readonly"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">目的地点</td>
<td>
<input type="text" name="mddd" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">车牌号码</td>
<td>
<input type="hidden" name="clbh"/>
<input type="text" name="cphm" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">驾驶员</td>
<td>
<input type="hidden" name="jsybh"/>
<input type="text" name="jsyxm" class="layui-input" readonly="readonly"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">所属类别</td>
<td>
<input type="text" name="sslb" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">支付方式</td>
<td>
<select name="zffs" style="display:block;" >
<option value="现金">现金</option>
<option value="微信">微信</option>
<option value="支付宝">支付宝</option>
</select>
</td>
<td class="layui-form-label">是否缴费</td>
<td>
<input type="text" name="zt" onclick="pcdjfUpdate(this)" class="layui-input" readonly="readonly"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">租车费</td>
<td>
<input type="text" name="zcf" class="layui-input" readonly="readonly"/>
</td>
<td class="layui-form-label">实收金额</td>
<td>
<input type="number" value='0' name="sjsf" class="layui-input"/>
</td>
<td class="layui-form-label">欠款金额</td>
<td>
<input type="number" name="qkje" class="layui-input" readonly/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">油费</td>
<td>
<input type="number" name="yf" class="layui-input" readonly/>
</td>
<td class="layui-form-label">过桥费</td>
<td>
<input type="number" name="gqf" class="layui-input" readonly/>
</td>
<td class="layui-form-label">修理费</td>
<td>
<input type="number" name="xlf" class="layui-input" readonly/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">停车费</td>
<td>
<input type="number" name="tcf" class="layui-input" readonly/>
</td>
<td class="layui-form-label">车补贴</td>
<td>
<input type="number" name="cbt" class="layui-input" readonly/>
</td>
<td class="layui-form-label">行驶公里</td>
<td>
<input type="number" name="xsgls" class="layui-input" readonly/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="layui-form-label">备注</td>
<td>
<input type="text" name="bz" value="无" class="layui-input" readonly/>
</td>
<td class="layui-form-label">审核</td>
<td>
<input type="text" name="sh" value="" readonly class="layui-input" readonly="readonly"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </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){
$.ajax({
url:'pcdshList',
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='15%'>"+o.pcdh+"</td>";
row +="<td width='12%'>"+o.ccrq+"</td>";
row +="<td width='10%'>"+o.ccsj+"</td>";
row +="<td width='10%'>"+o.zcf+".00</td>";
if(o.sjsf==''){
row +="<td width='10%'>0.00</td>";
}else{
row +="<td width='10%'>"+o.sjsf+".00</td>";
}
if(o.zt=='未缴费'||o.zt=='未缴清'){
row +="<td width='10%' style='color:#f66;'>"+o.zt+"</td>";
}else{
row +="<td width='10%'>"+o.zt+"</td>";
}
if(o.sh=='未审核'){
row +="<td width='10%' style='color:#f66;'>"+o.sh+"</td>";
}else{
row +="<td width='10%'>"+o.sh+"</td>";
}
row +="<td width=''>";
row +="<button class='xg' onclick='showUpdatePageDiv(this,"+o.pcdh+")'>详情收款</button> ";
row +="</td></tr>";
});
$(".list").html(row);
$.ajax({
url:'pcdshPages',
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 showUpdatePageDiv(button,pcdh){
$.ajax({
url:'pcdshById',
type:'post',
data:'pcdh='+pcdh,
async:false,
success:function(data){
var o = eval(data)[0];
$(".updatePageDiv input[name='pcdh']").val(o.pcdh);
$(".updatePageDiv input[name='djrq']").val(o.djrq);
$(".updatePageDiv input[name='ywybh']").val(o.ywybh);
$(".updatePageDiv input[name='ywyxm']").val(o.ywyxm);
$(".updatePageDiv input[name='khbh']").val(o.khbh);
$(".updatePageDiv input[name='ycdw']").val(o.ycdw);
$(".updatePageDiv input[name='lxr']").val(o.lxr);
$(".updatePageDiv input[name='lxdh']").val(o.lxdh);
$(".updatePageDiv input[name='ccrq']").val(o.ccrq);
$(".updatePageDiv input[name='ccsj']").val(o.ccsj);
$(".updatePageDiv input[name='mddd']").val(o.mddd);
$(".updatePageDiv input[name='clbh']").val(o.clbh);
$(".updatePageDiv input[name='cphm']").val(o.cphm);
$(".updatePageDiv input[name='jsybh']").val(o.jsybh);
$(".updatePageDiv input[name='jsyxm']").val(o.jsyxm);
$(".updatePageDiv select[name='zffs'] option[value='"+o.zffs+"']").prop("selected",true);
$(".updatePageDiv input[name='sslb']").val(o.sslb);
$(".updatePageDiv input[name='zcf']").val(o.zcf);
var sjsf=0;
if(o.sjsf==''){
$(".updatePageDiv input[name='sjsf']").val('0');
}else{
sjsf = parseInt(o.sjsf);
$(".updatePageDiv input[name='sjsf']").val(o.sjsf);
}
var zcf = parseInt(o.zcf);
$("input[name='qkje']").val(zcf-sjsf);
$(".updatePageDiv input[name='zt']").val(o.zt);
$(".updatePageDiv input[name='yf']").val(o.yf);
$(".updatePageDiv input[name='gqf']").val(o.gqf);
$(".updatePageDiv input[name='xlf']").val(o.xlf);
$(".updatePageDiv input[name='tcf']").val(o.tcf);
$(".updatePageDiv input[name='cbt']").val(o.cbt);
$(".updatePageDiv input[name='xsgls']").val(o.xsgls);
$(".updatePageDiv input[name='bz']").val(o.bz);
$(".updatePageDiv input[name='sh']").val(o.sh);
if(o.sh=="未审核"){
$("input[name='sh']").css("background-color","#f66");
}else{
$("input[name='sh']").css("background-color","#6f6");
}
if(o.zt!="已缴费"){
$("input[name='zt']").css("background-color","#f66");
}else{
$("input[name='zt']").css("background-color","#6f6");
}
$(".updatePageDiv").fadeIn(1000);
$("input[name='bz']").focus(function(){
var bz = $().val();
if(bz=='无'){
$(this).val("");
}
});
$("input[name='bz']").blur(function(){
var bz = $(this).val();
if(bz==''){
$(this).val("无");
}
});
$(".bc").click(function(){
if($("#zw").html()!='财务'){
$("#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();
return;
}
if(o.zt=='已缴费'){
$("#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();
return;
}
var zt = $(".updatePageDiv input[name='zt']").val();
if(zt=='未缴费'){
$("#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();
$("input[name='sjsf']").focus();
return;
}
update();
});
}
});
}
function closeUpdatePageDiv(){
$(".updatePageDiv form input").val('');
$(".updatePageDiv").fadeOut(1000);
}
function update(){
var formData = $(".updatePageDiv form").serialize();
$.ajax({
url:'cwskUpdate',
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();
cwsk();
}else{
$("#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();
}
}
});
}
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);
}
}
function pcdjfUpdate(shInput){
if($("#zw").html()!='财务'){
$("#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();
return;
}
var v = $(shInput).val();
if(v!='已缴费'){
var sjsf = $(".updatePageDiv input[name='sjsf']").val();
if(sjsf==''||sjsf<=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();
return;
}
var zcf = $(".updatePageDiv input[name='zcf']").val();
sjsf = parseInt(sjsf);
zcf = parseInt(zcf);
if(sjsf>zcf){
$("#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();
return;
}
if(sjsf==zcf){
$("input[name='zt']").val("已缴费");
$("input[name='zt']").css("background-color","#6f6");
$("input[name='qkje']").val("0");
}
if(sjsf<zcf&&sjsf>0){
$("input[name='zt']").val("未缴清");
$("input[name='zt']").css("background-color","#f66");
$("input[name='qkje']").val(zcf-sjsf);
}
}
}财务收款子页面css代码：
.xg{
color:#fff;
border-radius:5px;
border:none;
line-height:25px;
width:70px;
background-color:#01AAED;
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;
}
.updatePageDiv{
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.3);
}
.updatePage{
width:950px;
border-radius:5px;
background-color:#fff;
margin:200px auto;
box-shadow:3px 3px 3px #999;
}
.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 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;
}
.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;
}
.pcddjForm input[type='number']{
height:30px;
}
input[name='sh']{
background-color:#f66;
}
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
