PC-application/component/statistics/special-filter.js

(function(){
    Vue.component('special-filter', {
        template: '<div style="height: 400px;overflow: auto;">\
            <div class="mt10 ml10 filter-title">统计年份</div>\
            <div class="c-row ml40 mr10">\
                <div v-for="year in years" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==selyear}" @click="chooseYear(year)"><a>{{year}}</a></div>\
            </div>\
            <div class="mt10 ml10 filter-title" v-if="dimensionValList&&dimensionValList.length">统计维度</div>\
            <div class="c-row ml40 mr10" v-if="dimensionValList&&dimensionValList.length">\
                <div v-for="item in dimensionValList" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': item==dimensionVal}" @click="chooseItem(item,\'dimensionVal\')"><a>{{item}}</a></div>\
            </div>\
            <div id="footer">\
                <div class="c-row btn-wrap c-border-top fr">\
                    <div class="div-foot-btn mr20" @click="resetClick">\
                        <a href="#" class="c-666 f-fs16">重置</a>\
                    </div>\
                    <div class="div-foot-btn active" @click="confirmClick">\
                        <a href="#" class="c-666 f-fs16">确定</a>\
                    </div>\
                </div>\
            </div>\
        </div>',
        props:['selectedYear',"minYear","dimensionValList"],
        data: function(){
            return {
            	selyear:"",
                years: [],
                dimensionVal:"",
            }
        },
        methods: {
            chooseYear:function(year){
                this.selyear = year;
                this[param] = ""
            },
            chooseItem:function(item,param){
            	this[param] = item
            	this.selyear = ""
            },
            resetClick:function(){
                this.selyear = this.years[0];
                this[param] = ""
            },
            confirmClick:function(){
                //触发刷新
                var vm = this;
                Vuedals.Bus.$emit('close', {
                    chooseYear: vm.selyear,
                    dimensionVal:vm.dimensionVal
                });
            }
        },
        mounted: function(){
            //显示年份最低是2016年
            var now = new Date(),
                year = now.getFullYear();
            var minYear = 2016
            
            if(this.minYear){
            	minYear = this.minYear
            }
            
            // if(now.getMonth() >= 6){
            //     this.years.push(year);
            // }
            for(i=year; i>=minYear; i--){
                this.years.push(i);
            }
            
            //如果前一个页面返回的选中的年份
            if(!this.selectedYear){
                this.selyear = this.years[0];
            }else{
            	this.selyear = this.selectedYear
            }
        }
    })
})()