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

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" <el-form ref="orderInFormRef" :model="orderInForm" :rules="rules" label-width="100px"
:label-position="labelPosition" status-icon> :label-position="labelPosition" status-icon>
<el-row :gutter="20"> <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-form-item label="料箱号" prop="vehicleNo">
<el-input v-model="orderInForm.vehicleNo" clearable @keyup.enter="handleEnter('vehicleSize')" <el-input v-model="orderInForm.vehicleNo" clearable @keyup.enter="handleEnter('vehicleSize')"
ref="vehicleNoRef"/> ref="vehicleNoRef"/>
</el-form-item> </el-form-item>
</el-col> </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-form-item label="料箱尺寸" prop="vehicleSize">
<el-input v-model="orderInForm.vehicleSize" clearable @keyup.enter="handleEnter('inStand')" <el-input v-model="orderInForm.vehicleSize" clearable @keyup.enter="handleEnter('inStand')"
ref="vehicleSizeRef"/> ref="vehicleSizeRef"/>
</el-form-item> </el-form-item>
</el-col> </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-form-item label="入库站台" prop="inStand">
<el-input v-model="orderInForm.inStand" clearable @keyup.enter="handleEnter('clientId')" <el-input v-model="orderInForm.inStand" clearable @keyup.enter="handleEnter('clientId')"
ref="inStandRef"/> ref="inStandRef"/>
@ -96,22 +96,22 @@
<el-form ref="queryFormRef" :model="queryForm" :label-position="labelPosition" label-width="120px" <el-form ref="queryFormRef" :model="queryForm" :label-position="labelPosition" label-width="120px"
status-icon> status-icon>
<el-row :gutter="20"> <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-form-item label="料箱号">
<el-input v-model="queryForm.vehicleNo" clearable/> <el-input v-model="queryForm.vehicleNo" clearable/>
</el-form-item> </el-form-item>
</el-col> </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-form-item label="料箱尺寸">
<el-input v-model="queryForm.vehicleSize" clearable/> <el-input v-model="queryForm.vehicleSize" clearable/>
</el-form-item> </el-form-item>
</el-col> </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-form-item label="入库站台">
<el-input v-model="queryForm.inStand" clearable/> <el-input v-model="queryForm.inStand" clearable/>
</el-form-item> </el-form-item>
</el-col> </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-form-item label="订单状态">
<el-select v-model="queryForm.orderStatus" clearable placeholder="请选择订单状态"> <el-select v-model="queryForm.orderStatus" clearable placeholder="请选择订单状态">
<el-option label="全部" value=""/> <el-option label="全部" value=""/>
@ -123,11 +123,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :xs="24" :sm="24" :md="4" :lg="4" style="display: flex; align-items: flex-end;">
<el-row :gutter="20"> <el-form-item>
<el-col :span="24" style="text-align: center; margin-top: 10px;"> <el-button type="primary" @click="queryOrderIns">查询入库单</el-button>
<el-button type="primary" @click="queryOrderIns">查询入库单</el-button> <el-button type="warning" @click="resetQueryForm">重置查询</el-button>
<el-button type="warning" @click="resetQueryForm">重置查询</el-button> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>

View File

@ -4,35 +4,31 @@
<div class="work-area"> <div class="work-area">
<fieldset class="main-area"> <fieldset class="main-area">
<legend>出库单信息</legend> <legend>出库单信息</legend>
<el-form ref="orderOutFormRef" :model="orderOutForm" :rules="rules" label-width="120px" :label-position="labelPosition" status-icon> <el-form ref="orderOutFormRef" :model="orderOutForm" :rules="rules" label-width="70px" :label-position="labelPosition" status-icon>
<el-row :gutter="20"> <el-row :gutter="5" class="form-row">
<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="goodsId"> <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-form-item>
</el-col> </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-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-form-item>
</el-col> </el-col>
</el-row> <el-col :xs="24" :sm="5" :md="5" :lg="5">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<el-form-item label="规格" prop="specification"> <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-form-item>
</el-col> </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-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-form-item>
</el-col> </el-col>
</el-row> <el-col :xs="24" :sm="4" :md="4" :lg="4" class="btn-col">
<el-row> <el-button type="success" @click="submitOrderOut">提交</el-button>
<el-col :span="24" style="text-align: center; margin-top: 20px;"> <el-button type="warning" @click="resetForm">重置</el-button>
<el-button type="success" @click="submitOrderOut">提交出库单</el-button>
<el-button type="warning" @click="resetForm">重置表单</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
@ -201,4 +197,32 @@ pre {
:deep(.el-input-number) { :deep(.el-input-number) {
width: 100%; 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> </style>