调整入库单与出库单的页面布局

This commit is contained in:
李宇奇 2025-04-02 11:40:40 +08:00
parent a5cb0fbb36
commit e546c45afd
2 changed files with 53 additions and 29 deletions

View File

@ -7,19 +7,19 @@
<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-col :xs="24" :sm="12" :md="6" :lg="5">
<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-col :xs="24" :sm="12" :md="6" :lg="5">
<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-col :xs="24" :sm="12" :md="6" :lg="5">
<el-form-item label="入库站台" prop="inStand">
<el-input v-model="orderInForm.inStand" clearable @keyup.enter="handleEnter('clientId')"
ref="inStandRef"/>
@ -96,22 +96,22 @@
<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-col :xs="24" :sm="12" :md="5" :lg="4">
<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-col :xs="24" :sm="12" :md="5" :lg="4">
<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-col :xs="24" :sm="12" :md="5" :lg="4">
<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-col :xs="24" :sm="12" :md="5" :lg="4">
<el-form-item label="订单状态">
<el-select v-model="queryForm.orderStatus" clearable placeholder="请选择订单状态">
<el-option label="全部" value=""/>
@ -123,11 +123,11 @@
</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 :xs="24" :sm="24" :md="4" :lg="4" style="display: flex; align-items: flex-end;">
<el-form-item>
<el-button type="primary" @click="queryOrderIns">查询入库单</el-button>
<el-button type="warning" @click="resetQueryForm">重置查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>

View File

@ -4,35 +4,31 @@
<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 ref="orderOutFormRef" :model="orderOutForm" :rules="rules" label-width="70px" :label-position="labelPosition" status-icon>
<el-row :gutter="5" class="form-row">
<el-col :xs="24" :sm="5" :md="5" :lg="5">
<el-form-item label="物料编号" prop="goodsId">
<el-input v-model="orderOutForm.goodsId" clearable @keyup.enter="handleEnter('batch')" ref="goodsIdRef" />
<el-input v-model="orderOutForm.goodsId" clearable @keyup.enter="handleEnter('batch')" ref="goodsIdRef" class="custom-input" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-col :xs="24" :sm="5" :md="5" :lg="5">
<el-form-item label="批次" prop="batch">
<el-input v-model="orderOutForm.batch" clearable @keyup.enter="handleEnter('specification')" ref="batchRef" />
<el-input v-model="orderOutForm.batch" clearable @keyup.enter="handleEnter('specification')" ref="batchRef" class="custom-input" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-col :xs="24" :sm="5" :md="5" :lg="5">
<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-input-number v-model="orderOutForm.specification" :min="1" controls-position="right" clearable @keyup.enter="handleEnter('quantity')" ref="specificationRef" class="custom-input" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-col :xs="24" :sm="5" :md="5" :lg="5">
<el-form-item label="数量" prop="quantity">
<el-input-number v-model="orderOutForm.quantity" :min="1" controls-position="right" clearable ref="quantityRef" />
<el-input-number v-model="orderOutForm.quantity" :min="1" controls-position="right" clearable ref="quantityRef" class="custom-input" />
</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 :xs="24" :sm="4" :md="4" :lg="4" class="btn-col">
<el-button type="success" @click="submitOrderOut">提交</el-button>
<el-button type="warning" @click="resetForm">重置</el-button>
</el-col>
</el-row>
</el-form>
@ -201,4 +197,32 @@ pre {
:deep(.el-input-number) {
width: 100%;
}
.form-row {
display: flex;
align-items: center;
}
:deep(.custom-input) {
width: 100%;
}
:deep(.custom-input .el-input__inner),
:deep(.custom-input .el-input-number__decrease),
:deep(.custom-input .el-input-number__increase),
:deep(.custom-input .el-input-number__inner) {
height: 40px;
line-height: 40px;
}
.btn-col {
display: flex;
align-items: center;
justify-content: space-around;
}
.btn-col .el-button {
margin-left: 0;
height: 40px;
}
</style>