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

(function(){
    Vue.component('smfw-filter',{
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row ml40 mr10" id="signYear">\
				    <div v-for="year in years"  class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==selyear}" @click="yearClick(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 class="mt20 ml10 filter-title">统计指标</div>\
				<div class="div-content">\
					<div class="mt20 div-group-btn c-row ml40 mr10">\
						<div class="div-btn c-33" v-for="item in smfuList" :class="{\'active\': smfu==item.code}" @click="selItem(item,\'smfu\')">\
							<a href="#" class="f-fs14">{{item.name}}</a>\
						</div>\
					</div>\
				</div>\
				<div class="mt20 ml10 filter-title" v-if="smfu == 2">统计维度</div>\
				<div class="div-content" v-if="smfu == 2">\
					<div class="c-row ml40 mr10">\
						<div class="c-33 mt20"  style="margin-left:0;margin-right:3%;" :class="{\'active\': rhfs.length==0}" @click="selItems(\'\',\'rhfs\')">\
							<a href="#" class="f-fs14">全部</a>\
						</div>\
						<div class="c-33 mt20"  style="margin-left:0;margin-right:3%;" v-for="item in rhfsList" :class="{\'active\': rhfs.indexOf(item.code)>-1}" @click="selItems(item,\'rhfs\')">\
							<a href="#" class="f-fs14">{{item.name}}</a>\
						</div>\
					</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:['chooseYear','minYear',"dimensionValList"],
        data: function(){
            return {
            	selyear:"",
                years: [],
                smfuList:[{code:1,name:'上门服务'},{code:2,name:'入户访视'}],	//上门服务
				smfu:1,
				rhfsList:[{code:"5",name:'孕产妇'},{code:"6",name:'新生儿'},
				{code:"9",name:'肺结核'},{code:"8",name:'80岁以上老人'},{code:"7",name:'重性精神疾病'}],  //入户访视
				rhfs:[],
                dimensionVal:"",
            }
        },
        mounted: function(){
            var now = new Date(),
                year = now.getFullYear();
            var minYear = 2016
            
            if(this.minYear){
            	minYear = this.minYear
            }
             
            // if(now.getMonth() < 6){
            //     year --;
            // }
            for(i=year; i>=this.minYear; i--){
                this.years.push(i);
            }
            //如果前一个页面返回的选中的年份
            if(!this.chooseYear){
                this.selyear = this.years[0];
                this.dimensionVal=""
            }else{
            	this.selyear = this.chooseYear
                this.dimensionVal=""
            }
        },
        methods: {
        	 yearClick:function(val){
	          this.selyear = val;
	          this.dimensionVal=""
	         },
            chooseItem:function(item,param){
            	this[param] = item
            	this.selyear = ""
            },
	         resetClick:function(){
				this.selyear=this.years[0]
				this.dimensionVal=""
				this.rhfs = []
				this.smfu = 1
	         },
	         confirmClick:function(){
	         	var vm = this;
				//触发刷新
				this.$emit('vuedals:close', {
					chooseYear: vm.selyear,
					rhfs: vm.rhfs.join(","),
					smfu: vm.smfu,
					dimensionVal:vm.dimensionVal
				});
	         },
	        selItem:function(item,index){
				var vm = this
				vm[index] = item.code
			},
			selItems:function(item,index){
				var vm=this
				if(item){
					var code = item.code
					var hasIndex = vm[index].indexOf(code)
					if(hasIndex>-1){
						vm[index].splice(hasIndex,1)
					}else{
						vm[index].push(code)
					}
				}else{
					vm[index] = []
				}
			},
        }
    });
    
})()