修改采购件对于两个搜索框的bug修复
This commit is contained in:
@ -1,42 +1,51 @@
|
||||
<template>
|
||||
<div class="buy-module">
|
||||
<div class="header-tools">
|
||||
<div class="left-tools">
|
||||
<div class="header-container">
|
||||
<div class="search-form-area">
|
||||
<el-input
|
||||
v-model="queryParams.keyword"
|
||||
placeholder="🔍 搜索物料名称 / 规格 / 批号 / SN / 供应商..."
|
||||
class="search-input"
|
||||
placeholder="请输入名称或规格"
|
||||
class="filter-item-input"
|
||||
clearable
|
||||
@clear="fetchData"
|
||||
@keyup.enter="fetchData"
|
||||
style="width: 300px; margin-right: 10px;"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="fetchData"/>
|
||||
</template>
|
||||
</el-input>
|
||||
style="width: 240px;"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="queryParams.statuses"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="状态筛选"
|
||||
style="width: 220px;"
|
||||
v-model="queryParams.category"
|
||||
placeholder="类别"
|
||||
class="filter-item-select"
|
||||
clearable
|
||||
filterable
|
||||
@change="fetchData"
|
||||
style="width: 160px;"
|
||||
>
|
||||
<el-option label="在库" value="在库" />
|
||||
<el-option label="借库" value="借库" />
|
||||
<el-option label="已出库" value="已出库" />
|
||||
<el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="queryParams.material_type"
|
||||
placeholder="类型"
|
||||
class="filter-item-select"
|
||||
clearable
|
||||
filterable
|
||||
@change="fetchData"
|
||||
style="width: 160px;"
|
||||
>
|
||||
<el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" plain class="search-btn" @click="fetchData">搜索</el-button>
|
||||
<el-button class="reset-btn" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="right-tools">
|
||||
<el-button type="primary" :icon="Plus" @click="handleCreate" class="action-btn">采购入库登记</el-button>
|
||||
<el-button :icon="Refresh" @click="fetchData" class="action-btn">刷新</el-button>
|
||||
<div class="right-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="handleCreate" class="add-btn">新增</el-button>
|
||||
<el-button :icon="Refresh" circle @click="fetchData" class="circle-btn" />
|
||||
|
||||
<el-popover placement="bottom-end" title="列配置" :width="500" trigger="click">
|
||||
<template #reference>
|
||||
<el-button :icon="Setting" class="action-btn">表头</el-button>
|
||||
<el-button :icon="Setting" circle class="circle-btn" />
|
||||
</template>
|
||||
<el-checkbox-group v-model="visibleColumnProps" class="column-selector">
|
||||
<div class="col-group-title">基础信息</div>
|
||||
@ -158,7 +167,7 @@
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[15, 30, 50, 100]"
|
||||
:page-sizes="[100, 200, 500, 1000]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="fetchData"
|
||||
@ -223,7 +232,7 @@
|
||||
</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,23 +520,21 @@ import {
|
||||
getSupplierSuggestions,
|
||||
getUserSuggestions,
|
||||
getLinkSuggestions,
|
||||
getLocationSuggestions
|
||||
getLocationSuggestions,
|
||||
getFilterOptions // 新增引入
|
||||
} from '@/api/inbound/buy'
|
||||
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()
|
||||
@ -545,16 +552,22 @@ const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const visible = ref(false)
|
||||
const searchLoading = ref(false)
|
||||
const loadingMore = ref(false) // 分页加载状态
|
||||
const loadingMore = ref(false)
|
||||
const dialogStatus = ref<'create' | 'update'>('create')
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const formRef = ref()
|
||||
|
||||
// 存储下拉选项
|
||||
const categoryOptions = ref<string[]>([])
|
||||
const typeOptions = ref<string[]>([])
|
||||
|
||||
const queryParams = reactive({
|
||||
page: 1,
|
||||
pageSize: 15,
|
||||
pageSize: 100,
|
||||
keyword: '',
|
||||
category: '',
|
||||
material_type: '',
|
||||
statuses: ['在库', '借库']
|
||||
})
|
||||
|
||||
@ -562,7 +575,7 @@ const materialOptions = ref<any[]>([])
|
||||
const searchPage = ref(1)
|
||||
const searchKeyword = ref('')
|
||||
const hasNextPage = ref(true)
|
||||
let searchTimer: any = null // 用于防抖
|
||||
let searchTimer: any = null
|
||||
|
||||
const printVisible = ref(false)
|
||||
const printLoading = ref(false)
|
||||
@ -639,8 +652,6 @@ const form = reactive({
|
||||
// ------------------------------------
|
||||
// 建议/Autocomplete 逻辑
|
||||
// ------------------------------------
|
||||
|
||||
// 1. 供应商建议
|
||||
const fetchSupplierSuggestions = async (query: string, cb: any) => {
|
||||
if (!form.base_id) { cb([]); return }
|
||||
try {
|
||||
@ -655,7 +666,6 @@ const fetchSupplierSuggestions = async (query: string, cb: any) => {
|
||||
const querySearchSupplier = (qs: string, cb: any) => fetchSupplierSuggestions(qs, cb)
|
||||
const handleSupplierSelect = (item: any) => { form.supplier_name = item.value }
|
||||
|
||||
// 2. 采购人建议
|
||||
const fetchUserSuggestions = async (query: string, cb: any) => {
|
||||
try {
|
||||
const res: any = await getUserSuggestions({ keyword: query })
|
||||
@ -665,7 +675,6 @@ const fetchUserSuggestions = async (query: string, cb: any) => {
|
||||
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 }
|
||||
|
||||
// 3. 链接建议
|
||||
const fetchLinkSuggestions = async (query: string, cb: any, type: 'original' | 'detail') => {
|
||||
if (!form.base_id) { cb([]); return }
|
||||
try {
|
||||
@ -679,7 +688,6 @@ const fetchLinkSuggestions = async (query: string, cb: any, type: 'original' | '
|
||||
}
|
||||
const querySearchLinks = (qs: string, cb: any, type: 'original' | 'detail') => fetchLinkSuggestions(qs, cb, type)
|
||||
|
||||
// 4. 库位建议
|
||||
const fetchLocationSuggestions = async (query: string, cb: any) => {
|
||||
if (!form.base_id) { cb([]); return }
|
||||
try {
|
||||
@ -693,8 +701,6 @@ const fetchLocationSuggestions = async (query: string, cb: any) => {
|
||||
}
|
||||
const querySearchLocation = (qs: string, cb: any) => fetchLocationSuggestions(qs, cb)
|
||||
|
||||
|
||||
// 5. 币种
|
||||
const currencyOptions = [{value: 'CNY', desc: '人民币'}, {value: 'USD', desc: '美元'}, {value: 'EUR', desc: '欧元'}]
|
||||
const querySearchCurrency = (queryString: string, cb: any) => {
|
||||
const filtered = queryString ? currencyOptions.filter(item => item.value.toLowerCase().includes(queryString.toLowerCase()) || item.desc.toLowerCase().includes(queryString.toLowerCase())) : currencyOptions
|
||||
@ -703,12 +709,11 @@ const querySearchCurrency = (queryString: string, cb: any) => {
|
||||
|
||||
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 防抖
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const handleSearchMaterial = async (query: string) => {
|
||||
@ -729,7 +734,6 @@ const handleSearchMaterial = async (query: string) => {
|
||||
|
||||
const loadMoreMaterials = async () => {
|
||||
if (searchLoading.value || loadingMore.value || !hasNextPage.value) return
|
||||
|
||||
loadingMore.value = true
|
||||
searchPage.value += 1
|
||||
try {
|
||||
@ -786,7 +790,6 @@ const rules = {
|
||||
batch_number: [{validator: validateIdentity, trigger: 'blur'}, {validator: validateUnique, trigger: 'blur'}]
|
||||
}
|
||||
|
||||
// 自动计算批号逻辑
|
||||
const checkHistoryAndSetMode = async (baseId: number) => {
|
||||
try {
|
||||
const res: any = await getBuyList({page: 1, pageSize: 1000})
|
||||
@ -838,13 +841,36 @@ watch(() => [form.in_quantity, form.unit_price], () => { form.total_price = Numb
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = { ...queryParams, statuses: queryParams.statuses.join(',') }
|
||||
const params = {
|
||||
...queryParams,
|
||||
statuses: queryParams.statuses.join(',')
|
||||
}
|
||||
const res: any = await getBuyList(params)
|
||||
tableData.value = res.data.items || []
|
||||
total.value = res.data.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
const fetchOptions = async () => {
|
||||
try {
|
||||
const res: any = await getFilterOptions()
|
||||
if (res.code === 200) {
|
||||
categoryOptions.value = res.data.categories
|
||||
typeOptions.value = res.data.types
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Fetch options failed", e)
|
||||
}
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryParams.keyword = ''
|
||||
queryParams.category = ''
|
||||
queryParams.material_type = ''
|
||||
queryParams.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
dialogStatus.value = 'create'
|
||||
resetForm()
|
||||
@ -870,7 +896,6 @@ const handleUpdate = (row: any) => {
|
||||
source_link: row.source_link, detail_link: row.detail_link,
|
||||
arrival_photo: row.arrival_photo || [], inspection_report: row.inspection_report || []
|
||||
})
|
||||
// 回显图片
|
||||
arrivalFileList.value = form.arrival_photo.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }))
|
||||
const reports = form.inspection_report || []
|
||||
const reportImgs = reports.filter(r => !isExternalLink(r))
|
||||
@ -883,9 +908,6 @@ const handleUpdate = (row: any) => {
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 提交逻辑
|
||||
// ------------------------------------
|
||||
const submitForm = async () => {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid: boolean) => {
|
||||
@ -916,10 +938,6 @@ const submitForm = async () => {
|
||||
})
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// 图片/文件处理
|
||||
// ------------------------------------
|
||||
|
||||
const getImageUrl = (url: string) => {
|
||||
if (!url) return ''
|
||||
if (url.startsWith('http') || url.startsWith('https') || url.startsWith('blob:')) {
|
||||
@ -950,10 +968,8 @@ const customUpload = async (options: any, targetField: 'arrival_photo' | 'inspec
|
||||
if (res.code === 200) {
|
||||
const newUrl = res.data.url
|
||||
form[targetField].push(newUrl)
|
||||
|
||||
const fullUrl = getImageUrl(newUrl)
|
||||
const fileObj = { name: file.name, url: fullUrl, status: 'success', uid: file.uid }
|
||||
|
||||
if (targetField === 'arrival_photo') {
|
||||
const idx = arrivalFileList.value.findIndex(f => f.uid === file.uid)
|
||||
if (idx > -1) arrivalFileList.value[idx] = fileObj
|
||||
@ -979,7 +995,6 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'arrival_photo' |
|
||||
try {
|
||||
const filename = uploadFile.url.split('/').pop()
|
||||
const urlToRemove = form[targetField].find(u => u.endsWith(filename)) || uploadFile.url
|
||||
|
||||
form[targetField] = form[targetField].filter(u => u !== urlToRemove)
|
||||
if (!isExternalLink(urlToRemove)) {
|
||||
if (filename) await deleteFile(filename)
|
||||
@ -988,7 +1003,6 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'arrival_photo' |
|
||||
} catch (e) { console.error(e) }
|
||||
}
|
||||
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
||||
|
||||
const triggerCamera = (field: 'arrival_photo' | 'inspection_report') => {
|
||||
currentCameraField.value = field;
|
||||
cameraDialogVisible.value = true;
|
||||
@ -1003,12 +1017,10 @@ const handleCameraConfirm = async (file: File) => {
|
||||
text: '照片上传中，请稍候...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res: any = await uploadFile(formData)
|
||||
|
||||
if (res.code === 200) {
|
||||
const newUrl = res.data.url
|
||||
const field = currentCameraField.value
|
||||
@ -1041,22 +1053,84 @@ 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' }
|
||||
const formatMoney = (val: any, currency = '¥') => { const num = Number(val); return isNaN(num) ? '-' : `${currency} ${num.toFixed(2)}` }
|
||||
|
||||
onMounted(() => fetchData())
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchOptions() // 加载下拉框数据
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.buy-module { background: #f5f7fa; padding: 20px; min-height: 100vh; }
|
||||
.header-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
|
||||
.left-tools { display: flex; gap: 10px; align-items: center; flex: 1; }
|
||||
.right-tools { display: flex; gap: 10px; align-items: center; }
|
||||
.action-btn { font-weight: 500; }
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 16px 20px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-item-input {
|
||||
/* 输入框样式 */
|
||||
}
|
||||
|
||||
/* 调整下拉框样式以匹配截图 */
|
||||
.filter-item-select {
|
||||
/* 确保下拉框高度和输入框一致 */
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background-color: #E6F1FC;
|
||||
border-color: #A3D0FD;
|
||||
color: #409EFF;
|
||||
}
|
||||
.search-btn:hover {
|
||||
background-color: #409EFF;
|
||||
border-color: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
.reset-btn:hover {
|
||||
border-color: #c0c4cc;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background-color: #409EFF;
|
||||
border-color: #409EFF;
|
||||
padding: 8px 18px;
|
||||
}
|
||||
|
||||
.circle-btn {
|
||||
color: #606266;
|
||||
border-color: #dcdfe6;
|
||||
}
|
||||
|
||||
.modern-table { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
|
||||
:deep(.table-header-gray th) { background-color: #f8f9fb !important; color: #606266; font-weight: 600; height: 50px; }
|
||||
.tag-sn { color: #409EFF; font-weight: bold; font-family: monospace; background: #ecf5ff; padding: 0 4px; border-radius: 4px; margin-right: 4px; font-size: 12px; }
|
||||
|
||||
Reference in New Issue
Block a user