refactor(消息列表): 优化搜索和过滤逻辑,移除前端过滤改为后端处理
- 添加搜索框清除事件处理 - 统一所有请求参数构建逻辑 - 移除前端过滤,完全依赖后端筛选 - 保持搜索条件不变时切换标签页
Showing
1 changed file
with
16 additions
and
32 deletions
| ... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
| 8 | </nut-col> --> | 8 | </nut-col> --> |
| 9 | <nut-col span="24"> | 9 | <nut-col span="24"> |
| 10 | <!-- Search Bar --> | 10 | <!-- Search Bar --> |
| 11 | - <nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" shape="round" | 11 | + <nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" @clear="onBlurSearch" shape="round" |
| 12 | background="transparent" input-background="#ffffff"> | 12 | background="transparent" input-background="#ffffff"> |
| 13 | <template #leftin> | 13 | <template #leftin> |
| 14 | <Search2 /> | 14 | <Search2 /> |
| ... | @@ -159,6 +159,7 @@ const mockMessages = ref([]) | ... | @@ -159,6 +159,7 @@ const mockMessages = ref([]) |
| 159 | const pollMessages = async () => { | 159 | const pollMessages = async () => { |
| 160 | try { | 160 | try { |
| 161 | // 静默获取数据,不显示loading状态 | 161 | // 静默获取数据,不显示loading状态 |
| 162 | + // 构建查询参数,同时包含状态筛选和关键字搜索 | ||
| 162 | const params = { | 163 | const params = { |
| 163 | page: 0, | 164 | page: 0, |
| 164 | limit: pageSize | 165 | limit: pageSize |
| ... | @@ -171,9 +172,9 @@ const pollMessages = async () => { | ... | @@ -171,9 +172,9 @@ const pollMessages = async () => { |
| 171 | params.type = 'system' // 系统消息 | 172 | params.type = 'system' // 系统消息 |
| 172 | } | 173 | } |
| 173 | 174 | ||
| 174 | - // 如果有搜索关键词 | 175 | + // 同时添加搜索关键词(如果存在) |
| 175 | - if (searchValue.value) { | 176 | + if (searchValue.value && searchValue.value.trim()) { |
| 176 | - params.keyword = searchValue.value | 177 | + params.keyword = searchValue.value.trim() |
| 177 | } | 178 | } |
| 178 | 179 | ||
| 179 | const response = await getMessagesListAPI(params) | 180 | const response = await getMessagesListAPI(params) |
| ... | @@ -231,7 +232,7 @@ const initData = async () => { | ... | @@ -231,7 +232,7 @@ const initData = async () => { |
| 231 | try { | 232 | try { |
| 232 | loading.value = true | 233 | loading.value = true |
| 233 | 234 | ||
| 234 | - // 根据当前tab获取对应的消息类型和状态 | 235 | + // 构建查询参数,同时包含状态筛选和关键字搜索 |
| 235 | const params = { | 236 | const params = { |
| 236 | page: 0, | 237 | page: 0, |
| 237 | limit: pageSize | 238 | limit: pageSize |
| ... | @@ -244,9 +245,9 @@ const initData = async () => { | ... | @@ -244,9 +245,9 @@ const initData = async () => { |
| 244 | params.type = 'system' // 系统消息 | 245 | params.type = 'system' // 系统消息 |
| 245 | } | 246 | } |
| 246 | 247 | ||
| 247 | - // 如果有搜索关键词 | 248 | + // 同时添加搜索关键词(如果存在) |
| 248 | - if (searchValue.value) { | 249 | + if (searchValue.value && searchValue.value.trim()) { |
| 249 | - params.keyword = searchValue.value | 250 | + params.keyword = searchValue.value.trim() |
| 250 | } | 251 | } |
| 251 | 252 | ||
| 252 | const response = await getMessagesListAPI(params) | 253 | const response = await getMessagesListAPI(params) |
| ... | @@ -287,25 +288,9 @@ const initData = async () => { | ... | @@ -287,25 +288,9 @@ const initData = async () => { |
| 287 | } | 288 | } |
| 288 | 289 | ||
| 289 | // 过滤后的对话列表 | 290 | // 过滤后的对话列表 |
| 291 | +// 由于API已经根据状态和关键字进行了后端筛选,这里直接返回conversations | ||
| 290 | const filteredConversations = computed(() => { | 292 | const filteredConversations = computed(() => { |
| 291 | - let filtered = conversations.value | 293 | + return conversations.value |
| 292 | - | ||
| 293 | - // 根据Tab过滤 | ||
| 294 | - if (activeTab.value === 'unread') { | ||
| 295 | - filtered = filtered.filter(conv => conv.unread) | ||
| 296 | - } else if (activeTab.value === 'system') { | ||
| 297 | - filtered = filtered.filter(conv => conv.type === 'system') | ||
| 298 | - } | ||
| 299 | - | ||
| 300 | - // 根据搜索关键词过滤 | ||
| 301 | - if (searchValue.value) { | ||
| 302 | - filtered = filtered.filter(conv => | ||
| 303 | - conv.name.includes(searchValue.value) || | ||
| 304 | - conv.lastMessage.includes(searchValue.value) | ||
| 305 | - ) | ||
| 306 | - } | ||
| 307 | - | ||
| 308 | - return filtered | ||
| 309 | }) | 294 | }) |
| 310 | 295 | ||
| 311 | // Tab点击事件 | 296 | // Tab点击事件 |
| ... | @@ -321,8 +306,7 @@ const setActiveTab = async (tabKey) => { | ... | @@ -321,8 +306,7 @@ const setActiveTab = async (tabKey) => { |
| 321 | 306 | ||
| 322 | setTimeout(async () => { | 307 | setTimeout(async () => { |
| 323 | activeTab.value = tabKey; | 308 | activeTab.value = tabKey; |
| 324 | - // 重置搜索条件 | 309 | + // 保持搜索关键字,不重置搜索条件 |
| 325 | - searchValue.value = ''; | ||
| 326 | // 重置分页状态 | 310 | // 重置分页状态 |
| 327 | page.value = 1; | 311 | page.value = 1; |
| 328 | hasMore.value = true; | 312 | hasMore.value = true; |
| ... | @@ -357,7 +341,7 @@ const loadMore = async () => { | ... | @@ -357,7 +341,7 @@ const loadMore = async () => { |
| 357 | try { | 341 | try { |
| 358 | loading.value = true | 342 | loading.value = true |
| 359 | 343 | ||
| 360 | - // 构建请求参数 | 344 | + // 构建请求参数,同时包含状态筛选和关键字搜索 |
| 361 | const params = { | 345 | const params = { |
| 362 | page: page.value, | 346 | page: page.value, |
| 363 | limit: pageSize | 347 | limit: pageSize |
| ... | @@ -370,9 +354,9 @@ const loadMore = async () => { | ... | @@ -370,9 +354,9 @@ const loadMore = async () => { |
| 370 | params.type = 'system' // 系统消息 | 354 | params.type = 'system' // 系统消息 |
| 371 | } | 355 | } |
| 372 | 356 | ||
| 373 | - // 如果有搜索关键词 | 357 | + // 同时添加搜索关键词(如果存在) |
| 374 | - if (searchValue.value) { | 358 | + if (searchValue.value && searchValue.value.trim()) { |
| 375 | - params.keyword = searchValue.value | 359 | + params.keyword = searchValue.value.trim() |
| 376 | } | 360 | } |
| 377 | 361 | ||
| 378 | const response = await getMessagesListAPI(params) | 362 | const response = await getMessagesListAPI(params) | ... | ... |
-
Please register or login to post a comment