|
|
@@ -1,7 +1,7 @@
|
|
|
<!-- 参考文献抽屉组件 -->
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, type Ref } from "vue";
|
|
|
+import { ref, reactive, type Ref } from "vue";
|
|
|
import ReferenceSearchBox from "./ReferenceSearchBox.vue";
|
|
|
import ReferenceSearchResultItem from "./ReferenceSearchResultItem.vue";
|
|
|
import type { ChapterSearchDocResponse, ChapterSearchRequest } from "@/types/search.types"
|
|
|
@@ -16,6 +16,9 @@ const props = defineProps({
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+// 主体元素ref
|
|
|
+const drawerContentElem = ref<HTMLInputElement | null>(null)
|
|
|
+// 组件可见状态
|
|
|
const visible = ref<boolean>(false);
|
|
|
// 章节搜索结果总数量
|
|
|
const total = ref(0)
|
|
|
@@ -23,12 +26,18 @@ const total = ref(0)
|
|
|
const referenceSearchResult: Ref<ChapterSearchDocResponse[]> = ref([]);
|
|
|
// 章节搜索状态
|
|
|
const loading = ref(false)
|
|
|
+// 翻页
|
|
|
+const pagination = reactive({
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+})
|
|
|
|
|
|
-function search(keywords: string[]) {
|
|
|
+function search(keywords: string[], page?: number) {
|
|
|
loading.value = true
|
|
|
- const request: ChapterSearchRequest = { keywords }
|
|
|
+ const from = Math.max(1, page || 1) * pagination.size
|
|
|
+ const request: ChapterSearchRequest = { from, keywords }
|
|
|
+ referenceSearchResult.value = []
|
|
|
chapterSearchService.search(request).then((resp) => {
|
|
|
- console.log(resp)
|
|
|
loading.value = false
|
|
|
total.value = resp.total
|
|
|
referenceSearchResult.value = resp.items
|
|
|
@@ -38,6 +47,15 @@ function search(keywords: string[]) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function onPageChange(page: number) {
|
|
|
+ pagination.page = page
|
|
|
+ search(props.keywords as string[], page)
|
|
|
+ if (drawerContentElem.value) {
|
|
|
+ (drawerContentElem.value as HTMLElement).scrollTop = 0
|
|
|
+ console.log('(drawerContentElem.value as HTMLElement).scrollTop', (drawerContentElem.value as HTMLElement).scrollTop)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const onClose = () => {
|
|
|
visible.value = false;
|
|
|
};
|
|
|
@@ -45,7 +63,6 @@ const onClose = () => {
|
|
|
const show = () => {
|
|
|
visible.value = true;
|
|
|
const keywords = props.keywords
|
|
|
- console.log('keywords', keywords)
|
|
|
if (keywords && keywords.length > 0) {
|
|
|
search(keywords as string[])
|
|
|
}
|
|
|
@@ -66,14 +83,26 @@ defineExpose({
|
|
|
@close="onClose"
|
|
|
class="reference-drawer"
|
|
|
>
|
|
|
- <ReferenceSearchBox />
|
|
|
- <a-divider />
|
|
|
- <SpinComponent :spinning="loading">
|
|
|
- <div v-for="(item, index) in referenceSearchResult" :key="index">
|
|
|
- <ReferenceSearchResultItem :data="item" />
|
|
|
- <a-divider class="result-item-divider" v-if="index < referenceSearchResult.length - 1" />
|
|
|
- </div>
|
|
|
- </SpinComponent>
|
|
|
+ <div class="content-wrap" ref="drawerContentElem">
|
|
|
+ <ReferenceSearchBox />
|
|
|
+ <a-divider />
|
|
|
+ <SpinComponent :spinning="loading">
|
|
|
+ <div v-for="(item, index) in referenceSearchResult" :key="index">
|
|
|
+ <ReferenceSearchResultItem :data="item" />
|
|
|
+ <a-divider class="result-item-divider" v-if="index < referenceSearchResult.length - 1" />
|
|
|
+ </div>
|
|
|
+ <div class="pigination-wrap">
|
|
|
+ <a-pagination
|
|
|
+ :current="pagination.page"
|
|
|
+ :pageSize="pagination.size"
|
|
|
+ :total="total"
|
|
|
+ :show-size-changer="false"
|
|
|
+ size="small"
|
|
|
+ @change="onPageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </SpinComponent>
|
|
|
+ </div>
|
|
|
</a-drawer>
|
|
|
</template>
|
|
|
|
|
|
@@ -81,4 +110,9 @@ defineExpose({
|
|
|
.result-item-divider {
|
|
|
margin: 1.2em 0;
|
|
|
}
|
|
|
+
|
|
|
+.pigination-wrap {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 1em;
|
|
|
+}
|
|
|
</style>
|