refactor(PersonPickerField): 重构搜索逻辑并修复回车搜索处理
- 抽离核心搜索逻辑为可复用的 runSearch 函数 - 将回车触发事件从 keyup.enter 调整为 keydown.enter.prevent.stop,并新增专用处理函数 - 弹窗打开和清空搜索框时自动执行空关键词搜索
Showing
1 changed file
with
20 additions
and
8 deletions
| ... | @@ -44,7 +44,7 @@ | ... | @@ -44,7 +44,7 @@ |
| 44 | class="search-input-field" | 44 | class="search-input-field" |
| 45 | placeholder="请输入姓名、法名、手机号或证件号" | 45 | placeholder="请输入姓名、法名、手机号或证件号" |
| 46 | :border="false" | 46 | :border="false" |
| 47 | - @keyup.enter="onSearch" | 47 | + @keydown.enter.prevent.stop="onSearchEnter" |
| 48 | > | 48 | > |
| 49 | <template #button> | 49 | <template #button> |
| 50 | <div class="search-bar-actions"> | 50 | <div class="search-bar-actions"> |
| ... | @@ -275,6 +275,9 @@ const openPopup = async () => { | ... | @@ -275,6 +275,9 @@ const openPopup = async () => { |
| 275 | draftPersons.value = _.cloneDeep(confirmedPersons.value); | 275 | draftPersons.value = _.cloneDeep(confirmedPersons.value); |
| 276 | resetSearchState(); | 276 | resetSearchState(); |
| 277 | showPopup.value = true; | 277 | showPopup.value = true; |
| 278 | + await runSearch({ | ||
| 279 | + keyword: '', | ||
| 280 | + }); | ||
| 278 | }; | 281 | }; |
| 279 | 282 | ||
| 280 | const onCancelClick = () => { | 283 | const onCancelClick = () => { |
| ... | @@ -332,6 +335,9 @@ const onSearchResultChange = (checkedIds) => { | ... | @@ -332,6 +335,9 @@ const onSearchResultChange = (checkedIds) => { |
| 332 | 335 | ||
| 333 | const onClearSearch = () => { | 336 | const onClearSearch = () => { |
| 334 | resetSearchState(); | 337 | resetSearchState(); |
| 338 | + runSearch({ | ||
| 339 | + keyword: '', | ||
| 340 | + }); | ||
| 335 | }; | 341 | }; |
| 336 | 342 | ||
| 337 | /** | 343 | /** |
| ... | @@ -420,13 +426,8 @@ const updateFinishedStatus = (pageData, total) => { | ... | @@ -420,13 +426,8 @@ const updateFinishedStatus = (pageData, total) => { |
| 420 | /** | 426 | /** |
| 421 | * 执行一次新的搜索,并重置分页状态。 | 427 | * 执行一次新的搜索,并重置分页状态。 |
| 422 | */ | 428 | */ |
| 423 | -const onSearch = async () => { | 429 | +const runSearch = async ({ keyword }) => { |
| 424 | - const keyword = searchKeyword.value.trim(); | 430 | + searchKeyword.value = keyword; |
| 425 | - if (!keyword) { | ||
| 426 | - showToast('请输入搜索关键词'); | ||
| 427 | - return; | ||
| 428 | - } | ||
| 429 | - | ||
| 430 | searching.value = true; | 431 | searching.value = true; |
| 431 | hasSearched.value = true; | 432 | hasSearched.value = true; |
| 432 | loading.value = true; | 433 | loading.value = true; |
| ... | @@ -448,6 +449,17 @@ const onSearch = async () => { | ... | @@ -448,6 +449,17 @@ const onSearch = async () => { |
| 448 | } | 449 | } |
| 449 | }; | 450 | }; |
| 450 | 451 | ||
| 452 | +const onSearch = async () => { | ||
| 453 | + const keyword = searchKeyword.value.trim(); | ||
| 454 | + await runSearch({ | ||
| 455 | + keyword, | ||
| 456 | + }); | ||
| 457 | +}; | ||
| 458 | + | ||
| 459 | +const onSearchEnter = async () => { | ||
| 460 | + await onSearch(); | ||
| 461 | +}; | ||
| 462 | + | ||
| 451 | /** | 463 | /** |
| 452 | * 加载下一页搜索结果。 | 464 | * 加载下一页搜索结果。 |
| 453 | */ | 465 | */ | ... | ... |
-
Please register or login to post a comment