init

src/views/AccessRecords.vue

@@ -0,0 +1,122 @@
+<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>