SearchResultView.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <script setup lang="ts">
  2. import { onUnmounted, ref, computed, type Ref, onMounted, reactive, h, watch } from "vue";
  3. import { useRoute } from "vue-router";
  4. import { LoadingOutlined } from '@ant-design/icons-vue';
  5. import { useSideBarStore } from "@/stores/side-bar";
  6. import SearchBox from "./components/SearchBox.vue";
  7. import SearchResultToolbar from "./components/SearchResultToolbar.vue";
  8. import SearchResultList from "./components/SearchResultList.vue";
  9. import type { SearchRequest } from "@/types/request.types";
  10. import { useSearchStore } from "@/stores/search.store";
  11. import { routeToSearch } from "@/router";
  12. import AdvancedSearchBox from "./components/AdvancedSearchBox.vue";
  13. import type { SearchRouteParam } from "@/types/route.type";
  14. import type { ResultMode, Sort } from "@/types/search.types";
  15. import FilterCard from "./components/FilterCard.vue";
  16. import { CompLog } from "@/libs/log.lib";
  17. const logError = CompLog.logErr("SearchResultView")
  18. const sideBarStore = useSideBarStore();
  19. const searchStore = useSearchStore();
  20. // 当前路由对象
  21. const route = useRoute();
  22. // 关键词
  23. const keyword = ref("");
  24. // 字段
  25. const field = ref("TP");
  26. // 排序
  27. const sort: Ref<Sort> = ref("Relevance");
  28. const placeholder = ref("请输入文献主题")
  29. const pagination = reactive({
  30. page: 1,
  31. size: 10,
  32. })
  33. const authorChecked: Ref<string[]> = ref([]);
  34. const yearChecked: Ref<string[]> = ref([]);
  35. const unitChecked = ref<string[]>();
  36. const searchResult = computed(() => searchStore.result);
  37. const yearAggResult = computed(() => searchStore.yearAggResult);
  38. const authorAggResult = computed(() => searchStore.authorAggResult);
  39. const unitAggResult = computed(() => searchStore.unitAggResult);
  40. const searchType: Ref<'simple' | 'advanced'> = ref('simple');
  41. const resultMode: Ref<ResultMode> = ref('detail');
  42. const query = ref('');
  43. // 加载状态
  44. const spinning = ref(true);
  45. interface SearchParams {
  46. query: string;
  47. yearSelected?: string[];
  48. authorSelected?: string[];
  49. unitSelected?: string[];
  50. sort?: Sort;
  51. page?: number;
  52. size?: number;
  53. }
  54. /**
  55. * 根据搜索状态数据执行搜索
  56. * @param searchParams 搜索状态数据
  57. */
  58. function performSearch(searchParams: SearchParams) {
  59. spinning.value = true;
  60. let sortParam: Object = { "Relevance": "Relevance" };
  61. if (searchParams.sort) {
  62. const sort = searchParams.sort;
  63. if (sort === 'DateDesc') {
  64. sortParam = { "year": "DESC" }
  65. } else if (sort === 'DateAsc') {
  66. sortParam = { "year": "ASC" }
  67. } else if (sort === 'CitedDesc') {
  68. sortParam = { "cited": "DESC" }
  69. }
  70. }
  71. let filters: string[] = []
  72. if (searchParams.yearSelected && searchParams.yearSelected.length > 0) {
  73. filters.push(`PY=(${searchParams.yearSelected.join(" ")})`);
  74. }
  75. if (searchParams.authorSelected && searchParams.authorSelected.length > 0) {
  76. filters.push(`AU=(${searchParams.authorSelected.join(" OR ")})`);
  77. }
  78. if (searchParams.unitSelected && searchParams.unitSelected.length > 0) {
  79. filters.push(`UN=(${searchParams.unitSelected.join(" OR ")})`)
  80. }
  81. const filter = filters.join(" AND ");
  82. // size
  83. const size = Math.max(searchParams.size || 10, 10);
  84. // from
  85. const from = (Math.max(searchParams.page || 1, 1) - 1) * size;
  86. const commonParams = {
  87. query: searchParams.query,
  88. filter,
  89. }
  90. const param: SearchRequest = {
  91. ...commonParams,
  92. from,
  93. size,
  94. sort: sortParam,
  95. isSaveHis: true,
  96. };
  97. searchStore.search(param)
  98. .then(() => spinning.value = false)
  99. .catch((err) => {
  100. spinning.value = false
  101. logError(err)
  102. });
  103. searchStore.aggYear(commonParams);
  104. searchStore.aggAuthor(commonParams);
  105. searchStore.aggUnit(commonParams);
  106. }
  107. /**
  108. * 执行搜索,同时修改url
  109. */
  110. function doSearch() {
  111. let params: SearchRouteParam = {
  112. type: searchType.value,
  113. }
  114. if (searchType.value == 'simple') {
  115. params['field'] = field.value;
  116. params['kw'] = keyword.value;
  117. } else {
  118. params['query'] = query.value;
  119. }
  120. const extras = {
  121. page: pagination.page,
  122. size: pagination.size,
  123. yearSelected: yearChecked.value,
  124. authorSelected: authorChecked.value,
  125. unitSelected: unitChecked.value,
  126. sort: sort.value,
  127. }
  128. routeToSearch(params, extras);
  129. const searchParams: SearchParams = {
  130. query: query.value,
  131. yearSelected: yearChecked.value,
  132. authorSelected: authorChecked.value,
  133. unitSelected: unitChecked.value,
  134. page: pagination.page,
  135. size: pagination.size,
  136. sort: sort.value,
  137. };
  138. performSearch(searchParams);
  139. }
  140. function onSimpleSearch() {
  141. routeToSearch({type: 'simple', field: field.value, kw: keyword.value});
  142. doSearch();
  143. }
  144. function onAdvancedSearch() {
  145. routeToSearch({ type: 'advanced', query: query.value })
  146. doSearch();
  147. }
  148. /**
  149. * 根据url包含的信息,初始化状态信息
  150. */
  151. function setupState() {
  152. const queryParam = route.query;
  153. if (queryParam.type == 'advanced') {
  154. searchType.value = 'advanced';
  155. query.value = queryParam.query as string;
  156. } else {
  157. searchType.value = 'simple';
  158. // 初始化关键词
  159. if (route.query.kw) {
  160. keyword.value = (route.query.kw as string).trim();
  161. }
  162. if (route.query.field) {
  163. field.value = (route.query.field as string).trim();
  164. }
  165. query.value = `${field.value}=(${keyword.value})`
  166. }
  167. if (queryParam.yearSelected) {
  168. let yearSelected: string[];
  169. if (Array.isArray(queryParam.yearSelected)) {
  170. yearSelected = queryParam.yearSelected as string[];
  171. } else {
  172. yearSelected = [queryParam.yearSelected];
  173. }
  174. yearChecked.value = yearSelected;
  175. }
  176. if (queryParam.authorSelected) {
  177. let authorSelected: string[];
  178. if (Array.isArray(queryParam.authorSelected)) {
  179. authorSelected = queryParam.authorSelected as string[];
  180. } else {
  181. authorSelected = [queryParam.authorSelected];
  182. }
  183. authorChecked.value = authorSelected;
  184. }
  185. if (queryParam.sort) {
  186. sort.value = queryParam.sort as Sort;
  187. }
  188. if (queryParam.page) {
  189. pagination.page = parseInt(queryParam.page as string);
  190. }
  191. if (queryParam.size) {
  192. pagination.size = parseInt(queryParam.size as string);
  193. }
  194. }
  195. onMounted(() => {
  196. // 收起左侧边栏
  197. sideBarStore.setCollapse(true);
  198. // 初始化状态
  199. setupState();
  200. // 搜索
  201. doSearch();
  202. });
  203. function changeField(value: string) {
  204. field.value = value;
  205. query.value = `${field.value}=(${keyword.value})`;
  206. }
  207. function changKeyword(value: string) {
  208. keyword.value = value;
  209. query.value = `${field.value}=(${keyword.value})`;
  210. }
  211. function changeSort(val: any) {
  212. sort.value = val;
  213. doSearch();
  214. }
  215. function onPaginationChange(page: any, pageSize: any) {
  216. pagination.page = page;
  217. pagination.size = pageSize;
  218. doSearch();
  219. }
  220. function onModeChange(mode: ResultMode) {
  221. resultMode.value = mode;
  222. }
  223. function onYearFilterChange(selected: string[]) {
  224. pagination.page = 1;
  225. yearChecked.value = selected
  226. doSearch();
  227. }
  228. function onAuthorFilterChange(selected: string[]) {
  229. pagination.page = 1;
  230. authorChecked.value = selected
  231. doSearch();
  232. }
  233. function onUnitFilterChange(selected: string[]) {
  234. pagination.page = 1;
  235. unitChecked.value = selected
  236. doSearch()
  237. }
  238. watch(field, (newValue) => {
  239. if (newValue == 'TI') {
  240. placeholder.value = "请输入文献标题"
  241. } else if (newValue == 'AU') {
  242. placeholder.value = "请输入文献作者"
  243. } else if (newValue == 'KW') {
  244. placeholder.value = "请输入文献关键词"
  245. } else if (newValue == 'AB') {
  246. placeholder.value = "请输入文献摘要"
  247. } else if (newValue == 'UN') {
  248. placeholder.value = "请输入文献机构"
  249. } else {
  250. placeholder.value = "请输入文献主题"
  251. }
  252. });
  253. onUnmounted(() => {
  254. sideBarStore.setCollapse(false);
  255. });
  256. </script>
  257. <template>
  258. <div class="search-result-wrap">
  259. <div class="search-box-wrap" v-if="searchType == 'simple'">
  260. <SearchBox
  261. v-model:keyword="keyword"
  262. v-model:field="field"
  263. :placeholder="placeholder"
  264. @search="onSimpleSearch"
  265. @update:field="changeField"
  266. @update:keyword="changKeyword"
  267. />
  268. </div>
  269. <div class="search-box-wrap" v-if="searchType == 'advanced'">
  270. <AdvancedSearchBox v-model:query="query" @search="onAdvancedSearch" />
  271. </div>
  272. <a-row type="flex" class="search-result-main" :gutter="10">
  273. <a-col :span="5">
  274. <div class="left-filter-header">
  275. 筛选
  276. </div>
  277. <a-space direction="vertical" style="width: 100%" v-if="searchResult">
  278. <FilterCard
  279. v-if="yearAggResult"
  280. title="时间"
  281. :aggs="yearAggResult"
  282. :checked="yearChecked"
  283. @change="onYearFilterChange"
  284. />
  285. <FilterCard
  286. v-if="authorAggResult"
  287. title="作者"
  288. :aggs="authorAggResult"
  289. :checked="authorChecked"
  290. @change="onAuthorFilterChange"
  291. />
  292. <FilterCard
  293. v-if="unitAggResult"
  294. title="机构"
  295. :aggs="unitAggResult"
  296. :checked="unitChecked"
  297. @change="onUnitFilterChange"
  298. />
  299. </a-space>
  300. </a-col>
  301. <a-col :span="19">
  302. <a-spin :spinning="spinning" :indicator="h(LoadingOutlined, { style: { fontSize: '24px', }, spin: true, })">
  303. <SearchResultToolbar
  304. v-if="searchResult"
  305. :data="searchResult"
  306. v-model:sort="sort"
  307. v-model:pagination="pagination"
  308. @update:sort="changeSort"
  309. @paginationChange="onPaginationChange"
  310. @modeChange="onModeChange"
  311. />
  312. <SearchResultList :data="searchResult" :mode="resultMode" v-if="searchResult" />
  313. </a-spin>
  314. </a-col>
  315. </a-row>
  316. </div>
  317. </template>
  318. <style scoped lang="scss">
  319. .search-result-wrap {
  320. margin-top: 20px;
  321. .search-box-wrap {
  322. padding: 0 120px;
  323. }
  324. .search-result-main {
  325. margin-top: 20px;
  326. :deep em {
  327. color: red;
  328. font-style: normal;
  329. }
  330. }
  331. @media (max-width: 1024px) {
  332. .search-box-wrap {
  333. padding: 0 20px;
  334. }
  335. }
  336. }
  337. </style>