xiaoben-as2-php/protected/views/ispgift/setting.php

<link rel="stylesheet" href="/fonts/fpdf/iconfont.css"/>
<link rel="stylesheet" href="/css/alert.css"/>
<?php $imgUrl = Yii::app()->request->hostInfo.'/images/disable.png';?>
<style>
    .color-red{
        color: red;
    }
    .en-tfb-grade-1 .date>span{
        margin-right: 40px;
    }
    .option-wrap{
        margin-top: 20px;
        min-width: 600px;
    }
    .option-name{
        display: inline-block;
        width: 100px;
        vertical-align: top;
        margin-top: 10px;
    }
    .option-con{
        position: relative;
        display: inline-block;
        width: 80%;
        min-width: 490px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .option-con.current{
        padding-bottom: 40px;
    }
    .option-con.current .enclosure{
        display: flex;
    }
    .option-con>span{
        display: inline-block;
        margin-right: 20px;
        margin-top:10px;
        line-height: 1rem;
        cursor: pointer;
    }
    .select-grade{
        width: 150px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .option-con-class label{
        display: inline-block;
        margin-right: 20px;
    }
    .active{
        color: #07af66;
    }
    .btn-start{
        display: inline-block;
        margin-top: 20px;
        margin-left: 100px;
        padding: 10px 30px;
        color: #fff;
        background-color: #07af66;
        cursor: pointer;
    }
    .en-tfb-grade-1{
        margin-left: 20px;
    }
    .enclosure{

        position: absolute;
        width: 100%;
        height: 30px;
        padding-left: 10px;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        border-top: 1px solid #cccccc;
        background: #cccccc60;
        display: none;
    }
    .enclosure .enclosureItem{
        display: flex;
        align-items: center;
        margin-right: 20px;
    }
    .enclosureItem em{
        font-style: normal;
        margin: 0 10px;
    }
    .enclosureItem a{
        width: 20px;
        height: 20px;
        background: url("/images/icon_downloadh.png") no-repeat center;
        -webkit-background-size: contain;
        background-size: contain;
        cursor: pointer;
    }
</style>

<div class="main-content-inner">
    <!--    导航栏开始-->
    <?php include(Yii::app()->basePath.'/views/layouts/view_production_navigation.php');?>
    <!--    导航栏结束-->
    <div class="en-tfb-grade-1">
        <h2>培优版赠品生成</h2>
        <p class="color-red">提示：每个班级每周原则上生成一次，请根据实际需要生成。</p>
        <ul id="node-content">
            <li class="option-wrap">
                <span class="option-name"></span>
                <div class="option-con" id="optionEdition">
                    <?php if(isset($topNode) && $topNode):?>
                        <?php $no =1;?>
                        <?php foreach($topNode as $k=>$v):?>
                            <span parentid="<?php echo $v->parentId;?>" pcid="<?php echo $v->pcId;?>"><?php echo $v->pcName;?></span>
                            <?php $no++;?>
                        <?php endforeach;?>
                    <?php endif;?>
                    <div class="enclosure">
                        <div class="enclosureItem">
                            <strong>相关附件</strong><em>高一学生心理健康维护.pdf</em><i></i>
                        </div>
                    </div>
                </div>

            </li>

        </ul>
        <div class="option-wrap">
            <span class="option-name">班级:</span>
            <div class="option-con">
                <div>
                    <select name="grade" class="select-grade">
                        <option value="1" selected>高一</option>
                        <option value="2">高二</option>
                        <option value="3">高三</option>
                    </select>
                </div>
                <div class="option-con-class"  id="optionClass">

                    <div class="enclosure">
                        <strong>相关附件</strong><em>高一学生心理健康维护.pdf</em><i></i>
                    </div>
                </div>

            </div>
        </div>

        <span class="btn-start" id="confirm" active="true">开始生成</span>

    </div>

</div>

<script src="/js/jquery.ajaxfileupload.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        getClassByGrade(1);

        // 选择年级
        $(".select-grade").change(function() {
            console.log($(this).val())
        });

        // 单选按钮
        $("input[name='option-class']").change(function() {
            getsClassSelected();
        });

        function getsClassSelected() {
            optionData.class=[];
            var selectedData = $("input[name='option-class']:checked"); //获取所以选中学生
            for (var i = 0; i < selectedData.length; i++) {
                code = $(selectedData[i]).val();
                optionData.class.push(code);
            }
        };


        $("body").delegate("#node-content li div span","click",function () {
            //显示下载项
            var $parent = $(this).parent('.option-con')


            $(this).siblings().removeClass('active');
            $(this).addClass('active');

            $(this).parent().parent().nextAll().remove();
            $(this).parent().parent().attr('id','li_'+ $(this).attr('pcid'));
            $.ajax({
                url: "<?php echo $this->createUrl('ispgift/ajaxChildNode');?>",
                type: "GET",
                dataType: "json",
                data: {
                    parentId: $(this).attr('pcid'),
                },
                success: function (data) {
                    if(data.status == 1) {

                        if( data.data !== null){
                            var con = '<li class="option-wrap"> <span class="option-name"></span><div class="option-con" id="optionEdition">';
                            $.each(data.data, function (index, item) {
                                con += '<span pcid="' + item.pcId + '" parentid="' +  item.parentId  +'">' + item.pcName + '</span>';
                            });
                            con += '</div></li>';
                        }
                        $("#node-content").append(con);
                        //添加附件信息

                        var enclosureInfo = ''
                        if(data.detail && data.detail.length){
                            var download_url = "<?php echo $this->createUrl('ispgift/download');?>";
                            enclosureInfo+='<div class="enclosure">'
                            enclosureInfo+=data.detail.reduce(function(htmls,cur){
                                htmls+=cur.filePath?'<div class="enclosureItem">\n' +
                                '                            <strong>相关附件</strong><em>'+cur.fileName+'</em><a href="'+  download_url + '?pcdId=' + cur.pcdId + '&url=' + cur.filePath+ '&fileName='+ cur.fileName + '" ' +'></a>\n' +
                                '                        </div>':'';
                                return htmls
                            },'')
                            enclosureInfo+='</div>'
                        }
                        $parent[enclosureInfo?'addClass':'removeClass']('current');
                        $parent.find('.enclosure').remove()
                        $parent.append(enclosureInfo)




                    }}
            })
        });

        $('.select-grade').change(function(){
            var grade = $(this).val();
            getClassByGrade(grade);
        });

        $("body").delegate("#confirm[active='true']", "click", function() {
            var This = $(this);
            This.attr("active","false");
            var error = [];
            var selectClassIds = [];
            var grade = parseInt($('.select-grade').val());

            var pcIds = [];
            $('#node-content li div span.active').each(function () {
                var data1 = {"pcId": $(this).attr('pcid'),"pcName":$(this).text(), "parentId":$(this).attr('parentid')};
                pcIds.push(data1);
            });
            $('#optionClass input:checked').each(function(k,v){
                if($(this).attr("status") == 0){
                    selectClassIds.push($(this).val());
                }
            });

            if(pcIds.length == 0){
                error.push("请指定目录");
            }
            var noSelect = true;
            var lastNode = $('#node-content').children().last();
            lastNode.find('span').each(function (i) {
                if($(this).hasClass('active')){
                    noSelect = false;
                }
            });
            if(noSelect){
                error.push("请指定目录~");
            }
            if(selectClassIds.length == 0){
                error.push("请选择班级");
            }
            if(grade <= 0 || !grade){
                error.push("请选择年级");
            }

            if(error.length == 0){
                $.ajax({
                    url: "<?php echo $this->createUrl('ispgift/ajaxSaveGift');?>",
                    type: "POST",
                    dataType: "json",
                    data: {
                        grade: grade,
                        selectClassIds:selectClassIds,
                        pcIds:pcIds
                    },
                    success: function (data) {
                        if(data.status == 1){
                            layer.msg('已发送到后台，预计1小时左右生成！', {
                                time: 2000,
                            });
                            setTimeout(function(){window.location.href = "<?php echo Yii::app()->createUrl('ispgift/index');?>";}, 2000);

                        }else{
                            layer.msg(data.error.join('</br>'));
                            This.attr("active","true");
                        }
                    }

                });
            }else{
                This.attr("active","true");
                layer.msg(error[0]);
            }
        });

        function getClassByGrade(grade){
            if(grade){
                $.ajax({
                    url: "<?php echo $this->createUrl('ispgift/ajaxGetClasses');?>",
                    type: "POST",
                    dataType: "json",
                    data: {
                        grade: grade,
                    },
                    success: function (data) {
                        var html = '';
                        if(data && data.length > 0){
                            for(var i in data){
                                html +='<label>';
                                if(data[i].status == 1){
                                    html += '<span title="该班级已达每周生成的最大次数"><img src="<?php echo $imgUrl;?>">'+data[i].class_name+'</span>';
                                }else{
                                    html += '<input type="checkbox" name="option-class" id="class_'+ data[i].class_id  +'" onclick="checkOrder('+ "'"+ grade + "','" +  data[i].class_id + "')" +'" value="'+data[i].class_id+'" status="0">'+data[i].class_name;
                                }

                                html +='</label>';
                            }
                        }
                        $('#optionClass').html(html);
                    }

                });
            }
        }

    });


    function checkOrder(grade,classId) {
        $.ajax({
            url: "<?php echo $this->createUrl('ispgift/checkOrder');?>",
            type: "POST",
            dataType: "json",
            data: {
                classId: classId,
                grade:grade
            },
            success: function (data) {
                console.log(data);
                if(!data.status){
                    layer.msg(data.message);
                    var class_id = 'class_' + data.class_id;
                    $('#'+ class_id.toString()).attr("checked",false);
                }
            }
        });
    }
</script>