微调-调整日期组件
This commit is contained in:
@@ -1,56 +1,59 @@
|
||||
<template>
|
||||
<div class="time-control" >
|
||||
<div class='time-control'>
|
||||
<el-select
|
||||
class="select"
|
||||
v-model="timeUnit"
|
||||
placeholder="选择时间单位"
|
||||
@change="handleChange"
|
||||
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>
|
||||
<!--采用 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"><!-- 禁用时间选择器 -->
|
||||
<!-- 禁用时间选择器 -->
|
||||
<div class='date-display'>
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
v-model="startDate"
|
||||
type="date"
|
||||
placeholder="起始时间"
|
||||
:readonly="timeUnit != '自定义'"
|
||||
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="结束时间"
|
||||
class='date-picker'
|
||||
v-model='endDate'
|
||||
type='date'
|
||||
placeholder='结束时间'
|
||||
:readonly="timeUnit !== '自定义'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="date-display" v-if="timeUnit !== '自定义'">
|
||||
<div class='date-display' v-if="timeUnit !== '自定义'">
|
||||
<el-button
|
||||
style="width: 10px;"
|
||||
class="triangle-button"
|
||||
type="primary"
|
||||
@click="prevPeriod"
|
||||
style='width: 10px;'
|
||||
class='triangle-button'
|
||||
type='primary'
|
||||
@click='prevPeriod'
|
||||
>
|
||||
<div class="left_triangle"></div>
|
||||
<div class='left_triangle'></div>
|
||||
</el-button>
|
||||
<el-button class="triangle-button" type="primary" @click="goToCurrent">
|
||||
<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"
|
||||
style='width: 10px;'
|
||||
class='triangle-button'
|
||||
type='primary'
|
||||
@click='nextPeriod'
|
||||
:disabled='isNextDisabled'
|
||||
>
|
||||
<div class="right_triangle"></div>
|
||||
<div class='right_triangle'></div>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,125 +67,127 @@ export default {
|
||||
startDate: null, // 起始日期
|
||||
endDate: null, // 结束日期
|
||||
isNextDisabled: false, // 控制下一周期按钮的禁用状态
|
||||
today: new Date() // 当前日期
|
||||
};
|
||||
today: new Date(), // 当前日期
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 组件创建时更新日期范围
|
||||
this.updateDateRange();
|
||||
this.updateDateRange()
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
// 根据选择的时间单位处理日期变化
|
||||
if (value !== '自定义') {
|
||||
this.updateDateRange();
|
||||
this.updateDateRange()
|
||||
} else {
|
||||
// 自定义选项逻辑
|
||||
this.startDate = new Date();
|
||||
this.endDate = new Date();
|
||||
this.startDate = new Date()
|
||||
this.endDate = new Date()
|
||||
}
|
||||
this.updateNextButtonStatus();
|
||||
this.updateNextButtonStatus()
|
||||
},
|
||||
updateDateRange() {
|
||||
const today = this.today;
|
||||
const today = this.today
|
||||
// 根据选择的时间单位计算起始和结束日期
|
||||
if (this.timeUnit === '日') {
|
||||
this.startDate = today;
|
||||
this.endDate = today;
|
||||
this.startDate = today
|
||||
this.endDate = today
|
||||
} else if (this.timeUnit === '周') {
|
||||
this.startDate = this.getStartOfWeek(today);
|
||||
this.endDate = this.getEndOfWeek(today);
|
||||
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);
|
||||
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);
|
||||
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.startDate = new Date(today.getFullYear(), 0, 1)
|
||||
this.endDate = new Date(today.getFullYear(), 11, 31)
|
||||
}
|
||||
this.updateNextButtonStatus();
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
|
||||
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);
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 1)
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 1)
|
||||
} else if (this.timeUnit === '周') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 7);
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 7);
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 7)
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 7)
|
||||
} else if (this.timeUnit === '月') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 1);
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 1);
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
|
||||
} else if (this.timeUnit === '季度') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 3);
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 3);
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
|
||||
} else if (this.timeUnit === '年') {
|
||||
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1);
|
||||
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1);
|
||||
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
|
||||
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
|
||||
}
|
||||
|
||||
this.startDate = prevStartDate;
|
||||
this.endDate = prevEndDate;
|
||||
this.updateNextButtonStatus();
|
||||
|
||||
this.startDate = prevStartDate
|
||||
this.endDate = prevEndDate
|
||||
this.updateNextButtonStatus()
|
||||
},
|
||||
goToCurrent() {
|
||||
if (this.timeUnit !== '自定义') {
|
||||
this.updateDateRange(); // 更新为当前选择时间单位的时间范围
|
||||
this.updateDateRange() // 更新为当前选择时间单位的时间范围
|
||||
}
|
||||
},
|
||||
nextPeriod() {
|
||||
const nextStartDate = new Date(this.startDate);
|
||||
const nextEndDate = new Date(this.endDate);
|
||||
|
||||
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);
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 1)
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 1)
|
||||
} else if (this.timeUnit === '周') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 7);
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 7);
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 7)
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 7)
|
||||
} else if (this.timeUnit === '月') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 1);
|
||||
nextEndDate.setMonth(nextEndDate.getMonth() + 1);
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
|
||||
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
|
||||
} else if (this.timeUnit === '季度') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 3);
|
||||
nextEndDate.setMonth(nextStartDate.getMonth() + 3);
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
|
||||
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
|
||||
} else if (this.timeUnit === '年') {
|
||||
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1);
|
||||
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1);
|
||||
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
|
||||
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
|
||||
}
|
||||
|
||||
this.startDate = nextStartDate;
|
||||
this.endDate = nextEndDate;
|
||||
this.updateNextButtonStatus();
|
||||
|
||||
this.startDate = nextStartDate
|
||||
this.endDate = nextEndDate
|
||||
this.updateNextButtonStatus()
|
||||
},
|
||||
updateNextButtonStatus() {
|
||||
// 更新下一个按钮的禁用状态
|
||||
const maxDate = new Date(); // 假设最新日期为今天
|
||||
this.isNextDisabled = this.endDate > maxDate;
|
||||
}
|
||||
}
|
||||
};
|
||||
const maxDate = new Date() // 假设最新日期为今天
|
||||
this.isNextDisabled = this.endDate > maxDate
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// defineProps('include','exclude','default')
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang='scss'>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user