xiaoben-as2-php/js/down_table.js

String.prototype.substitute = function(data) {
    if (data && typeof(data) == 'object') {
        return this.replace(/\{([^{}]+)\}/g, function(match, key) {
            var value = data[key];
            return (value !== undefined) ? '' + value: '';
        });
    } else {
        return this.toString();
    }
}

window.hgc_downLoadModel = {
    /**
     * 
     * @param {paramData} paramData 
     * 考试名称
     * 可选择下载的班级数据 & 不可选择下载的班级数据
     * 学情分析报告数据
     * 总分段人数分析表数据
     */
    init:function(paramData,cb){

        this.initData(paramData);

        this.renderPage();

        this.bindEvent();

        this.cb = cb;

    },
    tpls:{
        scorePartTpl:'<li class="scoreItem">\
                <input type="number" value="{score}" data-index="{index}">\
                <label>-</label>\
            </li>',
        scorePartZeroTpl:'<li class="scoreItem last">\
            <input type="text" value="0" disabled>\
        </li>',
        examAllClassTpl:'<li class="checkItem checkAll exam">\
                    <input type="checkbox" name="" id="downItem">\
                    <label for="downItem">全部</label>\
                </li>',
        examItemTpl:'<li class="checkItem exam" data-index="{index}">\
                    <input type="checkbox" name="" id="downItem{index}">\
                    <label for="downItem{index}">{className}</label>\
                </li>',
        examNoSelTpl:'<li class="checkItem checkAll">\
            <input type="checkbox" name="" disabled>\
            <label>{className}</label>\
        </li>'
    },
    initData:function(data){
        //去除最后以为补0
        this.scorePart = data.scorePart.reverse().splice(1).reverse();
        //0 word 1excel 2 教师讲案 3 错题文档
        this.downType = 0;

        this.examClassCanSel = data.class.canSel;
        this.examClassNoSel = data.class.noSel;

        this.analysisData = [{
            analysisName:'系统准考证',
            id:10
        },{
            analysisName:'学校准考证',
            id:11
        },{
            analysisName:'只显示在籍生',
            id:12
        },{
            analysisName:'身份证',
            id:13
        }]
        this.examSel = [];
        this.analysisSel = []

    },
    renderPage:function(){
        this.renderScore();

        this.renderExamClass();
    },
    renderScore:function(){
        var self = this;
        var scoreHtml =  this.scorePart.reduce(function(scorePartHtml,score,index){
            scorePartHtml += self.tpls.scorePartTpl.substitute({score:score,index:index})
            return scorePartHtml;
        },'')
        $('#scoreList').html(scoreHtml+self.tpls.scorePartZeroTpl)
        
    },
    renderExamClass:function(){
        var self = this;
        var examClassHtml = self.examClassCanSel.reduce(function(examHtml,item,index){
            var obj = $.extend(item,{index:index})
            examHtml+=self.tpls.examItemTpl.substitute(obj);
            return examHtml;
        },self.tpls.examAllClassTpl)
        $('#examCanSelClass').html(examClassHtml);

        var examNoSelHtml = self.examClassNoSel.reduce(function(htmlStr,item){
            htmlStr += self.tpls.examNoSelTpl.substitute(item);
            return htmlStr;
        },'')
        $('#examNoSelClass').html(examNoSelHtml)
    },
    reduceScorePart:function(){
        var self = this;
        var scorePartLength = self.scorePart.length;
        if(scorePartLength <= 2)return;
        self.scorePart = self.scorePart.splice(0,self.scorePart.length-1);
        self.renderScore()
    },
    addScorePart:function(){
        var self = this;
        var scorePartLength = self.scorePart.length;
        if(scorePartLength >= 10)return;
        self.scorePart.push('');
        self.renderScore()
    },
    clearScroePart:function(){
        var self = this;
        self.scorePart = self.scorePart.map(function(){
            return '';
        })
        self.renderScore()
    },
    bindEvent:function(){
        var self = this;
        //选择考试名称对应生成不同的表格
        var studyAnalysisEl = $('#fieldItemEW');
        var scoreAnalysisEL = $('#fieldItemE');
        scoreAnalysisEL.hide();
        $('#reportList li').click(function () {
            var fieldItem = $(this).attr('data-item');
            this.downType = $(this).index();
            //教师讲案 错题文档，没有学情分析和分段人数分析
            if(~'error|teacher'.indexOf(fieldItem)){
                studyAnalysisEl.hide();
                scoreAnalysisEL.hide();
            }
            //word
            if(fieldItem === 'word'){
                scoreAnalysisEL.hide()
            }
            //excel
            if(fieldItem === 'excel'){
                studyAnalysisEl.show();
                scoreAnalysisEL.show()
            }
        })

        //选择 全选-单选
        $('.checkList').on('click','.checkItem',function(){
            var checkListEl = $(this).parent();
            var checkIputList = checkListEl.find('input');
            var checkStatus = $(this).find('input').prop('checked');
            //是否为选择班级模块
            var isExam = $(this).hasClass('exam');

            if($(this).hasClass('checkAll')){
                //通过全部控制单个
                checkIputList.prop('checked',checkStatus);
                
                if(isExam){
                    self.examSel = checkStatus?self.examClassCanSel:[];
                }else{
                    self.analysisSel = checkStatus?self.analysisData:[];
                }
            }else{
                var checkedCount = 0;
                var _index = +$(this).attr('data-index');
                checkIputList.each(function(index,el){
                    if(!$(el).parent().hasClass('checkAll') && $(el).prop('checked')){
                        checkedCount+=1;
                    }
                })
                var isAllChecked = checkedCount >= checkIputList.length-1;
                //通过单个控制全部
                checkListEl.find('.checkAll input').prop('checked',isAllChecked)

                if(checkStatus){
                    self[isExam?'examSel':'analysisSel'].push(self[isExam?'examClassCanSel':'analysisData'][_index]);
                }else{
                    var index = self[isExam?'examSel':'analysisSel'].filter(function(item,index){
                        if(item.id === self[isExam?'examClassCanSel':'analysisData'][_index].id){
                            return index;
                        }
                    })[0];
                    self[isExam?'examSel':'analysisSel'].splice(index,1);
                }


            }
        })
        //分段人数分析
        //点击操作按钮
        $('.scoreOperator .operator .btn').click(function(){
            if($(this).hasClass('btnReduce')){
                self.reduceScorePart()
            }else if($(this).hasClass('btnAdd')){
                self.addScorePart()
            }else{
                self.clearScroePart()
            }
        })
        //文本框操作
        $('#scoreList').on('blur','input',function(){
            var _index = +$(this).attr('data-index');
            var val = +$(this).val();
            if(
                val <= 0 || 
                (self.scorePart[_index+1] && val <= self.scorePart[_index+1]) ||
                (self.scorePart[_index-1] && val >= self.scorePart[_index-1])
            )
            {
                $(this).val(self.scorePart[_index]);
            }else{
                self.scorePart[_index] = val;
            }
        })

        //提交操作
        $('#submitBtns .submitBtn').click(function(){
            if($(this).hasClass('ensure')){
                self.cb(self.downType,self.examSel,self.analysisSel,self.scorePart)
            }
        })

    }
}

$(function () {
    window.hgc_downLoadModel.init({
        class:{
            canSel:[{
                className:'班级1',
                id:11
            },{
                className:'班级2',
                id:12
            },{
                className:'班级3',
                id:13
            }],
            noSel:[{
                className:'班级4',
                id:14
            },{
                className:'班级5',
                id:15
            },{
                className:'班级6',
                id:16
            }]
        },
        analysis:[
            {
                className:'班级8',
                id:18
            },{
                className:'班级9',
                id:19
            },{
                className:'班级10',
                id:100
            }
        ],
        scorePart:[105,95,85,75,65,55,45,35,25,15,0]
    },function(downType,examSel,analysisSel,scorePart){
        /**
         * downType 报表类型
         * examSel 选择可下载的考试班级
         * analysisSel选择的学情报告数据分析
         * scorePart 总分段人数分析表
         */
        console.log(scorePart)
        console.log(examSel)
        console.log(analysisSel)
    })
})