2026.3.17

riku

2026-03-17 b1a0d701cf898c8b7812e66a808a1c91f2bae6cc

 src/sfc/TimeSelect.vue

@@ -1,8 +1,8 @@
<!-- 日期时间选择器组件  
<!-- 日期时间选择器组件
  会将初始默认时间（一周前）和改变的时间通过事件‘submitTime’传递给父组件
  

  初始渲染时就将时间传递给父组件：
  ** 
  **
  在父组件中设置
  <TimeSelect @submit-time="giveTime"></TimeSelect>
   giveTime(val) {
@@ -16,63 +16,194 @@
import dayjs from 'dayjs'
export default {
  emits: ['submitTime'],
  props: {
    // 控制是否启用新的效果（快捷按钮 + 详情按钮）
    useNewStyle: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      //保存开始和结束时间
      // 随便设置初始值 ，mounted时再设正确的，目的是改变时间了触发change
      time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00']
    };
      time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
      // 控制时间选择器的显示/隐藏（仅在新样式下使用）
      showTimePicker: false,
      // 时间范围选项
      timeRanges: [
        { value: 'today', label: '今日' },
        { value: 'yesterday', label: '昨日' },
        { value: 'thisWeek', label: '本周' },
        { value: 'lastWeek', label: '上周' },
        { value: 'thisMonth', label: '本月' },
        { value: 'lastMonth', label: '上月' },
      ],
      // 选中的时间范围
      selectedRange: '',
    }
  },

  // 将初始默认开始和结束时间传递给父组件
  mounted() {
    this,this.initOneWeekAgoTime()
    this.$emit('submitTime', this.time);
    if (this.useNewStyle) {
      // 新样式下默认选中今日
      this.selectedRange = 'today'
      this.selectTimeRange('today')
    } else {
      // 原有样式下使用一周前的默认时间
      this.initOneWeekAgoTime()
      this.$emit('submitTime', this.time)
    }
  },

  methods:{
    initOneWeekAgoTime(){
  methods: {
    initOneWeekAgoTime() {
      // 给时间选择器设置默认时间为一周前
    this.time[0] = dayjs().subtract(4, 'week').format('YYYY-MM-DD HH:mm:ss');
    this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
      // this.time[0] = dayjs().subtract(4, 'week').format('YYYY-MM-DD HH:mm:ss')
      // this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
      // 2026.3.13 demo 中固定初始时间
      this.time = ['2023-08-01 00:00:00', '2023-08-31 23:59:59']
    },

    // 快捷时段选择
    selectTimeRange(range) {
      let now = dayjs()
      let start, end

      switch (range) {
        case 'today':
          start = now.startOf('day').format('YYYY-MM-DD HH:mm:ss')
          end = now.endOf('day').format('YYYY-MM-DD HH:mm:ss')
          break
        case 'yesterday':
          start = now.subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
          end = now.subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')
          break
        case 'thisWeek':
          start = now.startOf('week').format('YYYY-MM-DD HH:mm:ss')
          end = now.endOf('week').format('YYYY-MM-DD HH:mm:ss')
          break
        case 'lastWeek':
          start = now.subtract(1, 'week').startOf('week').format('YYYY-MM-DD HH:mm:ss')
          end = now.subtract(1, 'week').endOf('week').format('YYYY-MM-DD HH:mm:ss')
          break
        case 'thisMonth':
          start = now.startOf('month').format('YYYY-MM-DD HH:mm:ss')
          end = now.endOf('month').format('YYYY-MM-DD HH:mm:ss')
          break
        case 'lastMonth':
          start = now.subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
          end = now.subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
          break
      }

      this.time = [start, end]
      this.$emit('submitTime', this.time)
    },

    // 处理时间范围选择变化
    handleRangeChange(val) {
      if (val) {
        this.selectTimeRange(val)
      }
    },

    // 切换时间选择器的显示/隐藏
    toggleTimePicker() {
      this.showTimePicker = !this.showTimePicker
    },
  },
}
</script>

<template>
  <!-- 日期时间选择器 -->
  <div class="block">
    <span class="demonstration">起止时间：</span>
  <!-- 时间选择组件 -->
  <div v-if="useNewStyle" class="time-select-container">
    <el-row align="middle" class="m-b-8">
      <span class="demonstration">时间：</span>
      <!-- 快捷时段选择按钮 -->
      <div class="quick-time-buttons">
        <el-radio-group v-model="selectedRange" @change="handleRangeChange">
          <el-radio-button v-for="range in timeRanges" :key="range.value" :label="range.value">
            {{ range.label }}
          </el-radio-button>
        </el-radio-group>
        <el-button size="small" type="primary" @click="toggleTimePicker">时间详情</el-button>
      </div>
    </el-row>

    <!-- 时间选择器（默认隐藏） -->
    <div v-show="showTimePicker" class="time-picker-container">
      <el-date-picker
        v-model="time"
        type="daterange"
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="$emit('submitTime', time)"
        class="pick-date"
      />
    </div>
  </div>

  <!-- 原有样式 -->
  <div v-else class="block">
    <span class="demonstration">时间：</span>
    <el-date-picker
      v-model="time"
      type="datetimerange"
      type="daterange"
      range-separator="~"
      start-placeholder="Start date"
      end-placeholder="End date"
      @change="$emit('submitTime', time)"
      class="pick-date"

    />
  </div>
</template>

<style>
.time-select-container {
  /* width: 100%; */
}

.time-label {
  margin-bottom: 8px;
}

.quick-time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.time-picker-container {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.demonstration {
  margin-left: 30px;
  margin-top: 5px;
  margin-right: 10px;
  font-weight: bold;
  white-space: nowrap;
}

.pick-date {
  width: 100%;
}

.block {
  display: flex;
  justify-content: center;
  /* width: 50%; */
  white-space: nowrap;
}
.pick-date {
  width: 100%;

} 
.block .demonstration {
  margin-left: 30px;
  margin-top: 5px;
}
</style>