123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div id="app-container">
|
||
|
|
<el-button size="small" @click="back" type="primary" plain icon="back"
|
||
|
|
>返回</el-button
|
||
|
|
>
|
||
|
|
<el-form
|
||
|
|
class="query-form"
|
||
|
|
inline
|
||
|
|
size="small"
|
||
|
|
:model="queryParams"
|
||
|
|
ref="queryParamsRef"
|
||
|
|
>
|
||
|
|
<el-form-item>
|
||
|
|
<el-date-picker
|
||
|
|
v-model="queryParams.startTime"
|
||
|
|
type="datetime"
|
||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
placeholder="请选择开始时间"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-date-picker
|
||
|
|
v-model="queryParams.endTime"
|
||
|
|
type="datetime"
|
||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
placeholder="请选择结束时间"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="search" @click="handleSearch"
|
||
|
|
>搜索
|
||
|
|
</el-button>
|
||
|
|
<el-button type="primary" icon="refresh" @click="resetQuery"
|
||
|
|
>重置
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<el-table :data="logList" v-loading>
|
||
|
|
<el-table-column label="访问时间" prop="visitTime"></el-table-column>
|
||
|
|
<el-table-column label="访问IP" prop="visitIp"></el-table-column>
|
||
|
|
<el-table-column label="访问地区" prop="visitAddress"></el-table-column>
|
||
|
|
<el-table-column label="访问设备" prop="visitDevice"></el-table-column>
|
||
|
|
<el-table-column label="访问后缀" prop="urlSuffix"></el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
:page-size="queryParams.pageSize"
|
||
|
|
:current-page="queryParams.pageNum"
|
||
|
|
@update:current-page="handleCurrentChange"
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="total"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="AccessRecords" lang="ts">
|
||
|
|
import { reactive, ref, toRefs } from "vue";
|
||
|
|
import { listLogList } from "@/api/shortlink";
|
||
|
|
import type { LogListParams } from "@/models/LogListParams";
|
||
|
|
import { useRoute, useRouter } from "vue-router";
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const router = useRouter();
|
||
|
|
const logList = ref([]);
|
||
|
|
const total = ref(0);
|
||
|
|
const data = reactive<{ queryParams: LogListParams }>({
|
||
|
|
queryParams: {
|
||
|
|
urlSuffix: route.params.suffix as string,
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const { queryParams } = toRefs(data);
|
||
|
|
const getList = async () => {
|
||
|
|
const resp = await listLogList(queryParams.value);
|
||
|
|
logList.value = resp.data.rows;
|
||
|
|
total.value = resp.data.total;
|
||
|
|
};
|
||
|
|
const queryParamsRef = ref();
|
||
|
|
const resetQuery = () => {
|
||
|
|
queryParams.value = {
|
||
|
|
urlSuffix: route.params.suffix as string,
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
};
|
||
|
|
if (queryParamsRef.value) {
|
||
|
|
queryParamsRef.value.resetFields();
|
||
|
|
}
|
||
|
|
getList();
|
||
|
|
};
|
||
|
|
const handleSearch = () => {
|
||
|
|
queryParams.value.pageNum = 1;
|
||
|
|
getList();
|
||
|
|
};
|
||
|
|
const handleCurrentChange = (page: number) => {
|
||
|
|
queryParams.value.pageNum = page;
|
||
|
|
getList();
|
||
|
|
};
|
||
|
|
const back = () => {
|
||
|
|
router.push("/");
|
||
|
|
};
|
||
|
|
getList();
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
#app-container {
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
.query-form {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination {
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|