从1.0迁移过来
This commit is contained in:
康冉冉
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' || dateShowType === 'month') ? '35px' : '10px'}">
|
||||
<div v-if="sideIcon" style="display: inline-block;padding-left: 1px;float: right;">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
<i style="font-size: 1.5rem;margin-top: 5px;" class="el-icon-s-tools"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item of sideIcon && sideIcon.iconName" class="clearfix">
|
||||
<div @click="onChange(item)">{{item.name}}</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<ul style="display: inline-block;padding-left: 1px;vertical-align: middle;margin:0;float: right;">
|
||||
<template v-if="dateShowType === 'day'">
|
||||
<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>
|
||||
</template>
|
||||
<template v-if="dateShowType === 'month'">
|
||||
<li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH', 3)">前三个月</li>
|
||||
<li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR', 6)">前半年</li>
|
||||
<li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR', 12)">前一年</li>
|
||||
</template>
|
||||
</ul>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
:type="dateShowType === 'month' ? 'monthrange' : 'daterange'"
|
||||
:start-placeholder="dateShowType === 'month' ? '开始日期' : '开始时间'"
|
||||
:end-placeholder="dateShowType === 'month' ? '结束日期' : '结束时间'"
|
||||
range-separator="至"
|
||||
:format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
|
||||
:value-format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
|
||||
style="display: inline-block!important;width: 45%!important;vertical-align: middle;float: right;margin-right: 10px;"
|
||||
@change="dateChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
export default {
|
||||
name: 'dateTimeSelect',
|
||||
props: {
|
||||
dateShowType: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
sideIcon: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateRange: [],
|
||||
isActive: ''
|
||||
}
|
||||
},
|
||||
// DOM 挂载完成后
|
||||
mounted() {
|
||||
this.isActive = this.dateShowType && this.dateShowType === 'day' ? 'MONTH' : 'YEAR';
|
||||
// 可以访问 DOM 元素
|
||||
// setTimeout(() => {
|
||||
// // this.getLastDays(6);
|
||||
// // this.getDaysOfPreviousMonth();
|
||||
// this.$emit("dataChange", this.isActive, []);
|
||||
// }, 500);
|
||||
},
|
||||
methods: {
|
||||
toggle(val, num) {
|
||||
this.isActive = val;
|
||||
this.dateRange = [];
|
||||
if (val && val === 'MONTH') {
|
||||
this.getDaysOfPreviousMonth();
|
||||
} else if (val && (val === 'THREEMONTH' || val === 'HALFYEAR' || val === 'YEAR')) {
|
||||
this.getLastMonths(num);
|
||||
} else {
|
||||
this.getLastDays(num - 1);
|
||||
}
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange() {
|
||||
this.$emit("dataChange", this.isActive, this.dateRange);
|
||||
this.isActive = '';
|
||||
// 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}`);
|
||||
}
|
||||
let timeArr = [dayList[0], dayList[dayList.length - 1]];
|
||||
this.$emit("dataChange", this.isActive, timeArr);
|
||||
// this.$emit("dataChange", this.isActive, dayList);
|
||||
},
|
||||
// 获取前一个月的所有日期
|
||||
getDaysOfPreviousMonth(star, end) {
|
||||
// 1. 获取当前日期（终点日期）
|
||||
const currentDate = new Date();
|
||||
const endYear = currentDate.getFullYear();
|
||||
const endMonth = currentDate.getMonth(); // 0=1月，11=12月
|
||||
const endDay = currentDate.getDate(); // 当前日（如8）
|
||||
|
||||
// 2. 计算起点日期（当前日期的“上月同日”，处理边界：如3月31日→2月28/29日）
|
||||
const startDate = new Date(endYear, endMonth, endDay);
|
||||
// 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
|
||||
startDate.setMonth(startDate.getMonth() - 1);
|
||||
|
||||
// 3. 提取起点日期的年、月、日（用于循环判断）
|
||||
const startYear = startDate.getFullYear();
|
||||
const startMonth = startDate.getMonth();
|
||||
const startDay = startDate.getDate();
|
||||
|
||||
// 4. 循环生成“起点~终点”的所有日期
|
||||
const dateCollection = [];
|
||||
// 临时日期：从起点日期开始递增
|
||||
const tempDate = new Date(startYear, startMonth, startDay);
|
||||
|
||||
// 循环条件：临时日期 <= 当前日期（终点）
|
||||
while (tempDate <= currentDate) {
|
||||
// 格式化日期为“YYYY-MM-DD”（补零处理：如8月→08，5日→05）
|
||||
const year = tempDate.getFullYear();
|
||||
const month = String(tempDate.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(tempDate.getDate()).padStart(2, '0');
|
||||
const formattedDate = `${year}-${month}-${day}`;
|
||||
|
||||
dateCollection.push(formattedDate);
|
||||
|
||||
// 临时日期加1天（进入下一天）
|
||||
tempDate.setDate(tempDate.getDate() + 1);
|
||||
}
|
||||
let timeArr = [dateCollection[0], dateCollection[dateCollection.length - 1]];
|
||||
this.$emit("dataChange", this.isActive, timeArr);
|
||||
// this.$emit("dataChange", this.isActive, oneMonthDays);
|
||||
},
|
||||
// 获取前三个月的月
|
||||
getLastMonths(num) {
|
||||
const threeMonths = [];
|
||||
const today = new Date(); // 当前日期
|
||||
const currentYear = today.getFullYear();
|
||||
const currentMonth = today.getMonth() + 1; // 月份从0开始（0=1月，11=12月）
|
||||
// 循环获取前3个月（i=0: 前1个月，i=1: 前2个月，i=2: 前3个月）
|
||||
for (let i = 1; i <= num; i++) {
|
||||
// 计算目标月份（当前月 - i）
|
||||
let targetMonth = currentMonth - i;
|
||||
let targetYear = currentYear;
|
||||
// 处理月份溢出（如1月-1=12月，年份减1）
|
||||
if (targetMonth < 0) {
|
||||
targetMonth += 12;
|
||||
targetYear -= 1;
|
||||
}
|
||||
// 格式化月份为两位数（如5月→'05'）
|
||||
const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1是因为月份从0开始
|
||||
threeMonths.unshift(`${targetYear}-${monthStr}`);
|
||||
}
|
||||
let timeArr = [threeMonths[0], threeMonths[threeMonths.length - 1]];
|
||||
this.$emit("dataChange", this.isActive, timeArr);
|
||||
// this.$emit("dataChange", this.isActive, threeMonths);
|
||||
},
|
||||
onChange(val){
|
||||
this.$emit("dataChange", null, null, val);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .el-range-editor .el-range-input {
|
||||
vertical-align: super!important;
|
||||
}
|
||||
::v-deep .el-date-editor .el-range-separator {
|
||||
vertical-align: super!important;
|
||||
}
|
||||
::v-deep .el-date-editor .el-range__close-icon {
|
||||
margin-top: -38px;
|
||||
margin-right: -14px;
|
||||
}
|
||||
.ultabs {
|
||||
width: 500px;
|
||||
float: right;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user