feat(survey): 优化搜索功能并添加取消搜索功能
- 在 nav-search 组件中添加取消搜索事件处理 - 优化搜索结果为空时的展示逻辑 - 实现取消搜索后重新获取全部问卷数据的功能
This commit is contained in:
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="survey-search">
|
<div class="survey-search">
|
||||||
<nav-search v-model:value="searchValue" @search="handleSearchClick" />
|
<nav-search
|
||||||
|
v-model:value="searchValue"
|
||||||
|
@search="handleSearchClick"
|
||||||
|
@cancel="handleCancelClick"
|
||||||
|
/>
|
||||||
<!-- <nav-search
|
<!-- <nav-search
|
||||||
placeholder="请输入关键词"
|
placeholder="请输入关键词"
|
||||||
v-model:value="searchValue"
|
v-model:value="searchValue"
|
||||||
@@ -17,9 +21,11 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
|
<template v-if="survey.length > 0">
|
||||||
<survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
|
<div v-for="item in survey" :key="item" class="new-survey_item">
|
||||||
</div>
|
<survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<!-- 如果问卷等于0的话,显示空容器 -->
|
<!-- 如果问卷等于0的话,显示空容器 -->
|
||||||
<empty-container
|
<empty-container
|
||||||
v-if="survey.length === 0 && !searchValue"
|
v-if="survey.length === 0 && !searchValue"
|
||||||
@@ -34,7 +40,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
|
||||||
import NavSearch from '@/components/Search/Index.vue';
|
import NavSearch from '@/components/Search/Index.vue';
|
||||||
import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
|
import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
|
||||||
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
|
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
|
||||||
@@ -63,6 +69,13 @@ watch(searchValue, () => {
|
|||||||
finished.value = true;
|
finished.value = true;
|
||||||
// 重置搜索form 数据
|
// 重置搜索form 数据
|
||||||
form.page = 1;
|
form.page = 1;
|
||||||
|
|
||||||
|
// 如果搜索框内容为空,清空 survey 数据,重新请求
|
||||||
|
if (!searchValue.value.length) {
|
||||||
|
clearSurveys();
|
||||||
|
form.key_word = '';
|
||||||
|
fetchSurveys(form);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleSearchClick = () => {
|
const handleSearchClick = () => {
|
||||||
@@ -77,6 +90,11 @@ const handleSearchClick = () => {
|
|||||||
fetchSurveys(form);
|
fetchSurveys(form);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function handleCancelClick() {
|
||||||
|
searchValue.value = '';
|
||||||
|
fetchSurveys(form);
|
||||||
|
}
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 当组件卸载的时候,清空 survey 数据
|
// 当组件卸载的时候,清空 survey 数据
|
||||||
clearSurveys();
|
clearSurveys();
|
||||||
|
|||||||
Reference in New Issue
Block a user