pqs-9100_client/frontend/src/components/TimeControl/index.vue

<template>
  <div class="time-control" >
    <el-select
      class="select"
      v-model="timeUnit"
      placeholder="选择时间单位"
      @change="handleChange"
    >
      <el-option label="按日" value="日"></el-option>
      <el-option label="按周" value="周"></el-option>
      <el-option label="按月" value="月"></el-option>
      <el-option label="按季度" value="季度"></el-option>
      <el-option label="按年" value="年"></el-option>
      <el-option label="自定义" value="自定义"></el-option> 
    </el-select>

    <div class="date-display"><!-- 禁用时间选择器 -->
      <el-date-picker
        class="date-picker"
        v-model="startDate"
        type="date"
        placeholder="起始时间"
        :readonly="timeUnit != '自定义'" 
      ></el-date-picker>
      <el-text>~</el-text>
      <el-date-picker
         class="date-picker"
        v-model="endDate"
        type="date"
        placeholder="结束时间"
        :readonly="timeUnit !== '自定义'"
      ></el-date-picker>
    </div>
    <div class="date-display" v-if="timeUnit !== '自定义'">
      <el-button
        style="width: 10px;"
        class="triangle-button"
        type="primary"
        @click="prevPeriod"
      >
        <div class="left_triangle"></div>
      </el-button>
      <el-button class="triangle-button" type="primary" @click="goToCurrent">
        本{{ timeUnit }}
      </el-button>
      <el-button
        style="width: 10px;"
        class="triangle-button"
        type="primary"
        @click="nextPeriod"
        :disabled="isNextDisabled"
      >
        <div class="right_triangle"></div>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeUnit: '周', // 默认选择按周
      startDate: null, // 起始日期
      endDate: null, // 结束日期
      isNextDisabled: false, // 控制下一周期按钮的禁用状态
      today: new Date() // 当前日期
    };
  },
  created() {
    // 组件创建时更新日期范围
    this.updateDateRange();
  },
  methods: {
    handleChange(value) {
      // 根据选择的时间单位处理日期变化
      if (value !== '自定义') {
        this.updateDateRange();
      } else {
        // 自定义选项逻辑
        this.startDate = new Date();
        this.endDate = new Date();
      }
      this.updateNextButtonStatus();
    },
    updateDateRange() {
      const today = this.today;
      // 根据选择的时间单位计算起始和结束日期
      if (this.timeUnit === '日') {
        this.startDate = today;
        this.endDate = today;
      } else if (this.timeUnit === '周') {
        this.startDate = this.getStartOfWeek(today);
        this.endDate = this.getEndOfWeek(today);
      } else if (this.timeUnit === '月') {
        this.startDate = new Date(today.getFullYear(), today.getMonth(), 1);
        this.endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      } else if (this.timeUnit === '季度') {
        const quarter = Math.floor(today.getMonth() / 3);
        this.startDate = new Date(today.getFullYear(), quarter * 3, 1);
        this.endDate = new Date(today.getFullYear(), quarter * 3 + 3, 0);
      } else if (this.timeUnit === '年') {
        this.startDate = new Date(today.getFullYear(), 0, 1);
        this.endDate = new Date(today.getFullYear(), 11, 31);
      }
      this.updateNextButtonStatus();
    },
    getStartOfWeek(date) {
      const startOfWeek = new Date(date);
      const day = startOfWeek.getDay();
      const diff = day === 0 ? -6 : 1 - day; // 星期天的情况
      startOfWeek.setDate(startOfWeek.getDate() + diff);
      return startOfWeek;
    },
    getEndOfWeek(date) {
      const endOfWeek = new Date(date);
      const day = endOfWeek.getDay();
      const diff = day === 0 ? 0 : 7 - day; // 星期天的情况
      endOfWeek.setDate(endOfWeek.getDate() + diff);
      return endOfWeek;
    },
    prevPeriod() {
      const prevStartDate = new Date(this.startDate);
      const prevEndDate = new Date(this.endDate);
      
      if (this.timeUnit === '日') {
        prevStartDate.setDate(prevStartDate.getDate() - 1);
        prevEndDate.setDate(prevEndDate.getDate() - 1);
      } else if (this.timeUnit === '周') {
        prevStartDate.setDate(prevStartDate.getDate() - 7);
        prevEndDate.setDate(prevEndDate.getDate() - 7);
      } else if (this.timeUnit === '月') {
        prevStartDate.setMonth(prevStartDate.getMonth() - 1);
        prevEndDate.setMonth(prevEndDate.getMonth() - 1);
      } else if (this.timeUnit === '季度') {
        prevStartDate.setMonth(prevStartDate.getMonth() - 3);
        prevEndDate.setMonth(prevEndDate.getMonth() - 3);
      } else if (this.timeUnit === '年') {
        prevStartDate.setFullYear(prevStartDate.getFullYear() - 1);
        prevEndDate.setFullYear(prevEndDate.getFullYear() - 1);
      }
      
      this.startDate = prevStartDate;
      this.endDate = prevEndDate;
      this.updateNextButtonStatus();
    },
    goToCurrent() {
      if (this.timeUnit !== '自定义') {
        this.updateDateRange(); // 更新为当前选择时间单位的时间范围
      }
    },
    nextPeriod() {
      const nextStartDate = new Date(this.startDate);
      const nextEndDate = new Date(this.endDate);
      
      if (this.timeUnit === '日') {
        nextStartDate.setDate(nextStartDate.getDate() + 1);
        nextEndDate.setDate(nextEndDate.getDate() + 1);
      } else if (this.timeUnit === '周') {
        nextStartDate.setDate(nextStartDate.getDate() + 7);
        nextEndDate.setDate(nextEndDate.getDate() + 7);
      } else if (this.timeUnit === '月') {
        nextStartDate.setMonth(nextStartDate.getMonth() + 1);
        nextEndDate.setMonth(nextEndDate.getMonth() + 1);
      } else if (this.timeUnit === '季度') {
        nextStartDate.setMonth(nextStartDate.getMonth() + 3);
        nextEndDate.setMonth(nextStartDate.getMonth() + 3);
      } else if (this.timeUnit === '年') {
        nextStartDate.setFullYear(nextStartDate.getFullYear() + 1);
        nextEndDate.setFullYear(nextEndDate.getFullYear() + 1);
      }
      
      this.startDate = nextStartDate;
      this.endDate = nextEndDate;
      this.updateNextButtonStatus();
    },
    updateNextButtonStatus() {
      // 更新下一个按钮的禁用状态
      const maxDate = new Date(); // 假设最新日期为今天
      this.isNextDisabled = this.endDate > maxDate;
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>