feat: 重构全局搜索框为复合条件选择,支持按名称、俗名、规格进行精准查杂

This commit is contained in:
dxc
2026-03-11 13:37:52 +08:00
parent e224a07a47
commit b1cc280a71
12 changed files with 156 additions and 65 deletions

View File

@ -5,11 +5,20 @@
<div class="filter-container">
<el-input
v-model="queryParams.keyword"
placeholder="请输入名称、俗名或规格"
style="width: 240px; margin-right: 10px;"
placeholder="请输入搜索关键字"
style="width: 320px; margin-right: 10px;"
clearable
@input="handleInputSearch"
/>
@keyup.enter="handleQuery"
>
<template #prepend>
<el-select v-model="queryParams.searchField" style="width: 90px">
<el-option label="全部" value="all" />
<el-option label="名称" value="name" />
<el-option label="俗名" value="common_name" />
<el-option label="规格" value="spec" />
</el-select>
</template>
</el-input>
<el-select
v-model="queryParams.company"
@ -562,6 +571,7 @@ interface QueryParams {
pageNum: number;
pageSize: number;
keyword: string;
searchField: string;
category: string;
type: string;
company: string;
@ -746,6 +756,7 @@ const queryParams = reactive<QueryParams>({
pageNum: 1,
pageSize: 100,
keyword: '',
searchField: 'all',
category: '',
type: '',
company: '',
@ -966,6 +977,7 @@ const handleQuery = () => {
const resetQuery = () => {
queryParams.keyword = '';
queryParams.searchField = 'all';
queryParams.category = '';
queryParams.type = '';
queryParams.company = '';

View File

@ -17,15 +17,22 @@
<el-input
v-model="queryParams.keyword"
placeholder="请输入名称、规格搜索..."
placeholder="请输入搜索关键字"
class="filter-item-input"
clearable
@input="handleInputSearch"
@clear="fetchData"
@keyup.enter="fetchData"
style="width: 200px;"
style="width: 280px;"
>
<template #prefix><el-icon><Search /></el-icon></template>
<template #prepend>
<el-select v-model="queryParams.searchField" style="width: 90px">
<el-option label="全部" value="all" />
<el-option label="名称" value="name" />
<el-option label="规格" value="spec" />
<el-option label="条码" value="barcode" />
<el-option label="批号" value="batch_number" />
</el-select>
</template>
</el-input>
<el-input
@ -771,6 +778,7 @@ const queryParams = reactive({
page: 1,
pageSize: 50,
keyword: '',
searchField: 'all',
sku: '',
category: '',
material_type: '',
@ -1277,6 +1285,7 @@ const loadWarehouseTree = async () => {
const resetQuery = () => {
queryParams.keyword = ''
queryParams.searchField = 'all'
queryParams.sku = ''
queryParams.category = ''
queryParams.material_type = ''

View File

@ -16,15 +16,22 @@
<el-input
v-model="queryParams.keyword"
placeholder="请输入名称、规格搜索..."
placeholder="请输入搜索关键字"
class="filter-item-input"
clearable
@input="handleInputSearch"
@clear="fetchData"
@keyup.enter="fetchData"
style="width: 200px;"
style="width: 280px;"
>
<template #prefix><el-icon><Search /></el-icon></template>
<template #prepend>
<el-select v-model="queryParams.searchField" style="width: 90px">
<el-option label="全部" value="all" />
<el-option label="名称" value="name" />
<el-option label="规格" value="spec" />
<el-option label="序列号" value="serial_number" />
<el-option label="工单" value="work_order_code" />
</el-select>
</template>
</el-input>
<el-input
@ -581,7 +588,7 @@ const dialogStatus = ref<'create' | 'update'>('create')
const tableData = ref([])
const total = ref(0)
const formRef = ref()
const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
const categoryOptions = ref<string[]>([])
const typeOptions = ref<string[]>([])
const companyOptions = ref<string[]>([]) // [新增]
@ -1018,6 +1025,7 @@ const loadWarehouseTree = async () => {
const resetQuery = () => {
queryParams.keyword = ''
queryParams.searchField = 'all'
queryParams.sku = ''
queryParams.category = ''
queryParams.material_type = ''

View File

@ -17,15 +17,22 @@
<el-input
v-model="queryParams.keyword"
placeholder="请输入名称、规格搜索..."
placeholder="请输入搜索关键字"
class="filter-item-input"
clearable
@input="handleInputSearch"
@clear="fetchData"
@keyup.enter="fetchData"
style="width: 200px;"
style="width: 280px;"
>
<template #prefix><el-icon><Search /></el-icon></template>
<template #prepend>
<el-select v-model="queryParams.searchField" style="width: 90px">
<el-option label="全部" value="all" />
<el-option label="名称" value="name" />
<el-option label="规格" value="spec" />
<el-option label="批号" value="batch_number" />
<el-option label=" BOM" value="bom_code" />
</el-select>
</template>
</el-input>
<el-input
@ -647,7 +654,7 @@ const dialogStatus = ref<'create' | 'update'>('create')
const tableData = ref([])
const total = ref(0)
const formRef = ref()
const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
const categoryOptions = ref<string[]>([])
const typeOptions = ref<string[]>([])
const companyOptions = ref<string[]>([]) // [新增]
@ -1152,6 +1159,7 @@ const loadWarehouseTree = async () => {
const resetQuery = () => {
queryParams.keyword = ''
queryParams.searchField = 'all'
queryParams.sku = ''
queryParams.category = ''
queryParams.material_type = ''