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

(function(){
    Vue.component('datefilter', {
        template: '<div class="bgc-f2f3f5 pt20 pb10 plr15 flex">\
        	<div v-if="showDiv.indexOf(\'year\')>-1">\
	            <label class="c-333 c-f14" for="">年份：</label>\
	            <el-select v-model="chooseYear" @change="selectChange" style="width:120px;" class="pr20">\
	                <el-option v-for="(item , index) in years"  :key="index" :label="item" :value="item"></el-option>\
	            </el-select>\
            </div>\
            <div v-if="showDiv.indexOf(\'month\')>-1">\
	            <label class="c-333 c-f14" for="">月份：</label>\
	            <el-select v-model="chooseMonth" @change="selectChange" style="width:120px;" class="pr20">\
	                <el-option v-for="(item , index) in months" :key="index" :label="item.name" :value="item.code" v-show="!(nowyear==chooseYear&&item.value>nowmonth)"></el-option>\
	            </el-select>\
            </div>\
            <div v-if="showDiv.indexOf(\'custom\')>-1">\
	            <label class="pl20 c-333 c-f14" for="">自定义：</label>\
	            <el-date-picker v-model="start" type="date" unlink-panels placeholder="开始日期" value-format="yyyy-MM-dd" @change="changeDate" style="width:140px;" :clearable="false" :picker-options="pickerOptions">\
				</el-date-picker>\
				<span class="c-999">-</span>\
				<el-date-picker v-model="end" type="date" unlink-panels placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDate" style="width:140px;" :clearable="false" :picker-options="pickerOptions">\
				</el-date-picker>\
			</div>\
        </div>',
        props:["show"],
        data: function(){
            return {
               	showDiv:["custom","year","month"],
               	start:"",
               	end:"",
               	months:[],
				years:[],
				chooseMonth:"",
				chooseYear:"",
				nowyear:'',
				nowmonth:'',
				pickerOptions:{
					disabledDate(time) {
		                return time.getTime() > Date.now()
		        	},
				}
            }
        },
        mounted: function(){
		    var vm=this
        	EventBus.$on("init-FilterDate", function(arg){
        		vm.initData(arg)
        	})
        },
        methods: {
        	initData:function(showDiv){
		        var vm=this
		        
		        if(showDiv){
		        	vm.showDiv = showDiv
		        }
		        
	            //初始化时间
				var now = new Date();
					
				vm.nowyear = vm.chooseYear = now.getFullYear()
				vm.nowmonth = now.getMonth()+1
				vm.years = []
				for(i=vm.nowyear; i>=2019; i--){
					vm.years.push(i)
				}
				vm.months = [{code:"00",name:"全部",value:0}]
				for(i=1; i<=12; i++){
					var month1= i<=9 ? "0"+i : i
					vm.months.push({code:month1,name:i+"月",value:i})
				}
				vm.selectChange()
        	},
	        changeDate:function(){
	        	var vm=this
	        	vm.chooseMonth = ''
	        	vm.chooseYear = ''
	        	console.log("changeDate")
	        	if(vm.start>vm.end){
	        		vm.$message({
			          message: '开始时间应小于结束时间',
			          type: 'warning'
			        });
	        	}else{
	        		vm.initSearch()
	        	}
	        },
	        selectChange:function(){
	        	var vm=this
	        	if(vm.nowyear==vm.chooseYear&&vm.chooseMonth>vm.nowmonth){
	        		vm.chooseMonth = "00"
	        	}
	        	if(vm.chooseYear){
	        		if(!vm.chooseMonth) vm.chooseMonth ="00"
	        		if(vm.chooseMonth){
	        			if(vm.chooseMonth == "00"){
		        			if(vm.chooseYear == vm.nowyear){
								vm.start = vm.chooseYear+"-01-01"
								vm.end = new Date().format("yyyy-MM-dd")
		        			}else{
								vm.start = vm.chooseYear+"-01-01"
								vm.end = vm.chooseYear+"-12-31"
		        			}
	        			}else{
		        			if(vm.chooseMonth == vm.nowmonth){
								vm.start = vm.chooseYear+"-"+vm.chooseMonth+"-01"
								vm.end = new Date().format("yyyy-MM-dd")
		        			}else{
		        				var endDate = new Date(vm.chooseYear+"-"+vm.chooseMonth+"-01");
								endDate.setMonth(endDate.getMonth()+1);
								endDate.setDate(0);
								vm.start = vm.chooseYear+"-"+vm.chooseMonth+"-01"
								vm.end = new Date(endDate).format("yyyy-MM-dd")
		        			}
	        			}
	        		}
	        		vm.initSearch()
	        	}
	        },
        	initSearch:function(){
        		var vm=this
        		vm.$emit("initsearch",{year:vm.chooseYear,month:vm.chooseMonth,start:vm.start,end:vm.end})
        	}
        },
    })
})()