1. 添加入库单接口, 添加入库单界面
2. 添加出库单接口, 添加出库单界面
This commit is contained in:
parent
a9960293d2
commit
144d22cb6f
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -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
41
wms_web_nantong_yachi/src/api/orderIn.js
Normal 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
16
wms_web_nantong_yachi/src/api/orderOut.js
Normal 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
722
wms_web_nantong_yachi/src/layout/orderIn.vue
Normal 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
204
wms_web_nantong_yachi/src/layout/orderOut.vue
Normal 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>
|
||||||
|
|
@ -36,6 +36,8 @@ const routes = [
|
||||||
{ path: '/dbsList', component: () => import('@/layout/dbsList.vue') },// dbs计划
|
{ path: '/dbsList', component: () => import('@/layout/dbsList.vue') },// dbs计划
|
||||||
{ path: '/kittingList', component: () => import('@/layout/kittingList.vue') },// 配料单
|
{ path: '/kittingList', component: () => import('@/layout/kittingList.vue') },// 配料单
|
||||||
{ path: '/kittingRelation', component: () => import('@/layout/kittingRelation.vue') },// 配料单
|
{ path: '/kittingRelation', component: () => import('@/layout/kittingRelation.vue') },// 配料单
|
||||||
|
{ path: '/orderIn', component: () => import('@/layout/orderIn.vue') },// 入库单
|
||||||
|
{ path: '/orderOut', component: () => import('@/layout/orderOut.vue') },// 出库单
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user