feat(records): 出库/借还记录统一高级搜索版式
三个记录页(出库/借还/报废)此前搜索区形态各异:出库用裸 div + 分散样式,
借还缺日期范围,报废只有 SKU 输入框。现统一为 el-form :inline="true" +
.filter-form 版式,并补齐缺失的过滤维度。
借还记录(新增日期范围能力):
· 后端 get_records 增加 start_date/end_date 参数,按「借出时间」过滤;
· 边界补全时分秒(YYYY-MM-DD → 当日 00:00:00 / 23:59:59),
与出库记录同口径,解决零点截断导致当天记录漏查的问题;
· API 层透传两个新参数。
出库记录:
· 版式统一为 inline 表单,日期选择器加 label;
· 新增「重置」按钮;
· 搜索类型切换由 500ms 防抖改为立即查询。
借还记录:
· 新增「重置」按钮;搜索类型/状态切换改为立即查询(取消防抖)。
实测(SUPER_ADMIN):
报废 全部/单号/SKU/操作人/物料名/日期 六类过滤均 200 且命中正确;
借还 无过滤 52 单 / 本月 18 单 / 空区间 0 单(日期过滤生效);
出库 无过滤 395 单 / SKU 277 / 姓名 7 / 物料名 16 / 单号 OUT-2026 命中 395。
This commit is contained in:
@ -1,41 +1,51 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<CompanySelector v-model="listQuery.company" @change="fetchData" style="margin-right: 10px;" />
|
||||
<!-- ★ 高级搜索:与借还记录 / 报废记录统一版式 -->
|
||||
<el-form :inline="true" class="filter-form" @submit.prevent>
|
||||
<el-form-item>
|
||||
<CompanySelector v-model="listQuery.company" @change="fetchData" />
|
||||
</el-form-item>
|
||||
|
||||
<el-input
|
||||
v-model="listQuery.keyword"
|
||||
placeholder="请输入关键词"
|
||||
style="width: 250px;"
|
||||
class="filter-item"
|
||||
clearable
|
||||
@input="debouncedSearch"
|
||||
@clear="handleClearSearch"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="listQuery.search_type" placeholder="搜索类型" style="width: 110px" @change="debouncedSearch">
|
||||
<el-option label="全部" value="all" />
|
||||
<el-option label="单号" value="no" />
|
||||
<el-option label="姓名" value="name" />
|
||||
<el-option label="SKU" value="sku" />
|
||||
<el-option label="物料名称" value="material_name" />
|
||||
<el-option label="规格型号" value="spec_model" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-date-picker
|
||||
v-model="listQuery.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
class="filter-item"
|
||||
style="margin-left: 10px;"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-button type="primary" class="filter-item" style="margin-left: 10px;" @click="fetchData">查询</el-button>
|
||||
<el-button v-if="userStore.hasPermission('outbound_create:operation')" type="success" class="filter-item" @click="$router.push('/outbound/create')">新建出库</el-button>
|
||||
</div>
|
||||
<el-form-item label="搜索">
|
||||
<el-input
|
||||
v-model="listQuery.keyword"
|
||||
placeholder="输入关键词"
|
||||
style="width: 240px;"
|
||||
clearable
|
||||
@input="debouncedSearch"
|
||||
@clear="handleClearSearch"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="listQuery.search_type" placeholder="搜索类型" style="width: 110px" @change="handleSearchImmediate">
|
||||
<el-option label="全部" value="all" />
|
||||
<el-option label="单号" value="no" />
|
||||
<el-option label="姓名" value="name" />
|
||||
<el-option label="SKU" value="sku" />
|
||||
<el-option label="物料名称" value="material_name" />
|
||||
<el-option label="规格型号" value="spec_model" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="出库日期">
|
||||
<el-date-picker
|
||||
v-model="listQuery.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 260px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="fetchData">查询</el-button>
|
||||
<el-button @click="resetFilter">重置</el-button>
|
||||
<el-button v-if="userStore.hasPermission('outbound_create:operation')" type="success" @click="$router.push('/outbound/create')">新建出库</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
:data="list"
|
||||
@ -247,6 +257,22 @@ const handlePageChange = (val: number) => {
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 立即查询(搜索类型切换用,取消防抖)
|
||||
const handleSearchImmediate = () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
listQuery.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const resetFilter = () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
listQuery.keyword = ''
|
||||
listQuery.search_type = 'all'
|
||||
listQuery.dateRange = []
|
||||
listQuery.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const formatType = (type: string) => {
|
||||
const map: any = {
|
||||
'SALES': '销售出库',
|
||||
@ -285,6 +311,17 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ★ 统一高级搜索版式(与借还记录 / 报废记录一致) */
|
||||
.filter-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-form :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.signature-cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user