develop

分支 (4)

管理

管理

develop

master

feature

release

doctors
/
attendance.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body>
            <div class="content">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">考勤表</h4>
                    </div>
                </div>
                <div class="row filter-row">
                    <div class="col-sm-6 col-md-3">
                        <div class="form-group form-focus">
                            <label class="focus-label">员工姓名</label>
                            <input type="text" id="employeeName" class="form-control floating">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="form-group form-focus select-focus">
                            <label class="focus-label">月份</label>
                            <select id="mon" class="select floating">
                                <option value="1">一月</option>
                                <option value="2">二月</option>
                                <option value="3">三月</option>
                                <option value="4">四月</option>
                                <option value="5">五月</option>
                                <option value="6">六月</option>
                                <option value="7">七月</option>
                                <option value="8">八月</option>
                                <option value="9">九月</option>
                                <option value="10">十月</option>
                                <option value="11">十一月</option>
                                <option value="12">十二月</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="form-group form-focus select-focus">
                            <label class="focus-label">年度</label>
                            <select id="year" class="select floating">
                                <option value="2022">2023</option>
                                <option value="2022">2022</option>
								<option value="2022">2022</option>
								<option value="2020">2020</option>
								<option value="2019">2019</option>
								<option value="2018">2018</option>
                                <option value="2017">2017</option>
                                <option value="2016">2016</option>
                                <option value="2015">2015</option>
                                <option value="2014">2014</option>
                                <option value="2013">2013</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <a href="javascript:seach();" class="btn btn-success btn-block"> 查询 </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
						<div class="table-responsive">
                            <table class="table table-striped custom-table mb-0">
                                <thead>
                                    <tr id="days">
                                    </tr>
                                </thead>
                                <tbody id="attendances">
                                </tbody>
                            </table>
						</div>
                    </div>
                </div>
            </div>

    <div class="sidebar-overlay" data-reff=""></div>
    <script src="assets/js/jquery-3.2.1.min.js"></script>
	<script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.slimscroll.js"></script>

    <script src="assets/js/app.js"></script>
	<!--json data-->
	<script type="text/javascript" src="json/attendances.json"></script>
	<script type="text/javascript">
	var year;
	var mon;
	var employeeName = "";
	$(document).ready(function () {
		var nowDay = new Date();
		year = nowDay.getFullYear(); //获取当前年
		var yearsel = $("#year").select2();//获取selectid
		yearsel.val(year).trigger("change");//设置 value 为four的 option 为选中状态
		mon = nowDay.getMonth() + 1; //获取当前月
		var monsel = $("#mon").select2();//获取selectid
		monsel.val(mon).trigger("change");//设置 value 为four的 option 为选中状态

		showData();
	});
	//搜索
	function seach(){
		year = $("#year").val(); //获取当前年
		mon = $("#mon").val(); //获取当前月
		employeeName = $.trim($("#employeeName").val());
		showData();
	}

	//显示数据
	function showData(){
		var days = 30;
		if(mon == 2){//2月
			if(year % 4 == 0){
				days = 29;
			}else{
				days = 28;
			}
		}else if(mon == 1 || mon == 3 || mon == 5 || mon == 7 || mon == 8 || mon == 10 || mon == 12){
			days = 31;
		}
		var daysStr = '<th>员工</th>';
		for(var i = 1; i <= days; i++){
			daysStr = daysStr + '<th>'+ i +'</th>';
		}
		$('#days').html(daysStr);

		var attendancesStr = "";
		var nowAttendances;
		for(var i = 0; i < attendances.length; i++){//循环查找
			var attendance = attendances[i];
			if(attendance.year == year){//等于循环变量
				var items = attendance.items;
				for(var j = 0; j < items.length; j++){
					var item = items[j];
					if(item.mon == mon){
						nowAttendances = item.items;
						if(employeeName != ""){
							for(var k = 0; k < nowAttendances.length; k++){
								if(nowAttendances[k].employeeName != employeeName){
									nowAttendances.splice($.inArray(nowAttendances[k],nowAttendances),1);
								}
							}
						}
						//return false; //代替 break;
					}
				}
				//return false; //代替 break;
			}
		}
		for(var i = 0; i < nowAttendances.length; i++){
			attendancesStr = attendancesStr + '<tr>';
            attendancesStr = attendancesStr + '<td>'+ nowAttendances[i].employeeName +'</td>';
			var items = nowAttendances[i].items;
			for(var j = 0; j < items.length; j++){
				var item = items[j];
				if(item.type == 'all'){
					if(item.status == 1){
						attendancesStr = attendancesStr + '<td><i class="fa fa-check text-success"></i></td>';
					}else{
						attendancesStr = attendancesStr + '<td><i class="fa fa-close text-danger"></i></td>';
					}
				}else{
					attendancesStr = attendancesStr + '<td><div class="half-day">';
					if(item.status == 1){//上午不请假
						attendancesStr = attendancesStr + '<span class="first-off"><i class="fa fa-check text-success"></i></span>';
						attendancesStr = attendancesStr + '<span class="first-off"><i class="fa fa-close text-danger"></i></span>';
					}else{//上午请假
						attendancesStr = attendancesStr + '<span class="first-off"><i class="fa fa-close text-danger"></i></span>';
						attendancesStr = attendancesStr + '<span class="first-off"><i class="fa fa-check text-success"></i></span>';
					}
					attendancesStr = attendancesStr + '</div></td>';
				}
			}
            attendancesStr = attendancesStr + '</tr>';
		}
		$("#attendances").html(attendancesStr);
	}
	</script>
</body>

</html>