物料搜索:el-select 重构为 el-autocomplete Regression 修复(value-key 缺失 + parentNameInput 未声明 + onChildClear 不完整)

This commit is contained in:
DXC
2026-06-05 11:02:35 +08:00
parent ff5418afa3
commit 355a21e94c
6 changed files with 263 additions and 733 deletions

View File

@ -294,31 +294,21 @@
<el-row :gutter="24" v-if="dialogStatus === 'create'" style="margin-bottom: 20px;">
<el-col :span="12">
<el-form-item label="物料搜索" prop="base_id" class="highlight-label">
<el-select
v-model="form.base_id"
filterable
remote
reserve-keyword="true"
clearable
<el-autocomplete
v-model="materialNameInput"
:fetch-suggestions="fetchMaterialSuggestions"
:value-key="'name'"
placeholder="请输入名称或规格进行检索..."
:remote-method="handleSearchMaterialDebounced"
@visible-change="handleMaterialDropdownVisible"
:loading="searchLoading"
:trigger-on-focus="true"
clearable
style="width: 100%"
@change="onMaterialSelected"
default-first-option="true"
v-loadmore="loadMoreMaterials"
popper-class="long-dropdown"
@select="onMaterialSelected"
@clear="onMaterialClear"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
<el-option
v-for="item in materialOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
<template #default="{ item }">
<div class="option-item">
<div class="opt-main">
<span class="opt-name" :title="item.name">{{ item.name }}</span>
@ -332,11 +322,8 @@
<el-tag v-else size="small" type="success" effect="plain">系统</el-tag>
</div>
</div>
</el-option>
<div v-if="loadingMore" style="text-align: center; color: #999; font-size: 12px; padding: 8px; background: #f9f9f9;">
<el-icon class="is-loading"><Refresh /></el-icon> 加载更多中...
</div>
</el-select>
</template>
</el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="12" style="display: flex; align-items: center;">
@ -846,11 +833,8 @@ const queryParams = reactive({
advancedFilters: [] as any[]
})
const materialNameInput = ref('')
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)
@ -1136,97 +1120,56 @@ const querySearchCurrency = (queryString: string, cb: any) => {
cb(filtered)
}
const handleMaterialDropdownVisible = (visible: boolean) => {
if (!visible) return
// 防御性拦截 1用户已选过物料form.base_id 有值)
// 此时下拉打开只是 el-select 切换到"输入模式",绝不能去请求默认列表。
// 否则会清空 searchKeyword 和 materialOptions破坏用户正在编辑的搜索结果。
if (form.base_id) return
// 防御性拦截 2已经有搜索关键字或已经有下拉数据
// 同样不要重置、不要再请求默认列表
if (searchKeyword.value || materialOptions.value.length > 0) return
// 打断正在排队的 debounce 定时器,避免与默认请求相互打架
if (searchTimer) { clearTimeout(searchTimer); searchTimer = null }
handleSearchMaterial('')
}
const handleSearchMaterialDebounced = (query: string) => {
if (searchTimer) clearTimeout(searchTimer)
searchTimer = setTimeout(() => {
handleSearchMaterial(query)
}, 300)
}
const handleSearchMaterial = async (query: string) => {
// 防御性处理:粘贴场景常混入零宽字符 / 控制字符 / 不可见 Unicode
const rawQuery = String(query || '')
const safeQuery = rawQuery.replace(/[\x00-\x1F\x7F-\x9F\u200B-\u200D\uFEFF]/g, '').trim()
// 防御性拦截el-select 在 filterable + remote 模式下,用户点击已聚焦的 input 时
// 会内部 emit query='' 触发 remote-method。这种"清空式 emit"是 el-select 切换到输入模式
// 的固有行为,绝不能破坏已选物料对应的搜索结果(清空 searchKeyword + materialOptions
// 只有当 form.base_id 已有值、当前查询为空、且下拉列表非空时,才拦截。
// 真正"清空"的场景(用户点 X 按钮)会通过 clearable 把 form.base_id 置空,本拦截放行。
if (!safeQuery && form.base_id && materialOptions.value.length > 0) return
const fetchMaterialSuggestions = async (query: string, cb: (results: any[]) => void) => {
const safeQuery = String(query || '').replace(/[\x00-\x1F\x7F-\x9F\u200B-\u200D\uFEFF]/g, '').trim()
searchLoading.value = true
searchKeyword.value = safeQuery
searchPage.value = 1
materialOptions.value = []
try {
const res: any = await searchMaterialBase(safeQuery, 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
const res: any = await searchMaterialBase(safeQuery)
if (res.code === 200 && res.data) {
cb((res.data || []).map((i: any) => ({ ...i, isHistory: false })))
} else {
hasNextPage.value = false
cb([])
}
} catch (e) {
searchPage.value -= 1
cb([])
} finally {
loadingMore.value = false
searchLoading.value = false
}
}
const onMaterialSelected = async (val: number) => {
const item = materialOptions.value.find(i => i.id === val)
if (item) {
form.company_name = item.company_name
form.material_name = item.name
form.spec_model = item.spec
form.category = item.category
form.unit = item.unit
form.material_type = item.type
// 保存强制质检标记
isCurrentMaterialInspectionRequired.value = item.isInspectionRequired || false
// 更新表单校验规则
updateInspectionRules()
checkHistoryAndSetMode(item.id)
const onMaterialClear = () => {
form.base_id = undefined
form.company_name = ''
form.material_name = ''
form.spec_model = ''
form.category = ''
form.unit = ''
form.material_type = ''
isCurrentMaterialInspectionRequired.value = false
updateInspectionRules()
}
// 获取该物料历史入库库位(新增独立接口)
try {
const res = await request.get('/v1/inbound/buy/last-location', { params: { base_id: val } })
if (res.code === 200 && res.data.location) {
form.warehouse_location = res.data.location
ElMessage.info(`已自动带入该物料历史库位:【${res.data.location}】,请核对。`)
}
} catch (e) {
console.error('获取历史库位失败', e)
const onMaterialSelected = async (item: any) => {
form.base_id = item.id
form.company_name = item.company_name
form.material_name = item.name
form.spec_model = item.spec
form.category = item.category
form.unit = item.unit
form.material_type = item.type
materialNameInput.value = item.name
isCurrentMaterialInspectionRequired.value = item.isInspectionRequired || false
updateInspectionRules()
checkHistoryAndSetMode(item.id)
try {
const res = await request.get('/v1/inbound/buy/last-location', { params: { base_id: item.id } })
if (res.code === 200 && res.data.location) {
form.warehouse_location = res.data.location
ElMessage.info(`已自动带入该物料历史库位:【${res.data.location}】,请核对。`)
}
} catch (e) {
console.error('获取历史库位失败', e)
}
}
@ -1516,6 +1459,7 @@ const handleUpdate = (row: any) => {
if (row.serial_number) { entryMode.value = 'serial'; form.serial_number = row.serial_number; form.batch_number = '' }
else { entryMode.value = 'batch'; form.batch_number = row.batch_number; form.serial_number = '' }
materialOptions.value = [{ id: row.base_id, name: row.material_name, spec: row.spec_model, category: row.category, company_name: row.company_name, isInspectionRequired: row.isInspectionRequired }]
materialNameInput.value = row.material_name
// 设置强制质检标记
isCurrentMaterialInspectionRequired.value = row.isInspectionRequired || false
updateInspectionRules()
@ -1810,8 +1754,7 @@ const confirmPrint = async () => {
}
const resetForm = () => {
materialOptions.value = []; arrivalFileList.value = []; reportFileList.value = []; inspection_report_url.value = ''
searchPage.value = 1; hasNextPage.value = true; searchKeyword.value = '';
materialOptions.value = []; materialNameInput.value = ''; arrivalFileList.value = []; reportFileList.value = []; inspection_report_url.value = ''
// 重置强制质检标记
isCurrentMaterialInspectionRequired.value = false
Object.assign(form, {