Kaynağa Gözat

搜索历史与浏览记录页面联调

唐钦 2 yıl önce
ebeveyn
işleme
90c7ace5e1

+ 3 - 3
src/services/httpClient.ts

@@ -1,9 +1,9 @@
 import {message} from "ant-design-vue";
 import axios, {AxiosError, type AxiosRequestConfig} from "axios";
-import { routeToLogin } from "@/router";
-import type { MessageType } from "ant-design-vue/lib/message";
+import {routeToLogin} from "@/router";
+import type {MessageType} from "ant-design-vue/lib/message";
 
-const urlPrefix = "/";
+const urlPrefix = "http://127.0.0.1:8088";
 
 const httpClient = axios.create({
     baseURL: urlPrefix,

+ 56 - 19
src/services/user.service.ts

@@ -1,25 +1,25 @@
-import type { SearchHistoryRecord, UserLoginRequest, CurrentUser } from "@/types/user.types";
-import type { Page } from "@/types/pagination.types"
-import type { Response } from "@/types/response.types";
-import type { AxiosResponse } from "axios";
+import type {SearchHistoryRecord, UserLoginRequest, CurrentUser} from "@/types/user.types";
+import type {Page} from "@/types/pagination.types"
+import type {Response} from "@/types/response.types";
+import type {AxiosResponse} from "axios";
 import httpClient from "./httpClient";
 
 const urlPrefix = "/gw/user";
 
 function _url(path: string): string {
-  return `${urlPrefix}${path}`;
+    return `${urlPrefix}${path}`;
 }
 
 function login(param: UserLoginRequest): Promise<AxiosResponse<Response<CurrentUser>>> {
-  return httpClient.post<Response<CurrentUser>>(_url("/login"), param);
+    return httpClient.post<Response<CurrentUser>>(_url("/login"), param);
 }
 
 async function checkLogin(): Promise<boolean> {
-  const resp = await httpClient.get("/gw/user/user/checkLogin");
-  if (resp) {
-    return true;
-  }
-  return false;
+    const resp = await httpClient.get("/gw/user/user/checkLogin");
+    if (resp) {
+        return true;
+    }
+    return false;
 }
 
 /**
@@ -29,15 +29,52 @@ async function checkLogin(): Promise<boolean> {
  * @param size 每页数量
  * @returns Promise
  */
-export function fetchHistory(currentUser: string, page: number, size: number) {
-  const url = _url("/searchHistory/getMySearchHistory");
-  const headers = { currentUser };
-  const params = { page, size };
-  return httpClient.get<Response<Page<SearchHistoryRecord>>>(url, { params, headers });
+export function fetchHistory(currentUser: string, page: number, size: number, dateNum: number) {
+    const url = _url("/searchHistory/getMySearchHistory");
+    const headers = {currentUser};
+    const params = {page, size, dateNum};
+    return httpClient.get<Response<Page<SearchHistoryRecord>>>(url, {params, headers});
+}
+
+export function delHistory(currentUser: string, id: number) {
+    const url = _url("/searchHistory/delById/" + id);
+    const headers = {currentUser};
+    return httpClient.delete<Response<Object>>(url, {headers});
+}
+
+export function delAllHistory(currentUser: string) {
+    const url = _url("/searchHistory/delAllByUserId");
+    const headers = {currentUser};
+    return httpClient.delete<Response<Object>>(url, {headers});
+}
+
+export function fetchBrowsing(currentUser: string, page: number, size: number, dateNum: number) {
+    const url = _url("/browsing/getPage");
+    const headers = {currentUser};
+    const params = {page, size, dateNum};
+    return httpClient.get<Response<Page<SearchHistoryRecord>>>(url, {params, headers});
+}
+
+export function delBrowsingById(currentUser: string, id: number) {
+    const url = _url("/browsing/delById/" + id);
+    const headers = {currentUser};
+    return httpClient.delete<Response<Object>>(url, {headers});
+}
+
+export function delAllBrowsing(currentUser: string) {
+    const url = _url("/browsing/delByUserId");
+    const headers = {currentUser};
+    return httpClient.delete<Response<Object>>(url, {headers});
 }
 
 export default {
-  login,
-  checkLogin,
-  fetchHistory,
+    login,
+    checkLogin,
+    fetchHistory,
+    delHistory,
+    delAllHistory,
+
+    fetchBrowsing,
+    delBrowsingById,
+    delAllBrowsing
 }

+ 85 - 40
src/views/history/DocumentHistoryView.vue

@@ -1,48 +1,93 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import HistoryList from "./components/HistoryList.vue";
-import HistoryToolbar from "./components/HistoryToolbar.vue";
-
-const data = [
-  {
-    id: 1,
-    expression: 'TP=(建筑)',
-    createdTime: '2022-12-28 11:20:47'
-  }
-];
-
-const currentPage = ref(1);
-
-function handleDelete(id: number) {
-  console.log("delete", id);
-}
+    import {onMounted, Ref, ref} from "vue";
+    import HistoryList from "./components/HistoryList.vue";
+    import HistoryToolbar from "./components/HistoryToolbar.vue";
+    import {SearchHistoryRecord} from "@/types/user.types";
+    import * as userService from "@/services/user.service";
+    import {delAllBrowsing, delAllHistory, delBrowsingById, fetchBrowsing} from "@/services/user.service";
+    import {useAuthStore} from "@/stores/auth.store";
+
+    const authStore = useAuthStore();
+
+    const records: Ref<SearchHistoryRecord[]> = ref([]);
+
+    const currentPage = ref(1);
+
+    const page = ref(1);
+
+    const total = ref(0);
+
+    const filterValue = ref("3");
+
+    function handleDelete(id: number) {
+        const currentUser = JSON.stringify(authStore.currentUser)
+        userService.delBrowsingById(currentUser, id).then((res) => {
+            fetchBrowsing()
+        })
+    }
+
+    function onfilterChange(value) {
+        filterValue.value = value
+        fetchBrowsing()
+    }
+
+    function ondeleteAll() {
+        delAllHistory
+        const currentUser = JSON.stringify(authStore.currentUser)
+        userService.delAllBrowsing(currentUser).then((res) => {
+            fetchBrowsing()
+        })
+    }
+
+    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;
+        })
+    }
+
+    function onNext() {
+        page.value = currentPage.value + 1;
+        fetchBrowsing();
+    }
+
+    function onPrev() {
+        page.value = currentPage.value - 1;
+        fetchBrowsing();
+    }
+
+    onMounted(() => {
+        fetchBrowsing();
+    });
 </script>
 
 <template>
-  <HistoryToolbar />
-  <HistoryList :data="data" @delete="handleDelete" class="history-list-wrap" />
-  <div class="pagination">
-    <a-pagination v-model:current="currentPage" simple :total="50">
-      <template #itemRender="{ type, originalElement }">
-        <a-button v-if="type === 'prev'" size="small"> 上一页</a-button>
-        <a-button v-else-if="type === 'next'" size="small">下一页</a-button>
-        <component :is="originalElement" v-else></component>
-      </template>
-    </a-pagination>
-  </div>
+    <HistoryToolbar @filterChange="onfilterChange" @deleteAll="ondeleteAll"/>
+    <HistoryList :data="records" @delete="handleDelete" class="history-list-wrap"/>
+    <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>
+    </div>
 </template>
 
 <style scoped lang="scss">
-.history-list-wrap {
-  margin-top: 16px;
-}
-
-.pagination {
-  margin-top: 16px;
-  text-align: right;
-
-  .ant-pagination {
-    height: 28px;
-  }
-}
+    .history-list-wrap {
+        margin-top: 16px;
+    }
+
+    .pagination {
+        margin-top: 16px;
+        text-align: right;
+
+        .ant-pagination {
+            height: 28px;
+        }
+    }
 </style>

+ 79 - 44
src/views/history/SearchHistoryView.vue

@@ -1,58 +1,93 @@
 <script setup lang="ts">
-import { useAuthStore } from "@/stores/auth.store";
-import { ref, onMounted, type Ref } from "vue";
-import HistoryList from "./components/HistoryList.vue";
-import HistoryToolbar from "./components/HistoryToolbar.vue";
-import * as userService from "@/services/user.service"
-import type { SearchHistoryRecord } from "@/types/user.types"
+    import {useAuthStore} from "@/stores/auth.store";
+    import {ref, onMounted, type Ref} from "vue";
+    import HistoryList from "./components/HistoryList.vue";
+    import HistoryToolbar from "./components/HistoryToolbar.vue";
+    import * as userService from "@/services/user.service"
+    import type {SearchHistoryRecord} from "@/types/user.types"
+    import {delAllHistory} from "@/services/user.service";
 
-const authStore = useAuthStore();
+    const authStore = useAuthStore();
 
-const records: Ref<SearchHistoryRecord[]> = ref([]);
+    const records: Ref<SearchHistoryRecord[]> = ref([]);
 
-const currentPage = ref(1);
+    const currentPage = ref(1);
 
-const total = ref(0);
+    const page = ref(1);
 
-function handleDelete(id: number) {
-  console.log("delete", id);
-}
+    const total = ref(0);
 
-onMounted(() => {
-  const currentUser = JSON.stringify(authStore.currentUser)
-  userService.fetchHistory(currentUser, 1, 10).then((resp) => {
-    const respData = resp.data.data;
-    records.value = respData.records;
-    total.value = respData.total;
-  })
-});
+    const filterValue = ref("3");
+
+    function handleDelete(id: number) {
+        const currentUser = JSON.stringify(authStore.currentUser)
+        userService.delHistory(currentUser, id).then((res) => {
+            fetchHistory()
+        })
+    }
+
+    function onfilterChange(value) {
+        filterValue.value = value
+        fetchHistory()
+    }
+
+    function ondeleteAll() {
+        delAllHistory
+        const currentUser = JSON.stringify(authStore.currentUser)
+        userService.delAllHistory(currentUser).then((res) => {
+            fetchHistory()
+        })
+    }
+
+    function fetchHistory() {
+        const currentUser = JSON.stringify(authStore.currentUser)
+        userService.fetchHistory(currentUser, currentPage.value, 10, Number(filterValue.value)).then((resp) => {
+            const respData = resp.data.data;
+            records.value = respData.records;
+            total.value = respData.total;
+        })
+    }
+
+    function onNext() {
+        page.value = currentPage.value + 1;
+        fetchHistory();
+    }
+
+    function onPrev() {
+        page.value = currentPage.value - 1;
+        fetchHistory();
+    }
+
+    onMounted(() => {
+        fetchHistory();
+    });
 </script>
 
 <template>
-  <HistoryToolbar />
-  <HistoryList :data="records" @delete="handleDelete" class="history-list-wrap" />
-  <div class="pagination">
-    <a-pagination v-model:current="currentPage" simple :total="total">
-      <template #itemRender="{ type, originalElement }">
-        <a-button v-if="type === 'prev'" size="small"> 上一页</a-button>
-        <a-button v-else-if="type === 'next'" size="small">下一页</a-button>
-        <component :is="originalElement" v-else></component>
-      </template>
-    </a-pagination>
-  </div>
+    <HistoryToolbar @filterChange="onfilterChange" @deleteAll="ondeleteAll"/>
+    <HistoryList :data="records" @delete="handleDelete" class="history-list-wrap"/>
+    <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>
+    </div>
 </template>
 
 <style scoped lang="scss">
-.history-list-wrap {
-  margin-top: 16px;
-}
-
-.pagination {
-  margin-top: 16px;
-  text-align: right;
-
-  .ant-pagination {
-    height: 28px;
-  }
-}
+    .history-list-wrap {
+        margin-top: 16px;
+    }
+
+    .pagination {
+        margin-top: 16px;
+        text-align: right;
+
+        .ant-pagination {
+            height: 28px;
+        }
+    }
 </style>

+ 13 - 2
src/views/history/components/HistoryItem.vue

@@ -34,12 +34,23 @@ function handleDelete() {
     <a-row type="flex" justify="space-between" :gutter="8">
       <a-col flex="1" class="item-content">
         <span class="item-time">{{ data.createdTime }}</span>
-        <span class="item-expression">
+        <span class="item-expression" v-if="data.expression">
           <span>检索:</span>
           <a href="javascript:void(0)" @click="routeToSearchResult(data.expression)" type="link">
             {{ data.expression }}
           </a>
         </span>
+
+        <span class="item-expression" v-if="data.title">
+          <span>标题:</span>
+           <RouterLink :to="'/detail/' + data.docId" target="_blank">
+            {{ data.title }}
+          </RouterLink>
+
+<!--          <a href="javascript:void(0)" @click="routeToSearchResult(data.id)" type="link">-->
+<!--            {{ data.title }}-->
+<!--          </a>-->
+        </span>
       </a-col>
       <a-col>
         <a-button type="text" @click="handleDelete">
@@ -71,4 +82,4 @@ function handleDelete() {
     }
   }
 }
-</style>
+</style>

+ 1 - 1
src/views/history/components/HistoryList.vue

@@ -25,7 +25,7 @@ function handleDelete(id: number) {
       v-for="(item, i) in data"
       :data="item"
       :key="i"
-      @delete="handleDelete"
+      @delete="handleDelete(item.id)"
       class="history-item-comp"
     />
   </div>