前台页面代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>加班预报</title>
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/weui.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/jquery-weui.min.css') }}">
<script type="text/javascript" src="{{ URL::asset('/js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery-weui.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/bootstrap.min.js') }}"></script>
</head>
<style type="text/css">
th{
width: 50%;
}
</style>
<body>
<div class="container">
<div class="page-header">
<img src="{{URL::asset('/img/baiclogo.png')}}" height="50px" width="50px" align="left"/>
<h1>加班预报</h1>
</div>
{{--<form action="{{ url('submit') }}" method="post" id="lvliForm">--}}
<div class="form-group">
<label for="description">加班类别</label>
<select id="jie_status" name="overworkType" class="form-control">
<option value="平时">平时</option>
<option value="周末">周末</option>
<option value="节假">节假</option>
</select>
</div>
<div class="form-group">
<label for="zichanNum">开始时间</label>
<input type="text" class="form-control" id="history_end_date" name="overworkStartTime">
<script>
$("#history_end_date").datetimePicker();
</script>
</div>
<div class="form-group">
<label for="zichanNum">结束时间</label>
<input type="text" class="form-control" id="history_start_date" name="overworkEndTime">
<script>
$("#history_start_date").datetimePicker();
</script>
</div>
<div class="form-group">
<label for="user">加班事由</label>
<textarea rows="3" class="form-control" id="history_start_licheng" name="overworkContent" placeholder="请限制在100字以内!"></textarea>
</div>
<div class="alert alert-danger" role="alert">
<p>加班必看:</p>
<p>1.加班预报可提前一周申请</p>
<p>2.平时加班,18:30以后为准</p>
<p>3.当天加班申请,最晚第二天中午12:00之前提交</p>
</div>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<!-- 可能还会有别的数据添加进来 -->
<button type="submit" class="weui_btn weui_btn_primary" id="sub">提交</button>
{{--</form>--}}
</div>
<div style="display:none;" id="hide">
<table border="1px;" style="border: lightslategray solid 1px; width: 100%; text-align: center;">
<h3 style="text-align: center;">加班申请表单确认</h3>
<tr><th>加班类别</th><td id="overworkType"></td></tr>
<tr><th>加班开始时间</th><td id="startTime"></td></tr>
<tr><th>加班结束时间</th><td id="endTime"></td></tr>
<tr><th>加班时长(/小时)</th><td id="overworkTotalTime"></td></tr>
<tr><th colspan="2">加班事由</th></tr>
<tr><td id="overworkContent" colspan="2"></td></tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-block" id="confirm">确认提交</button>
<button class="btn btn-success btn-block" id="cancel" style="background-color: crimson;">取消提交</button>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript" src="{{ URL::asset('/js/jquery-3.0.0.min.js') }}"></script>
<script type="text/javascript">
$('#sub').click(function () {
//判断用户填写表单的开始·结束时间是否为空
if ($('#history_start_date').val() == "" || $('#history_end_date').val() == ""){
alert('填写有误!');
}else {
//获取前台加班时间,进行后台运算,得出加班时长
$.post(
'test',
{
_token:"{{csrf_token()}}",
overworkStartTime:$("#history_end_date").val(),
overworkEndTime:$("#history_start_date").val(),
},
//接收后台数据
function (data) {
$("#overworkTotalTime").html(data); //将结果显示到加班时长里面
}
)
$("#overworkType").html($('#jie_status').val()); //将结果显示到加班类别
$("#startTime").html($('#history_end_date').val()); //将结果显示到开始时间
$("#endTime").html($('#history_start_date').val()); //将结果显示到结束时间
$("#overworkContent").html($('#history_start_licheng').val()); //将结果显示到加班事由
$(".container").hide(); //隐藏第一个div
$('#hide').show(); //显示第二个div
}
});
$('#cancel').click(function () {
$("#hide").hide(); //隐藏第二个div
$('.container').show(); //显示第一个div
});
$('#confirm').click(function () {
$.post(
'submit',
{
_token:"{{csrf_token()}}",
overworkType:$("#overworkType").html(),
overworkStartTime:$("#startTime").html(),
overworkEndTime:$("#endTime").html(),
overworkTotalTime:$("#overworkTotalTime").html(),
overworkContent:$("#overworkContent").html()
},
function (data) {
if (data == "ok"){
alert('提交成功!');
location.reload(); //js 刷新当前页面
}else {
alert('提交信息有误,请重新提交!');
location.reload(); //js 刷新当前页面
}
}
)
});
</script>
</html>
控制器代码:
/**
*获取前台加班时间,进行后台运算,得出加班时长
*/
public function test(){
$startTime = strtotime($_POST['overworkStartTime']); //得到开始时间的时间戳
$endTime = strtotime($_POST['overworkEndTime']); //得到结束时间的时间戳
if($startTime < $endTime){
$starttime = $startTime;
$endtime = $endTime;
}else{
$starttime = $endTime;
$endtime = $startTime;
}
//计算天数
$timediff = $endtime-$starttime;
$days = intval($timediff/86400);
//计算小时数
$remain = $timediff%86400;
$hours = intval($remain/3600);
// 计算分钟数
$remain = $remain%3600;
$mins = intval($remain/60*1.67);
if ($mins<"10") {
$row = str_pad($mins,2,"0",STR_PAD_LEFT);
$res = $hours.".".$row;
return $res;
}else{
$res = $hours.".".$mins;
return $res;
}
}