XiaChengXu/202502-Wms-NanTongYaChi
0
0
Fork 0
forked from BaoKaiWms/202502-Wms-NanTongYaChi
Code Pull Requests Activity

1. 添加入库单接口, 添加入库单界面

Browse Source 
2. 添加出库单接口, 添加出库单界面
This commit is contained in:
李宇奇 2025-03-29 19:26:53 +08:00
parent a9960293d2
commit 144d22cb6f
8 changed files with 1167 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
wms_serve_nantong_yachi/src/main/java/com/wms_main/controller/wms/OrderController.java Normal file
View File

@ -0,0 +1,42 @@
package com.wms_main.controller.wms;
import com.wms_main.model.dto.query.OrderInQuery;
import com.wms_main.model.dto.request.wms.OrderInRequest;
import com.wms_main.model.dto.request.wms.OrderOutRequest;
import com.wms_main.model.dto.response.wms.BaseWmsApiResponse;
import com.wms_main.model.po.TAppOrderIn;
import com.wms_main.service.controller.IOrderControllerService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@ResponseBody
@CrossOrigin
@RequiredArgsConstructor
@RequestMapping("/wms/order")
public class OrderController {
final IOrderControllerService orderControllerService;
@PostMapping("/orderIn")
public BaseWmsApiResponse orderIn(@RequestBody OrderInRequest request) {
return orderControllerService.addOrderIn(request);
}
@PostMapping("/orderOut")
public BaseWmsApiResponse orderOut(@RequestBody OrderOutRequest request) {
return orderControllerService.addOrderOut(request);
}
@PostMapping("/getOrderIns")
public List<TAppOrderIn> getOrderIns(@RequestBody OrderInQuery query) {
return orderControllerService.getOrderIns(query);
}
@PostMapping("/updateOrderIn")
public BaseWmsApiResponse updateOrderIn(@RequestParam String recordId, @RequestParam String orderStatus) {
return orderControllerService.updateOrderIn(recordId, orderStatus);
}
}

19
wms_serve_nantong_yachi/src/main/java/com/wms_main/service/controller/IOrderControllerService.java Normal file
View File

@ -0,0 +1,19 @@
package com.wms_main.service.controller;
import com.wms_main.model.dto.query.OrderInQuery;
import com.wms_main.model.dto.request.wms.OrderInRequest;
import com.wms_main.model.dto.request.wms.OrderOutRequest;
import com.wms_main.model.dto.response.wms.BaseWmsApiResponse;
import com.wms_main.model.po.TAppOrderIn;
import java.util.List;
public interface IOrderControllerService {
BaseWmsApiResponse addOrderIn(OrderInRequest request);
BaseWmsApiResponse addOrderOut(OrderOutRequest request);
List<TAppOrderIn> getOrderIns(OrderInQuery query);
BaseWmsApiResponse updateOrderIn(String recordId, String orderStatus);
}

121
wms_serve_nantong_yachi/src/main/java/com/wms_main/service/controller/serviceImpl/OrderControllerServiceImpl.java Normal file
View File

@ -0,0 +1,121 @@
package com.wms_main.service.controller.serviceImpl;
import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.wms_main.constant.enums.wms.OrderStatusEnum;
import com.wms_main.dao.ITAppOrderInService;
import com.wms_main.dao.ITAppOrderOutService;
import com.wms_main.model.dto.query.OrderInQuery;
import com.wms_main.model.dto.request.wms.OrderInRequest;
import com.wms_main.model.dto.request.wms.OrderOutRequest;
import com.wms_main.model.dto.response.wms.BaseWmsApiResponse;
import com.wms_main.model.dto.response.ycwms.YcwmsResponse;
import com.wms_main.model.po.TAppOrderIn;
import com.wms_main.model.po.TAppOrderOut;
import com.wms_main.repository.utils.StringUtils;
import com.wms_main.repository.utils.UUIDUtils;
import com.wms_main.service.controller.IOrderControllerService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import java.sql.Wrapper;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;
@Service
@Slf4j
@RequiredArgsConstructor
public class OrderControllerServiceImpl implements IOrderControllerService {
private final ITAppOrderInService appOrderInService;
private final ITAppOrderOutService appOrderOutService;
@Override
public BaseWmsApiResponse addOrderIn(OrderInRequest request) {
log.info("入库单请求参数{}", JSON.toJSON(request));
if (request == null) return BaseWmsApiResponse.error("参数缺少");
if (StringUtils.isEmpty(request.getVehicleNo()) || StringUtils.isEmpty(request.getVehicleSize())
|| StringUtils.isEmpty(request.getInStand()) || request.getGoodsDetail() == null || request.getGoodsDetail().isEmpty()) {
return BaseWmsApiResponse.error("参数错误");
}
List<TAppOrderIn> orderInList = new ArrayList<>();
for (var goodsDetail : request.getGoodsDetail()) {
if (goodsDetail == null || goodsDetail.getQuantity() == null) {
return BaseWmsApiResponse.error("参数错误");
}
TAppOrderIn orderIn = new TAppOrderIn();
orderIn.setRecordId(UUIDUtils.getNewUUID());
orderIn.setOrderId(UUIDUtils.getNewUUID());
orderIn.setVehicleNo(request.getVehicleNo());
orderIn.setVehicleSize(request.getVehicleSize());
orderIn.setInStand(request.getInStand());
orderIn.setGoodsId(goodsDetail.getGoodsId());
orderIn.setGoodsName(goodsDetail.getGoodsName());
orderIn.setBatch(goodsDetail.getBatch());
orderIn.setGoodsType(goodsDetail.getGoodsType());
orderIn.setSpecification(goodsDetail.getSpecification());
orderIn.setQuantity(goodsDetail.getQuantity());
orderIn.setGoodsDesc(goodsDetail.getGoodsDesc());
orderIn.setOrderStatus(OrderStatusEnum.CREATE.getCode());
orderIn.setCreateTime(LocalDateTime.now());
orderIn.setUpdateTime(LocalDateTime.now());
orderInList.add(orderIn);
}
if (!appOrderInService.saveBatch(orderInList)) {
return BaseWmsApiResponse.error("入库单保存失败，请稍后再试");
}
return BaseWmsApiResponse.success();
}
@Override
public BaseWmsApiResponse addOrderOut(OrderOutRequest request) {
log.info("出库单请求参数{}", JSON.toJSON(request));
if (request == null) return BaseWmsApiResponse.error("参数错误");
if (request.getQuantity() == null
|| (StringUtils.isEmpty(request.getGoodsId()) && request.getBatch() == null && request.getSpecification() == null)) {
return BaseWmsApiResponse.error("参数错误");
}
TAppOrderOut orderOut = new TAppOrderOut();
orderOut.setRecordId(UUIDUtils.getNewUUID());
orderOut.setOrderId(UUIDUtils.getNewUUID());
orderOut.setGoodsId(request.getGoodsId());
orderOut.setBatch(request.getBatch());
orderOut.setSpecification(request.getSpecification());
orderOut.setQuantity(request.getQuantity());
orderOut.setOrderStatus(OrderStatusEnum.CREATE.getCode());
orderOut.setCreateTime(LocalDateTime.now());
orderOut.setUpdateTime(LocalDateTime.now());
if (!appOrderOutService.save(orderOut)) {
return BaseWmsApiResponse.error("出库单保存失败，请稍后再试");
}
return BaseWmsApiResponse.success();
}
@Override
public List<TAppOrderIn> getOrderIns(OrderInQuery query) {
if (query == null) return null;
else if (StringUtils.isEmpty(query.getVehicleNo()) && StringUtils.isEmpty(query.getVehicleSize()) && StringUtils.isEmpty(query.getInStand()) && query.getOrderStatus() == null) {
return appOrderInService.list();
} else {
return appOrderInService.list(new LambdaQueryWrapper<TAppOrderIn>().eq(TAppOrderIn::getVehicleNo, query.getVehicleNo())
.eq(TAppOrderIn::getVehicleSize, query.getVehicleSize())
.eq(TAppOrderIn::getInStand, query.getInStand())
.eq(TAppOrderIn::getOrderStatus, query.getOrderStatus()));
}
}
@Override
public BaseWmsApiResponse updateOrderIn(String recordId, String orderStatus) {
if (StringUtils.isEmpty(recordId) || StringUtils.isEmpty(orderStatus)) {
return BaseWmsApiResponse.error("参数缺失");
} else {
appOrderInService.update(
new LambdaUpdateWrapper<TAppOrderIn>()
.set(TAppOrderIn::getOrderStatus, orderStatus)
.eq(TAppOrderIn::getRecordId, recordId));
return BaseWmsApiResponse.success();
}
}
}

41
wms_web_nantong_yachi/src/api/orderIn.js Normal file
View File

@ -0,0 +1,41 @@
import request from "@/http/request";
/**
* 提交入库单
*/
const submitOrderInForm = (params) => {
return request({
url: '/order/orderIn',
method: 'post',
data: params
})
}
/**
* 查询入库单列表
*/
const getOrderIns = (params) => {
return request({
url: '/order/getOrderIns',
method: 'post',
data: params
})
}
// 修改update方法
const updateOrderIn = (recordId, orderStatus) => {
return request({
url: '/order/updateOrderIn',
method: 'post',
params: { // 使用params传递URL参数
recordId,
orderStatus
}
})
}
export {
submitOrderInForm,
getOrderIns,
updateOrderIn
}

16
wms_web_nantong_yachi/src/api/orderOut.js Normal file
View File

@ -0,0 +1,16 @@
import request from "@/http/request";
/**
* 提交入库单
*/
const submitOrderOutForm = (params) => {
return request({
url: '/order/orderOut',
method: 'post',
data: params
})
}
export {
submitOrderOutForm
}

722
wms_web_nantong_yachi/src/layout/orderIn.vue Normal file
View File

@ -0,0 +1,722 @@
<template>
<el-config-provider :locale="zhCn">
<el-container class="content">
<div class="work-area">
<fieldset class="main-area">
<legend>入库单信息</legend>
<el-form ref="orderInFormRef" :model="orderInForm" :rules="rules" label-width="100px"
:label-position="labelPosition" status-icon>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="8" :lg="7">
<el-form-item label="料箱号" prop="vehicleNo">
<el-input v-model="orderInForm.vehicleNo" clearable @keyup.enter="handleEnter('vehicleSize')"
ref="vehicleNoRef"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="7">
<el-form-item label="料箱尺寸" prop="vehicleSize">
<el-input v-model="orderInForm.vehicleSize" clearable @keyup.enter="handleEnter('inStand')"
ref="vehicleSizeRef"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="7">
<el-form-item label="入库站台" prop="inStand">
<el-input v-model="orderInForm.inStand" clearable @keyup.enter="handleEnter('clientId')"
ref="inStandRef"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</fieldset>
<fieldset class="goods-detail-area">
<legend>物料明细</legend>
<div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
<div>
<el-button type="primary" @click="addGoodsDetail">添加物料</el-button>
<el-button type="danger" @click="clearGoodsDetail">清空物料</el-button>
</div>
<div>
<el-button type="success" @click="submitOrderIn">提交入库单</el-button>
</div>
</div>
<div class="table-area">
<el-table :data="orderInForm.goodsDetail" border stripe :max-height="maxHeight"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center', 'padding': '12px 0' }"
class="table-class" width="100%" :row-style="{ height: '60px' }">
<el-table-column prop="goodsId" label="物料编号" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.goodsId" placeholder="请输入物料编号" size="small"/>
</template>
</el-table-column>
<el-table-column prop="goodsName" label="物料名称" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.goodsName" placeholder="请输入物料名称" size="small"/>
</template>
</el-table-column>
<el-table-column prop="batch" label="批次" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.batch" placeholder="请输入批次" size="small"/>
</template>
</el-table-column>
<el-table-column prop="goodsType" label="物料类型" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.goodsType" placeholder="请输入物料类型" size="small"/>
</template>
</el-table-column>
<el-table-column prop="specification" label="规格" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.specification" placeholder="请输入规格" size="small"/>
</template>
</el-table-column>
<el-table-column prop="quantity" label="数量" min-width="120">
<template #default="scope">
<el-input-number v-model="scope.row.quantity" :min="1" :controls="false" size="small"/>
</template>
</el-table-column>
<el-table-column prop="goodsDesc" label="物料描述" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.goodsDesc" placeholder="请输入物料描述" size="small"/>
</template>
</el-table-column>
<el-table-column label="操作" width="80" fixed="right">
<template #default="scope">
<el-button type="danger" size="small" @click="removeGoodsDetail(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</fieldset>
<!-- 查询区域 -->
<fieldset class="query-area">
<legend>入库单查询</legend>
<el-form ref="queryFormRef" :model="queryForm" :label-position="labelPosition" label-width="120px"
status-icon>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<el-form-item label="料箱号">
<el-input v-model="queryForm.vehicleNo" clearable/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<el-form-item label="料箱尺寸">
<el-input v-model="queryForm.vehicleSize" clearable/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<el-form-item label="入库站台">
<el-input v-model="queryForm.inStand" clearable/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<el-form-item label="订单状态">
<el-select v-model="queryForm.orderStatus" clearable placeholder="请选择订单状态">
<el-option label="全部" value=""/>
<el-option label="创建" :value="0"/>
<el-option label="运行中" :value="1"/>
<el-option label="完成" :value="2"/>
<el-option label="取消" :value="3"/>
<el-option label="错误" :value="4"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24" style="text-align: center; margin-top: 10px;">
<el-button type="primary" @click="queryOrderIns">查询入库单</el-button>
<el-button type="warning" @click="resetQueryForm">重置查询</el-button>
</el-col>
</el-row>
</el-form>
</fieldset>
<!-- 查询结果表格 -->
<fieldset class="query-result-area">
<legend>入库单列表</legend>
<div class="query-table-container">
<el-table :data="orderInsList"
border stripe
:max-height="maxHeight * 0.8"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
highlight-current-row
class="query-result-table"
style="width: 100%; min-width: 2000px;"
:row-style="{ height: '60px' }"
:empty-text="'暂无查询数据，请在上方输入查询条件并点击查询按钮'">
<el-table-column type="index" width="60" fixed="left" label="序号"/>
<el-table-column prop="recordId" label="记录ID" min-width="180" fixed="left" show-overflow-tooltip/>
<el-table-column prop="orderId" label="订单ID" min-width="150" fixed="left" show-overflow-tooltip/>
<el-table-column prop="vehicleNo" label="料箱号" min-width="150" show-overflow-tooltip/>
<el-table-column prop="vehicleSize" label="料箱尺寸" min-width="150" show-overflow-tooltip/>
<el-table-column prop="inStand" label="入库站台" min-width="150" show-overflow-tooltip/>
<el-table-column prop="destination" label="目的地" min-width="150" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.destination || '暂无' }}
</template>
</el-table-column>
<el-table-column prop="clientId" label="客户端ID" min-width="150" show-overflow-tooltip/>
<el-table-column prop="goodsId" label="物料编号" min-width="150" show-overflow-tooltip/>
<el-table-column prop="goodsName" label="物料名称" min-width="200" show-overflow-tooltip/>
<el-table-column prop="batch" label="批次" min-width="150" show-overflow-tooltip/>
<el-table-column prop="goodsType" label="物料类型" min-width="150" show-overflow-tooltip/>
<el-table-column prop="specification" label="规格" min-width="150" show-overflow-tooltip/>
<el-table-column prop="quantity" label="数量" min-width="120" show-overflow-tooltip/>
<el-table-column prop="goodsDesc" label="物料描述" min-width="200" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.goodsDesc || '暂无' }}
</template>
</el-table-column>
<el-table-column prop="orderStatus" label="订单状态" min-width="120" show-overflow-tooltip>
<template #default="scope">
<el-tag
:type="scope.row.orderStatus === 0 ? 'success' : scope.row.orderStatus === 1 ? 'warning' : 'danger'">
{{ scope.row.orderStatus === 0 ? '正常' : scope.row.orderStatus === 1 ? '处理中' : '异常' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" min-width="180" show-overflow-tooltip>
<template #default="scope">
{{ formatDateTime(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column label="更新时间" min-width="180" show-overflow-tooltip>
<template #default="scope">
{{ formatDateTime(scope.row.updateTime) }}
</template>
</el-table-column>
<el-table-column label="完成时间" min-width="180" show-overflow-tooltip>
<template #default="scope">
{{ formatDateTime(scope.row.completeTime) }}
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.remark || '暂无' }}
</template>
</el-table-column>
<!-- 修改后 -->
<el-table-column label="操作" width="180" fixed="right">
<template #default="scope">
<div class="action-buttons">
<el-button
type="primary"
size="small"
@click="viewOrderInDetail(scope.row)"
class="btn-view"
>详情</el-button>
<el-button
type="warning"
size="small"
@click="openEditDialog(scope.row)"
class="btn-edit"
>编辑</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</fieldset>
<el-dialog v-model="responseDialogVisible" title="请求结果" width="500px">
<pre>{{ responseResult }}</pre>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="responseDialogVisible = false">确定</el-button>
</span>
</template>
</el-dialog>
<!-- 入库单详情对话框 -->
<el-dialog v-model="orderInDetailDialogVisible" title="入库单详情" width="70%">
<div v-if="currentOrderIn">
<h4>基本信息</h4>
<el-descriptions :column="3" border>
<el-descriptions-item label="记录ID">{{ currentOrderIn.recordId }}</el-descriptions-item>
<el-descriptions-item label="订单ID">{{ currentOrderIn.orderId }}</el-descriptions-item>
<el-descriptions-item label="料箱号">{{ currentOrderIn.vehicleNo }}</el-descriptions-item>
<el-descriptions-item label="料箱尺寸">{{ currentOrderIn.vehicleSize }}</el-descriptions-item>
<el-descriptions-item label="入库站台">{{ currentOrderIn.inStand }}</el-descriptions-item>
<el-descriptions-item label="目的地">{{ currentOrderIn.destination }}</el-descriptions-item>
<el-descriptions-item label="客户端ID">{{ currentOrderIn.clientId }}</el-descriptions-item>
<el-descriptions-item label="物料编号">{{ currentOrderIn.goodsId }}</el-descriptions-item>
<el-descriptions-item label="物料名称">{{ currentOrderIn.goodsName }}</el-descriptions-item>
<el-descriptions-item label="订单状态">
<el-tag
:type="currentOrderIn.orderStatus === 0 ? 'success' : currentOrderIn.orderStatus === 1 ? 'warning' : 'danger'">
{{ currentOrderIn.orderStatus === 0 ? '正常' : currentOrderIn.orderStatus === 1 ? '处理中' : '异常' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ currentOrderIn.createTime }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ currentOrderIn.updateTime }}</el-descriptions-item>
<el-descriptions-item label="完成时间">{{ currentOrderIn.completeTime }}</el-descriptions-item>
</el-descriptions>
</div>
</el-dialog>
<!-- 添加编辑状态对话框 -->
<el-dialog v-model="editDialogVisible" title="编辑入库单状态" width="30%">
<el-form :model="currentEditOrder" label-width="100px">
<el-form-item label="订单状态">
<el-select
v-model="currentEditOrder.orderStatus"
placeholder="请选择订单状态"
clearable
>
<el-option label="全部" value=""/>
<el-option label="创建" :value="0"/>
<el-option label="运行中" :value="1"/>
<el-option label="完成" :value="2"/>
<el-option label="取消" :value="3"/>
<el-option label="错误" :value="4"/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editDialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveOrderStatus">保存</el-button>
</span>
</template>
</el-dialog>
</div>
</el-container>
</el-config-provider>
</template>
<script setup>
import {reactive, ref, onMounted, nextTick, onBeforeUnmount} from 'vue'
import {ElMessage} from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {loading} from '@/utils/loading.js'
import {errorBox} from '@/utils/myMessageBox.js'
import {labelPosition} from '@/constant/form'
import {submitOrderInForm, getOrderIns, updateOrderIn} from '@/api/orderIn.js'
// 表单数据
const orderInFormRef = ref()
const orderInForm = reactive({
vehicleNo: '',
vehicleSize: '',
inStand: '',
goodsDetail: []
})
// 添加响应式变量
const editDialogVisible = ref(false)
const currentEditOrder = ref(null)
// 打开编辑对话框
const openEditDialog = (row) => {
currentEditOrder.value = { ...row }
editDialogVisible.value = true
}
// 查询表单数据
const queryFormRef = ref()
const queryForm = reactive({
vehicleNo: '',
vehicleSize: '',
inStand: '',
orderStatus: ''
})
// 表单规则
const rules = reactive({
vehicleNo: [{required: true, message: '请输入料箱号', trigger: 'blur'}],
vehicleSize: [{required: true, message: '请输入料箱尺寸', trigger: 'blur'}],
inStand: [{required: true, message: '请输入入库站台', trigger: 'blur'}],
})
// 引用DOM元素
const vehicleNoRef = ref()
const vehicleSizeRef = ref()
const inStandRef = ref()
// 响应结果对话框
const responseDialogVisible = ref(false)
const responseResult = ref({})
// 表格高度控制
let maxHeight = ref(window.innerHeight * 0.4)
// 查询结果相关
const orderInsList = ref([])
const orderInDetailDialogVisible = ref(false)
const currentOrderIn = ref(null)
// 初始化时聚焦第一个输入框
onMounted(() => {
nextTick(() => {
vehicleNoRef.value.focus()
window.addEventListener('resize', resizeHeight)
})
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHeight)
})
// 调整表格高度
const resizeHeight = () => {
maxHeight.value = window.innerHeight * 0.4
}
// 处理回车事件
const handleEnter = (nextField) => {
const refMap = {
'vehicleNo': vehicleNoRef,
'vehicleSize': vehicleSizeRef,
'inStand': inStandRef
}
if (refMap[nextField]) {
refMap[nextField].value.focus()
}
}
// 添加物料明细
const addGoodsDetail = () => {
orderInForm.goodsDetail.push({
goodsId: '',
goodsName: '',
batch: '',
goodsType: '',
specification: '',
quantity: 1,
goodsDesc: ''
})
}
// 移除物料明细
const removeGoodsDetail = (index) => {
orderInForm.goodsDetail.splice(index, 1)
}
// 清空物料明细
const clearGoodsDetail = () => {
orderInForm.goodsDetail = []
}
// 提交入库单
const submitOrderIn = () => {
orderInFormRef.value.validate((valid) => {
if (valid) {
if (orderInForm.goodsDetail.length === 0) {
errorBox('请至少添加一条物料明细')
return
}
// 检查所有物料明细是否填写完整
for (let i = 0; i < orderInForm.goodsDetail.length; i++) {
const item = orderInForm.goodsDetail[i]
if (!item.goodsId || !item.goodsName || !item.batch || !item.goodsType || !item.specification || !item.quantity) {
errorBox(`第${i + 1}行物料明细填写不完整，请检查`)
return
}
}
// 发送请求
loading.open()
submitOrderInForm(orderInForm)
.then(res => {
responseResult.value = res.data
responseDialogVisible.value = true
if (res.data.code === 0) {
ElMessage.success('入库单提交成功')
} else {
errorBox(`入库单提交失败: ${res.data.message}`)
}
})
.catch(err => {
console.error(err)
errorBox('提交入库单时发生错误')
})
.finally(() => {
loading.close()
})
} else {
errorBox('请填写完整的入库单信息')
}
})
}
// 格式化日期时间
const formatDateTime = (dateTime) => {
if (!dateTime) return '暂无';
try {
const date = new Date(dateTime);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (error) {
console.error('日期格式化错误:', error);
return dateTime;
}
}
// 查询入库单
const queryOrderIns = () => {
const queryParams = {
vehicleNo: queryForm.vehicleNo,
vehicleSize: queryForm.vehicleSize,
inStand: queryForm.inStand,
orderStatus: queryForm.orderStatus
}
loading.open('查询中...')
getOrderIns(queryParams)
.then(res => {
console.log(JSON.stringify(res));
console.log(JSON.stringify(res.data));
if (res.status === 200) {
orderInsList.value = res.data || [];
if (orderInsList.value.length === 0) {
ElMessage.info('未查询到相关入库单')
}
} else {
errorBox(`查询失败: ${res.data.message}`)
orderInsList.value = []
}
})
.catch(err => {
console.error(err)
errorBox('查询入库单时发生错误')
orderInsList.value = []
})
.finally(() => {
loading.close()
})
}
// 重置查询表单
const resetQueryForm = () => {
queryForm.vehicleNo = ''
queryForm.vehicleSize = ''
queryForm.inStand = ''
queryForm.orderStatus = ''
orderInsList.value = []
}
// 查看入库单详情
const viewOrderInDetail = (row) => {
currentOrderIn.value = row
orderInDetailDialogVisible.value = true
}
// 保存状态修改
const saveOrderStatus = () => {
if (currentEditOrder.value.orderStatus === undefined || currentEditOrder.value.orderStatus === null) {
errorBox('请选择订单状态')
return
}
loading.open('保存中...')
updateOrderIn(currentEditOrder.value.recordId, currentEditOrder.value.orderStatus).then(res => {
if (res.data.code === 0) {
ElMessage.success('状态更新成功')
// 更新本地数据
const index = orderInsList.value.findIndex(
item => item.orderId === currentEditOrder.value.orderId
)
if (index > -1) {
orderInsList.value[index].orderStatus = currentEditOrder.value.orderStatus
}
editDialogVisible.value = false
} else {
errorBox(`状态更新失败: ${res.data.message}`)
}
}).catch(err => {
console.error(err)
errorBox('状态更新失败')
}).finally(() => {
loading.close()
})
}
</script>
<style scoped>
.content {
display: flex;
width: 100%;
overflow-x: hidden;
}
.work-area {
width: 100%;
height: calc(100vh - 160px);
padding: 15px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.main-area, .goods-detail-area, .query-area, .query-result-area {
width: 100%;
margin-bottom: 20px;
padding: 15px;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
}
/* 物料明细表格样式 */
.table-area {
width: 100%;
min-height: fit-content;
margin-bottom: 10px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
}
.table-class {
width: 100% !important;
}
/* 修改查询表格容器样式 */
.query-table-container {
overflow-x: hidden; /* 修改前为auto */
position: relative;
}
/* 调整表格宽度设置 */
.query-result-table {
min-width: 100% !important; /* 修改前为2000px */
}
:deep(.query-result-table) {
width: 100%;
margin: 5px;
table-layout: fixed;
}
/* 增加表格内部滚动控制 */
:deep(.query-result-table .el-table__body-wrapper) {
overflow-x: auto !important;
max-width: 100vw; /* 防止溢出视口 */
}
:deep(.query-result-table.el-table--scrollable-x .el-table__body-wrapper) {
overflow-x: scroll !important;
}
/* 同步滚动条样式 */
:deep(.query-result-table .el-table__header-wrapper) {
overflow-x: hidden !important;
margin-bottom: -17px !important; /* 隐藏原生滚动条 */
}
/* 调整Element UI表格的显示方式 */
:deep(.query-result-table.el-table) {
display: table; /* 保持表格布局 */
}
:deep(.el-input),
:deep(.el-select) {
width: 100%;
}
:deep(.el-input__inner) {
height: 36px;
}
:deep(.el-table .cell) {
word-break: break-all;
white-space: normal;
line-height: 1.5;
padding: 5px;
text-align: center;
}
/* 调整操作列样式 */
.query-result-table .el-table-column--fixed-right {
position: sticky !important;
right: 0;
z-index: 2;
background: white;
}
/* 列宽优化 */
.query-result-table .el-table__cell {
min-width: 120px !important;
max-width: 200px;
}
/* 固定表头列宽 */
.query-result-table .el-table-column--fixed-left {
position: sticky !important;
left: 0;
z-index: 2;
background: white;
}
/* 自定义滚动条样式 */
.query-table-container::-webkit-scrollbar {
height: 8px;
background: #f5f5f5;
}
.query-table-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
/* 固定列样式修正 */
:deep(.el-table__fixed-right) {
height: 100% !important;
background: #fff;
box-shadow: -5px 0 15px -5px rgba(0,0,0,0.1);
}
/* 操作按钮容器 */
.action-buttons {
display: flex;
gap: 5px;
justify-content: center;
flex-wrap: nowrap;
}
/* 按钮最小宽度 */
.action-buttons .el-button {
flex-shrink: 0;
min-width: 60px;
padding: 8px 12px;
}
/* 移动端适配 */
@media (max-width: 768px) {
.action-buttons {
flex-direction: column;
}
.action-buttons .el-button {
width: 100%;
margin-left: 0 !important;
}
}
legend {
padding: 0 10px;
font-weight: bold;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
max-height: 300px;
overflow-y: auto;
}
</style>

204
wms_web_nantong_yachi/src/layout/orderOut.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<el-config-provider :locale="zhCn">
<el-container class="content">
<div class="work-area">
<fieldset class="main-area">
<legend>出库单信息</legend>
<el-form ref="orderOutFormRef" :model="orderOutForm" :rules="rules" label-width="120px" :label-position="labelPosition" status-icon>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-form-item label="物料编号" prop="goodsId">
<el-input v-model="orderOutForm.goodsId" clearable @keyup.enter="handleEnter('batch')" ref="goodsIdRef" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-form-item label="批次" prop="batch">
<el-input v-model="orderOutForm.batch" clearable @keyup.enter="handleEnter('specification')" ref="batchRef" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-form-item label="规格" prop="specification">
<el-input-number v-model="orderOutForm.specification" :min="1" controls-position="right" clearable @keyup.enter="handleEnter('quantity')" ref="specificationRef" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-form-item label="数量" prop="quantity">
<el-input-number v-model="orderOutForm.quantity" :min="1" controls-position="right" clearable ref="quantityRef" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="text-align: center; margin-top: 20px;">
<el-button type="success" @click="submitOrderOut">提交出库单</el-button>
<el-button type="warning" @click="resetForm">重置表单</el-button>
</el-col>
</el-row>
</el-form>
</fieldset>
<el-dialog v-model="responseDialogVisible" title="请求结果" width="500px">
<pre>{{ responseResult }}</pre>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="responseDialogVisible = false">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</el-container>
</el-config-provider>
</template>
<script setup>
import { reactive, ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { loading } from '@/utils/loading.js'
import { errorBox } from '@/utils/myMessageBox.js'
import { labelPosition } from '@/constant/form'
import { submitOrderOutForm } from '@/api/orderOut.js'
// 表单数据
const orderOutFormRef = ref()
const orderOutForm = reactive({
goodsId: '',
batch: '',
specification: null,
quantity: null
})
// 表单规则
const rules = reactive({
goodsId: [{ required: true, message: '请输入物料编号', trigger: 'blur' }],
batch: [{ required: true, message: '请输入批次', trigger: 'blur' }],
specification: [{ required: true, message: '请输入规格', trigger: 'blur' }],
quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
})
// 引用DOM元素
const goodsIdRef = ref()
const batchRef = ref()
const specificationRef = ref()
const quantityRef = ref()
// 响应结果对话框
const responseDialogVisible = ref(false)
const responseResult = ref({})
// 初始化时聚焦第一个输入框
onMounted(() => {
nextTick(() => {
goodsIdRef.value.focus()
window.addEventListener('resize', resizeHeight)
})
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHeight)
})
// 调整高度
const resizeHeight = () => {
// 如果需要可以在这里添加高度调整逻辑
}
// 处理回车事件
const handleEnter = (nextField) => {
const refMap = {
'batch': batchRef,
'specification': specificationRef,
'quantity': quantityRef
}
if (refMap[nextField]) {
refMap[nextField].value.focus()
}
}
// 重置表单
const resetForm = () => {
orderOutFormRef.value.resetFields()
nextTick(() => {
goodsIdRef.value.focus()
})
}
// 提交出库单
const submitOrderOut = () => {
orderOutFormRef.value.validate((valid) => {
if (valid) {
// 发送请求
loading.open()
submitOrderOutForm(orderOutForm)
.then(res => {
responseResult.value = res.data
responseDialogVisible.value = true
if (res.data.code === 0) {
ElMessage.success('出库单提交成功')
resetForm() // 提交成功后重置表单
} else {
errorBox(`出库单提交失败: ${res.data.message}`)
}
})
.catch(err => {
console.error(err)
errorBox('提交出库单时发生错误')
})
.finally(() => {
loading.close()
})
} else {
errorBox('请填写完整的出库单信息')
}
})
}
</script>
<style scoped>
.content {
display: flex;
width: 100%;
overflow-x: hidden;
}
.work-area {
width: 100%;
height: calc(100vh - 160px);
padding: 15px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.main-area {
width: 100%;
margin-bottom: 20px;
padding: 15px;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
}
legend {
padding: 0 10px;
font-weight: bold;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
max-height: 300px;
overflow-y: auto;
}
:deep(.el-input),
:deep(.el-input-number) {
width: 100%;
}
</style>

2
wms_web_nantong_yachi/src/router/index.js
View File

@ -36,6 +36,8 @@ const routes = [
{ path: '/dbsList', component: () => import('@/layout/dbsList.vue') },// dbs计划
{ path: '/kittingList', component: () => import('@/layout/kittingList.vue') },// 配料单
{ path: '/kittingRelation', component: () => import('@/layout/kittingRelation.vue') },// 配料单
{ path: '/orderIn', component: () => import('@/layout/orderIn.vue') },// 入库单
{ path: '/orderOut', component: () => import('@/layout/orderOut.vue') },// 出库单
]
},
{