[update] 一般检索,加载状态更改为全页面范围

This commit is contained in:
lideqin
2023-11-23 14:10:42 +08:00
parent 951aa228ac
commit 33977f873c
+32 -29
View File
@@ -1,5 +1,5 @@
<template>
<div>
<a-spin :spinning="loading || selectOptionLoading">
<a-card :bordered="false">
<!-- 搜索框部分 -->
<div class="top-search-div">
@@ -55,36 +55,35 @@
{{ toggleSearchStatus ? $t('putAway') : $t('open') }}
</div>
</div>
<!-- 结果展示 -->
<template v-if="dataSource && dataSource.length > 0">
<!-- 查询结果展示区域 -->
<div class="result-wrapper">
<a-spin :spinning="loading">
<div class="result-div" v-for="item in dataSource" :key="item.id">
<div class="result-title-wrapper">
<!-- 正在搜索标题根据搜索内容高亮显示 -->
<a-tooltip>
<template #title>
<span v-html="item.title"></span>
</template>
<p class="result-title" v-html="item.title"></p>
</a-tooltip>
<div class="result-source-wrapper">
<p class="result-source">{{ resourceTypeOptions.find(i => i.key === item.resourceType).label }}</p>
</div>
<p class="result-date">{{ $t('dashboard.generalSearch.releaseDate') }} {{ item.releaseDate || global.emptyLine }}</p>
<div class="result-div" v-for="item in dataSource" :key="item.id">
<div class="result-title-wrapper">
<!-- 正在搜索标题根据搜索内容高亮显示 -->
<a-tooltip>
<template #title>
<span v-html="item.title"></span>
</template>
<p class="result-title" v-html="item.title"></p>
</a-tooltip>
<div class="result-source-wrapper">
<p class="result-source">{{ resourceTypeOptions.find(i => i.key === item.resourceType).label }}</p>
</div>
<template v-if="retrievalModeCurrent === '1'">
<!-- 全文检索 -->
<div v-html="item.content" class="result-content-wrapper"></div>
</template>
<template v-else>
<div v-if="item.resourceType !== '4'" class="result-content-wrapper">
{{ item.content }}
</div>
<div v-else v-html="item.content" class="result-content-wrapper"></div>
</template>
<p class="result-date">{{ $t('dashboard.generalSearch.releaseDate') }} {{ item.releaseDate || global.emptyLine }}</p>
</div>
</a-spin>
<template v-if="retrievalModeCurrent === '1'">
<!-- 全文检索 -->
<div v-html="item.content" class="result-content-wrapper"></div>
</template>
<template v-else>
<div v-if="item.resourceType !== '4'" class="result-content-wrapper">
{{ item.content }}
</div>
<div v-else v-html="item.content" class="result-content-wrapper"></div>
</template>
</div>
</div>
<a-pagination
v-if="dataSource && dataSource.length > 0"
@@ -101,10 +100,10 @@
/>
</template>
<a-empty class="empty-content" v-else />
</a-card>
<search-history-modal ref="searchHistoryModal"></search-history-modal>
</div>
<search-history-modal ref="searchHistoryModal"></search-history-modal>
</a-card>
</a-spin>
</template>
<script>
@@ -121,6 +120,7 @@ export default {
components: { SearchHistoryModal },
data () {
return {
selectOptionLoading: false, // 其他筛选条件部分的loading
loading: false,
searchValue: '', // 搜索框内容
toggleSearchStatus: false, // 检索条件收缩还是展开, false收缩状态
@@ -206,6 +206,7 @@ export default {
} else {
func = getSearchParamNum
}
this.selectOptionLoading = true
func(param).then(res => {
if (res.success) {
// 设置对象key为搜索时需要传给后端的字段名,以及设置选项和字段label
@@ -255,6 +256,8 @@ export default {
this.$message.warning(res.message)
this.selectOptions = {}
}
}).finally(() => {
this.selectOptionLoading = false
})
},
// 查询时获取参数