DocumentHistoryView.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <script setup lang="ts">
  2. import { onMounted, type Ref, ref } from "vue";
  3. import HistoryList from "./components/HistoryList.vue";
  4. import HistoryToolbar from "./components/HistoryToolbar.vue";
  5. import type { SearchHistoryRecord } from "@/types/user.types";
  6. import * as userService from "@/services/user.service";
  7. import { useAuthStore } from "@/stores/auth.store";
  8. const authStore = useAuthStore();
  9. const records: Ref<SearchHistoryRecord[]> = ref([]);
  10. const currentPage = ref(1);
  11. const page = ref(1);
  12. const total = ref(0);
  13. const filterValue = ref("3");
  14. function fetchBrowsing() {
  15. const currentUser = JSON.stringify(authStore.currentUser)
  16. userService.fetchBrowsing(currentUser, page.value, 10, Number(filterValue.value)).then((resp) => {
  17. const respData = resp.data.data;
  18. records.value = respData.records;
  19. total.value = respData.total;
  20. })
  21. }
  22. function handleDelete(id: number) {
  23. const currentUser = JSON.stringify(authStore.currentUser)
  24. userService.delBrowsingById(currentUser, id).then(() => {
  25. fetchBrowsing()
  26. })
  27. }
  28. function onfilterChange(value: string) {
  29. filterValue.value = value
  30. fetchBrowsing()
  31. }
  32. function ondeleteAll() {
  33. const currentUser = JSON.stringify(authStore.currentUser)
  34. userService.delAllBrowsing(currentUser).then(() => {
  35. fetchBrowsing()
  36. })
  37. }
  38. function onNext() {
  39. page.value = currentPage.value + 1;
  40. fetchBrowsing();
  41. }
  42. function onPrev() {
  43. page.value = currentPage.value - 1;
  44. fetchBrowsing();
  45. }
  46. onMounted(() => {
  47. fetchBrowsing();
  48. });
  49. </script>
  50. <template>
  51. <HistoryToolbar @filterChange="onfilterChange" @deleteAll="ondeleteAll" />
  52. <HistoryList :data="records" @delete="handleDelete" class="history-list-wrap" />
  53. <div class="pagination">
  54. <a-pagination v-model:current="currentPage" simple :total="total">
  55. <template #itemRender="{ type, originalElement }">
  56. <a-button v-if="type === 'prev'" size="small" @click="onPrev()"> 上一页</a-button>
  57. <a-button v-else-if="type === 'next'" size="small" @click="onNext()">下一页</a-button>
  58. <component :is="originalElement" v-else></component>
  59. </template>
  60. </a-pagination>
  61. </div>
  62. </template>
  63. <style scoped lang="scss">
  64. .history-list-wrap {
  65. margin-top: 16px;
  66. }
  67. .pagination {
  68. margin-top: 16px;
  69. text-align: right;
  70. .ant-pagination {
  71. height: 28px;
  72. }
  73. }
  74. </style>