yos_web/src/HDrpManagement/contactData/components/btnSelectInfo.vue

<template>
  <div>
    <el-button-group>
      <el-button v-for="item in btnTitle" :key="item.index" :type="item === dataTypeNow ?'primary':''" size="small" @click="btnClick(item)">{{$t(item)}}</el-button>
    </el-button-group>
    <el-date-picker
        style="margin-left: 10px"
        v-model="dateData"
        @change="onChange"
        size="small"
        format="yyyy-MM"
        value-format="yyyy-MM"
        type="monthrange"
        :range-separator="$t('至')"
        :start-placeholder="$t(`开始月份`)"
        :end-placeholder="$t(`结束月份`)">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "btnSelectInfo",
  props:{
    btnTitle: Array,
    dateType:String
  },
  data(){
    return {
      dateData:[],
      dataTypeNow:'本年'
    }
  },
  methods:{
    btnClick(data){
      this.dataTypeNow = data
      if (data == '本年'){
        let year = new Date().getFullYear()
        let begdate = year + '-01'
        let enddate = year + '-12'
        this.dateData = [begdate,enddate]
      }else if (data == '本季'){
        const now = new Date();
        const quarterStartMonth = Math.floor(now.getMonth() / 3) * 3;
        const quarterStartDate = new Date(now.getFullYear(), quarterStartMonth);
        const quarterEndDate = new Date(now.getFullYear(), quarterStartMonth + 3);
        this.dateData = [quarterStartDate,quarterEndDate]
      }else if (data == '本月'){
        const now = new Date();
        const monthStartDate = new Date(now.getFullYear(), now.getMonth());
        this.dateData = [monthStartDate,monthStartDate]
      }
      this.$emit('btnClick',data)
    },
    onChange(){
      if (this.dateData){
        this.dataTypeNow = ''
      }
      this.$emit('btnClick',this.dataTypeNow,this.dateData)
    }
  },
  mounted() {
    this.dataTypeNow = this.dateType
    this.btnClick(this.dateType)
  }
}
</script>

<style scoped>

</style>