feat(钢卷管理): 添加真实库区选择功能并优化表单字段

- 在分卷、合卷和钢卷录入页面添加真实库区选择组件
- 将nextWarehouseId字段重命名为warehouseId以统一命名
- 添加加载状态提示提升用户体验
- 优化表单布局和字段验证规则
This commit is contained in:
砂糖
2025-11-04 09:42:59 +08:00
parent 6349328b76
commit bb4c2761ac
3 changed files with 156 additions and 157 deletions

View File

@@ -176,8 +176,8 @@
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item label="目标库">
<el-select v-model="targetCoil.nextWarehouseId" placeholder="请选择" style="width: 100%" clearable :disabled="readonly">
<el-form-item label="目标库">
<el-select v-model="targetCoil.warehouseId" placeholder="请选择" style="width: 100%" clearable :disabled="readonly">
<el-option
v-for="warehouse in warehouseList"
:key="warehouse.warehouseId"
@@ -186,6 +186,15 @@
/>
</el-select>
</el-form-item>
<el-form-item label="真实库区">
<actual-warehouse-select
v-model="targetCoil.actualWarehouseId"
placeholder="请选择"
style="width: 100%"
clearable
:disabled="readonly"
/>
</el-form-item>
</el-form>
</div>
</div>
@@ -238,7 +247,8 @@ export default {
itemId: null,
grossWeight: null,
netWeight: null,
nextWarehouseId: null
warehouseId: null,
actualWarehouseId: null
},
loading: false,
// 钢卷选择器可见性
@@ -370,7 +380,8 @@ export default {
// 自动填充目标卷信息
this.targetCoil.itemType = data.itemType;
this.targetCoil.itemId = data.itemId;
this.targetCoil.nextWarehouseId = data.warehouseId;
this.targetCoil.warehouseId = data.warehouseId;
this.targetCoil.actualWarehouseId = data.actualWarehouseId;
// 加载对应的物品列表
if (data.itemType) {
@@ -566,7 +577,8 @@ export default {
if (index === 0) {
this.targetCoil.itemType = coil.itemType;
this.targetCoil.itemId = coil.itemId;
this.targetCoil.nextWarehouseId = coil.warehouseId;
this.targetCoil.warehouseId = coil.warehouseId;
this.targetCoil.actualWarehouseId = coil.actualWarehouseId;
}
this.$message.success('钢卷选择成功');
@@ -619,7 +631,8 @@ export default {
itemId: this.targetCoil.itemId,
grossWeight: this.targetCoil.grossWeight,
netWeight: this.targetCoil.netWeight,
nextWarehouseId: this.targetCoil.nextWarehouseId,
warehouseId: this.targetCoil.warehouseId,
actualWarehouseId: this.targetCoil.actualWarehouseId,
hasMergeSplit: 2, // 2表示合卷
newCoils: this.sourceCoils.map(item => ({
coilId: item.coilId,
@@ -629,7 +642,11 @@ export default {
};
console.log('提交的合卷数据:', mergeData);
const loadingInstance = this.$loading({
lock: true,
text: '正在合卷,请稍后...',
background: 'rgba(0, 0, 0, 0.7)'
})
const response = await mergeMaterialCoil(mergeData);
if (response.code === 200) {
this.$message.success('合卷保存成功');
@@ -649,6 +666,7 @@ export default {
console.error(error);
} finally {
this.loading = false;
loadingInstance.close();
}
},

View File

@@ -169,8 +169,8 @@
</el-form-item>
<el-form-item label="目标库区" required>
<el-select
v-model="item.nextWarehouseId"
placeholder="请选择目标库"
v-model="item.warehouseId"
placeholder="请选择目标库"
style="width: 100%"
filterable
:disabled="readonly"
@@ -183,6 +183,15 @@
/>
</el-select>
</el-form-item>
<el-form-item label="展示库区" required>
<ActualWarehouseSelect
v-model="item.actualWarehouseId"
placeholder="请选择真实库区"
style="width: 100%"
filterable
:disabled="readonly"
/>
</el-form-item>
</el-form>
</div>
</div>
@@ -212,11 +221,13 @@ import { listWarehouse } from '@/api/wms/warehouse';
import { listRawMaterial } from '@/api/wms/rawMaterial';
import { listProduct } from '@/api/wms/product';
import CoilSelector from '@/components/CoilSelector';
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
export default {
name: 'SplitCoil',
components: {
CoilSelector
CoilSelector,
ActualWarehouseSelect
},
data() {
return {
@@ -245,7 +256,8 @@ export default {
itemId: null,
grossWeight: null,
netWeight: null,
nextWarehouseId: null
warehouseId: null,
actualWarehouseId: null
}
],
loading: false,
@@ -441,7 +453,8 @@ export default {
itemId: null,
grossWeight: null,
netWeight: null,
nextWarehouseId: null
warehouseId: null,
actualWarehouseId: null
});
},
@@ -495,12 +508,18 @@ export default {
this.$message.error(`第${i + 1}个子卷的净重不能为空`);
return;
}
if (!item.nextWarehouseId) {
if (!item.warehouseId) {
this.$message.error(`第${i + 1}个子卷的目标库区不能为空`);
return;
}
}
const loadingInstance = this.$loading({
lock: true,
text: '正在分卷,请稍后...',
background: 'rgba(0, 0, 0, 0.7)'
})
try {
this.loading = true;
@@ -518,7 +537,8 @@ export default {
itemId: item.itemId || this.motherCoil.itemId,
grossWeight: item.grossWeight,
netWeight: item.netWeight,
nextWarehouseId: item.nextWarehouseId,
warehouseId: item.warehouseId,
actualWarehouseId: item.actualWarehouseId,
hasMergeSplit: 1
}))
};
@@ -535,11 +555,13 @@ export default {
} else {
this.$message.error(response.msg || '分卷保存失败');
}
} catch (error) {
this.$message.error('分卷保存失败');
console.error(error);
} finally {
this.loading = false;
loadingInstance.close();
}
},

View File

@@ -20,7 +20,7 @@
<div slot="header" class="card-header">
<span><i class="el-icon-info"></i> 当前信息</span>
</div>
<div class="info-section">
<div class="info-row">
<span class="info-label">入场钢卷号</span>
@@ -75,20 +75,10 @@
复制当前信息
</el-button>
</div>
<el-form
ref="updateForm"
:model="updateForm"
:rules="rules"
label-width="120px"
size="small"
>
<el-form ref="updateForm" :model="updateForm" :rules="rules" label-width="120px" size="small">
<el-form-item label="当前钢卷号" prop="currentCoilNo">
<el-input
v-model="updateForm.currentCoilNo"
placeholder="请输入当前钢卷号"
:disabled="readonly"
>
<el-input v-model="updateForm.currentCoilNo" placeholder="请输入当前钢卷号" :disabled="readonly">
<template slot="prepend">
<i class="el-icon-document"></i>
</template>
@@ -96,11 +86,7 @@
</el-form-item>
<el-form-item label="班组" prop="team">
<el-input
v-model="updateForm.team"
placeholder="请输入班组名称"
:disabled="readonly"
>
<el-input v-model="updateForm.team" placeholder="请输入班组名称" :disabled="readonly">
<template slot="prepend">
<i class="el-icon-user-solid"></i>
</template>
@@ -108,88 +94,49 @@
</el-form-item>
<el-form-item label="物品类型" prop="itemType">
<el-select
v-model="updateForm.itemType"
placeholder="请选择物品类型"
style="width: 100%"
:disabled="readonly"
>
<el-select v-model="updateForm.itemType" placeholder="请选择物品类型" style="width: 100%" :disabled="readonly">
<el-option label="原材料" value="raw_material" />
<el-option label="产品" value="product" />
</el-select>
</el-form-item>
<el-form-item label="物品" prop="itemId">
<el-select
v-model="updateForm.itemId"
placeholder="请选择物品"
filterable
remote
:remote-method="searchItems"
:loading="itemSearchLoading"
style="width: 100%"
:disabled="readonly"
>
<el-option
v-for="item in currentItemList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<el-select v-model="updateForm.itemId" placeholder="请选择物品" filterable remote :remote-method="searchItems"
:loading="itemSearchLoading" style="width: 100%" :disabled="readonly">
<el-option v-for="item in currentItemList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="毛重(t)" prop="grossWeight">
<el-input
v-model.number="updateForm.grossWeight"
placeholder="请输入毛重"
type="number"
step="0.01"
:disabled="readonly"
>
<el-input v-model.number="updateForm.grossWeight" placeholder="请输入毛重" type="number" step="0.01"
:disabled="readonly">
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item label="净重(t)" prop="netWeight">
<el-input
v-model.number="updateForm.netWeight"
placeholder="请输入净重"
type="number"
step="0.01"
:disabled="readonly"
>
<el-input v-model.number="updateForm.netWeight" placeholder="请输入净重" type="number" step="0.01"
:disabled="readonly">
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item label="目标库" prop="nextWarehouseId">
<el-select
v-model="updateForm.nextWarehouseId"
placeholder="请选择目标库区"
style="width: 100%"
filterable
:disabled="readonly"
>
<el-option
v-for="warehouse in warehouseList"
:key="warehouse.warehouseId"
:label="warehouse.warehouseName"
:value="warehouse.warehouseId"
/>
<el-form-item label="目标库" prop="warehouseId">
<el-select v-model="updateForm.warehouseId" placeholder="请选择目标库区" style="width: 100%" filterable
:disabled="readonly">
<el-option v-for="warehouse in warehouseList" :key="warehouse.warehouseId"
:label="warehouse.warehouseName" :value="warehouse.warehouseId" />
</el-select>
</el-form-item>
<el-form-item label="真实库区" prop="warehouseId">
<ActualWarehouseSelect v-model="updateForm.actualWarehouseId" placeholder="请选择真实库区" style="width: 100%"
filterable :disabled="readonly" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="updateForm.remark"
type="textarea"
:rows="4"
placeholder="请输入备注信息(非必填)"
maxlength="500"
show-word-limit
:disabled="readonly"
/>
<el-input v-model="updateForm.remark" type="textarea" :rows="4" placeholder="请输入备注信息(非必填)" maxlength="500"
show-word-limit :disabled="readonly" />
</el-form-item>
</el-form>
</el-card>
@@ -205,15 +152,11 @@
<i class="el-icon-refresh"></i> 刷新
</el-button>
</div>
<el-timeline v-if="historySteps.length > 0">
<el-timeline-item
v-for="(step, index) in historySteps"
:key="index"
:timestamp="`步骤 ${step.display_step || step.step}`"
placement="top"
:type="step.operation === '新增' ? 'success' : 'primary'"
>
<el-timeline-item v-for="(step, index) in historySteps" :key="index"
:timestamp="`步骤 ${step.display_step || step.step}`" placement="top"
:type="step.operation === '新增' ? 'success' : 'primary'">
<div class="history-item">
<div class="history-title">{{ step.operation || step.action }}</div>
<div class="history-detail" v-if="step.operator">
@@ -231,7 +174,7 @@
</div>
</el-timeline-item>
</el-timeline>
<div v-else class="empty-history">
<i class="el-icon-document"></i>
<p>暂无变更历史</p>
@@ -247,9 +190,13 @@ import { completeAction } from '@/api/wms/pendingAction';
import { listWarehouse } from '@/api/wms/warehouse';
import { listRawMaterial } from '@/api/wms/rawMaterial';
import { listProduct } from '@/api/wms/product';
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
export default {
name: 'TypingCoil',
components: {
ActualWarehouseSelect
},
data() {
return {
loading: false,
@@ -267,7 +214,7 @@ export default {
grossWeight: null,
netWeight: null,
warehouseId: null,
nextWarehouseId: null,
warehouseId: null,
nextWarehouseName: '',
status: 0,
remark: ''
@@ -280,7 +227,8 @@ export default {
itemId: null,
grossWeight: null,
netWeight: null,
nextWarehouseId: null,
warehouseId: null,
actualWarehouseId: null,
remark: ''
},
rules: {
@@ -304,8 +252,11 @@ export default {
{ required: true, message: '请输入净重', trigger: 'blur' },
{ type: 'number', message: '净重必须为数字', trigger: 'blur' }
],
nextWarehouseId: [
warehouseId: [
{ required: true, message: '请选择目标库区', trigger: 'change' }
],
actualWarehouseId: [
{ required: true, message: '请选择真实库区', trigger: 'change' }
]
},
warehouseList: [],
@@ -348,20 +299,20 @@ export default {
async created() {
// 先加载库区列表
await this.loadWarehouses();
// 从路由参数获取coilId和actionId
const coilId = this.$route.query.coilId;
const actionId = this.$route.query.actionId;
const readonly = this.$route.query.readonly;
if (coilId) {
await this.loadCoilInfo(coilId);
}
if (actionId) {
this.actionId = actionId;
}
// 设置只读模式
if (readonly === 'true' || readonly === true) {
this.readonly = true;
@@ -375,7 +326,7 @@ export default {
const response = await getMaterialCoil(coilId);
if (response.code === 200 && response.data) {
const data = response.data;
// 填充当前信息(左侧)
this.currentInfo = {
coilId: data.coilId,
@@ -389,23 +340,23 @@ export default {
grossWeight: data.grossWeight,
netWeight: data.netWeight,
warehouseId: data.warehouseId,
nextWarehouseId: data.nextWarehouseId,
nextWarehouseName: this.getWarehouseName(data.nextWarehouseId),
actualWarehouseId: data.actualWarehouseId,
nextWarehouseName: this.getWarehouseName(data.warehouseId),
remark: data.remark || ''
};
console.log('当前信息加载完成:', this.currentInfo);
// 重新获取库区名称确保warehouseList已加载
if (data.nextWarehouseId) {
this.currentInfo.nextWarehouseName = this.getWarehouseName(data.nextWarehouseId);
if (data.warehouseId) {
this.currentInfo.nextWarehouseName = this.getWarehouseName(data.warehouseId);
}
// 加载对应类型的物品列表
if (data.itemType) {
await this.loadItemList(data.itemType);
}
// 加载变更历史
this.loadHistory();
}
@@ -457,7 +408,7 @@ export default {
// 加载物品列表(根据类型)
async loadItemList(itemType) {
if (!itemType) return;
try {
this.itemSearchLoading = true;
if (itemType === 'raw_material') {
@@ -484,23 +435,23 @@ export default {
this.$message.warning('请先选择物品类型');
return;
}
try {
this.itemSearchLoading = true;
if (this.updateForm.itemType === 'raw_material') {
const response = await listRawMaterial({
const response = await listRawMaterial({
rawMaterialName: query,
pageNum: 1,
pageSize: 50
pageNum: 1,
pageSize: 50
});
if (response.code === 200) {
this.rawMaterialList = response.rows || [];
}
} else if (this.updateForm.itemType === 'product') {
const response = await listProduct({
const response = await listProduct({
productName: query,
pageNum: 1,
pageSize: 50
pageNum: 1,
pageSize: 50
});
if (response.code === 200) {
this.productList = response.rows || [];
@@ -523,14 +474,14 @@ export default {
if (!this.currentInfo.enterCoilNo) {
return;
}
try {
this.historyLoading = true;
const response = await getMaterialCoilTrace({
enterCoilNo: this.currentInfo.enterCoilNo,
currentCoilNo: this.currentInfo.currentCoilNo || undefined
});
if (response.code === 200 && response.data) {
this.historySteps = response.data.steps || [];
}
@@ -550,17 +501,17 @@ export default {
itemId: this.currentInfo.itemId,
grossWeight: parseFloat(this.currentInfo.grossWeight) || null,
netWeight: parseFloat(this.currentInfo.netWeight) || null,
nextWarehouseId: this.currentInfo.nextWarehouseId,
warehouseId: this.currentInfo.warehouseId,
remark: this.currentInfo.remark
};
console.log('复制的表单数据:', this.updateForm);
// 加载对应的物品列表
if (this.updateForm.itemType) {
this.loadItemList(this.updateForm.itemType);
}
this.$message.success('已复制当前信息');
},
@@ -571,9 +522,15 @@ export default {
return false;
}
const loadingInstance = this.$loading({
lock: true,
text: '正在更新钢卷信息,请稍后...',
background: 'rgba(0, 0, 0, 0.7)'
})
try {
this.loading = true;
// 构造更新数据使用标准update接口会创建历史版本
const updateData = {
coilId: this.currentInfo.coilId,
@@ -585,23 +542,24 @@ export default {
itemId: this.updateForm.itemId,
grossWeight: this.updateForm.grossWeight,
netWeight: this.updateForm.netWeight,
warehouseId: this.currentInfo.warehouseId, // 当前库区ID保持不变
nextWarehouseId: this.updateForm.nextWarehouseId, // 目标库区ID
// warehouseId: this.currentInfo.warehouseId, // 当前库区ID保持不变
actualWarehouseId: this.updateForm.actualWarehouseId, // 真实库区ID
warehouseId: this.updateForm.warehouseId, // 目标库区ID
remark: this.updateForm.remark
};
console.log('提交的更新数据:', updateData);
const response = await updateMaterialCoil(updateData);
if (response.code === 200) {
this.$message.success('钢卷信息更新成功');
// 如果是从待操作列表进来的,标记操作为完成
if (this.actionId) {
await completeAction(this.actionId);
}
// 延迟返回
setTimeout(() => {
this.$router.back();
@@ -614,6 +572,7 @@ export default {
console.error(error);
} finally {
this.loading = false;
loadingInstance.close();
}
});
},
@@ -652,7 +611,7 @@ export default {
display: flex;
align-items: center;
gap: 8px;
i {
color: #0066cc;
font-size: 20px;
@@ -687,7 +646,7 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
::v-deep .el-card__body {
flex: 1;
display: flex;
@@ -706,7 +665,7 @@ export default {
align-items: center;
justify-content: space-between;
font-weight: 500;
i {
color: #0066cc;
margin-right: 5px;
@@ -719,18 +678,18 @@ export default {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
.info-label {
color: #909399;
font-size: 14px;
min-width: 110px;
flex-shrink: 0;
}
.info-value {
color: #303133;
font-size: 14px;
@@ -746,17 +705,17 @@ export default {
::v-deep .el-card__body {
max-height: 400px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #dcdfe6;
border-radius: 3px;
}
}
::v-deep .el-timeline {
padding-left: 10px;
}
@@ -768,12 +727,12 @@ export default {
color: #303133;
margin-bottom: 8px;
}
.history-detail {
font-size: 13px;
color: #606266;
margin-bottom: 4px;
.detail-label {
color: #909399;
margin-right: 5px;
@@ -785,13 +744,13 @@ export default {
text-align: center;
padding: 40px 0;
color: #909399;
i {
font-size: 48px;
margin-bottom: 10px;
display: block;
}
p {
margin: 0;
}
@@ -801,21 +760,21 @@ export default {
.form-card {
::v-deep .el-input-number {
width: 100%;
.el-input__inner {
text-align: left;
}
}
::v-deep .el-form-item {
margin-bottom: 20px;
}
// 修复数字输入框的样式
::v-deep input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
@@ -835,7 +794,7 @@ export default {
::v-deep .el-button--primary.el-button--small.is-plain,
::v-deep .el-button--text {
color: #409eff;
&:hover {
color: #66b1ff;
}