Files
kunshan-bzfm-mes-vue/src/views/materialManagement/productionMaterial/MmInventory.vue
Tom 3c9c5f8f07 fix(物料管理): 修正出入库记录表单日期选择器类型及选项绑定
- 将日期选择器从datetime类型改为date类型,统一使用YYYY-MM-DD格式
- 修正入库记录表单中入库类型选项的绑定字段
- 添加出库记录查询表单的创建日期筛选条件
- 更新注释说明为"获取出入库类型列表"
2025-12-31 10:09:24 +08:00

620 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Descripttion: (库存表/mm_inventory)
* @Author: (mes)
* @Date: (2025-12-24)
-->
<template>
<div>
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
<!-- 库存查询功能按物料编码仓库名称 -->
<el-form-item label="物料编码" prop="materialCode">
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" />
</el-form-item>
<el-form-item label="仓库名称" prop="warehouseName">
<el-input v-model="queryParams.warehouseName" placeholder="请输入仓库名称" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
</el-form-item>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['mminventory:storage']" plain icon="plus" @click="handleStorage">
{{ $t('btn.storage') }}
</el-button>
<el-button type="primary" v-hasPermi="['mminventory:outStorage']" plain icon="plus" @click="handleOutStorage">
{{ $t('btn.outStorage') }}
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table
:data="dataList"
v-loading="loading"
ref="table"
border
header-cell-class-name="el-table-header-cell"
highlight-current-row
@sort-change="sortChange">
<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="warehouseCode" label="仓库编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('warehouseCode')" />
<el-table-column prop="warehouseName" label="仓库名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('warehouseName')" />
<el-table-column prop="locationCode" label="库位编码" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationCode')" />
<el-table-column prop="locationName" label="库位名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('locationName')" />
<el-table-column prop="batchNo" label="批次号" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('batchNo')" />
<el-table-column prop="currentQty" label="当前库存量" align="center" v-if="columns.showColumn('currentQty')" />
<el-table-column prop="unit" label="计量单位" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('unit')" />
<el-table-column prop="productionDate" label="生产日期" :show-overflow-tooltip="true" v-if="columns.showColumn('productionDate')" />
<el-table-column prop="expiryDate" label="有效期至" :show-overflow-tooltip="true" v-if="columns.showColumn('expiryDate')" />
<el-table-column prop="lastUpdatedTime" label="最后更新时间" :show-overflow-tooltip="true" v-if="columns.showColumn('lastUpdatedTime')" />
<el-table-column prop="createdTime" label="创建时间" :show-overflow-tooltip="true" v-if="columns.showColumn('createdTime')" />
<el-table-column label="操作" width="160">
<template #default="scope">
<el-button
type="success"
size="small"
icon="edit"
title="编辑"
v-hasPermi="['mminventory:edit']"
@click="handleUpdate(scope.row)"></el-button>
<el-button
type="danger"
size="small"
icon="delete"
title="删除"
v-hasPermi="['mminventory:delete']"
@click="handleDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 入库单dialog -->
<el-dialog :title="title" :lock-scroll="false" v-model="openStorage">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :lg="12" v-if="opertype != 1">
<el-form-item label="主键ID" prop="id">
<el-input-number v-model.number="form.id" controls-position="right" placeholder="请输入主键ID" :disabled="true" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="物料编码" prop="materialCode">
<el-select v-model="form.materialCode" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.materialCode" :label="item.materialCode" :value="item.materialCode"> </el-option>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :lg="12">
<el-form-item label="仓库编码" prop="warehouseCode">
<el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
</el-form-item>
</el-col> -->
<el-col :lg="12">
<el-form-item label="物料分类编码" prop="categoryCode">
<el-input v-model="form.categoryCode" placeholder="请输入物料分类编码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="物料名称" prop="materialName">
<el-input v-model="form.materialName" placeholder="请输入物料名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="规格型号" prop="specificationModel">
<el-input v-model="form.specificationModel" placeholder="请输入规格型号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="入库类型" prop="transactionType">
<el-select v-model="form.transactionType" filterable placeholder="请选择">
<el-option v-for="item in transactionOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="入库数量" prop="quantity">
<el-input v-model="form.quantity" placeholder="请输入入库数量" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="入库单号" prop="inboundNo">
<el-input v-model="form.inboundNo" placeholder="请输入入库单号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="仓库编码" prop="warehouseCode">
<el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="库位编码" prop="locationCode">
<el-select v-model="form.locationCode" filterable placeholder="请选择">
<el-option v-for="item in locationOptions" :key="item.locationCode" :label="item.locationCode" :value="item.locationCode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="批次号" prop="batchNo">
<el-input v-model="form.batchNo" placeholder="请输入批次号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="当前库存量" prop="currentQty">
<el-input v-model="form.currentQty" placeholder="请输入当前库存量" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="计量单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入计量单位" />
</el-form-item>
</el-col>
<!-- <el-col :lg="12">
<el-form-item label="生产日期" prop="productionDate">
<el-date-picker v-model="form.productionDate" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="有效期至" prop="expiryDate">
<el-date-picker v-model="form.expiryDate" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="最后更新时间" prop="lastUpdatedTime">
<el-date-picker v-model="form.lastUpdatedTime" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col> -->
<el-col :lg="12">
<el-form-item label="创建时间" prop="createdTime">
<el-date-picker v-model="form.createdTime" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer v-if="opertype != 3">
<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
<el-button type="primary" @click="submitFormStorage">{{ $t('btn.submit') }}</el-button>
</template>
</el-dialog>
<!-- 出库单dialog -->
<el-dialog :title="title" :lock-scroll="false" v-model="openOutStorage">
<el-form ref="formRef" :model="form" :rules="rulesOut" label-width="100px">
<el-row :gutter="20">
<el-col :lg="12" v-if="opertype != 1">
<el-form-item label="主键ID" prop="id">
<el-input-number v-model.number="form.id" controls-position="right" placeholder="请输入主键ID" :disabled="true" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="物料编码" prop="materialCode">
<el-select v-model="form.materialCode" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.materialCode" :label="item.materialCode" :value="item.materialCode"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="物料分类编码" prop="categoryCode">
<el-input v-model="form.categoryCode" placeholder="请输入物料分类编码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="物料名称" prop="materialName">
<el-input v-model="form.materialName" placeholder="请输入物料名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="规格型号" prop="specificationModel">
<el-input v-model="form.specificationModel" placeholder="请输入规格型号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="出库类型" prop="transactionType">
<el-select v-model="form.transactionType" filterable placeholder="请选择">
<el-option v-for="item in transactionOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="出库数量" prop="quantity">
<el-input v-model="form.quantity" placeholder="请输入入库数量" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="出库单号" prop="outboundNo">
<el-input v-model="form.outboundNo" placeholder="请输入出库单号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="仓库编码" prop="warehouseCode">
<el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="库位编码" prop="locationCode">
<el-select v-model="form.locationCode" filterable placeholder="请选择">
<el-option v-for="item in locationOptions" :key="item.locationCode" :label="item.locationCode" :value="item.locationCode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="批次号" prop="batchNo">
<el-input v-model="form.batchNo" placeholder="请输入批次号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="当前库存量" prop="currentQty">
<el-input v-model="form.currentQty" placeholder="请输入当前库存量" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="计量单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入计量单位" />
</el-form-item>
</el-col>
<!-- <el-col :lg="12">
<el-form-item label="生产日期" prop="productionDate">
<el-date-picker v-model="form.productionDate" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="有效期至" prop="expiryDate">
<el-date-picker v-model="form.expiryDate" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="最后更新时间" prop="lastUpdatedTime">
<el-date-picker v-model="form.lastUpdatedTime" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col> -->
<el-col :lg="12">
<el-form-item label="创建时间" prop="createdTime">
<el-date-picker v-model="form.createdTime" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer v-if="opertype != 3">
<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
<el-button type="primary" @click="submitFormOutStorage">{{ $t('btn.submit') }}</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup name="mminventory">
import {
listMmInventory,
addMmInventory,
delMmInventory,
updateMmInventory,
getMmInventory,
getMaterialOption,
getTransactionOption,
createInboundReceipt,
getLocationOption,
createOutboundReceipt,
} from '@/api/materialManagement/productionMaterial/mminventory.js'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
sort: '',
sortType: 'asc',
materialCode: '',
warehouseName: '',
locationCode: '',
transactionType: ''
})
const columns = ref([
{ visible: true, align: 'center', type: '', prop: 'id', label: '主键ID' },
{ visible: true, align: 'center', type: '', prop: 'materialCode', label: '物料编码', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'warehouseCode', 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: 'locationName', label: '库位名称', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'batchNo', label: '批次号', showOverflowTooltip: true },
{ visible: true, align: 'center', type: '', prop: 'currentQty', label: '当前库存量' },
{ visible: false, align: 'center', type: '', prop: 'unit', label: '计量单位', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'productionDate', label: '生产日期', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'expiryDate', label: '有效期至', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'lastUpdatedTime', label: '最后更新时间', showOverflowTooltip: true },
{ visible: false, align: 'center', type: '', prop: 'createdTime', label: '创建时间', showOverflowTooltip: true }
//{ visible: false, prop: 'actions', label: '操作', type: 'slot', width: '160' }
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
var dictParams = []
function getList() {
loading.value = true
listMmInventory(queryParams).then((res) => {
const { code, data } = res
if (code == 200) {
dataList.value = data.result
total.value = data.totalNum
loading.value = false
}
})
}
// 查询
function handleQuery() {
queryParams.pageNum = 1
getList()
}
// 重置查询操作
function resetQuery() {
proxy.resetForm('queryRef')
handleQuery()
}
// 自定义排序
function sortChange(column) {
var sort = undefined
var sortType = undefined
if (column.prop != null && column.order != null) {
sort = column.prop
sortType = column.order
}
queryParams.sort = sort
queryParams.sortType = sortType
handleQuery()
}
/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const openStorage = ref(false)
const openOutStorage = ref(false)
const state = reactive({
single: true,
multiple: true,
form: {},
rules: {
materialCode: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
transactionType: [{ required: true, message: '入库类型不能为空', trigger: 'blur' }],
quantity: [{ required: true, message: '入库数量不能为空', trigger: 'blur' }],
warehouseCode: [{ required: true, message: '仓库编码不能为空', trigger: 'blur' }],
inboundNo: [{ required: true, message: '入库单号不能为空', trigger: 'blur' }],
},
rulesOut: {
materialCode: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
transactionType: [{ required: true, message: '入库类型不能为空', trigger: 'blur' }],
quantity: [{ required: true, message: '入库数量不能为空', trigger: 'blur' }],
warehouseCode: [{ required: true, message: '仓库编码不能为空', trigger: 'blur' }],
outboundNo: [{ required: true, message: '出库单号不能为空', trigger: 'blur' }],
},
options: {},
transactionOptions: {},
warehouseOptions: {},
locationOptions: []
})
const { form, rules, rulesOut, options, transactionOptions, warehouseOptions, locationOptions, single, multiple } = toRefs(state)
// 关闭dialog
function cancel() {
openStorage.value = false
openOutStorage.value = false
reset()
}
// 重置表单
function reset() {
form.value = {
id: null,
materialCode: null,
warehouseCode: null,
warehouseName: null,
locationCode: null,
locationName: null,
batchNo: null,
currentQty: null,
unit: null,
productionDate: null,
expiryDate: null,
lastUpdatedTime: null,
createdTime: null
}
proxy.resetForm('formRef')
}
// 填入库单操作
function handleStorage() {
reset()
openStorage.value = true
title.value = '填写入库单信息'
opertype.value = 1
getMaterialCodeList()
getTypeOfWarehousingList()
getLocationOptionList()
}
// 出库操作
function handleOutStorage() {
reset()
openOutStorage.value = true
title.value = '填写出库单信息'
opertype.value = 1
getMaterialCodeList()
getTypeOfWarehousingList()
getLocationOptionList()
}
// 修改按钮操作
function handleUpdate(row) {
reset()
const id = row.id || ids.value
getMmInventory(id).then((res) => {
const { code, data } = res
if (code == 200) {
openOutStorage.value = true
title.value = '修改库存表'
opertype.value = 2
form.value = {
...data
}
}
})
}
// 添加&修改 表单提交
function submitFormStorage() {
console.log(form.value, "==========================")
proxy.$refs['formRef'].validate((valid) => {
if (valid) {
if (form.value.id != undefined && opertype.value === 2) {
reateInboundReceipt(form.value).then((res) => {
proxy.$modal.msgSuccess('修改成功')
openStorage.value = false
getList()
})
} else {
createInboundReceipt(form.value).then((res) => {
proxy.$modal.msgSuccess('新增成功')
openStorage.value = false
getList()
})
}
}
})
}
function submitFormOutStorage() {
proxy.$refs['formRef'].validate((valid) => {
if (valid) {
if (form.value.id != undefined && opertype.value === 2) {
reateInboundReceipt(form.value).then((res) => {
proxy.$modal.msgSuccess('修改成功')
openOutStorage.value = false
getList()
})
} else {
createOutboundReceipt(form.value).then((res) => {
proxy.$modal.msgSuccess('新增成功')
openOutStorage.value = false
getList()
})
}
}
})
}
// 删除按钮操作
function handleDelete(row) {
const Ids = row.id || ids.value
proxy
.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项?', '警告', {
confirmButtonText: proxy.$t('common.ok'),
cancelButtonText: proxy.$t('common.cancel'),
type: 'warning'
})
.then(function () {
return delMmInventory(Ids)
})
.then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
})
}
// 物料编码列表
function getMaterialCodeList() {
try {
getMaterialOption('materialCode').then((res) => {
const { code, data } = res
if (code == 200) {
state.options = data
}
})
} catch (error) {
proxy.$modal.msgError(error.message)
}
}
// 获取出入库类型列表
function getTypeOfWarehousingList() {
try {
getTransactionOption('typeOfWarehousing').then((res) => {
const { code, data } = res
if (code == 200) {
state.transactionOptions = data
}
})
} catch (error) {
proxy.$modal.msgError(error.message)
}
}
// 获取库位编码列表
function getLocationOptionList() {
try {
getLocationOption('warehouseCode').then((res) => {
const { code, data } = res
if (code == 200) {
state.locationOptions = data
}
})
} catch (error) {
proxy.$modal.msgError(error.message)
}
}
handleQuery()
</script>