feat: 列表页搜索框增加即时搜索与防抖机制
This commit is contained in:
@ -20,6 +20,7 @@
|
||||
placeholder="请输入名称、规格搜索..."
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 200px;"
|
||||
@ -32,6 +33,7 @@
|
||||
placeholder="请输入SKU搜索..."
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 160px;"
|
||||
@ -664,6 +666,17 @@ import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
|
||||
import WarehouseSelector from '@/components/WarehouseSelector.vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
// ------------------------------------
|
||||
// 防抖函数
|
||||
// ------------------------------------
|
||||
const debounce = (fn: Function, delay: number = 500) => {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
return (...args: any[]) => {
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => fn(...args), delay)
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 自定义指令:v-loadmore (适配 Teleport 到 Body 的下拉框)
|
||||
// ------------------------------------
|
||||
@ -1226,6 +1239,16 @@ const fetchData = async () => {
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
// 防抖即时搜索
|
||||
const debouncedSearch = debounce(() => {
|
||||
queryParams.page = 1
|
||||
fetchData()
|
||||
}, 500)
|
||||
|
||||
const handleInputSearch = () => {
|
||||
debouncedSearch()
|
||||
}
|
||||
|
||||
const fetchOptions = async () => {
|
||||
try {
|
||||
const res: any = await getFilterOptions()
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
placeholder="请输入名称、规格搜索..."
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 200px;"
|
||||
@ -31,6 +32,7 @@
|
||||
placeholder="请输入SKU搜索..."
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 160px;"
|
||||
@ -534,6 +536,17 @@ import { getLabelPreview, executePrint } from '@/api/common/print'
|
||||
import { getWarehouseTree } from '@/api/common/warehouse'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
// ------------------------------------
|
||||
// 防抖函数
|
||||
// ------------------------------------
|
||||
const debounce = (fn: Function, delay: number = 500) => {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
return (...args: any[]) => {
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => fn(...args), delay)
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// v-loadmore
|
||||
// ------------------------------------
|
||||
@ -967,6 +980,16 @@ const fetchData = async () => {
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
// 防抖即时搜索
|
||||
const debouncedSearch = debounce(() => {
|
||||
queryParams.page = 1
|
||||
fetchData()
|
||||
}, 500)
|
||||
|
||||
const handleInputSearch = () => {
|
||||
debouncedSearch()
|
||||
}
|
||||
|
||||
const fetchOptions = async () => {
|
||||
try {
|
||||
const res: any = await getFilterOptions()
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
placeholder="请输入名称、规格搜索..."
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 200px;"
|
||||
@ -32,6 +33,7 @@
|
||||
placeholder="请输入SKU搜索..."
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 160px;"
|
||||
@ -598,6 +600,17 @@ import {getLabelPreview, executePrint} from '@/api/common/print'
|
||||
import { getWarehouseTree } from '@/api/common/warehouse'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
// ------------------------------------
|
||||
// 防抖函数
|
||||
// ------------------------------------
|
||||
const debounce = (fn: Function, delay: number = 500) => {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
return (...args: any[]) => {
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => fn(...args), delay)
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 自定义指令:v-loadmore (适配 Teleport 到 Body 的下拉框)
|
||||
// ------------------------------------
|
||||
@ -1101,6 +1114,16 @@ const fetchData = async () => {
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
// 防抖即时搜索
|
||||
const debouncedSearch = debounce(() => {
|
||||
queryParams.page = 1
|
||||
fetchData()
|
||||
}, 500)
|
||||
|
||||
const handleInputSearch = () => {
|
||||
debouncedSearch()
|
||||
}
|
||||
|
||||
const fetchOptions = async () => {
|
||||
try {
|
||||
const res: any = await getFilterOptions()
|
||||
|
||||
Reference in New Issue
Block a user