56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<el-tabs v-model="activeTab">
|
|
<el-tab-pane
|
|
v-for="tab in tabs"
|
|
:key="tab.name"
|
|
:label="`${tab.label}(${resultCount[tab.name] || 0})`"
|
|
:name="tab.name"
|
|
>
|
|
<SearchResults
|
|
v-model:current-page="currentPage"
|
|
:search-items="searchItems"
|
|
:category="tab.name === 'all' ? undefined : tab.name"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
// resultCount: Record<string, number>;
|
|
searchItems: SearchItemView[];
|
|
}>();
|
|
|
|
const tabs = [
|
|
{ name: 'all', label: $t('all') },
|
|
{ name: 'product', label: $t('search.sections.product') },
|
|
{ name: 'solution', label: $t('search.sections.solution') },
|
|
{ name: 'question', label: $t('search.sections.faq') },
|
|
{ name: 'document', label: $t('search.sections.document') },
|
|
];
|
|
|
|
const resultCount = computed(() => {
|
|
const map: Record<string, number> = { all: props.searchItems.length };
|
|
for (const item of props.searchItems) {
|
|
map[item.sectionType] = (map[item.sectionType] ?? 0) + 1;
|
|
}
|
|
return map;
|
|
});
|
|
|
|
// 分类控制
|
|
const activeTab = ref('all');
|
|
|
|
// 分页控制
|
|
const currentPage = ref(1);
|
|
|
|
watch(activeTab, () => {
|
|
currentPage.value = 1; // 重置页码
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-tabs {
|
|
width: 100%;
|
|
}
|
|
</style>
|