<template>
<div class="main">
<div class="header">
<el-form :model="form" label-width="auto">
<el-button plain @click="setTimeToYesterday" style="margin: 0 10px; float: left">昨天</el-button>
<el-button plain @click="setTimeToLast7Days" style="margin: 0 -10px; float: left">近7日</el-button>
<el-button plain @click="setTimeToLast30Days" style="margin: 0 10px; float: left">30日</el-button>
<el-date-picker
style="width: 200px; float: left"
v-model="form.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"/>
</el-form>
</div>
</div>
</template>
<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
export default {
name: "",
setup() {
let router = useRouter(),
route = useRoute();
const data: any = reactive({
form: {
time: ""
},
});
const setTimeToYesterday=()=> {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 1);
start.setHours(0, 0, 0, 0);
end.setHours(23, 59, 59, 999);
data.form.time = [start, end];
};
const setTimeToLast7Days=()=> {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
start.setHours(0, 0, 0, 0);
end.setHours(23, 59, 59, 999);
data.form.time = [start, end];
};
const setTimeToLast30Days=()=> {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 30);
start.setHours(0, 0, 0, 0);
end.setHours(23, 59, 59, 999);
data.form.time = [start, end];
};
onMounted(() => {
});
onUnmounted(() => {
});
const refData = toRefs(data);
return {
...refData,
setTimeToYesterday,
setTimeToLast7Days,
setTimeToLast30Days,
};
},
};
</script>
<style lang="scss" scoped>
::v-deep.el-form-item__label-wrap {
margin: 0 !important;
}
.main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.header {
display: flex;
vertical-align: middle;
padding: 15px 0 0 0;
}
.section {
flex: 5;
padding: 0 10px;
box-sizing: border-box;
}
}
</style>
