使用时间范围选择

时间范围选择

要注意的是时间范围 model time_range 使用字符串，传递到后端的时候直接使用 time_range.value[0] 这种方式进行传递 如果选择的 model 类型错误，或者是不可写的，就会出现虽然界面做了选择但是没有值生效的情况

<template>
    <div class="container">
        <el-date-picker v-model="time_range" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
            start-placeholder="Start date" end-placeholder="End date" style="width:400px" />
 
        <el-input v-model="message" placeholder="Message"></el-input>
        <el-button type="primary" @click="searchLogs">Search</el-button>
    </div>
    <div>
        <el-table :data="logs" style="width: 100%">
            <el-table-column prop="_time" label="Time" width="180px">
                <template #default="{ row }">
                    {{ formatDate(row._time) }}
                </template>
            </el-table-column>
            <el-table-column prop="module" label="Module" width="180px"></el-table-column>
            <el-table-column prop="func" label="Function" width="280px"></el-table-column>
            <el-table-column prop="level" label="Level" width="180px"></el-table-column>
            <el-table-column prop="message" label="Message"></el-table-column>
        </el-table>
    </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from 'vue'
import request from '@/utils/request';
import moment from 'moment';
 
const formatDate = (dateStr) => {
    return moment(dateStr).format('YYYY-MM-DD HH:mm:ss');
};
 
let currentTime = new Date();
let fifteenMinutesAgo = new Date(currentTime.getTime() - 15 * 60 * 1000);
let time_range = ref('')
 
// 初始化选择权限
onMounted(() => {
    const value1 = ref < [Date, Date] > ([
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10),
    ])
 
    console.log(`value1`, value1)
});
 
const module = ref('')
const func = ref('')
const level = ref('')
const message = ref('')
const logs = ref([])
 
 
const shortcuts = [
    {
        text: '最近15分钟',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMinutes(start.getMinutes() - 15)
            return [start, end]
        },
    },
    {
        text: '最近1小时',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setHours(start.getHours() - 1)
            return [start, end]
        },
    },
    {
        text: '最近1天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDay() - 3)
            return [start, end]
        },
    },
]
 
const searchLogs = async () => {
    try {
        const response = await request.get('/log/list', {
            params: {
                startAt: time_range.value[0],
                endAt: time_range.value[1],
                module: module.value,
                func: func.value,
                level: level.value,
                message: message.value
            }
        })
        logs.value = response.data
    } catch (error) {
        console.error(error)
    }
}
 
 
</script>
 
<style scoped>
.container {
    /*  display: flex; */
    align-items: center;
}
 
.input {
    margin-right: 10px;
    flex: 1;
 
    /* 让输入框自动填充剩余空间 */
}
 
.ep-input {
    width: 400px;
}
 
.button {
    margin-left: 40px;
    margin-right: 10px;
}
 
.block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
 
.block:last-child {
    border-right: none;
}
 
.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>