基础信息展示以及搜索逻辑进行修复
This commit is contained in:
@ -193,12 +193,14 @@
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="输入名称或规格..."
|
||||
:remote-method="handleSearchMaterial"
|
||||
:remote-method="handleSearchMaterialDebounced"
|
||||
@visible-change="handleMaterialDropdownVisible"
|
||||
:loading="searchLoading"
|
||||
style="width: 100%"
|
||||
@change="onMaterialSelected"
|
||||
default-first-option
|
||||
v-loadmore="loadMoreMaterials"
|
||||
:teleported="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in materialOptions"
|
||||
@ -213,12 +215,15 @@
|
||||
<el-tag v-else size="small" type="success" effect="plain">系统</el-tag>
|
||||
</div>
|
||||
</el-option>
|
||||
<div v-if="loadingMore" style="text-align: center; color: #999; font-size: 12px; padding: 5px; background: #fff;">
|
||||
<el-icon class="is-loading"><Refresh /></el-icon> 加载更多中...
|
||||
</div>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14" style="display: flex; align-items: center;">
|
||||
<span class="search-tip">
|
||||
<el-icon><InfoFilled/></el-icon> 未输入时展示最新物料；输入关键词进行精确搜索。
|
||||
<el-icon><InfoFilled/></el-icon> 模糊搜索名称/规格/拼音；滚动加载更多。
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -511,6 +516,28 @@ import {
|
||||
import {getLabelPreview, executePrint} from '@/api/common/print'
|
||||
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
|
||||
|
||||
// ------------------------------------
|
||||
// 自定义指令：v-loadmore
|
||||
// 修复点：添加 setTimeout 以确保 DOM 渲染，查找正确的 Element Plus 滚动容器类名
|
||||
// ------------------------------------
|
||||
const vLoadmore = {
|
||||
mounted(el: any, binding: any) {
|
||||
setTimeout(() => {
|
||||
// Element Plus 下拉框内部使用 el-scrollbar__wrap
|
||||
const SELECT_DOM = el.querySelector('.el-select-dropdown .el-scrollbar__wrap')
|
||||
if (SELECT_DOM) {
|
||||
SELECT_DOM.addEventListener('scroll', function (this: any) {
|
||||
// 判断是否触底
|
||||
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 1
|
||||
if (condition) {
|
||||
binding.value()
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 状态与变量
|
||||
// ------------------------------------
|
||||
@ -518,6 +545,7 @@ const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const visible = ref(false)
|
||||
const searchLoading = ref(false)
|
||||
const loadingMore = ref(false) // 分页加载状态
|
||||
const dialogStatus = ref<'create' | 'update'>('create')
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
@ -531,6 +559,11 @@ const queryParams = reactive({
|
||||
})
|
||||
|
||||
const materialOptions = ref<any[]>([])
|
||||
const searchPage = ref(1)
|
||||
const searchKeyword = ref('')
|
||||
const hasNextPage = ref(true)
|
||||
let searchTimer: any = null // 用于防抖
|
||||
|
||||
const printVisible = ref(false)
|
||||
const printLoading = ref(false)
|
||||
const printing = ref(false)
|
||||
@ -607,52 +640,32 @@ const form = reactive({
|
||||
// 建议/Autocomplete 逻辑
|
||||
// ------------------------------------
|
||||
|
||||
// 1. 供应商建议 (基于 base_id)
|
||||
// 1. 供应商建议
|
||||
const fetchSupplierSuggestions = async (query: string, cb: any) => {
|
||||
if (!form.base_id) {
|
||||
cb([])
|
||||
return
|
||||
}
|
||||
if (!form.base_id) { cb([]); return }
|
||||
try {
|
||||
const res: any = await getSupplierSuggestions({ base_id: form.base_id })
|
||||
if (res.code === 200) {
|
||||
const suppliers = res.data.map((name: string) => ({ value: name }))
|
||||
const filtered = query ? suppliers.filter((item: any) => item.value.toLowerCase().includes(query.toLowerCase())) : suppliers
|
||||
cb(filtered)
|
||||
} else {
|
||||
cb([])
|
||||
}
|
||||
} catch (e) {
|
||||
cb([])
|
||||
}
|
||||
} else { cb([]) }
|
||||
} catch (e) { cb([]) }
|
||||
}
|
||||
const querySearchSupplier = (qs: string, cb: any) => fetchSupplierSuggestions(qs, cb)
|
||||
const handleSupplierSelect = (item: any) => {
|
||||
form.supplier_name = item.value
|
||||
}
|
||||
const handleSupplierSelect = (item: any) => { form.supplier_name = item.value }
|
||||
|
||||
// 2. 采购人建议 (全局，来自历史 buy 表)
|
||||
// 2. 采购人建议
|
||||
const fetchUserSuggestions = async (query: string, cb: any) => {
|
||||
try {
|
||||
const res: any = await getUserSuggestions({ keyword: query })
|
||||
if (res.code === 200) {
|
||||
cb(res.data)
|
||||
} else {
|
||||
cb([])
|
||||
}
|
||||
} catch (e) {
|
||||
cb([])
|
||||
}
|
||||
if (res.code === 200) { cb(res.data) } else { cb([]) }
|
||||
} catch (e) { cb([]) }
|
||||
}
|
||||
const querySearchPurchaser = (qs: string, cb: any) => fetchUserSuggestions(qs, cb)
|
||||
const handlePurchaserSelect = (item: any) => {
|
||||
form.purchaser = item.value
|
||||
if (item.email) {
|
||||
form.purchaser_email = item.email
|
||||
}
|
||||
}
|
||||
const handlePurchaserSelect = (item: any) => { form.purchaser = item.value; if (item.email) form.purchaser_email = item.email }
|
||||
|
||||
// 3. 链接建议 (基于 base_id)
|
||||
// 3. 链接建议
|
||||
const fetchLinkSuggestions = async (query: string, cb: any, type: 'original' | 'detail') => {
|
||||
if (!form.base_id) { cb([]); return }
|
||||
try {
|
||||
@ -666,7 +679,7 @@ const fetchLinkSuggestions = async (query: string, cb: any, type: 'original' | '
|
||||
}
|
||||
const querySearchLinks = (qs: string, cb: any, type: 'original' | 'detail') => fetchLinkSuggestions(qs, cb, type)
|
||||
|
||||
// 4. [新增] 库位建议 (基于 base_id)
|
||||
// 4. 库位建议
|
||||
const fetchLocationSuggestions = async (query: string, cb: any) => {
|
||||
if (!form.base_id) { cb([]); return }
|
||||
try {
|
||||
@ -688,15 +701,53 @@ const querySearchCurrency = (queryString: string, cb: any) => {
|
||||
cb(filtered)
|
||||
}
|
||||
|
||||
const handleMaterialDropdownVisible = (visible: boolean) => { if (visible && materialOptions.value.length === 0) handleSearchMaterial('') }
|
||||
const handleMaterialDropdownVisible = (visible: boolean) => { if (visible && materialOptions.value.length === 0) handleSearchMaterialDebounced('') }
|
||||
|
||||
// [修复] 增加防抖，避免频繁触发导致数据不一致
|
||||
const handleSearchMaterialDebounced = (query: string) => {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
handleSearchMaterial(query)
|
||||
}, 300) // 300ms 防抖
|
||||
}
|
||||
|
||||
const handleSearchMaterial = async (query: string) => {
|
||||
searchLoading.value = true
|
||||
searchKeyword.value = query
|
||||
searchPage.value = 1
|
||||
materialOptions.value = []
|
||||
|
||||
try {
|
||||
const res: any = await searchMaterialBase(query)
|
||||
const apiResults = (res.data || []).map((i: any) => ({...i, isHistory: false}))
|
||||
materialOptions.value = apiResults
|
||||
const res: any = await searchMaterialBase(query, 1)
|
||||
if (res.data) {
|
||||
const apiResults = (res.data || []).map((i: any) => ({...i, isHistory: false}))
|
||||
materialOptions.value = apiResults
|
||||
hasNextPage.value = res.has_next
|
||||
}
|
||||
} finally { searchLoading.value = false }
|
||||
}
|
||||
|
||||
const loadMoreMaterials = async () => {
|
||||
if (searchLoading.value || loadingMore.value || !hasNextPage.value) return
|
||||
|
||||
loadingMore.value = true
|
||||
searchPage.value += 1
|
||||
try {
|
||||
const res: any = await searchMaterialBase(searchKeyword.value, searchPage.value)
|
||||
if (res.data && res.data.length > 0) {
|
||||
const newItems = res.data.map((i: any) => ({...i, isHistory: false}))
|
||||
materialOptions.value.push(...newItems)
|
||||
hasNextPage.value = res.has_next
|
||||
} else {
|
||||
hasNextPage.value = false
|
||||
}
|
||||
} catch (e) {
|
||||
searchPage.value -= 1
|
||||
} finally {
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onMaterialSelected = (val: number) => {
|
||||
const item = materialOptions.value.find(i => i.id === val)
|
||||
if (item) {
|
||||
@ -990,6 +1041,8 @@ const handlePrint = async (row: any) => {
|
||||
const confirmPrint = async () => { printing.value = true; try { await executePrint(currentPrintData.value); ElMessage.success('指令已发送'); printVisible.value = false } catch (e: any) { ElMessage.error(e.msg || '打印失败') } finally { printing.value = false } }
|
||||
const resetForm = () => {
|
||||
materialOptions.value = []; arrivalFileList.value = []; reportFileList.value = []; inspection_report_url.value = ''
|
||||
// 重置分页状态
|
||||
searchPage.value = 1; hasNextPage.value = true; searchKeyword.value = '';
|
||||
Object.assign(form, { id: undefined, base_id: undefined, material_name: '', spec_model: '', category: '', unit: '', material_type: '', sku: '', barcode: '', in_date: '', serial_number: '', batch_number: '', status: '在库', inspection_status: '未检', in_quantity: 1, stock_quantity: 1, available_quantity: 1, warehouse_location: '', unit_price: 0, total_price: 0, currency: 'CNY', exchange_rate: 1.00, supplier_name: '', purchaser: '', purchaser_email: '', source_link: '', detail_link: '', arrival_photo: [], inspection_report: [] })
|
||||
}
|
||||
const getStatusType = (status: string) => { const map: any = {'在库': 'success', '出库': 'info', '损耗': 'danger'}; return map[status] || 'warning' }
|
||||
|
||||
Reference in New Issue
Block a user