<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<base href=" <%=basePath%>">
<meta charset="UTF-8">
<title>EDU教育云平台</title>
<link rel="stylesheet" href="${ctx}/css/pc-edu-css/layui.css">
<link rel="stylesheet" href="${ctx}/css/pc-edu-css/xzdd.css">
<%-- <script src="${ctx}/js/jquery-3.0.0.js"></script> --%>
<script type="text/javascript" src="${ctx}/js/pc-edu-js/jquery.min.js"></script>
<script src="${ctx}/plugins/angularjs/angular.min.js"
type="text/javascript">
</script>
</head>
<body class="layui-layout-body" ng-app="insertOrder"
ng-controller="insertOrderController" ng-init="findGradeList()">
<div class="layui-layout layui-layout-admin">
<!-- 功能列表 -->
<jsp:include page="header.jsp" flush="true" />
<!-- 功能列表 -->
<!-- 内容主体区域 -->
<div class="layui-body">
<span id="content-title">账单录入</span>
<div style="overflow-y:hidden;background:#fff;">
<div style="width:100%;line-height:40px;">
<p class="tit">订单信息</p>
<div class="title">
<span style="margin-right:30px;">订单类型选择:</span> <input
type="radio" id="radio1" name="radio" checked="checked" value=1 /><label
for="radio1">缴费</label> <input type="radio" id="radio2"
name="radio" value=0 /><label for="radio2">退费</label>
<button class="sumtit" ng-click="lookOrder();">订单生成</button>
</div>
<hr>
<div class="left">
年级名称：<select size="1" id="grade" onchange="stuClass()">
<option value="">请选择</option>
</select><br> 班级名称：<select size="1" id="classname">
<option value="">请选择</option>
</select><br>
<button class="sumtit" ng-click="findStudentList();">查询</button>
<br> 学生：{{studentList.length}}
<div id="div1" class="students">
<div ng-repeat="student in studentList">
<input type="checkbox" style="margin-left:15px;"
value="{{student.xsid}}" /><span class="studentName">
{{student.name}}</span><span style="font-size:12px;color:#777;"
class="studentIdcard">({{student.sfzhm}})</span>
</div>
</div>
<input id="btn2" type="button" class="all" value="取消" /> <input
id="btn1" type="button" class="all" value="全选" />
</div>
<div class="middle"></div>
<div class="right">
<div class="titname">
费用名称<img id="AddMoreFileBox" class="btn btn-info"
src="${ctx}/images/pc-edu-images/jfaddicon.png" max-lenght=10>
<div id="InputsWrapper" style="overflow:auto;height:326px;">
<div class="addone">
<input type="text" name="mytext[]" id="field_1"
placeholder="费用名称 1" maxlength="10" /><input type="text"
name="mytext[]" id="money_1" placeholder="费用金额 1"
onchange="if( ! /^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/.test(this.value)){$.alertView('金额格式有误，小数点后只能保留两位');this.value='';}" />
<br> <select size="1" id="month_1"><option
value="" style="color:#999;">请选择缴费月份</option>
<option value=1>1月份</option>
<option value=2>2月份</option>
<option value=3>3月份</option>
<option value=4>4月份</option>
<option value=5>5月份</option>
<option value=6>6月份</option>
<option value=7>7月份</option>
<option value=8>8月份</option>
<option value=9>9月份</option>
<option value=10>10月份</option>
<option value=11>11月份</option>
<option value=12>12月份</option>
</select><input type="text" name="mytext[]" maxlength="30" id="text_1"
placeholder="备注 1" /><a href="#" class="removeclass"><img
src="${ctx}/images/pc-edu-images/jfjianicon.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部固定区域 -->
<div class="layui-footer">© 西安远眺网络科技有限公司</div>
</div>
<div id="cover"></div>
<div id="lookmodal">
<div class="looktit">
<span>查看订单</span>
</div>
<div class="fl width">
<p>订单类型：{{jtmc}}</p>
<p>年级班级： {{gradeName}}{{className}}</p>
<p>学生: {{studentListSelect.length}}</p>
<div id="div1" class="smallstudents">
<div style="overflow:hidden;"
ng-repeat="student in studentListSelect">
{{student.studentName}}<span style="font-size:12px;color:#777;">{{student.studentIdcard}}</span>
</div>
</div>
</div>
<div class="fl "
style="width:1px;background:#5290da;height:200px;margin-top:15px;"></div>
<div class="fl width" style="width:260px;">
<p>账单明细：</p>
<div style="overflow:auto;height:170px;width:100%;margin-top:5px;">
<table class="detail">
<thead>
<tr>
<th>费用</th>
<th>金额(元)</th>
<th>月份</th>
<th width="50">备注</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.xmmc}}</td>
<td>{{order.je}}</td>
<td>{{order.ddyf}}</td>
<td>{{order.ddbz}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clearfloat"></div>
<div class="closed anbtn" style="right:20px;">取消</div>
<div class="anbtn" id="submitOrder" style="right:90px;"
ng-click="createOrder();">确认</div>
</div>
</body>
<!-- 菜单展开 start -->
<script src="${ctx}/js/layui/layui.all.js"></script>
<script>
//查询学校的年级情况
stuGrade();
function stuGrade() {
$.ajax({
url : "${ctx}/ManagerSchool/findGradeTable",
type : "post",
success : function(res) {
var selGrade = $("#grade");
for (var i = 0; i < res.length; i++) {
selGrade.append("<option value="+res[i].gid+">"
+ res[i].gradeName + "</option>");//添加option
}
}
})
}
//查询学校的年级相应的班级情况
function stuClass() {
stuGradeDate = {
"gradeId" : $("#grade option:selected").val()
}
var selName = $("#classname");
$.ajax({
url : "${ctx}/ManagerSchool/findClassTable",
dataType : "json",
type : "post",
data : stuGradeDate,
success : function(res) {
selName.empty();
selName.append("<option value=''>请选择</option>");
for (var i = 0; i < res.length; i++) {
selName.append("<option value="+res[i].cid+">"
+ res[i].className + "</option>");//添加option
}
}
})
}
$(document).ready(function() {
/* $(".sumtit").click(function() {
cover.style.display = "block"; //显示遮罩层
lookmodal.style.display = "block"; //显示弹出层
}) */
$(".closed").click(function() {
cover.style.display = "none"; //隐藏遮罩层
lookmodal.style.display = "none"; //隐藏弹出层
})
/* $("#submitOrder").click(function() {
this.style.display = "none"; //确认按钮隐藏
}) */
});
</script>
<script>
window.onload = function() {//先从html文档中获取oDiv元素；再从oDiv元素中获取input
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oDiv = document.getElementById('div1');
var aCh = oDiv.getElementsByTagName('input');//getElementsByTagName容易写错
oBtn1.onclick = function() {
for (var i = 0; i < aCh.length; i++) {//当上面条件成立的时候，下面语句会一直执行，直到条件不成立为止
aCh[i].checked = true;
}
;
};
oBtn2.onclick = function() {//当上面条件成立的时候，下面语句会一直执行，直到条件不成立为止
for (var i = 0; i < aCh.length; i++) {
aCh[i].checked = false;
}
;
}
}
</script>
<script>
var adddoneList=[1];
var FieldCount = 1; //to keep track of text box added
$(document)
.ready(
function() {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
$(AddButton)
.click(
function(e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper)
.append(
'<div class="addone"><input type="text" maxlength="10" name="mytext[]" id="field_'+ FieldCount +'" placeholder="费用名称 '+ FieldCount +'"/><input type="text" name="mytext[]" id="money_'
+ FieldCount
+ '" placeholder="费用金额 '
+ FieldCount
+ '" onchange="if( ! /^(([1-9]\\d*)|\\d)(\\.\\d{1,2})?$/.test(this.value)){$.alertView( '金额格式有误，小数点后只能保留两位');this.value='';}"/><br> <select size="1" id="month_'+ FieldCount +'"> <option value="0" style="color:#999;">请选择缴费月份</option> <option value="1">1月份</option> <option value="2">2月份</option> <option value="3">3月份</option><option value="4">4月份</option> <option value="5">5月份</option> <option value="6">6月份</option><option value="7">7月份</option> <option value="8">8月份</option> <option value="9">9月份</option><option value="10">10月份</option> <option value="11">11月份</option> <option value="12">12月份</option></select><input type="text" name="mytext[]" maxlength="30" id="text_'+ FieldCount +'" placeholder="备注 '+ FieldCount +'"/><a href="#" class="removeclass"><img src="${ctx}/images/pc-edu-images/jfjianicon.png"></a></div>');
x++; //text box increment
adddoneList.push(FieldCount);
console.log("adddoneList="+adddoneList);
}
return false;
});
$("body").on("click", ".removeclass", function(e) { //user click on remove text
if (x > 1) {
$(this).parent('div').remove(); //remove text box
console.log("进入删除");
//上一个兄弟节点id
var frontBrotherdom = $(this).prev("input");
console.log("获取上一个兄弟节点"+frontBrotherdom);
var frontBrotherId = $(this).prev("input").attr("id");
console.log("获取上一个兄弟节点id"+frontBrotherId);
//截取后面数字 后缀
var frontBrotherNum=frontBrotherId.substr(frontBrotherId.lastIndexOf("_")+1).trim();
console.log("截取后面数字"+frontBrotherNum);
//取出数组元素 下标
var index=0;
for(var i=0;i<adddoneList.length;i++){
if(frontBrotherNum==adddoneList[i]){
index=i;
//alert("下标="+index);
continue ;
}
}
//var index = array.indexOf(frontBrotherNum);
//alert("下标="+index);
if (index > -1) {
console.log("开始截取下标="+index);
adddoneList.splice(index, 1);
}
console.log("开始截取adddoneList="+adddoneList);
x--; //decrement textbox
}
return false;
})
});
</script>
<script>
//JavaScript代码区域
layui.use('element', function() {
var element = layui.element;
});
layui.use('carousel', function() {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem : '#test1',
width : '100%' //设置容器宽度
,
arrow : 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
<!-- 菜单展开end -->
<script type="text/javascript">
var app = angular.module('insertOrder', []);
app.config(function($httpProvider) {
$httpProvider.defaults.headers.post = {
'Content-Type' : 'application/x-www-form-urlencoded',
'charset' : 'utf-8'
}
})
app
.controller(
'insertOrderController',
function($scope, $http) {
//页面初始化的时候，查找年级信息
$scope.findGradeList = function() {
$http.get("${ctx}/ManagerSchool/findGradeTable")
.then(function success(response) {
$scope.gradeList = response.data;
}, function error(response) {
layer.alert('查询年级数据失败!!!', {
icon : 5
});
});
}
/* //根据年级id查询该年级的班级数据
$scope.findClassList = function(selectGrade) {
console.log("查询班级=" + selectGrade.gid);
//获取班级id
var gradeId = selectGrade.gid;
$http.get(
"${ctx}/ManagerSchool/findClassTable?gradeId="
+ gradeId).then(
function success(response) {
$scope.classList = response.data;
}, function error(response) {
layer.alert('查询班级数据失败!!!', {
icon : 5
});
});
} */
//根据年级id查询该年级的班级数据
$scope.findClassList2 = function() {
console.log("查询班级2");
//获取班级id
var gradeId = $("#grade option:selected").val();
console.log("查询班级222" + gradeId);
$http.get(
"${ctx}/ManagerSchool/findClassTable?gradeId="
+ gradeId).then(
function success(response) {
$scope.classList = response.data;
}, function error(response) {
layer.alert('查询班级数据失败!!!', {
icon : 5
});
});
}
//根据班级id查询学生List
$scope.findStudentList = function() {
console.log("查询学生list");
//获取班级id
var classId = $("#classname option:selected").val();
if (classId == null || classId == "") {
$.alertView("请选择年级和班级！！");
return false;
}
$http.get(
"${ctx}/orderEnter/selectStudentsByClassId?classId="
+ classId).then(
function success(response) {
$scope.studentList = response.data;
console.log("学生list="
+ $scope.studentList);
}, function error(response) {
layer.alert('查询学生数据失败!!!', {
icon : 5
});
});
}
//订单生成方法
$scope.createOrder = function() {
//1.获取选中单选框的值
var jtbs = $("input[name='radio']:checked").val();
console.log("交退费标识=" + jtbs);
//2.<!--获取选中复选框的值-->
var studentIdList = new Array();
$("input[type=checkbox]:checked").each(function(i) {
studentIdList[i] = $(this).val();
});
console.log("studentIdList=" + studentIdList);
if (studentIdList == null || studentIdList == "") {
$.alertView("请选择账单学生！！");
return false;
}
//3.获取订单list信息
console.log("费用条数FieldCount=" + FieldCount);
console.log("获取adddoneList=" + adddoneList);
var orderList = new Array();
for (var j = 0; j < adddoneList.length; j++) {
var i = adddoneList[j];
//1.费用名称
var xmmc = $("#field_" + i).val();
console.log("费用名称" + i + "=" + xmmc);
if (xmmc == null || xmmc == "") {
$.alertView("*请输入费用名称！");
return false;
}
//2.费用金额
var je = $("#money_" + i).val();
console.log("费用金额" + i + "=" + je);
if (je == null || je == "") {
$.alertView("*请输入费用金额！");
return false;
}
var exp = /^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/;
if (!exp.test(je)) {
$.alertView("*输入费用金额格式有误！");
return;
}
//3.订单月份
var ddyf = $("#month_" + i + " option:selected")
.val();
console.log("订单月份" + i + "=" + ddyf);
if (ddyf == null || ddyf == "") {
$.alertView("*请选择订单月份！");
return false;
}
//4.备注
var ddbz = $("#text_" + i).val();
console.log("备注" + i + "=" + ddbz);
//组装订单
var order = {
//费用名称
"xmmc" : xmmc,
//费用金额
"je" : je,
//订单月份
"ddyf" : ddyf,
//备注
"ddbz" : ddbz
};
orderList.push(order);
}
if (orderList == null || orderList == "") {
$.alertView("*请填写账单！");
return false;
}
var orderEnterBobj = {
payBack : jtbs,
studentIdList : studentIdList,
orderList : orderList
}
/* 将数组转换为json类型的字符串 */
//var orderListJSON = JSON.stringify(orderList);
var orderEnterBobjJson = JSON
.stringify(orderEnterBobj);
console.log("订单list信息=" + orderList);
/* if (isCardNo(managerIdCard) == false) {
$.alertView("您输入的身份证号格式不正确!!");
return false;
} */
//确认按钮隐藏
$("#submitOrder").css({"display":"none"});
$http(
{
method : 'post',
data : $.param({
orderEnterBobj : orderEnterBobjJson
}),
//transformRequest: angular.identity, //使用angular传参认证
headers : {
'Content-Type' : 'application/x-www-form-urlencoded;charset=utf-8'
//'Content-Type' : 'application/json;charset=utf-8'
},
url : '${ctx}/orderEnter/insertOrdetList',
}).then(function(response) {
var data = response.data;
if (data) {
$.alertView("账单录入成功！！");
cover.style.display = "none"; //隐藏遮罩层
lookmodal.style.display = "none"; //隐藏弹出层
window.location.reload();
} else {
$.alertView("账单录入失败！！");
}
});
}
//订单预览
$scope.lookOrder = function() {
console.log("预览显示");
//1.获取交退费值
$scope.jtmc = $("input[name='radio']:checked")
.next("label").text();
console.log("交退费名称=" + $scope.jtmc);
//2.获取年级班级
$scope.gradeName = $("#grade option:selected")
.text();
$scope.className = $("#classname option:selected")
.text();
console.log("获取年级名称=" + $scope.gradeName);
console.log("获取班级名称=" + $scope.className);
//3.获取学生list
var studentNameList = new Array();
$("input[type=checkbox]:checked").each(
function(i) {
var studentName = $(this).next(
".studentName").text();
console.log("获取学生名称="+studentName);//nextSibling
var studentIdcard = $(this).next(
".studentName").next(
".studentIdcard").text();
console.log("获取学生idcard="
+ studentIdcard);
var student = {
studentName : studentName,
studentIdcard : studentIdcard
}
studentNameList.push(student);
});
if (studentNameList == null
|| studentNameList == "") {
$.alertView("请选择账单学生！！");
return false;
}
$scope.studentListSelect = studentNameList;
console.log("获取学生list=" + $scope.studentListSelect);
//4.获取订单list信息
console.log("费用条数FieldCount=" + FieldCount);
var orderList = new Array();
console.log("获取订单list信息adddoneList=" + adddoneList);
for (var j = 0; j < adddoneList.length; j++) {
var i = adddoneList[j];
//1.费用名称
var xmmc = $("#field_" + i).val();
console.log("费用名称" + i + "=" + xmmc);
if (xmmc == null || xmmc == "") {
$.alertView("*请输入费用名称！");
return false;
}
//2.费用金额
var je = $("#money_" + i).val();
console.log("费用金额" + i + "=" + je);
if (je == null || je == "") {
$.alertView("*请输入费用金额！");
return false;
}
var exp = /^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/;
if (!exp.test(je)) {
$.alertView("*输入费用金额格式有误！");
return;
}
//3.订单月份
var ddyfValue = $("#month_" + i + " option:selected")
.val();
console.log("订单月份" + i + "=" + ddyfValue);
if (ddyfValue == null || ddyfValue == "") {
$.alertView("*请选择订单月份！");
return false;
}
var ddyf = $("#month_" + i + " option:selected")
.text();
console.log("订单月份" + i + "=" + ddyf);
if (ddyf == null || ddyf == "") {
$.alertView("*请选择订单月份！");
return false;
}
//4.备注
var ddbz = $("#text_" + i).val();
console.log("备注" + i + "=" + ddbz);
//组装订单
var order = {
//费用名称
xmmc : xmmc,
//费用金额
je : je,
//订单月份
ddyf : ddyf,
//备注
ddbz : ddbz
};
orderList.push(order);
}
if (orderList == null || orderList == "") {
$.alertView("*请填写账单！");
return false;
}
$scope.orders = orderList;
$("#cover").css('display', 'block');//显示遮罩层
$("#lookmodal").css('display', 'block'); //显示弹出层
}
//金额校验方法
$scope.validateMoney = function(money) {
console.log("金额校验=" + money);
if (!/^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/.test(money)) {
$.alertView('金额格式有误，小数点后只能保留两位');
}
}
});
</script>
</html>
本文介绍了一个教育云平台的账单录入系统，包括学生信息查询、账单生成及确认流程。系统支持缴费和退费操作，能动态添加费用项，并提供预览功能确保账单准确性。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
