194 lines
6.4 KiB
Vue
194 lines
6.4 KiB
Vue
<template>
|
|
<div class='time-control'>
|
|
<el-select
|
|
class='select'
|
|
v-model='timeUnit'
|
|
placeholder='选择时间单位'
|
|
@change='handleChange'
|
|
>
|
|
<!--采用 v-for 去动态渲染-->
|
|
<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
|
|
},
|
|
},
|
|
}
|
|
|
|
// defineProps('include','exclude','default')
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
@import "./index.scss";
|
|
</style>
|