yos_web/src/HDrpManagement/dataanalysis/components/quickDate.vue

<template>
  <div>
    <el-button-group size="small" class="inline-24">
      <el-button :type="select === '日'?'primary':''" size="small" @click="selectQuick(1)" :disabled="disabled">日</el-button>
      <el-button :type="select === '周'?'primary':''" size="small" @click="selectQuick(2)" :disabled="disabled">周</el-button>
      <el-button :type="select === '月'?'primary':''" size="small" @click="selectQuick(3)" :disabled="disabled">月</el-button>
      <el-button :type="select === '年'?'primary':''" size="small" @click="selectQuick(4)" :disabled="disabled">年</el-button>
    </el-button-group>
    <span style="font-size: 13px">时间：</span>
    <el-date-picker
        value-format="yyyy-MM-dd"
        @change="selectDate"
        :append-to-body="disabled"
        size="small"
        v-model="value"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "quickDate",
  props:['disabled'],
  data(){
    return {
      select:'周',
      value:'',
      begindate:'',
      enddate:''
    }
  },
  methods:{
    selectQuick(val){
      this.value = ''
      this.begindate = ''
      this.enddate = ''
      if (val === 1){
        this.select = '日'
        var year = new Date().getFullYear()
        var month = new Date().getMonth()+1;
        var day = new Date().getDate();
        this.begindate = year + '-' + month + '-' + day
        this.enddate = year + '-' + month + '-' + day
      }else if (val === 2){
        this.select = '周'
        this.getMonday('s')
        this.getMonday('e')
      }else if (val === 3){
        this.select = '月'
        this.getMonth('s')
        this.getMonth('e')
      }else if (val === 4){
        this.select = '年'
        this.getYear('s')
        this.getYear('e')
      }else {
        this.select = ''
      }
      this.$emit('selectQuick',this.begindate,this.enddate,this.select)
    },
    getMonday(type, dates) {
      var now = new Date()
      var nowTime = now.getTime()
      var day = now.getDay()
      var longTime = 24 * 60 * 60 * 1000
      var n = longTime * 7 * (dates || 0)
      if (type == "s") {
        var dd = nowTime - (day - 1) * longTime + n
      }
      if (type == "e") {
        var dd = nowTime + (7 - day) * longTime + n
      }
      dd = new Date(dd)
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1
      var d = dd.getDate();
      m = m < 10 ? "0" + m: m
      d = d < 10 ? "0" + d: d
      var day = y + "-" + m + "-" + d
      type == 's'?this.begindate = day : this.enddate = day
    },
    getMonth(type, months) {
      var d = new Date();
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      month = month < 10 ? "0" + month: month
      var date = d.getDate();
      var firstday = year + "-" + month + "-" + "01"
      var lastday = ""
      if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
        lastday = year + "-" + month + "-" + 31
      } else if (month == "02") {
        if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
          lastday = year + "-" + month + "-" + 29
        } else {
          lastday = year + "-" + month + "-" + 28
        }
      } else {
        lastday = year + "-" + month + "-" + 30
      }
      var day = ""
      if (type == "s") {
        day = firstday
        this.begindate = firstday
      } else {
        day = lastday
        this.enddate = lastday
      }
    },
    getYear(type, dates) {
      var dd = new Date()
      var n = dates || 0
      var year = dd.getFullYear() + Number(n)
      if (type == "s") {
        var day = year + "-01-01"
      }
      if (type == "e") {
        var day = year + "-12-31"
      }
      if (!type) {
        var day = year + "-01-01/" + year + "-12-31"
      }
      type == 's'?this.begindate = day : this.enddate = day
    },
    selectDate(){
      this.begindate = ''
      this.enddate = ''
      if (this.value){
        this.select = ''
        this.begindate = this.value[0]
        this.enddate = this.value[1]
      }
      this.$emit('selectQuick',this.begindate,this.enddate,this.select)
    }
  }
}
</script>

<style scoped>

</style>