xiaoben-as2-php/protected/views/classes/view_history_progress.php

<link href="/css/base.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/jquery.datetimepicker.css" />
<link rel="stylesheet" href="/css/bootstrap-3.3.7-dist/css/bootstrap.min.css">

<script src="/js/jquery.validate.min.js"></script>
<script src="/js/layer/layer.js"></script>
<script src="/js/jquery.datetimepicker.js"></script>

<style>
    body{
        position: initial;
    }
    .some_class{
        width: 120px;
        height: 30px;
        line-height: 30px;
    }
	.screen{
		margin: 0 30px;
		font-size: 16px;
		color: #666666;
	}
	.screen-rows{
		/*margin: 20px 0;*/
		line-height: 30px;
		/*overflow: hidden;*/

	}
        .screen-rows>div{
            margin:20px 50px 0 0;
        }
	.screen-rows-title{
		line-height: 25px;
		font-size: 18px;
		color: #333;
	}
	.subject{
		margin-right: 50px;
	}
	.subject>select, .grade>select{
		width: 120px;
		height: 30px;
	}
	.go-back{
		font-size: 16px;
		border: none;
		color: #2977ff;
		outline: none;
		background: #fff;
		cursor: pointer;
	}
	.teaching-class{
		display: flex;
	}
	.active-class-box{
		display: flex;
		padding: 5px;
		background: #F8F8F8;
	}
	.active-class{
		margin: 5px;
		padding: 0 20px;
		border: 1px solid #619aff;
		border-radius: 2px;
	}
	.add-active-class{
		margin: 5px;
		font-size: 16px;
		color: #2977ff;
		cursor: pointer;
	}
	.add-active-class>img{
		display: inline-block;
		width: 18px;
		height: 18px;
		vertical-align: middle;
		margin-right: 2px;
		
	}
	.btn-delete, .btn-delete-chapter {
		display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        color: red;
        cursor: pointer;
    }
    .screen .date input {
        height: 30px;
        border-radius: 4px;
        border: 1px solid #ccc;
        box-shadow: none;
        text-indent: 10px;
    }
	
	.look-history{
		width: 120px;
		line-height: 30px;
		border: 1px solid #2977ff;
		color: #2977ff;
		outline: none;
		background: #fff;
		cursor: pointer;
	}
	.screen-msg{
		font-size: 14px;
		color: #2977ff;
	}
	.img-add-versions{
		margin-left: 10px;
		vertical-align:middle;
		cursor: pointer;
	}
	.chapter-box{
		border: 1px solid #333;
		padding: 10px;
		height: 420px;
		overflow: -webkit-paged-x;
	}
	.chapter{
		float: left;
		margin: 5px;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 40px;
		height: 380px;
		line-height: 30px;
		color: #fff;
		font-size: 22px;
		text-align: center;
	}
	.chapter-box .type-versions{
		background-color: #52596A;;
	}
	.chapter-box .type-chapter{
		background-color: #747E9A;
	}
	.chapter-box .type-knowledge{
		background-color: #99B7D6;
	}
	.chapter:hover{
		background-color: #f2988f;
		cursor: pointer;
	}
	.chapter-box .active{
		background-color: #f2988f;
	}

	.active-chapter-box{
		display: flex;
		padding: 10px;
	}
	.active-chapter{
		margin-right: 10px;
		padding: 0 20px;
		border: 1px solid #2977ff;
	}
	.btn-box{
		padding: 10px 0;
		/*border-top: 1px solid #dcdcdc;
		border-bottom:1px solid #dcdcdc;*/
		text-align: center;
	}
	.generating-teaching-schedule{
		padding: 6px 12px;
		line-height: 30px;
		border: 1px solid #2977ff;
		border-radius: 5px;
		font-size: 14px;
		color: #fff;
		background: #2977ff;
		outline: none;
		cursor: pointer;
	}
	.bottom-msg{
		text-indent: 2em;
		font-size: 14px;
		color: #999;
	}


.layer-add-class{
	position: relative;
	display: none;
	width: 640px;
	height: 336px;
	font-size: 16px;
	line-height: 30px;
}
.class-type{
	margin: 20px 10px;
	overflow: hidden;
}
.layer-add-class .left{
	width: 70px;
	margin-right: 20px;

}
.layer-add-class .right{
	width: 480px;
}
.layer-add-class label{
	cursor: pointer;
}
.layer-add-class input[type='checkbox']{
	width: 16px;
	height: 16px;
	/*-webkit-appearance:none;
	border:2px solid #50d2c2;
	background-color: #fff;*/
}
.layer-err-msg{
	display: none;
	color: red;
	text-align: center;
}
.button-btn-box{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-align: center;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}
.button-btn-box button{
	width: 88px;
	line-height: 30px;
	border-radius: 3px;
	outline: none;
	cursor: pointer;

}
.layer-btn-add-class{
	color: #fff;
	background-color: #2977ff;
	border: 1px solid #2977ff;
}
.layer-btn-cancel-class{
	color: #333;
	background-color: #fff;
	border: 1px solid #333;
}
.btn-box-show-2{
	display: none;
}


.layer-choice-teaching-material-type{
	position: relative;
	display: none;
	width: 478px;
	height: 180px;
	color: #717171;
	text-align: center;
}
.layer-teaching-material-type-title{
	margin-bottom: 20px;
	color: #a0a0a0;
	font-size: 18px;
}
.layer-choice-teaching-material-type p{
	line-height: 20px;
}
.layer-teaching-material-type-btn-box{
	margin-top: 40px;
	margin-bottom: 20px;
	/*position: absolute;
	bottom: 18px;*/
}
.step-tips .line{
	display: inline-block;
	width: 30px;
	margin: 10px;
	border-bottom: 1px solid #2977ff;
}
.layer-teaching-material-type-btn-box button{
	width: 88px;
	line-height: 30px;
	color: #2977ff;
	background-color: #fff;
	border: 1px solid #2977ff;
	border-radius: 3px;
	outline: none;
	cursor: pointer;


}
#btnLayerStepThreeCancel{
	color: #dcdcdc;
	border: 1px solid #dcdcdc;
}
.teaching-material-type-box button{
	margin: 5px;
	width: 60px;
	line-height: 26px;
	color: #999;
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
}
.btn-teaching-material-type.active{
	color: #fff;
	background-color: #32c5b3;
	border: 1px solid #32c5b3;
}
.layer-choice-teaching-material-type .step-2{
	display: none;
}
.layer-choice-teaching-material-type .step-3{
	display: none;
}
.confirm-layer-box{
	margin: 20px;
	line-height: 20px;
	text-align: center;
}

.layui-layer-btn .layui-layer-btn0{
	border-color: #2977ff !important ;
	background-color: #2977ff!important;
}
.table-progress{
    margin-top: 20px;
    width: 100%;
    line-height: 40px;
    border: 1px solid #ddd;
    
}
.table-progress tr:first-child{
    background-color: #ececec!important;
}
.table-progress th {
    /*border-bottom: 2px solid #ddd;*/
}
.table-progress td {
    min-width: 120px;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    /*border-bottom: 2px solid #ddd;*/
}
.table-progress tr {
    /*line-height: 30px;*/
}
.table-progress tr:nth-of-type(odd){ background:#fff;}
.table-progress tr:nth-of-type(even){ background:#F8F8F8;}
.table-progress .gray{
    color: #999999;
}
        .icon-wrap{
            position: relative;
            /*width: 100px;*/
            height: 30px;
	}
	.icon-box{
            display: inline-block;
            position: relative;
            right: -12px;
            top: 10px;

        }
	.icon-box> i{
		display: block;
		cursor: pointer;
	}
	.icon-box .active{
		color: #2977ff;
	}
        .green-more{
            color:#2977ff;
        }
        .col-xs-7,.col-xs-5{
            width: 100%!important;
        }
        .dataTables_paginate{
           text-align: center; 
        }
        
        
        .err-msg{
            width: 100%;
            line-height: 80px;
            text-align: center;
            font-size: 20px;
            
        }
        .history-edit{
            width:16px;
            height:16px;
            display: inline-block;
            background: url("/images/history-edit.png");
            cursor: pointer;
        }
        .history-edit-no{
            width:16px;
            height:16px;
            display: inline-block;
            background: url("/images/history-edit-no.png")
        }
        .history-del-no{
            width:16px;
            height:16px;
            display: inline-block;
            background: url("/images/history-del-no.png");
             background-size: contain;
                
        }
        .history-del{
            width:16px;
            height:16px;
            display: inline-block;
            background: url("/images/history-del.png");
            background-size: contain;
            cursor: pointer;
        }
        .grey{
            color: #bab8b8!important;
        }
</style>

<div class="teaching-progress">
		<div class="screen">
			<form action="">
				<div class="screen-rows clearfix">
					<div class="subject fl">
						<span class="screen-rows-title">科目:</span>
						<select name="select-subject">
							<option value="3" <?php echo $subjectId == 3?"selected=selected":"";?>>数学</option>
							<option value="8" <?php echo $subjectId == 8?"selected=selected":"";?>>英语</option>
						</select>
					</div>
					<div class="grade fl">
						<span class="screen-rows-title">年级:</span>
						<select name="select-grade">
							<option value="1" <?php echo $grade == 1?"selected=selected":"";?>>高一</option>
							<option value="2" <?php echo $grade == 2?"selected=selected":"";?>>高二</option>
							<option value="3" <?php echo $grade == 3?"selected=selected":"";?>>高三</option>
						</select>
					</div>
                                        <div class="class-select fl">
						<span class="screen-rows-title">班级:</span>
						<select name="select-class">
                                                    <option value = "0" <?php echo empty($classId)?"selected=selected":"";?>>全部班级</option>
                                                    <?php if(isset($classmeg) && $classmeg):?>
                                                        <?php foreach($classmeg as $k=>$v):?>
                                                            <option value="<?php echo $v['class_id'];?>" <?php echo (string)$classId === (string)$v['class_id']?"selected=selected":"";?>><?php echo $v['class_name'];?></option>
                                                        <?php endforeach;?>
                                                    <?php endif;?>
						</select>
					</div>
                                        <div class="time-select fl">
                                            <span class="screen-rows-title">时间范围:</span>
                                            <input type="text" class="some_class" value="<?php echo $start_time;?>" id="some_class_1" /> --
                		<input type="text" class="some_class" value="<?php echo $end_time;?>" id="some_class_2" />
                                        </div>
					<button type="button" class="go-back fr" id="goBack" onclick='location.href="<?php echo $this->createUrl("classes/settingProgress");?>"'>返回</button>
					
				</div>
			</form>
		
		</div>
                <table class="table-progress">
                    <tr>
                        <td>序号</td>
                        <td>科目</td>
                        <td>班级</td>
                        <td class="icon-wrap">
                            时间段
                            <span class="icon-box">
                                    <i class="glyphicon glyphicon-triangle-top sort-up begin-time<?php echo $status == 2?" active":'';?>" id="sort-up"></i>
                                    <i class="glyphicon glyphicon-triangle-bottom sort-down begin-time<?php echo $status == 1 || $status == 0?" active":'';?>" id="sort-down"></i>
                            </span>
                        </td>
                        <td class="icon-wrap">
                            创建时间
                            <span class="icon-box">
                                    <i class="glyphicon glyphicon-triangle-top sort-up create-time<?php echo $status == 4?" active":'';?>" id="sort-up"></i>
                                    <i class="glyphicon glyphicon-triangle-bottom sort-down create-time<?php echo $status == 3?" active":'';?>" id="sort-down"></i>
                            </span>
                        </td>
                        <td>教材</td>
                        <td>教学进度内容</td>
                        <td>操作</td>
                    </tr>
                    <?php if(isset($rs) && $rs):?>
                        <?php if(isset($rs['rs']) && $rs['rs']):?>
                            <?php $no = ($page-1)*$pagesize +1;?>
                            <?php foreach($rs['rs'] as $k=>$v):?>
                                <tr>
                                    <td><?php echo $no;?></td>
                                    <td><?php echo $v['subject_id'] == 3 || $v['subject_id'] == 6 ? '数学':'英语'?></td>
                                    <td><?php echo $v['class_name']?></td>
                                    <td><?php echo date('Y-m-d',$v['start_time']);?>至<?php echo date('Y-m-d',$v['end_time']);?></td>
                                    <td><?php echo date('Y-m-d H:i',$v['create_time']);?></td>
                                    <td class="<?php echo $v['is_new'] == 0?'grey':'';?>"><?php echo $v['textbook_name']?></td>
                                    <td class="<?php echo $v['is_new'] == 0?'grey':'';?>">
                                        <?php 
                                                if(mb_strlen($v['progress_name'],'UTF8') >40){
                                                    $originName = $v['progress_name'];
                                                    echo mb_substr($v['progress_name'],0,40,"UTF-8").'...<span class="green-more" id="m'.$no.'"name-choose="'.$originName.'">更多</span>';
                                                }else{
                                                    echo $v['progress_name'];
                                                }
                                        ?>
                                    </td>
                                    <td>
                                        <?php if($v['is_new'] == 1):?>
                                            <span class="edit-progress history-edit" progressId="<?php echo $v['id'];?>"></span>
                                            <span class="del-progress history-del-no" progressId="<?php echo $v['id'];?>"></span>
                                        <?php else:?>
                                            <span class="edit-progress-no history-edit-no" progressId="<?php echo $v['id'];?>"></span>
                                            <span class="del-progress history-del-no" progressId="<?php echo $v['id'];?>"></span>
                                        <?php endif;?>
                                        
                                        
                                    </td>
                                </tr>
                                <?php $no++;?>
                            <?php endforeach;?>
                        <?php endif;?>
                    <?php endif;?>
                </table>
                <?php if(!empty($rs["pager"]->rowsCount)):?>
                    <div class="row">
                            <div class="col-xs-7">
                                    &nbsp;
                            </div>
                            <div class="col-xs-5">
                                    <div class="dataTables_paginate paging_simple_numbers">
                                            <?php
                                            $this->widget('CLinkPager', array(
                                                    'header'	=>	'',
                                                    'firstPageLabel'=>	'首页',
                                                    'lastPageLabel'	=> '末页',
                                                    'prevPageLabel'	=> '上一页',
                                                    'nextPageLabel'	=> '下一页',
                                                    'pages'			=> $rs['pager'],
                                                    'maxButtonCount'=> 5,
                                            ));
                                            echo '共：'.$rs["pager"]->rowsCount.'条';
                                            ?>
                                    </div>
                            </div>
                    </div>
                <?php endif;?>

	</div>

    <script src="/js/jquery.datetimepicker.js"></script>
    <script src="/js/layer/layer.js"></script>
    <script>
        $('.some_class').datetimepicker({
	            format: "Y-m-d", //格式化日期
	            timepicker: false //关闭时间选项
	        });
        //切换日期
        $(".some_class").on("input", function() {
            var sTime = $('#some_class_1').val();
            var eTime = $('#some_class_2').val();
            var grade = $("select[name='select-grade']").val();
            var subjectId = $("select[name='select-subject']").val();
            var classId = $("select[name='select-class']").val();
            var params = "grade="+grade+"&subjectId="+subjectId+"&classId="+classId+"&start_time="+sTime+"&end_time="+eTime;
            location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
        })
        //切换年级
        $("select[name='select-grade']").on("change", function() {
            var grade = $(this).val();
            var subjectId = $("select[name='select-subject']").val();
            var params = "grade="+grade+"&subjectId="+subjectId;
            location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
        });
        //切换班级
        $("select[name='select-class']").on("change", function() {
            var classId = $(this).val();
            var subjectId = $("select[name='select-subject']").val();
            var grade = $("select[name='select-grade']").val();
            var params = "grade="+grade+"&subjectId="+subjectId+"&classId="+classId;
            location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
        });
        //切换学科
        $("select[name='select-subject']").on("change", function() {
            var subjectId = $(this).val();
            var grade = $("select[name='select-grade']").val();
            var params = "grade="+grade+"&subjectId="+subjectId;
            location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
        });
        
        //删除
        $("body").on('click',".del-progress",function() {
            var progressId = $(this).attr("progressId");
            if(progressId){
                layer.open({
                    type: 1,
                    title: '提示',
                    btn: ['删除', '取消'],
                    area: ['420px', '190px'], //宽高
                    btnAlign: 'c',
                    content: '<p class="err-msg">确定要删除该条教学进度吗？</p>',
                    yes: function(index, layero) {
                         $.post("<?php echo Yii::app()->createUrl('classes/ajaxDelTeachProgress')?>",{progressId:progressId},function(flags){
                                var m = JSON.parse(flags);
                                console.log(m);

                                if(m.status == 0)
                                {
                                    layer.msg(m.error);
                                }else{
                                    location.reload();
                                }
                        });

                        //提交
                        layer.closeAll();

                    },
                    btn2: function(index, layero) {
                        //取消按钮
                        console.log(111)
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            }
        })
        
        //编辑
         $("body").on('click',".edit-progress",function() {
            var proId = $(this).attr("progressId");
            if(proId){
                location.href = "<?php echo $this->createUrl("classes/settingProgress?");?>"+"proId="+proId+"&edit=1";
            }
         })
        $('.some_class').datetimepicker({
            onSelectDate: function(dateText, inst) {
               var classId = $("select[name='select-class']").val();
               var subjectId = $("select[name='select-subject']").val();
               var grade = $("select[name='select-grade']").val();
               var start_time = $('#some_class_1').val();
               var end_time = $('#some_class_2').val();
               var params = "grade="+grade+"&subjectId="+subjectId+"&classId="+classId+"&start_time="+start_time+"&end_time="+end_time;
                location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
            }
        });
        $(".sort-up").on("click", function() {
                $('.glyphicon').removeClass('active');
                $(this).parents('.icon-box').find("i").removeClass('active');
                $(this).addClass('active');
                if($(this).hasClass('begin-time')){
                    var status = 2;
                }else if($(this).hasClass('create-time')){
                    var status = 4;
                }
                if(status){
                    var classId = $("select[name='select-class']").val();
                    var subjectId = $("select[name='select-subject']").val();
                    var grade = $("select[name='select-grade']").val();
                    var start_time = $('#some_class_1').val();
                    var end_time = $('#some_class_2').val();
                    var params = "grade="+grade+"&subjectId="+subjectId+"&classId="+classId+"&start_time="+start_time+"&end_time="+end_time+"&status="+status;
                    location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
                }

        });
        $(".sort-down").on("click", function() {
                $('.glyphicon').removeClass('active');
                $(this).parents('.icon-box').find("i").removeClass('active');
                $(this).addClass('active');
                if($(this).hasClass('begin-time')){
                    var status = 1;
                }else if($(this).hasClass('create-time')){
                    var status = 3;
                }
                if(status){
                    var classId = $("select[name='select-class']").val();
                    var subjectId = $("select[name='select-subject']").val();
                    var grade = $("select[name='select-grade']").val();
                    var start_time = $('#some_class_1').val();
                    var end_time = $('#some_class_2').val();
                    var params = "grade="+grade+"&subjectId="+subjectId+"&classId="+classId+"&start_time="+start_time+"&end_time="+end_time+"&status="+status;
                    location.href = "<?php echo $this->createUrl("classes/viewHistoryProgress?");?>"+params;
                }
        });
        $("body").on("mouseover",".green-more",function () {
            var nameShow = $(this).attr("name-choose");
            var no = '#'+$(this).attr("id");
            console.log(no);
            if(nameShow){
                layer.tips(nameShow, no, {
                          tips: [1, '#2977ff'],
                          time: 2000
                        });
            }
        })
        $("body").on("mouseover",".history-del-no",function () {
            $(this).removeClass('history-del-no').addClass('history-del');
        });
        $("body").on("mouseout",".history-del",function () {
            $(this).removeClass('history-del').addClass('history-del-no');
        });
    </script>