|
|
@@ -1,35 +1,34 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, type Ref, ref } from "vue";
|
|
|
-import HistoryList from "./components/HistoryList.vue";
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+import BrowsingHistoryList from "./components/BrowsingHistoryList.vue";
|
|
|
import HistoryToolbar from "./components/HistoryToolbar.vue";
|
|
|
-import type { SearchHistoryRecord } from "@/types/user.types";
|
|
|
-import * as userService from "@/services/user.service";
|
|
|
-import { useAuthStore } from "@/stores/auth.store";
|
|
|
+import * as browsingHistoryService from "@/services/browsingHistory.service"
|
|
|
+import type { BrowsingHistories } from "@/types/browsingHistory.types";
|
|
|
+import SpinComponent from "@/components/SpinComponent.vue";
|
|
|
|
|
|
-const authStore = useAuthStore();
|
|
|
-
|
|
|
-const records: Ref<SearchHistoryRecord[]> = ref([]);
|
|
|
+const histories = ref<BrowsingHistories | null>(null);
|
|
|
|
|
|
const currentPage = ref(1);
|
|
|
|
|
|
const page = ref(1);
|
|
|
|
|
|
-const total = ref(0);
|
|
|
+const filterValue = ref('3');
|
|
|
|
|
|
-const filterValue = ref("3");
|
|
|
+const loading = ref(false)
|
|
|
|
|
|
function fetchBrowsing() {
|
|
|
- const currentUser = JSON.stringify(authStore.currentUser)
|
|
|
- userService.fetchBrowsing(currentUser, page.value, 10, Number(filterValue.value)).then((resp) => {
|
|
|
- const respData = resp.data.data;
|
|
|
- records.value = respData.records;
|
|
|
- total.value = respData.total;
|
|
|
+ loading.value = true
|
|
|
+ browsingHistoryService.fetch(page.value, parseInt(filterValue.value)).then((resp) => {
|
|
|
+ histories.value = resp;
|
|
|
+ loading.value = false
|
|
|
+ }).catch(() => {
|
|
|
+ loading.value = false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function handleDelete(id: number) {
|
|
|
- const currentUser = JSON.stringify(authStore.currentUser)
|
|
|
- userService.delBrowsingById(currentUser, id).then(() => {
|
|
|
+ loading.value = true
|
|
|
+ browsingHistoryService.remove(id).then(() => {
|
|
|
fetchBrowsing()
|
|
|
})
|
|
|
}
|
|
|
@@ -40,20 +39,15 @@ function onfilterChange(value: string) {
|
|
|
}
|
|
|
|
|
|
function ondeleteAll() {
|
|
|
- const currentUser = JSON.stringify(authStore.currentUser)
|
|
|
- userService.delAllBrowsing(currentUser).then(() => {
|
|
|
+ loading.value = true
|
|
|
+ browsingHistoryService.removeAll().then(() => {
|
|
|
fetchBrowsing()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-function onNext() {
|
|
|
- page.value = currentPage.value + 1;
|
|
|
- fetchBrowsing();
|
|
|
-}
|
|
|
-
|
|
|
-function onPrev() {
|
|
|
- page.value = currentPage.value - 1;
|
|
|
- fetchBrowsing();
|
|
|
+function onPaginationChange(p: number) {
|
|
|
+ page.value = p
|
|
|
+ fetchBrowsing()
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -63,15 +57,11 @@ onMounted(() => {
|
|
|
|
|
|
<template>
|
|
|
<HistoryToolbar @filterChange="onfilterChange" @deleteAll="ondeleteAll" />
|
|
|
- <HistoryList :data="records" @delete="handleDelete" class="history-list-wrap" />
|
|
|
+ <SpinComponent :spinning="loading">
|
|
|
+ <BrowsingHistoryList v-if="histories" :data="histories.items" @delete="handleDelete" class="history-list-wrap" />
|
|
|
+ </SpinComponent>
|
|
|
<div class="pagination">
|
|
|
- <a-pagination v-model:current="currentPage" simple :total="total">
|
|
|
- <template #itemRender="{ type, originalElement }">
|
|
|
- <a-button v-if="type === 'prev'" size="small" @click="onPrev()"> 上一页</a-button>
|
|
|
- <a-button v-else-if="type === 'next'" size="small" @click="onNext()">下一页</a-button>
|
|
|
- <component :is="originalElement" v-else></component>
|
|
|
- </template>
|
|
|
- </a-pagination>
|
|
|
+ <a-pagination v-model:current="currentPage" :total="histories?.total" @change="onPaginationChange" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -84,8 +74,8 @@ onMounted(() => {
|
|
|
margin-top: 16px;
|
|
|
text-align: right;
|
|
|
|
|
|
- .ant-pagination {
|
|
|
- height: 28px;
|
|
|
+ :deep(.ant-pagination) {
|
|
|
+ height: 32px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|