parent
998d04a935
commit
14cc717538
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="date-range">
|
||||||
|
<el-button
|
||||||
|
v-for="(item, index) in opts"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: active === item.value }"
|
||||||
|
type="text"
|
||||||
|
@click="handleRange(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</el-button>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value"
|
||||||
|
:clearable="false"
|
||||||
|
:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
|
||||||
|
type="datetimerange"
|
||||||
|
value-format="x"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
const opts = ref([
|
||||||
|
{
|
||||||
|
label: '本周',
|
||||||
|
value: 'week',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '本月',
|
||||||
|
value: 'month',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const active = ref('week');
|
||||||
|
const value = ref([]);
|
||||||
|
const emits = defineEmits(['update:modelValue']);
|
||||||
|
watch(value, (value) => {
|
||||||
|
emits('update:modelValue', value);
|
||||||
|
if (unref(click)) {
|
||||||
|
click.value = false;
|
||||||
|
} else {
|
||||||
|
active.value = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const click = ref(false);
|
||||||
|
const handleRange = (range) => {
|
||||||
|
click.value = true;
|
||||||
|
active.value = range;
|
||||||
|
let weekStart = new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24);
|
||||||
|
switch (range) {
|
||||||
|
case 'week':
|
||||||
|
value.value = [
|
||||||
|
new Date(dayjs(weekStart).format('YYYY-MM-DD 00:00:00')).getTime(),
|
||||||
|
new Date(
|
||||||
|
dayjs(new Date(weekStart.getTime() + 6 * 1000 * 60 * 60 * 24)).format('YYYY-MM-DD 23:59:59')
|
||||||
|
).getTime(),
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case 'month':
|
||||||
|
value.value = [
|
||||||
|
new Date(
|
||||||
|
dayjs(new Date(new Date().getTime() - (new Date().getDate() - 1) * 1000 * 60 * 60 * 24)).format(
|
||||||
|
'YYYY-MM-DD 00:00:00'
|
||||||
|
)
|
||||||
|
).getTime(),
|
||||||
|
new Date(dayjs(new Date()).format('YYYY-MM-DD 23:59:59')).getTime(),
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
handleRange('week');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.date-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.el-button {
|
||||||
|
color: #666;
|
||||||
|
&.active {
|
||||||
|
color: #4481ff;
|
||||||
|
}
|
||||||
|
& + .el-button {
|
||||||
|
margin-left: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor) {
|
||||||
|
margin-left: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue