feat: 问题列表添加问题类型筛选功能
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m4s

- 功能添加:添加问题筛选功能
- 组件更改:将product-filter改为question-filter
- 文本添加:i18n文本添加
This commit is contained in:
2025-12-03 16:59:11 +08:00
parent 55a35b5498
commit a4dc28fc97
4 changed files with 155 additions and 10 deletions

View File

@ -0,0 +1,112 @@
<template>
<div class="question-category">
<el-row class="hide-on-mobile" :gutter="12">
<el-col :span="12" :xs="12">
<span class="select-label">{{
$t('product-filter.product-type')
}}</span>
<el-select
v-model="model.selectedProductType"
:placeholder="$t('product-filter.select-product-type')"
clearable
>
<el-option
v-for="type in productTypeOptions"
:key="type.id"
:label="type.name"
:value="type.id"
/>
</el-select>
</el-col>
<el-col :span="12" :xs="12">
<span class="select-label">{{
$t('product-filter.product-model')
}}</span>
<el-select
v-model="model.selectedProduct"
:placeholder="$t('product-filter.select-product-model')"
clearable
>
<el-option
v-for="product in productOptions"
:key="product.id"
:label="product.name"
:value="product.id"
/>
</el-select>
</el-col>
<el-col :span="12" :xs="24">
<span class="select-label">
{{ $t('product-filter.question-type') }}
</span>
<el-select
v-model="model.selectedQuestionType"
:placeholder="$t('product-filter.select-question-type')"
clearable
>
<el-option
v-for="questionType in questionTypeOptions"
:key="questionType.id"
:label="questionType.name"
:value="questionType.id"
/>
</el-select>
</el-col>
<el-col :span="12" :xs="24">
<span class="select-label">{{ $t('product-filter.keyword') }}</span>
<el-input
v-model="model.keyword"
:placeholder="$t('product-filter.enter-keyword')"
clearable
:prefix-icon="Search"
/>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
defineProps({
productTypeOptions: {
type: Array as () => Array<QuestionListProductType>,
default: () => [],
},
productOptions: {
type: Array as () => Array<QuestionListProduct>,
default: () => [],
},
questionTypeOptions: {
type: Array as () => Array<QuestionTypeView>,
default: () => [],
},
});
const model = defineModel<{
selectedProduct: string | null;
selectedProductType: string | null;
selectedQuestionType: string | null;
keyword: string;
}>();
</script>
<style scoped>
.question-category {
margin-bottom: 1rem;
}
.select-label {
color: var(--el-text-color-secondary);
font-size: 0.9rem;
}
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
height: 40px;
font-size: 0.9rem;
}
</style>