feat: 问题列表添加问题类型筛选功能
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m4s
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m4s
- 功能添加:添加问题筛选功能 - 组件更改:将product-filter改为question-filter - 文本添加:i18n文本添加
This commit is contained in:
112
app/components/pages/support/QuestionFilter.vue
Normal file
112
app/components/pages/support/QuestionFilter.vue
Normal 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>
|
||||
Reference in New Issue
Block a user