因为我用的是elementui的radio组件,所以我要在change事件里处理功能逻辑,代码如下:
<el-radio-group v-model="maintenanceForm.chooseDate" @change="selectDate" size="mini">
<el-radio-button label="0">昨日</el-radio-button>
<el-radio-button label="1">今日</el-radio-button>
<el-radio-button label="2">本周</el-radio-button>
<el-radio-button label="3">本月</el-radio-button>
<el-radio-button label="4">本季度</el-radio-button>
<el-radio-button label="5">全部</el-radio-button>
</el-radio-group>
<script>
// 转换日期的函数
function conversionDate(time) {
let date = new Date(time);
let countDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
return {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate(),
timeStamp: date.getTime()
};
}
export default {
data() {
return {
list: {
search: {
time:[],
},
query:{
current:1,
size:20,
total:0
}
}
maintenanceForm: {
chooseDate:1,
}
}
}
method: {
// 请求查询日期
selectDate(value) {
let selectDate = [];
let currentDate = conversionDate(new Date());
//昨日
if (value == 0) {
let date = conversionDate(new Date(currentDate.timeStamp - 24*60*60*1000));
let end = new Date(`${date.year}-${date.month}-${date.day} 23:59:59`);
let start = new Date(`${date.year}-${date.month}-${date.day} 00:00:00`);
start.setTime(start.getTime());
start = moment(start).format("YYYY-MM-DD HH:mm:ss");
end = moment(end).format("YYYY-MM-DD HH:mm:ss");
selectDate = [start, end];
}
// 今天
else if (value == 1) {
let end = new Date(
`${currentDate.year}-${currentDate.month}-${currentDate.day} 23:59:59`
);
let start = new Date(
`${currentDate.year}-${currentDate.month}-${currentDate.day} 00:00:00`
);
start.setTime(start.getTime());
start = moment(start).format("YYYY-MM-DD HH:mm:ss");
end = moment(end).format("YYYY-MM-DD HH:mm:ss");
selectDate = [start, end];
}
// 本周
else if (value == 2) {
var new_Date = new Date();
var timesStamp = new_Date.getTime();
var currenDay = new_Date.getDay();
var dates = [];
for (var i = 0; i < 7; i++) {
dates.push(
new Date(
timesStamp + 24 * 60 * 60 * 1000 * (i - ((currenDay + 6) % 7))
)
.toLocaleDateString()
.replace(/\//g, "-")
);
}
selectDate = [moment(dates[0]).format("YYYY-MM-DD HH:mm:ss"), moment(dates[6]).format("YYYY-MM-DD") +
' 23:59:59'
]
}
// 本月
else if (value == 3) {
let start = moment(new Date())
.startOf("month")
.format("YYYY-MM-DD HH:mm:ss");
let end = moment(new Date())
.endOf("month")
.format("YYYY-MM-DD HH:mm:ss");
selectDate = [start, end];
}
// 本季
else if (value == 4) {
let start = moment(new Date())
.startOf("month")
.format("YYYY-MM-DD HH:mm:ss");
let end = moment(new Date())
.startOf("month")
.add(2, "months")
.endOf("months")
.format("YYYY-MM-DD HH:mm:ss");
selectDate = [start, end];
}
// 全部
else if (value == 5) {
selectDate = [];
}
this.list.search.time = selectDate;
this.list.query.current = 1;
// 选完查询条件后,发起请求获取数据
this.getPageList();
},
}
}
</script>