康冉冉
142 lines
4.5 KiB
Vue
142 lines
4.5 KiB
Vue
<template>
|
|
<div class="ultabs">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
range-separator="至"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
style="display: inline-block!important;width: 55%!important;"
|
|
@change="dateChange"/>
|
|
<ul style="display: inline-block">
|
|
<li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
|
|
<li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
|
|
<li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted} from "vue";
|
|
export default {
|
|
name: 'dateTimeSelect',
|
|
props: {},
|
|
data() {
|
|
return {
|
|
dateRange: [],
|
|
isActive: 'DAY'
|
|
}
|
|
},
|
|
// DOM 挂载完成后
|
|
mounted() {
|
|
// 可以访问 DOM 元素
|
|
setTimeout(() => {
|
|
this.getLastDays(6);
|
|
}, 500);
|
|
},
|
|
methods: {
|
|
toggle(val, num) {
|
|
this.isActive = val;
|
|
if (val && val !== 'MONTH') {
|
|
this.getLastDays(num - 1);
|
|
} else {
|
|
this.getDaysOfPreviousMonth();
|
|
}
|
|
},
|
|
dateChange() {
|
|
this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
|
|
},
|
|
// 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
|
|
getLastDays(num) {
|
|
const dayList = [];
|
|
const today = new Date();
|
|
|
|
for (let i = num; i >= 0; i--) {
|
|
const d = new Date(today);
|
|
d.setDate(today.getDate() - i);
|
|
|
|
// 格式化日期为 YYYY-MM-DD
|
|
const year = d.getFullYear();
|
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
const day = String(d.getDate()).padStart(2, '0');
|
|
|
|
dayList.push(`${year}-${month}-${day}`);
|
|
}
|
|
this.$emit("dataChange", this.isActive, dayList);
|
|
},
|
|
getDaysOfPreviousMonth(star, end) {
|
|
const currentDate = new Date();
|
|
const currentYear = currentDate.getFullYear();
|
|
const currentMonth = currentDate.getMonth(); // 0-11 表示 1-12 月
|
|
|
|
// 计算前一个月的年份和月份
|
|
const prevMonth = currentMonth - 1;
|
|
const prevYear = prevMonth >= 0 ? currentYear : currentYear - 1;
|
|
const prevMonthActual = prevMonth >= 0 ? prevMonth : 11; // 11 表示 12 月
|
|
|
|
// 获取第一天和最后一天
|
|
const firstDay = star ? new Date(star) : new Date(prevYear, prevMonthActual, 1);
|
|
const lastDay = end ? new Date(end) : new Date(prevYear, prevMonthActual + 1, 0); // 下个月首日减 1 天
|
|
|
|
// 生成所有日期
|
|
const oneMonthDays = [];
|
|
let currentDay = firstDay;
|
|
while (currentDay <= lastDay) {
|
|
// 格式化为 YYYY-MM-DD
|
|
const formattedDate = currentDay.toISOString().split('T')[0];
|
|
oneMonthDays.push(formattedDate);
|
|
currentDay = new Date(currentDay); // 避免引用同一对象
|
|
currentDay.setDate(currentDay.getDate() + 1);
|
|
}
|
|
this.$emit("dataChange", this.isActive, oneMonthDays);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.ultabs {
|
|
float: right;
|
|
position: relative;
|
|
z-index: 9;
|
|
margin-top: 30px;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.ultabs ul li {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
display: inline-block;
|
|
width: 70px;
|
|
text-align: center;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
}
|
|
/*.ultabs ul li:nth-child样式做了更改*/
|
|
.ultabs ul li {
|
|
border-radius: 4px;
|
|
border: 1px solid #CCCCCC;
|
|
margin: 0 5px;
|
|
}
|
|
.activesbgs {
|
|
color: #FFF;
|
|
background: #5D78FF;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
display: inline-block;
|
|
width: 70px;
|
|
text-align: center;
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
border: 1px solid #5D78FF;
|
|
}
|
|
::v-deep .ultabs .el-range-editor--medium .el-range-input{
|
|
vertical-align: super!important;
|
|
}
|
|
::v-deep .ultabs .el-range-editor--medium .el-range-separator{
|
|
vertical-align: super!important;
|
|
}
|
|
</style>
|