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