feat(物料管理): 优化出入库记录查询和展示功能

- 将入库单号查询从选择框改为输入框,并添加供应商编码查询
- 优化物料选择框显示,同时展示物料编码和名称
- 表格添加默认按创建时间降序排序
- 出库记录添加日期范围选择功能
- 调整表格列显示配置,隐藏部分不必要字段
- 添加供应商相关字段显示
This commit is contained in:
Tom
2026-01-04 11:54:47 +08:00
parent e62da9a331
commit 501c61d84e
2 changed files with 65 additions and 44 deletions

View File

@@ -7,8 +7,17 @@
<div> <div>
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent> <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
<el-form-item label="入库单号" prop="inboundNo"> <el-form-item label="入库单号" prop="inboundNo">
<el-select v-model="queryParams.inboundNo" filterable placeholder="请选择"> <el-input v-model="queryParams.inboundNo" placeholder="请输入入库单号" />
<el-option v-for="item in dataList" :key="item.inboundNo" :label="item.inboundNo" :value="item.inboundNo"> </el-option> </el-form-item>
<el-form-item label="供应商编码" prop="SupplierCode">
<el-input v-model="queryParams.SupplierCode" placeholder="请输入供应商编码" />
</el-form-item>
<el-form-item label="物料名称" prop="materialCode">
<el-select v-model="queryParams.materialCode" filterable placeholder="请选择">
<el-option v-for="item in dataList" :key="item.materialCode" :label="item.materialName" :value="item.materialCode">
<span style="float: left">{{ item.materialCode }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.materialName }}</span>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="操作员" prop="operator"> <el-form-item label="操作员" prop="operator">
@@ -39,23 +48,26 @@
border border
header-cell-class-name="el-table-header-cell" header-cell-class-name="el-table-header-cell"
highlight-current-row highlight-current-row
@sort-change="sortChange"> @sort-change="sortChange"
<el-table-column prop="id" label="主键ID" align="center" v-if="columns.showColumn('id')" /> :default-sort = "{prop: 'createdTime', order: 'descending'}">
<el-table-column prop="inboundNo" label="入库单号" align="left" :show-overflow-tooltip="true" v-if="columns.showColumn('inboundNo')" /> <!-- <el-table-column prop="id" label="主键ID" align="center" v-if="columns.showColumn('id')" /> -->
<el-table-column prop="materialCode" label="物料编码" align="left" :show-overflow-tooltip="true" v-if="columns.showColumn('materialCode')" /> <el-table-column prop="createdTime" sortable label="创建时间" align="center" v-if="columns.showColumn('createdTime')" />
<el-table-column prop="materialName" label="物料名称" align="left" :show-overflow-tooltip="true" v-if="columns.showColumn('materialName')" /> <el-table-column prop="inboundNo" label="入库单号" align="left" v-if="columns.showColumn('inboundNo')" />
<el-table-column prop="locationCode" label="库位编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationCode')" /> <el-table-column prop="materialCode" label="物料编码" align="left" v-if="columns.showColumn('materialCode')" />
<el-table-column prop="locationName" label="库位名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationName')" /> <el-table-column prop="materialName" label="物料名称" align="left" v-if="columns.showColumn('materialName')" />
<el-table-column prop="quantity" label="入库数量" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('quantity')" /> <el-table-column prop="locationCode" label="库位编码" align="center" v-if="columns.showColumn('locationCode')" />
<el-table-column prop="transactionType" label="入库类型" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('transactionType')"> <el-table-column prop="locationName" label="库位名称" align="center" v-if="columns.showColumn('locationName')" />
<el-table-column prop="quantity" label="入库数量" align="center" v-if="columns.showColumn('quantity')" />
<el-table-column prop="transactionType" label="入库类型" align="center" v-if="columns.showColumn('transactionType')">
<template #default="scope"> <template #default="scope">
<dict-tag :options="options.transactionTypeOptions" :value="scope.row.transactionType" /> <dict-tag :options="options.transactionTypeOptions" :value="scope.row.transactionType" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="locationCode" label="库编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationCode')" /> <el-table-column prop="warehouseCode" label="库编码" align="center" v-if="columns.showColumn('warehouseCode')" />
<el-table-column prop="batchNo" label="批次号" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('batchNo')" /> <el-table-column prop="batchNo" label="批次号" align="center" v-if="columns.showColumn('batchNo')" />
<el-table-column prop="operator" label="操作员" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('operator')" /> <el-table-column prop="operator" label="操作员" align="center" v-if="columns.showColumn('operator')" />
<el-table-column prop="createdTime" label="创建时间" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('createdTime')" /> <el-table-column prop="supplierCode" label="供应商编码" align="center" v-if="columns.showColumn('supplierCode')" />
<el-table-column prop="supplierName" label="供应商名称" align="center" v-if="columns.showColumn('supplierName')" />
<el-table-column label="操作" width="160"> <el-table-column label="操作" width="160">
<template #default="scope"> <template #default="scope">
<el-button <el-button
@@ -229,7 +241,7 @@ const queryParams = reactive({
createdTime: null createdTime: null
}) })
const columns = ref([ const columns = ref([
{ visible: true, align: 'center', type: '', prop: 'unit', label: '计量单位', showOverflowTooltip: true }, // { visible: true, align: 'center', type: '', prop: 'unit', label: '计量单位', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'createdTime', label: '创建时间', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'createdTime', label: '创建时间', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'remarks', label: '备注', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'remarks', label: '备注', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'operator', label: '操作员', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'operator', label: '操作员', showOverflowTooltip: true },
@@ -478,8 +490,6 @@ function handleLocationCodeChange() {
} }
} }
handleQuery() handleQuery()
getTypeOfWarehousingList() getTypeOfWarehousingList()
getMaterialCodeList() getMaterialCodeList()

View File

@@ -6,14 +6,24 @@
<template> <template>
<div> <div>
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent> <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
<el-form-item label="出库单号" prop="outboundNo"> <el-form-item label="出库单号" prop="outboundNo">
<el-input v-model="queryParams.outboundNo" placeholder="请输入出库单号" /> <el-input v-model="queryParams.outboundNo" placeholder="请输入出库单号" />
</el-form-item> </el-form-item>
<el-form-item label="物料编码" prop="materialCode"> <el-form-item label="物料编码" prop="materialCode">
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" /> <el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" />
</el-form-item> </el-form-item>
<el-form-item label="创建日期" prop="createdTime"> <el-form-item label="创建日期" prop="createdTime">
<el-date-picker v-model="queryParams.createdTime" type="date" placeholder="选择日期"value-format="YYYY-MM-DD"> </el-date-picker> <el-date-picker
v-model="queryParams.createdTime"
type="daterange"
:shortcuts="dateOptions"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
placeholder="请选择添加时间"
value-format="YYYY-MM-DD HH:mm:ss"
align="right">
</el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button> <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
@@ -37,27 +47,28 @@
border border
header-cell-class-name="el-table-header-cell" header-cell-class-name="el-table-header-cell"
highlight-current-row highlight-current-row
@sort-change="sortChange"> @sort-change="sortChange"
<el-table-column prop="id" label="主键ID" align="center" v-if="columns.showColumn('id')" /> :default-sort="{ prop: 'createdTime', order: 'descending' }">
<el-table-column prop="outboundNo" label="出库单号" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('outboundNo')" /> <!-- <el-table-column prop="id" label="主键ID" align="center" v-if="columns.showColumn('id')" /> -->
<el-table-column prop="materialCode" label="物料编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('materialCode')" /> <el-table-column prop="createdTime" sortable label="创建时间" align="center" v-if="columns.showColumn('createdTime')" />
<el-table-column prop="materialName" label="物料名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('materialName')" /> <el-table-column prop="outboundNo" label="出库单号" align="center" v-if="columns.showColumn('outboundNo')" />
<el-table-column prop="warehouseCode" label="仓库编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('warehouseCode')" /> <el-table-column prop="materialCode" label="物料编码" align="center" v-if="columns.showColumn('materialCode')" />
<el-table-column prop="warehouseName" label="仓库名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('warehouseName')" /> <el-table-column prop="materialName" label="物料名称" align="center" v-if="columns.showColumn('materialName')" />
<el-table-column prop="locationCode" label="库编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationCode')" /> <el-table-column prop="warehouseCode" label="库编码" align="center" v-if="columns.showColumn('warehouseCode')" />
<el-table-column prop="locationName" label="库名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationName')" /> <el-table-column prop="warehouseName" label="库名称" align="center" v-if="columns.showColumn('warehouseName')" />
<el-table-column prop="locationCode" label="库位编码" align="center" v-if="columns.showColumn('locationCode')" />
<el-table-column prop="locationName" label="库位名称" align="center" v-if="columns.showColumn('locationName')" />
<el-table-column prop="quantity" label="出库数量" align="center" v-if="columns.showColumn('quantity')" /> <el-table-column prop="quantity" label="出库数量" align="center" v-if="columns.showColumn('quantity')" />
<el-table-column prop="unit" label="计量单位" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('unit')" /> <el-table-column prop="unit" label="计量单位" align="center" v-if="columns.showColumn('unit')" />
<el-table-column prop="transactionType" label="出库类型" align="center" v-if="columns.showColumn('transactionType')"> <el-table-column prop="transactionType" label="出库类型" align="center" v-if="columns.showColumn('transactionType')">
<template #default="scope"> <template #default="scope">
<dict-tag :options="options.transactionTypeOptions" :value="scope.row.transactionType" /> <dict-tag :options="options.transactionTypeOptions" :value="scope.row.transactionType" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="batchNo" label="批次号" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('batchNo')" /> <el-table-column prop="batchNo" label="批次号" align="center" v-if="columns.showColumn('batchNo')" />
<el-table-column prop="orderNo" label="关联订单号" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('orderNo')" /> <el-table-column prop="orderNo" label="关联订单号" align="center" v-if="columns.showColumn('orderNo')" />
<el-table-column prop="operator" label="操作员" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('operator')" /> <el-table-column prop="operator" label="操作员" align="center" v-if="columns.showColumn('operator')" />
<el-table-column prop="remarks" label="备注" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('remarks')" /> <el-table-column prop="remarks" label="备注" align="center" v-if="columns.showColumn('remarks')" />
<el-table-column prop="createdTime" label="创建时间" :show-overflow-tooltip="true" v-if="columns.showColumn('createdTime')" />
<el-table-column label="操作" width="160"> <el-table-column label="操作" width="160">
<template #default="scope"> <template #default="scope">
<el-button <el-button
@@ -180,8 +191,7 @@
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="创建时间" prop="createdTime"> <el-form-item label="创建时间" prop="createdTime">
<el-date-picker v-model="form.createdTime" type="date" placeholder="选择日期时间" value-format="YYYY-MM-DD"> <el-date-picker v-model="form.createdTime" type="date" placeholder="选择日期时间" value-format="YYYY-MM-DD"> </el-date-picker>
</el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -202,6 +212,7 @@ import {
updateMmRecordOutbound, updateMmRecordOutbound,
getMmRecordOutbound getMmRecordOutbound
} from '@/api/materialManagement/productionMaterial/mmrecordoutbound.js' } from '@/api/materialManagement/productionMaterial/mmrecordoutbound.js'
import dateOptions from '@/utils/dateOptions.js'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const ids = ref([]) const ids = ref([])
const loading = ref(false) const loading = ref(false)
@@ -213,7 +224,8 @@ const queryParams = reactive({
sortType: 'asc' sortType: 'asc'
}) })
const columns = ref([ const columns = ref([
{ visible: true, align: 'center', type: '', prop: 'id', label: '主键ID' }, // { visible: true, align: 'center', type: '', prop: 'id', label: '主键ID' },
{ visible: true, align: 'center', type: '', prop: 'createdTime', label: '创建时间', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'outboundNo', label: '出库单号', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'outboundNo', label: '出库单号', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'materialCode', label: '物料编码', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'materialCode', label: '物料编码', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'materialName', label: '物料名称', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'materialName', label: '物料名称', showOverflowTooltip: true },
@@ -221,14 +233,13 @@ const columns = ref([
{ visible: true, align: 'center', type: '', prop: 'warehouseName', label: '仓库名称', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'warehouseName', label: '仓库名称', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'locationCode', label: '库位编码', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'locationCode', label: '库位编码', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'locationName', label: '库位名称', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'locationName', label: '库位名称', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'quantity', label: '出库数量' }, { visible: true, align: 'center', type: '', prop: 'quantity', label: '出库数量' },
{ visible: false, align: 'center', type: '', prop: 'unit', label: '计量单位', showOverflowTooltip: true }, { visible: false, align: 'center', type: '', prop: 'unit', label: '计量单位', showOverflowTooltip: true },
{ visible: false, align: 'center', type: 'dict', prop: 'transactionType', label: '出库类型', showOverflowTooltip: true }, { visible: true, align: 'center', type: 'dict', prop: 'transactionType', label: '出库类型', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'batchNo', label: '批次号', showOverflowTooltip: true }, { visible: false, align: 'center', type: '', prop: 'batchNo', label: '批次号', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'orderNo', label: '关联订单号', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'orderNo', label: '关联订单号', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'operator', label: '操作员', showOverflowTooltip: true }, { visible: true, align: 'center', type: '', prop: 'operator', label: '操作员', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'remarks', label: '备注', showOverflowTooltip: true }, { visible: false, align: 'center', type: '', prop: 'remarks', label: '备注', showOverflowTooltip: true }
{ visible: false, align: 'center', type: '', prop: 'createdTime', label: '创建时间', showOverflowTooltip: true }
//{ visible: false, prop: 'actions', label: '操作', type: 'slot', width: '160' } //{ visible: false, prop: 'actions', label: '操作', type: 'slot', width: '160' }
]) ])
const total = ref(0) const total = ref(0)