feat: 工单列表添加关键词搜索功能
Build and Deploy Vue3 / build (push) Successful in 1m19s
Build and Deploy Vue3 / deploy (push) Successful in 1m31s

- 添加关键词搜索输入框,支持搜索工单标题/内容
- 300ms 防抖优化搜索性能
- 支持与用户筛选同时使用
This commit is contained in:
2026-01-07 17:27:54 +08:00
parent 2ce2c1a31f
commit fe1a118132
2 changed files with 35 additions and 2 deletions
+33 -1
View File
@@ -46,6 +46,19 @@
<el-icon @click.stop="clearUserFilter" style="cursor: pointer"><Close /></el-icon>
</template>
</el-input>
<!-- 关键词搜索 -->
<el-input
v-model="searchKeyword"
placeholder="搜索工单标题/内容"
clearable
style="width: 200px"
@input="handleKeywordSearch"
@clear="handleKeywordSearch"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button icon="Refresh" @click="refreshList">刷新</el-button>
</div>
</div>
@@ -187,6 +200,10 @@ const isLoading = ref(false)
const ticketList = ref([])
const activeStatus = ref('pending') // 默认选中"待处理"
// 关键词搜索
const searchKeyword = ref('')
const keywordSearchTimer = ref(null)
// 用户搜索
const userSearchKeyword = ref('')
const userList = ref([])
@@ -248,7 +265,8 @@ const fetchTicketList = async () => {
statusParam,
sortBy.value,
sortOrder.value,
selectedUser.value?.user_id
selectedUser.value?.user_id,
searchKeyword.value.trim()
)
if (res.code === 200) {
@@ -348,6 +366,17 @@ const clearUserFilter = () => {
fetchTicketList()
}
// 关键词搜索
const handleKeywordSearch = () => {
if (keywordSearchTimer.value) {
clearTimeout(keywordSearchTimer.value)
}
keywordSearchTimer.value = setTimeout(() => {
currentPage.value = 1
fetchTicketList()
}, 300)
}
// 按状态过滤
const filterByStatus = (status) => {
if (activeStatus.value === status) return
@@ -479,6 +508,9 @@ onBeforeUnmount(() => {
if (userSearchTimer.value) {
clearTimeout(userSearchTimer.value)
}
if (keywordSearchTimer.value) {
clearTimeout(keywordSearchTimer.value)
}
})
</script>