feat: 工单列表添加关键词搜索功能
- 添加关键词搜索输入框,支持搜索工单标题/内容 - 300ms 防抖优化搜索性能 - 支持与用户筛选同时使用
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user