基于element的＜el-date-picker＞时间周期控件实现月周期、季度周期、年周期的选择

基于时间周期控件实现月周期、季度周期、年周期的选择

整体效果，根据项目下拉选择不同的项目对应出现不同的周期属性选择

季度周期控件的组件quarter.vue文件

<template>
     <el-form>
          <el-form-item>
                <mark class="_mark" v-show="showSeason" @click.stop="showSeason=false"></mark>
                <el-input placeholder="请选择季度" v-model="showValue" size="small" style="width:12.7rem" @focus="showSeason=true" :disabled="disabled">
                <i slot="prefix" class="el-input__icon el-icon-date"></i>
                </el-input>
                <el-card class="box-card" v-show="showSeason">
                    <div slot="header" class="clearfix yearBtn">
                        <button type="button" aria-label="前一年" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev"></button>
                        <span role="button" class="el-date-picker__header-label">{{year}}年</span>
                        <button type="button" aria-label="后一年" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right" @click="next"></button>
                    </div>
                    <div class="text item">
                          <el-button type="text" size="medium" class="_left" @click="selectSeason(0)" :disabled="disabled0">第一季度</el-button>
                          <el-button type="text" size="medium" class="_right" @click="selectSeason(1)" :disabled="disabled1">第二季度</el-button>
                    </div>
                    <div class="text item">
                          <el-button type="text" size="medium" class="_left" @click="selectSeason(2)" :disabled="disabled2">第三季度</el-button>
                          <el-button type="text" size="medium" class="_right" @click="selectSeason(3)" :disabled="disabled3">第四季度</el-button>
                    </div>
                </el-card>
          </el-form-item>
     </el-form>
</template>
<script>
export default {
    props:{
        valueArr:{
            default:()=>{
                return ["01-03","04-06","07-09","10-12"]
            },
            type:Array
        },
        getValue:{
            default:()=>{},
            type:Function
        },
        defaultValue:{
            type:String,
            default:''
        },
        disabled:'',
        villageForm:{
            default:()=>{
                return {}
            },
            type:Object
        }
    },
    data(){
        return {
            showSeason:false,
            season:"",
            year:new Date().getFullYear(),
            showValue:"",
            disabled0:false,
            disabled1:false,
            disabled2:false,
            disabled3:false,
        }
    },
    created(){
        if(this.defaultValue){
              let value=this.defaultValue;
              let arr=value.split("-");
              this.year=arr[0].slice(0,4);
              let str=arr[0].slice(4,6)+"-"+arr[1].slice(4,6);
              let arrAll=this.valueArr;
              this.showValue=`${this.year}年${arrAll.indexOf(str)+1}季度`;
        }
        if(this.villageForm){
              if(this.villageForm.pubBizInterval&&this.villageForm.pubBizInterval.substring(5,7)=="04"&&this.villageForm.pubBizInterval.substring(8,10)=="15"){
                      this.showValue=this.villageForm.pubBizInterval.substring(0,4)+"第一季度"
              }else if(this.villageForm.pubBizInterval&&this.villageForm.pubBizInterval.substring(5,7)=="07"&&this.villageForm.pubBizInterval.substring(8,10)=="15"){
                      this.showValue=this.villageForm.pubBizInterval.substring(0,4)+"第二季度"
              }else if(this.villageForm.pubBizInterval&&this.villageForm.pubBizInterval.substring(5,7)=="10"&&this.villageForm.pubBizInterval.substring(8,10)=="15"){
                      this.showValue=this.villageForm.pubBizInterval.substring(0,4)+"第三季度"
              }else if(this.villageForm.pubBizInterval&&this.villageForm.pubBizInterval.substring(5,7)=="01"&&this.villageForm.pubBizInterval.substring(8,10)=="15"){
                      this.showValue=parseInt(this.villageForm.pubBizInterval.substring(0,4))-parseInt(1)+"第四季度"
              }
        }
    },
    watch:{
        defaultValue:function(value){
              let arr=value.split("-");
              this.year=arr[0].slice(0,4);
              let str=arr[0].slice(4,6)+"-"+arr[1].slice(4,6);
              let arrAll=this.valueArr;
              this.showValue=`${this.year}年${arrAll.indexOf(str)+1}季度`
        },
        villageForm:function(value){
             if(value.pubBizInterval.substring(5,7)=="04"&&value.pubBizInterval.substring(8,10)=="15"){
                   this.showValue=value.pubBizInterval.substring(0,4)+'第一季度'
             }else if(value.pubBizInterval.substring(5,7)=="07"&&value.pubBizInterval.substring(8,10)=="15"){
                   this.showValue=value.pubBizInterval.substring(0,4)+'第二季度'
             }else if(value.pubBizInterval.substring(5,7)=="10"&&value.pubBizInterval.substring(8,10)=="15"){
                   this.showValue=value.pubBizInterval.substring(0,4)+'第三季度'
             }else if(value.pubBizInterval.substring(5,7)=="01"&&value.pubBizInterval.substring(8,10)=="15"){
                   this.showValue=parseInt(value.pubBizInterval.substring(0,4))-parseInt(1)+'第四季度'
             }
        }
    },
    mounted(){
          this.getYear()
    },
    methods:{
        one(){
             this.showSeason=false
        },
        prev(){
             this.year=this.year*1-1;
             this,getYear()
        },
        next(){
             this.year=this.year*1+1;
             this,getYear()
        },
        reast(){
            this.showValue=''
        },
        getYear(){
            if(this.year>new Date().getFullYear()){
                  this.disabled0=true
                  this.disabled1=true
                  this.disabled2=true
                  this.disabled3=true
            }else if(this.year==new Date().getFullYear()){
                  if(new Date().getMonth()>"03"){
                        this.disabled0=false
                        this.disabled1=true
                        this.disabled2=true
                        this.disabled3=true
                  }else if(new Date().getMonth()>"06"){
                        this.disabled0=false
                        this.disabled1=false
                        this.disabled2=true
                        this.disabled3=true
                  }else if(new Date().getMonth()>"09"){
                        this.disabled0=false
                        this.disabled1=false
                        this.disabled2=false
                        this.disabled3=true
                  }else{
                        this.disabled0=true
                        this.disabled1=true
                        this.disabled2=true
                        this.disabled3=true
                  }
            }else{
                        this.disabled0=false
                        this.disabled1=false
                        this.disabled2=false
                        this.disabled3=false
            }
        },
        selectSeason(i){
             let that=this;
             that.season=i+1;
             let arr=that.valueArr[i].split("-");
             that.getValue(that.year+arr[0]+"-"+that.year+arr[1]);
             that.showSeason=false;
             if(this.season==1){
                 this.showValue=`${this.year}年第一季度`
             }else if(this.season==2){
                 this.showValue=`${this.year}年第二季度`
             }else if(this.season==3){
                 this.showValue=`${this.year}年第三季度`
             }else if(this.season==4){
                 this.showValue=`${this.year}年第四季度`
             }
             that.sendMsg()
        },
        getLastDay(year,month){
               var new_year=year;
               var new_month=month++;
               if(month>12){
                   new_month-=12;
                   new_year++
               }
               var new_date=new Date(new_year,new_month,1)
               return new Date(new_date.getTime()-1000*60*60*24).getDate()
        },
        sendMsg(){
               this.$emit("func",this.showValue)
        }
    }
}
</script>
<style>
   ._mark{
       position: fixed;
       top:0;
       bottom:0;
       left:0;
       right:0;
       background: rgba(0,0,0,0);
       z-index:999;
       width: 200px;
   }
   .el-card.is-always-shadow,
   .el-card.is-hover-shadow:focus,
   .el-card.is-hover-shadow:hover{
       width: 200px;
   }
   .yearBtn{
       text-align: center;
       padding: 0;
   }
   .box-card{
       width: 322px;
       padding:0 3px 20px;
       margin-top:10px;
       position: fixed;
       z-index:9999
   }
   .el-date-picker__header-label{
       padding: 0 25px;
   }
   .text.item{
       text-align: center;
   }
   .text.item >>> .el-button{
        width: 40%;
        color:#606266
   }
   .text.item ._left{
       float: left;
   }
   .text.item ._right{
       float: right;
   }
   ::v-deep .el-input--small .el-input__inner{
       height: 41px;
   }
</style>

使用页面

<template>
     <div>
         <el-form>
              <el-row>
                    <el-col :span="8">
                          <el-form-item label="运动项目" prop="topicType" style="padding-left:100px">
                                <el-select v-model="villageForm.topicType" @change="topicTypeChange($event)">
                                       <el-option 
                                           v-for="item in topicTypeOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"
                                       >
                                       </el-option>
                                </el-select>
                          </el-form-item>
                    </el-col>
              </el-row>
              <el-row>
                    <el-col :span='8'>
                          <el-form-item label="是否开启" prop="isRelease" style="padding-left:100px" v-if="releaseDisabled">
                                <el-switch
                                        @change="releaseChange"
                                        v-model="villageForm.isRelease"
                                        active-value="02"
                                        inactive-value="01"
                                        :disabled="publicdisabled"
                                >
                                </el-switch>
                          </el-form-item>
                    </el-col>
              </el-row>
              <el-row>
                   <el-col :span="12">
                         <el-form-item          
                            label="发布业务周期" 
                            prop="pubBizInterval" 
                            style="padding-left:100px" 
                            v-if="pubBizIntervalDis"
                            >
                         <el-date-picker 
                            v-model="villageForm.pubBizInterval" 
                            value-format="yyy-MM-dd" 
                            type="month" 
                            placeholder="选择发布月" 
                            :picker-options="StartDate" 
                            v-if="publicMonth"
                            >
                         </el-date-picker>
                         <quarter 
                            @func="getMsgFormSon" 
                            v-else-if="MsgFormSonDis"
                            :villageForm="villageForm" 
                            >
                         </quarter>
                        <el-date-picker
                            v-model="villageForm.year" 
                            type="year" 
                            @input="handlerInput"
                            placeholder="选择年" 
                            :picker-options="StartYear" 
                            v-else-if="yearDisable"
                            >
                        >
                       </el-date-picker>
                       <div>该业务周期为需要发布的时间</div>
                   </el-form-item>
              </el-col>
          </el-row>
        </el-form>
     </div>
</template>
<script>
import Quarter from '../../components/quarter.vue'
export default {
    components:{Quarter},
    data(){
        return {
            topicTypeOptions:[{'value':'0101','label':'篮球'},
                              {'value':'0102','label':'足球'},
                              {'value':'0103','label':'网球'},
                              {'value':'0104','label':'橄榄球'},
                              {'value':'0105','label':'羽毛球'},
                              {'value':'0106','label':'游泳'}
            ],
              villageForm:{
                  pubBizInterval:'',
                  year:'',
                  topicType:'',
                  isRelease:''
              },
              pubBizIntervalDis:false,
              releaseDisabled:true,
              publicMonth:true,
              yearDisable:false,
              MsgFormSonDis:false,
              publicdisabled:false,
              StartDate:{
                  disabledDate:time=>{
                      let year=new Date().getFullYear()
                      let month=new Date().getMonth()
                      let days=new Date(year,month,0).getDate()
                      const timeDifference=days*86400776
                      return time.getTime()>Date.now()-timeDifference
                  }
              },
              StartYear:{
                   disabledDate:time=>{
                       let year=new Date().getFullYear()
                       return (
                           time.getTime()>new Date(parseInt(year)-parseInt(1)+'-12-31').getTime()
                       )
                   }
              },
        }
    },
    methods:{
           topicTypeChange(val){
               console.log(val)
               this.$set(this.villageForm,'year','')
               if(val==='0104'){
                     this.$set(this.villageForm,'pubBizInterval','')
                     this.$set(this.villageForm,'year','')
                     this.publicMonth=false
                     this.MsgFormSonDis=true
                     this.yearDisable=false
               }else if(val==='0101'||val==='0102'||val==='0103'){
                     this.$set(this.villageForm,'pubBizInterval','')
                     this.publicMonth=false
                     this.MsgFormSonDis=false
                     this.yearDisable=true
               }else{
                     this.$set(this.villageForm,'year','')
                     this.publicMonth=true
                     this.MsgFormSonDis=false
                     this.yearDisable=false
               }
                     
           },
           getMsgFormSon(val){
                  if(val.substring(5,9)=="第一季度"){
                       this.villageForm.pubBizInterval=val.substring(0,4)+'-'+'4'+'-'+'15'
                  }else if(val.substring(5,9)=="第二季度"){
                       this.villageForm.pubBizInterval=val.substring(0,4)+'-'+'7'+'-'+'15'
                  }else if(val.substring(5,9)=="第三季度"){
                       this.villageForm.pubBizInterval=val.substring(0,4)+'-'+'10'+'-'+'15'
                  }else if(val.substring(5,9)=="第四季度"){
                       this.villageForm.pubBizInterval=parseInt(val.substring(0,4)+parseInt(1)+'-'+'1'+'-'+'15')
                  }
           },
           handlerInput(val){
                  this.villageForm.pubBizInterval=parseInt(val.getFullYear())+parseInt(1)+'-'+'1'+'-'+'15'
           },
           releaseChange(val){
               console.log(val)
               if(val==='01'){
                    this.pubBizIntervalDis=false
                    this.$set(this.villageForm,'pubBizInterval','')
                    this.$set(this.villageForm,'year','')
               }else{
                    this.pubBizIntervalDis=true
               }
           }
    }
}
</script>