|
|
|
@ -31,30 +31,38 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 标签列表 --> |
|
|
|
<div class="label-list" v-if="labelList.length > 0"> |
|
|
|
<div class="list-header"> |
|
|
|
<div class="col-no">NO.</div> |
|
|
|
<div class="col-label">标签条码</div> |
|
|
|
<div class="col-part">物料编码</div> |
|
|
|
<div class="col-unit">单位</div> |
|
|
|
<div class="col-qty">数量</div> |
|
|
|
<div class="col-status">状态</div> |
|
|
|
</div> |
|
|
|
<div class="label-list" v-if="labelList.length > 0" style="margin: 2px;"> |
|
|
|
<el-form label-position="top" style="margin: 3px;"> |
|
|
|
<el-row :gutter="5" |
|
|
|
v-for="(label, index) in labelList" |
|
|
|
:key="label.id" |
|
|
|
:class="index < labelList.length - 1 ? 'bottom-line-row' : ''" |
|
|
|
style="border: 1px solid #e0e0e0; border-radius: 4px; padding: 2px 6px;"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="标签条码"><span>{{ label.labelCode }}</span></el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
|
|
<el-form-item label="物料编码"><span>{{ label.partNo }}</span></el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-form-item label="数量"><span>{{ label.quantity }} {{ label.unit || '个' }}</span></el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" v-if="label.partDesc"> |
|
|
|
<el-form-item label="物料描述"><span>{{ label.partDesc }}</span></el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12" v-if="label.batchNo"> |
|
|
|
<el-form-item label="批次号"><span>{{ label.batchNo }}</span></el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12" v-if="label.locationId"> |
|
|
|
<el-form-item label="库位"><span>{{ label.locationId }}</span></el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
v-for="(label, index) in labelList" |
|
|
|
:key="label.id" |
|
|
|
class="list-item" |
|
|
|
> |
|
|
|
<div class="col-no">{{ labelList.length - index }}</div> |
|
|
|
<div class="col-label">{{ label.labelCode }}</div> |
|
|
|
<div class="col-part">{{ label.partNo }}</div> |
|
|
|
<div class="col-unit">{{ label.unit || '个' }}</div> |
|
|
|
<div class="col-qty">{{ label.quantity }}</div> |
|
|
|
<div class="col-status"> |
|
|
|
<span class="status-pending">待报废</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 空状态 --> |
|
|
|
<div v-if="labelList.length === 0" class="empty-labels"> |
|
|
|
<p>暂无扫描标签</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 报废原因选择 --> |
|
|
|
@ -110,12 +118,7 @@ export default { |
|
|
|
labelList: [], |
|
|
|
selectedReason: '', |
|
|
|
scrapReasons: [ |
|
|
|
{ value: 'DAMAGED', label: '物料损坏' }, |
|
|
|
{ value: 'EXPIRED', label: '物料过期' }, |
|
|
|
{ value: 'QUALITY_ISSUE', label: '质量问题' }, |
|
|
|
{ value: 'OBSOLETE', label: '物料过时' }, |
|
|
|
{ value: 'PROCESS_DEFECT', label: '工艺缺陷' }, |
|
|
|
{ value: 'OTHER', label: '其他原因' } |
|
|
|
{ value: 'DP03', label: '质量问题' }, |
|
|
|
], |
|
|
|
errorMessage: '' |
|
|
|
}; |
|
|
|
@ -147,6 +150,12 @@ export default { |
|
|
|
|
|
|
|
scanScrapLabel(params).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
// 检查inStockFlag是否为Y |
|
|
|
if (data.labelInfo.inStockFlag !== 'Y') { |
|
|
|
this.$message.error('库存不存在，该HU未入库或已出库'); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 添加到列表 |
|
|
|
this.labelList.push({ |
|
|
|
id: Date.now(), |
|
|
|
@ -157,7 +166,8 @@ export default { |
|
|
|
unit: data.labelInfo.unit, |
|
|
|
batchNo: data.labelInfo.batchNo, |
|
|
|
locationId: data.labelInfo.locationId, |
|
|
|
warehouseId: data.labelInfo.warehouseId |
|
|
|
warehouseId: data.labelInfo.warehouseId, |
|
|
|
inStockFlag: data.labelInfo.inStockFlag |
|
|
|
}); |
|
|
|
|
|
|
|
this.$message.success('扫描成功'); |
|
|
|
@ -294,7 +304,7 @@ export default { |
|
|
|
.scan-container { |
|
|
|
padding: 12px 16px; |
|
|
|
background: white; |
|
|
|
margin: 4px 16px; |
|
|
|
margin: 4px 4px; |
|
|
|
border-radius: 8px; |
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
@ -330,7 +340,7 @@ export default { |
|
|
|
justify-content: space-between; |
|
|
|
padding: 6px 8px; |
|
|
|
background: white; |
|
|
|
margin: 0 16px; |
|
|
|
margin: 0 4px; |
|
|
|
margin-top: 4px; |
|
|
|
border-radius: 8px 8px 0 0; |
|
|
|
border-bottom: 2px solid #17b3a3; |
|
|
|
@ -356,75 +366,66 @@ export default { |
|
|
|
/* 标签列表 */ |
|
|
|
.label-list { |
|
|
|
background: white; |
|
|
|
margin: 0 16px 12px; |
|
|
|
border-radius: 0 0 8px 8px; |
|
|
|
margin: 0 4px 4px; |
|
|
|
border-radius: 8px; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.list-header { |
|
|
|
display: flex; |
|
|
|
background: #f8f9fa; |
|
|
|
padding: 12px 8px; |
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.list-item { |
|
|
|
display: flex; |
|
|
|
padding: 12px 8px; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
font-size: 12px; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.list-item:last-child { |
|
|
|
border-bottom: none; |
|
|
|
/* 空状态样式 */ |
|
|
|
.empty-labels { |
|
|
|
text-align: center; |
|
|
|
padding: 40px 20px; |
|
|
|
color: #999; |
|
|
|
background: white; |
|
|
|
margin: 0 4px 4px; |
|
|
|
border-radius: 8px; |
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.col-no { |
|
|
|
width: 20px; |
|
|
|
text-align: center; |
|
|
|
.empty-labels p { |
|
|
|
margin: 0; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-label { |
|
|
|
flex: 2; |
|
|
|
text-align: center; |
|
|
|
/* 底部分割线样式 */ |
|
|
|
.bottom-line-row { |
|
|
|
margin-bottom: 8px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.col-part { |
|
|
|
flex: 2; |
|
|
|
text-align: center; |
|
|
|
/* Element UI 表单项样式覆盖 */ |
|
|
|
.label-list ::v-deep .el-form-item { |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-unit { |
|
|
|
width: 40px; |
|
|
|
text-align: center; |
|
|
|
.label-list ::v-deep .el-form-item__label { |
|
|
|
font-size: 11px; |
|
|
|
color: #666; |
|
|
|
line-height: 1.2; |
|
|
|
padding-bottom: 2px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.col-qty { |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
.label-list ::v-deep .el-form-item__content { |
|
|
|
line-height: 1.2; |
|
|
|
font-size: 12px; |
|
|
|
color: #333; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
|
|
|
|
.col-status { |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
.label-list ::v-deep .el-row { |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.status-pending { |
|
|
|
color: #E6A23C; |
|
|
|
font-weight: 500; |
|
|
|
.label-list ::v-deep .el-col { |
|
|
|
padding: 0 2px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 报废原因选择器 */ |
|
|
|
.reason-container { |
|
|
|
padding: 12px 16px; |
|
|
|
background: white; |
|
|
|
margin: 4px 16px; |
|
|
|
margin: 4px 4px; |
|
|
|
border-radius: 0 0 8px 8px; |
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
@ -494,7 +495,7 @@ export default { |
|
|
|
padding: 12px 16px; |
|
|
|
background: #fef0f0; |
|
|
|
color: #f56c6c; |
|
|
|
margin: 0 16px; |
|
|
|
margin: 0 4px; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
@ -512,28 +513,24 @@ export default { |
|
|
|
|
|
|
|
.scan-container { |
|
|
|
padding: 8px 12px; |
|
|
|
margin: 4px 12px; |
|
|
|
margin: 4px 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.reason-container { |
|
|
|
margin: 4px 12px; |
|
|
|
margin: 4px 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.section-title { |
|
|
|
margin: 0 12px; |
|
|
|
margin: 0 4px; |
|
|
|
margin-top: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.label-list { |
|
|
|
margin: 0 12px 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.list-header, .list-item { |
|
|
|
font-size: 11px; |
|
|
|
margin: 0 4px 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-label, .col-part { |
|
|
|
flex: 1.5; |
|
|
|
.empty-labels { |
|
|
|
margin: 0 4px 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
