PC-application/component/statistics/sign-progress-filter.js

(function(){
    Vue.component('sign-progress-filter',{
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row mt20 ml40" id="signYear" v-html="yearHtml" @click="yearClick">\
				</div>\
				<div class="mt20 ml10 filter-title">统计维度</div>\
				<div class="div-content" @click="contentClick">\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33 active" data-val="1">\
							<a href="#" class="f-fs14">按任务</a>\
						</div>\
						<div class="div-btn c-33" data-val="2">\
							<a href="#" class="f-fs14">按人口</a>\
						</div>\
						<div class="div-btn c-33" data-val="5" data-lowCode="3">\
							<a href="#" class="f-fs14">65岁以上签约</a>\
						</div>\
					</div>\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33" data-val="3" data-lowCode="1">\
							<a href="#" class="f-fs14">高血压</a>\
						</div>\
						<div class="div-btn c-33" data-val="4" data-lowCode="2">\
							<a href="#" class="f-fs14">糖尿病</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:['yearHtml','contentHtml'],
        data: function(){
            return {
                
            }
        },
        methods: {
        	 yearClick:function(){
	          	$(event.target.closest("div")).addClass('active').siblings().removeClass('active');
	         },
	         contentClick:function(){
	         	$(".div-content").find(".div-btn").removeClass('active');
	         	$(event.target.closest("div")).addClass('active');
	         },
	         resetClick:function(){
				$("#signYear").find(".c-33").removeClass("active");
				$("#signYear").find(".c-33").eq(0).addClass("active");
				$(".div-content").find(".c-33").removeClass("active");
				$(".div-content").find(".c-33").eq(0).addClass("active");
	         },
	         confirmClick:function(){
	         	var vm = this;
	         	var year = $("#signYear .c-33.active").attr("data-val"),
	         		$type = $(".div-content .div-btn.active"),
                    typeCode = $type.attr("data-val"),
                    lowCode = $type.attr("data-lowCode"),
                    name = $type.find("a").html();
	         	console.log("year:"+$("#signYear .c-33.active").attr("data-val"))
	         	console.log("id:"+typeCode)
	         	console.log("lowCode:"+lowCode)
	         	console.log("name:"+name)
				//触发刷新
				this.$emit('vuedals:close', {
					chooseYear: year,
					id: typeCode,
					lowCode: lowCode,
					name: name,
					yearHtml:$("#signYear").html(),
					contentHtml:$(".div-content").html()
				});
	         },
        	formatYearData: function () {     
        		//显示年份最低是2016年
				var now = new Date(),
				    year = now.getFullYear();
				var yearHtml = "";
				if(now.getMonth() >= 6){
				    yearHtml += '<div class="c-33 active" data-val="'+year+'"><a>'+year+"</a></div>";
				}
				for(i=year-1; i>=2016; i--){
				    if(i == (year-1) && now.getMonth() < 6){
				        yearHtml += '<div class="c-33 active" data-val="'+i+'"><a>'+i+"</a></div>";
				    }else{
				        yearHtml += '<div class="c-33" data-val="'+i+'"><a>'+i+"</a></div>";
				    }
				}
                  this.yearHtml = yearHtml;
           },
        },
        mounted: function(){
        	if(this.contentHtml){
        		$(".div-content").html(this.contentHtml);
        	}else{
        		this.formatYearData();
        	}
        }
    });
    
})()