5 changed files with 1359 additions and 67 deletions
-
9src/api/po/po.js
-
2src/assets/scss/global.scss
-
3src/router/index.js
-
470src/views/modules/recv/inspectionResults.vue
-
942src/views/modules/recv/unqualifiedProcess.vue
@ -1,109 +1,447 @@ |
|||
<template> |
|||
<div> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>上一页</div> |
|||
<div class="goBack">登记检验结果</div> |
|||
<div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
<!-- 扫描输入区 --> |
|||
<div class="scan-box"> |
|||
<input |
|||
v-model="scanCode" |
|||
placeholder="扫描PO条码或输入PO号" |
|||
@keyup.enter="addItem" |
|||
ref="scanCodeRef" |
|||
/> |
|||
</div> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="handleBack"><i class="el-icon-arrow-left"></i>上一页</div> |
|||
<div class="goBack">检验不合格处理</div> |
|||
<div class="network" style="color: #fff" @click="$router.push({ path: '/' })">🏠首页</div> |
|||
</div> |
|||
<div style="overflow-y: auto"> |
|||
<!-- Step 1: 扫描或查询检验单据 --> |
|||
<div v-if="processFlag === 1"> |
|||
<div class="scan-box" style="margin: 2px;"> |
|||
<el-input clearable v-model="scanCode" placeholder="扫描采购单条码" |
|||
@keyup.enter.native="handleScan" ref="scanCodeRef" /> |
|||
</div> |
|||
<div class="item-list" v-if="unqualifiedList.length > 0" style="margin: 2px;"> |
|||
<el-form label-position="top" style="margin: 3px;"> |
|||
<el-row :gutter="5" @click.native="selectProcessItem(unqualifiedDetail)" |
|||
v-for="(unqualifiedDetail, index) in unqualifiedList" :key="index" |
|||
:class="index < unqualifiedList.length - 1 ? 'bottom-line-row' : ''"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="物料编码"><span>{{ unqualifiedDetail.partNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="单据号"><span>{{ unqualifiedDetail.transNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="4"> |
|||
<el-form-item label="类型"> |
|||
<span > |
|||
{{ getProcessTypeText(unqualifiedDetail.processType) }} |
|||
</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label=""> |
|||
<el-button type="text" class="processButton" @click="selectProcessItem(unqualifiedDetail)" |
|||
style="margin-top: 10px;margin-left: 20px" size="small">处理</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="物料描述"><span>{{ unqualifiedDetail.partDesc }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="getQtyLabel(unqualifiedDetail.processType)"> |
|||
<span :style="getQtyStyle(unqualifiedDetail.processType)">{{ unqualifiedDetail.unqualifiedQty }}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="批次号"><span>{{ unqualifiedDetail.batchNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="PO号"><span>{{ unqualifiedDetail.orderRef1 }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="检验日期"><span>{{ formatDate(unqualifiedDetail.inspectionDate) }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 商品列表区 --> |
|||
<div class="item-list"> |
|||
<el-table :height="240" :data="items" @row-click="rowClick" |
|||
stripe highlight-current-row border :row-style="{ height: '30px' }" style="width: 100%;"> |
|||
<el-table-column prop="code" header-align="center" align="center" label="商品编码"></el-table-column> |
|||
<el-table-column prop="qty" header-align="center" align="center" label="数量" width="42"></el-table-column> |
|||
<el-table-column prop="qty" header-align="center" align="center" label="不合格数量"> |
|||
<template slot-scope="scope"> |
|||
<span style="height: 11px;width:98%;color: red">{{scope.row.qty}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 扫描的HandlingUnit明细列表 --> |
|||
<div class="scanned-items" v-if="scannedItems.length > 0" style="margin: 2px;"> |
|||
<div class="section-title">已扫描明细</div> |
|||
<div class="item-list"> |
|||
<el-form label-position="top" style="margin: 3px;"> |
|||
<el-row :gutter="5" v-for="(item, index) in scannedItems" :key="index" |
|||
:class="index < scannedItems.length - 1 ? 'bottom-line-row' : ''"> |
|||
<el-col :span="8"> |
|||
<el-form-item label="物料编码"><span>{{ item.partNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="HandlingUnit"><span>{{ item.unitId }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label=""> |
|||
<el-button type="text" style="color: #F56C6C;" @click="removeScannedItem(index)" |
|||
size="small">移除</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="物料描述"><span>{{ item.partDesc }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="数量"><span>{{ item.qty }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="批次号"><span>{{ item.batchNo }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 操作按钮区 --> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getUnqualifiedInspectionList, scanHandlingUnitLabel } from "@/api/po/po.js"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
siteVisible: false, |
|||
processFlag: 1, // 1-不合格列表, 2-处理确认 |
|||
scanCode: '', |
|||
items: [{code: 'A001', qty: 1}, {code: 'A002', qty: 2}] |
|||
} |
|||
}, |
|||
computed: { |
|||
totalQty() { |
|||
return this.items.reduce((sum, item) => sum + item.qty, 0) |
|||
} |
|||
unqualifiedList: [], |
|||
scannedItems: [], |
|||
selectedItem: {}, |
|||
site: localStorage.getItem('site') |
|||
}; |
|||
}, |
|||
methods: { |
|||
addItem() { |
|||
if (!this.scanCode) return |
|||
this.items.push({ |
|||
code: this.scanCode, |
|||
qty: 1 |
|||
}) |
|||
this.scanCode = '' |
|||
handleBack() { |
|||
if (this.processFlag === 1) { |
|||
this.$router.back(); |
|||
} else if (this.processFlag === 2) { |
|||
this.processFlag = 1; |
|||
this.scannedItems = []; |
|||
} else { |
|||
this.processFlag = 1; |
|||
} |
|||
}, |
|||
|
|||
// 处理扫描 |
|||
handleScan() { |
|||
if (!this.scanCode.trim()) { |
|||
return; |
|||
} |
|||
|
|||
// 判断是否为采购单条码或HandlingUnit条码 |
|||
if (this.scanCode.startsWith('PO') || this.scanCode.startsWith('REC')) { |
|||
// 采购单或接收单条码，查询不合格单据 |
|||
this.searchUnqualifiedList(); |
|||
} else { |
|||
// HandlingUnit条码，扫描添加明细 |
|||
this.scanHandlingUnit(); |
|||
} |
|||
}, |
|||
|
|||
// 查询检验不合格单据 |
|||
searchUnqualifiedList() { |
|||
const params = { |
|||
site: this.site |
|||
}; |
|||
if (this.scanCode && (this.scanCode.startsWith('PO') || this.scanCode.startsWith('REC'))) { |
|||
params.transNo = this.scanCode; |
|||
} |
|||
|
|||
getUnqualifiedInspectionList(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.unqualifiedList = data.rows || []; |
|||
if (this.unqualifiedList.length === 0) { |
|||
this.$message.success("暂无检验不合格待处理单据"); |
|||
} |
|||
} else { |
|||
this.$message.error(data.msg || "查询失败"); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error("查询失败"); |
|||
console.error(error); |
|||
}); |
|||
|
|||
this.scanCode = ''; |
|||
}, |
|||
|
|||
// 扫描HandlingUnit条码 |
|||
scanHandlingUnit() { |
|||
const params = { |
|||
site: this.site, |
|||
unitId: this.scanCode.trim() |
|||
}; |
|||
|
|||
scanHandlingUnitLabel(params).then(({ data }) => { |
|||
if (data.code === 0 && data.data) { |
|||
const huInfo = data.data; |
|||
|
|||
// 检查是否已经扫描过 |
|||
const exists = this.scannedItems.find(item => item.unitId === huInfo.unitId); |
|||
if (exists) { |
|||
this.$message.warning('该HandlingUnit已扫描，请勿重复扫描'); |
|||
this.scanCode = ''; |
|||
return; |
|||
} |
|||
|
|||
// 添加到扫描列表 |
|||
this.scannedItems.push({ |
|||
unitId: huInfo.unitId, |
|||
partNo: huInfo.partNo, |
|||
partDesc: huInfo.partDesc, |
|||
qty: huInfo.qty, |
|||
batchNo: huInfo.batchNo, |
|||
locationId: huInfo.locationId |
|||
}); |
|||
|
|||
this.$message.success('扫描成功'); |
|||
} else { |
|||
this.$message.error(data.msg || 'HandlingUnit不存在或查询失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error("扫描失败"); |
|||
console.error(error); |
|||
}); |
|||
|
|||
this.scanCode = ''; |
|||
}, |
|||
|
|||
// 选择处理项目 |
|||
selectProcessItem(item) { |
|||
this.selectedItem = { ...item }; |
|||
|
|||
// 跳转到统一的不合格处理页面，通过processType参数区分处理类型 |
|||
this.$router.push({ |
|||
path: '/unqualified-process', |
|||
query: { |
|||
transNo: item.transNo, |
|||
itemNo: item.itemNo, |
|||
processType: item.processType, |
|||
partNo: item.partNo, |
|||
unqualifiedQty: item.unqualifiedQty, |
|||
scannedItems: JSON.stringify(this.scannedItems) |
|||
} |
|||
}); |
|||
}, |
|||
removeItem(index) { |
|||
this.items.splice(index, 1) |
|||
|
|||
// 移除扫描的项目 |
|||
removeScannedItem(index) { |
|||
this.scannedItems.splice(index, 1); |
|||
this.$message.success('移除成功'); |
|||
}, |
|||
|
|||
// 获取处理类型文本 |
|||
getProcessTypeText(processType) { |
|||
const typeMap = { |
|||
'RETURN': '退货', |
|||
'SCRAP': '报废', |
|||
'EXCHANGE': '换货' |
|||
}; |
|||
return typeMap[processType] || '未知'; |
|||
}, |
|||
|
|||
// 获取数量标签 |
|||
getQtyLabel(processType) { |
|||
const labelMap = { |
|||
'RETURN': '退货数量', |
|||
'SCRAP': '报废数量', |
|||
'EXCHANGE': '换货数量' |
|||
}; |
|||
return labelMap[processType] || '数量'; |
|||
}, |
|||
submit() { |
|||
alert(`已提交${this.items.length}种商品`) |
|||
this.items = [] |
|||
|
|||
// 获取数量样式 |
|||
getQtyStyle(processType) { |
|||
const styleMap = { |
|||
'RETURN': 'color: #E6A23C; font-weight: 500;', // 橙色 |
|||
'SCRAP': 'color: #F56C6C; font-weight: 500;', // 红色 |
|||
'EXCHANGE': 'color: #409EFF; font-weight: 500;' // 蓝色 |
|||
}; |
|||
return styleMap[processType] || 'color: #666; font-weight: 500;'; |
|||
}, |
|||
|
|||
|
|||
// 获取当前日期 |
|||
getCurrentDate() { |
|||
const now = new Date(); |
|||
return now.getFullYear() + '-' + |
|||
String(now.getMonth() + 1).padStart(2, '0') + '-' + |
|||
String(now.getDate()).padStart(2, '0'); |
|||
}, |
|||
|
|||
// 格式化日期 |
|||
formatDate(date) { |
|||
if (!date) return ''; |
|||
const d = new Date(date); |
|||
return d.getFullYear() + '-' + |
|||
String(d.getMonth() + 1).padStart(2, '0') + '-' + |
|||
String(d.getDate()).padStart(2, '0'); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.$refs.scanCodeRef.focus() |
|||
}) |
|||
if (this.$refs.scanCodeRef) { |
|||
this.$refs.scanCodeRef.focus(); |
|||
} |
|||
}); |
|||
// 默认加载检验不合格列表 |
|||
this.searchUnqualifiedList(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
.goBack { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.scan-box input { |
|||
width: 100%; |
|||
padding: 12px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.filter-box { |
|||
text-align: center; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.item-list { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
margin: 20px 0; |
|||
margin: 10px 0; |
|||
border: 1px solid rgba(200, 200, 200, 0.8); |
|||
background: white; |
|||
} |
|||
|
|||
.item-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 8px; |
|||
border-bottom: 1px solid #eee; |
|||
.item-list span { |
|||
color: #000; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.status-bar { |
|||
.bottom-line-row { |
|||
border-bottom: 1px solid rgba(200, 200, 200, 0.8); |
|||
} |
|||
|
|||
.processButton { |
|||
font-size: 16px; |
|||
border-radius: 3px; |
|||
color: #17b3a3; |
|||
} |
|||
|
|||
.process-type-selector { |
|||
background: white; |
|||
padding: 15px; |
|||
border-radius: 5px; |
|||
border: 1px solid rgba(200, 200, 200, 0.8); |
|||
} |
|||
|
|||
.process-type-selector .el-radio-group { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.process-type-selector .el-radio { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.section-title { |
|||
background: #17b3a3; |
|||
color: #fff; |
|||
padding: 8px 12px; |
|||
color: white; |
|||
padding: 8px 15px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
border-radius: 3px 3px 0 0; |
|||
} |
|||
|
|||
/* 处理类型样式 */ |
|||
.process-type-return { |
|||
background: #FDF6EC; |
|||
color: #E6A23C; |
|||
padding: 2px 8px; |
|||
border-radius: 12px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
border: 1px solid #F5DAB1; |
|||
} |
|||
|
|||
.process-type-scrap { |
|||
background: #FEF0F0; |
|||
color: #F56C6C; |
|||
padding: 2px 8px; |
|||
border-radius: 12px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
border: 1px solid #FAB6B6; |
|||
} |
|||
|
|||
.process-type-exchange { |
|||
background: #ECF5FF; |
|||
color: #409EFF; |
|||
padding: 2px 8px; |
|||
border-radius: 12px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
border: 1px solid #B3D8FF; |
|||
} |
|||
|
|||
.process-type-unknown { |
|||
background: #F5F7FA; |
|||
color: #909399; |
|||
padding: 2px 8px; |
|||
border-radius: 12px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
border: 1px solid #DCDFE6; |
|||
} |
|||
|
|||
.item-list .el-row { |
|||
cursor: pointer; |
|||
transition: background 0.3s; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.item-list .el-row:hover { |
|||
background: #f5f7fa; |
|||
} |
|||
|
|||
.form-section { |
|||
background: white; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.form-section >>> .el-col { |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.bottom-nav { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
padding: 10px; |
|||
background: white; |
|||
border-top: 1px solid #ddd; |
|||
} |
|||
|
|||
.bottom-nav .el-button { |
|||
flex: 1; |
|||
margin: 0 5px; |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (max-width: 768px) { |
|||
.status-bar { |
|||
font-size: 14px; |
|||
padding: 8px 10px; |
|||
} |
|||
|
|||
.scan-box input { |
|||
padding: 10px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.item-list span { |
|||
font-size: 13px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,942 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<!-- 头部栏 --> |
|||
<div class="header-bar" :style="getHeaderStyle()"> |
|||
<div class="header-left" @click="$router.back()"> |
|||
<i class="el-icon-arrow-left"></i> |
|||
<span>{{ getProcessTitle() }}</span> |
|||
</div> |
|||
<div class="header-right" @click="$router.push({ path: '/' })"> |
|||
首页 |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 搜索框 --> |
|||
<div class="search-container"> |
|||
<el-input clearable class="compact-input" |
|||
v-model="scanCode" |
|||
placeholder="请扫描HandlingUnit条码" |
|||
prefix-icon="el-icon-search" |
|||
@keyup.enter.native="handleScan" |
|||
ref="scanInput" |
|||
/> |
|||
<div class="mode-switch"> |
|||
<el-switch |
|||
class="custom-switch" |
|||
v-model="isRemoveMode" |
|||
active-color="#ff4949" |
|||
inactive-color="#13ce66"> |
|||
</el-switch> |
|||
<span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span> |
|||
<span v-else class="switch-text2">{{ '添加' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 单据信息卡片 --> |
|||
<div class="material-info-card" v-if="processInfo.transNo"> |
|||
<div class="card-title"> |
|||
<span class="title-label">{{ getProcessTitle() }}单据号:</span> |
|||
<span class="title-value">{{ processInfo.transNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">物料编码</div> |
|||
<div class="detail-value">{{ processInfo.partNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">{{ getQtyLabel() }}</div> |
|||
<div class="detail-value"> |
|||
<span class="unqualified" :style="getQtyStyle()">{{ processInfo.unqualifiedQty }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">已扫描数量</div> |
|||
<div class="detail-value"> |
|||
<span class="scanned">{{ getTotalScannedQty() }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 处理信息确认标题 --> |
|||
<div class="section-title" :style="getSectionStyle()"> |
|||
<div class="title-left"> |
|||
<i :class="getProcessIcon()" :style="getIconStyle()"></i> |
|||
<span :style="getIconStyle()">{{ getProcessTitle() }}信息确认</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 标签列表 --> |
|||
<div class="label-list" v-if="scannedItems.length > 0" style="margin: 2px;"> |
|||
<el-form label-position="top" style="margin: 3px;"> |
|||
<el-row :gutter="5" |
|||
v-for="(label, index) in scannedItems" |
|||
:key="label.id" |
|||
:class="index < scannedItems.length - 1 ? 'bottom-line-row' : ''" |
|||
style="border: 1px solid #e0e0e0; border-radius: 4px; padding: 2px 6px;"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="HandlingUnit"><span>{{ label.unitId }}</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.qty }} {{ 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-if="scannedItems.length === 0" class="empty-labels"> |
|||
<p>暂无扫描HandlingUnit</p> |
|||
</div> |
|||
|
|||
<!-- 底部操作按钮 --> |
|||
<div class="bottom-actions"> |
|||
<button class="action-btn primary" :style="getButtonStyle()" @click="confirmProcess"> |
|||
确认{{ getProcessTitle() }} |
|||
</button> |
|||
<button class="action-btn secondary" :style="getSecondaryButtonStyle()" style="margin-left: 10px;" @click="cancelProcess"> |
|||
取消 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { scanHandlingUnitLabel, confirmUnqualifiedProcess } from '@/api/po/po.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
scanCode: '', |
|||
processInfo: {}, |
|||
scannedItems: [], |
|||
isRemoveMode: false, // 默认为添加模式 |
|||
processType: '' // RETURN/SCRAP/EXCHANGE |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 处理类型配置 |
|||
processConfig() { |
|||
const configs = { |
|||
'RETURN': { |
|||
title: '退货', |
|||
color: '#E6A23C', |
|||
icon: 'el-icon-refresh-left', |
|||
qtyLabel: '退货数量' |
|||
}, |
|||
'SCRAP': { |
|||
title: '报废', |
|||
color: '#F56C6C', |
|||
icon: 'el-icon-delete', |
|||
qtyLabel: '报废数量' |
|||
}, |
|||
'EXCHANGE': { |
|||
title: '换货', |
|||
color: '#409EFF', |
|||
icon: 'el-icon-refresh', |
|||
qtyLabel: '换货数量' |
|||
} |
|||
}; |
|||
return configs[this.processType] || configs['RETURN']; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取处理标题 |
|||
getProcessTitle() { |
|||
return this.processConfig.title; |
|||
}, |
|||
|
|||
// 获取数量标签 |
|||
getQtyLabel() { |
|||
return this.processConfig.qtyLabel; |
|||
}, |
|||
|
|||
// 获取处理图标 |
|||
getProcessIcon() { |
|||
return this.processConfig.icon; |
|||
}, |
|||
|
|||
// 获取头部样式 |
|||
getHeaderStyle() { |
|||
return `background: ${this.processConfig.color};`; |
|||
}, |
|||
|
|||
// 获取区域标题样式 |
|||
getSectionStyle() { |
|||
return `border-bottom: 2px solid ${this.processConfig.color};`; |
|||
}, |
|||
|
|||
// 获取图标样式 |
|||
getIconStyle() { |
|||
return `color: ${this.processConfig.color};`; |
|||
}, |
|||
|
|||
// 获取数量样式 |
|||
getQtyStyle() { |
|||
return `color: ${this.processConfig.color}; font-weight: 500;`; |
|||
}, |
|||
|
|||
// 获取主按钮样式 |
|||
getButtonStyle() { |
|||
return `border: 1px solid ${this.processConfig.color}; background: ${this.processConfig.color}; color: white;`; |
|||
}, |
|||
|
|||
// 获取次要按钮样式 |
|||
getSecondaryButtonStyle() { |
|||
return `border: 1px solid ${this.processConfig.color}; background: white; color: ${this.processConfig.color};`; |
|||
}, |
|||
|
|||
// 处理扫描 |
|||
handleScan() { |
|||
if (!this.scanCode.trim()) { |
|||
return; |
|||
} |
|||
|
|||
if (this.isRemoveMode) { |
|||
this.removeLabelByCode(this.scanCode.trim()); |
|||
} else { |
|||
this.validateAndAddLabel(this.scanCode.trim()); |
|||
} |
|||
this.scanCode = ''; |
|||
}, |
|||
|
|||
// 验证标签并添加到列表 |
|||
validateAndAddLabel(unitId) { |
|||
const params = { |
|||
unitId: unitId, |
|||
site: this.$store.state.user.site, |
|||
}; |
|||
|
|||
scanHandlingUnitLabel(params).then(({ data }) => { |
|||
if (data && data.code === 0 && data.data) { |
|||
const huInfo = data.data; |
|||
|
|||
// 检查是否已经扫描过 |
|||
const exists = this.scannedItems.find(item => item.unitId === unitId); |
|||
if (exists) { |
|||
this.$message.warning('该HandlingUnit已扫描，请勿重复扫描'); |
|||
return; |
|||
} |
|||
|
|||
// 校验HU是否属于当前单据 |
|||
if (huInfo.site !== this.$store.state.user.site) { |
|||
this.$message.error('HandlingUnit站点不匹配'); |
|||
return; |
|||
} |
|||
|
|||
if (huInfo.orderRef2 !== this.processInfo.transNo) { |
|||
this.$message.error('该HandlingUnit不属于当前接收单，请检查'); |
|||
return; |
|||
} |
|||
|
|||
// 检查物料是否匹配 |
|||
if (this.processInfo.partNo && huInfo.partNo !== this.processInfo.partNo) { |
|||
this.$message.error('物料编码不匹配，请检查'); |
|||
return; |
|||
} |
|||
|
|||
// 添加到列表 |
|||
this.scannedItems.push({ |
|||
id: Date.now(), |
|||
unitId: unitId, |
|||
partNo: huInfo.partNo, |
|||
partDesc: huInfo.partDesc, |
|||
qty: huInfo.qty, |
|||
unit: huInfo.unit, |
|||
batchNo: huInfo.batchNo, |
|||
locationId: huInfo.locationId |
|||
}); |
|||
|
|||
this.$message.success('扫描成功'); |
|||
} else { |
|||
this.$message.error(data.msg || 'HandlingUnit不存在或查询失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error('扫描失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 通过条码移除标签 |
|||
removeLabelByCode(unitId) { |
|||
const index = this.scannedItems.findIndex(item => item.unitId === unitId); |
|||
if (index !== -1) { |
|||
this.scannedItems.splice(index, 1); |
|||
this.$message.success('移除成功'); |
|||
} else { |
|||
this.$message.warning('未找到该HandlingUnit'); |
|||
} |
|||
}, |
|||
|
|||
// 获取总扫描数量 |
|||
getTotalScannedQty() { |
|||
return this.scannedItems.reduce((total, item) => { |
|||
return total + (parseFloat(item.qty) || 0); |
|||
}, 0); |
|||
}, |
|||
|
|||
// 确认处理 |
|||
confirmProcess() { |
|||
if (this.scannedItems.length === 0) { |
|||
this.$message.warning('请先扫描HandlingUnit'); |
|||
return; |
|||
} |
|||
|
|||
const processTitle = this.getProcessTitle(); |
|||
this.$confirm(`确认要${processTitle}这些物料吗？`, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.submitConfirmProcess(); |
|||
}).catch(() => { |
|||
// 用户取消 |
|||
}); |
|||
}, |
|||
|
|||
// 提交确认处理 |
|||
submitConfirmProcess() { |
|||
const handlingUnitIds = this.scannedItems.map(item => item.unitId); |
|||
|
|||
const params = { |
|||
transNo: this.processInfo.transNo, |
|||
processType: this.processInfo.processType, |
|||
handlingUnitIds: handlingUnitIds |
|||
}; |
|||
|
|||
confirmUnqualifiedProcess(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
const processTitle = this.getProcessTitle(); |
|||
this.$message.success(`${processTitle}处理成功`); |
|||
this.$router.back(); |
|||
} else { |
|||
this.$message.error(data.msg || '处理失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('确认处理失败:', error); |
|||
this.$message.error('处理失败，请重试'); |
|||
}); |
|||
}, |
|||
|
|||
// 取消处理 |
|||
cancelProcess() { |
|||
if (this.scannedItems.length > 0) { |
|||
this.$confirm('取消后将清空已扫描的HandlingUnit，确定取消吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '继续操作', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$router.back(); |
|||
}).catch(() => { |
|||
// 用户选择继续操作 |
|||
}); |
|||
} else { |
|||
this.$router.back(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 获取路由参数 |
|||
const query = this.$route.query; |
|||
this.processType = query.processType || 'RETURN'; |
|||
this.processInfo = { |
|||
transNo: query.transNo, |
|||
itemNo: query.itemNo, |
|||
processType: query.processType, |
|||
partNo: query.partNo, |
|||
unqualifiedQty: query.unqualifiedQty |
|||
}; |
|||
|
|||
// 如果有传入的扫描项目，恢复它们 |
|||
if (query.scannedItems) { |
|||
try { |
|||
this.scannedItems = JSON.parse(query.scannedItems); |
|||
} catch (e) { |
|||
console.error('解析扫描项目失败:', e); |
|||
} |
|||
} |
|||
|
|||
// 聚焦扫描框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.scanInput) { |
|||
this.$refs.scanInput.focus(); |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 复用生产领料页面的样式，只修改必要的部分 */ |
|||
.pda-container { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
/* 头部栏 */ |
|||
.header-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 8px 16px; |
|||
background: #17B3A3; |
|||
color: white; |
|||
height: 40px; |
|||
min-height: 40px; |
|||
} |
|||
|
|||
.header-left { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.header-left i { |
|||
margin-right: 8px; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.header-right { |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 搜索容器 */ |
|||
.search-container { |
|||
padding: 12px 16px; |
|||
background: white; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 12px; |
|||
} |
|||
|
|||
.search-container .el-input { |
|||
width: 240px; |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
/* 紧凑型输入框样式 */ |
|||
.compact-input ::v-deep .el-input__inner { |
|||
height: 36px; |
|||
padding: 0 12px 0 35px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.compact-input ::v-deep .el-input__prefix { |
|||
left: 10px; |
|||
} |
|||
|
|||
.compact-input ::v-deep .el-input__suffix { |
|||
right: 30px; |
|||
} |
|||
|
|||
/* 模式切换开关 */ |
|||
.mode-switch { |
|||
position: relative; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.custom-switch { |
|||
transform: scale(1.3); |
|||
} |
|||
/* 中间文字 */ |
|||
.switch-text { |
|||
position: absolute; |
|||
left: 25%; |
|||
transform: translateX(-50%); |
|||
top: 50%; |
|||
transform: translateY(-50%) translateX(-50%); |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
color: #606266; |
|||
white-space: nowrap; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
top: 53%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
color: white; |
|||
pointer-events: none; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.switch-text2 { |
|||
position: absolute; |
|||
left: 75%; |
|||
transform: translateX(-50%); |
|||
top: 50%; |
|||
transform: translateY(-50%) translateX(-50%); |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
color: #606266; |
|||
white-space: nowrap; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
top: 53%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
color: white; |
|||
pointer-events: none; |
|||
z-index: 2; |
|||
} |
|||
|
|||
/* 调整 switch 尺寸以便容纳文字 */ |
|||
.custom-switch ::v-deep .el-switch__core { |
|||
width: 60px; |
|||
height: 28px; |
|||
} |
|||
|
|||
/* 物料信息卡片 */ |
|||
.material-info-card { |
|||
background: white; |
|||
margin: 4px 16px; |
|||
padding: 6px 20px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.card-title { |
|||
margin-bottom: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.title-label { |
|||
font-size: 12px; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.title-value { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 11px; |
|||
color: #999; |
|||
margin-bottom: 6px; |
|||
font-weight: normal; |
|||
line-height: 1.2; |
|||
margin-left: -12px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 13px; |
|||
color: #333; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.detail-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 区域标题 */ |
|||
.section-title { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 6px 8px; |
|||
background: white; |
|||
margin: 0 16px; |
|||
margin-top: 4px; |
|||
border-radius: 8px 8px 0 0; |
|||
border-bottom: 2px solid #17B3A3; |
|||
} |
|||
|
|||
.title-left { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.title-left i { |
|||
color: #17B3A3; |
|||
font-size: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.title-left span { |
|||
color: #17B3A3; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.title-right { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.material-list-link { |
|||
color: #17B3A3; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
text-decoration: underline; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
.material-list-link:hover { |
|||
color: #0d8f7f; |
|||
} |
|||
|
|||
/* 标签列表 */ |
|||
.label-list { |
|||
background: white; |
|||
margin: 0 16px 12px; |
|||
border-radius: 0 0 8px 8px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.label-list .el-form-item { |
|||
margin-bottom: 1px; |
|||
} |
|||
|
|||
.label-list .el-form-item__label { |
|||
padding-bottom: 1px; |
|||
margin-bottom: 0; |
|||
line-height: 1.1; |
|||
font-size: 11px; |
|||
} |
|||
|
|||
.label-list .el-form-item__content { |
|||
line-height: 1.2; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.empty-labels { |
|||
padding: 40px 20px; |
|||
text-align: center; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-labels p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 底部操作按钮 */ |
|||
.bottom-actions { |
|||
display: flex; |
|||
padding: 16px; |
|||
gap: 20px; |
|||
background: white; |
|||
margin-top: auto; |
|||
} |
|||
|
|||
.action-btn { |
|||
flex: 1; |
|||
padding: 12px; |
|||
border: 1px solid #17B3A3; |
|||
background: white; |
|||
color: #17B3A3; |
|||
border-radius: 20px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.action-btn:hover { |
|||
background: #17B3A3; |
|||
color: white; |
|||
} |
|||
|
|||
.action-btn:active { |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
/* 物料清单弹窗样式 */ |
|||
.material-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 9999; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.material-modal { |
|||
background: white; |
|||
border-radius: 12px; |
|||
width: 100%; |
|||
max-width: 800px; |
|||
max-height: 80vh; |
|||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.material-modal .modal-header { |
|||
background: #17B3A3; |
|||
color: white; |
|||
padding: 5px 16px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
min-height: 28px; |
|||
} |
|||
|
|||
.close-btn { |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
color: white; |
|||
transition: color 0.2s ease; |
|||
padding: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.close-btn:hover { |
|||
color: #e0e0e0; |
|||
} |
|||
|
|||
.material-modal .modal-title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
margin: 0; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.material-modal .modal-body { |
|||
flex: 1; |
|||
overflow: auto; |
|||
padding: 0; |
|||
} |
|||
|
|||
.material-table { |
|||
width: 100%; |
|||
} |
|||
|
|||
.table-header { |
|||
display: flex; |
|||
background: #f8f9fa; |
|||
padding: 10px 6px; |
|||
border-bottom: 2px solid #17B3A3; |
|||
font-size: 12px; |
|||
color: #333; |
|||
font-weight: 600; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.table-body { |
|||
max-height: 400px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.table-row { |
|||
display: flex; |
|||
padding: 10px 6px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
font-size: 12px; |
|||
color: #333; |
|||
transition: background-color 0.2s ease; |
|||
} |
|||
|
|||
.table-row:hover { |
|||
background-color: #f8f9fa; |
|||
} |
|||
|
|||
.table-row:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.material-table .col-no { |
|||
width: 25px; |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-table .col-material-code { |
|||
flex: 1.8; |
|||
text-align: center; |
|||
min-width: 100px; |
|||
font-size: 12px; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.material-table .col-required-qty { |
|||
flex: 0.8; |
|||
text-align: center; |
|||
min-width: 65px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-table .col-inbound-qty { |
|||
flex: 0.8; |
|||
text-align: center; |
|||
min-width: 65px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-modal .modal-footer { |
|||
padding: 15px 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.btn-close { |
|||
padding: 10px 20px; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.2s; |
|||
border: 1px solid #17B3A3; |
|||
background: white; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
.btn-close:hover { |
|||
background: #17B3A3; |
|||
color: white; |
|||
} |
|||
|
|||
/* 加载状态样式 */ |
|||
.loading-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #666; |
|||
} |
|||
|
|||
.loading-container i { |
|||
font-size: 24px; |
|||
margin-bottom: 12px; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
.loading-container span { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 空数据状态样式 */ |
|||
.empty-material { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-material i { |
|||
font-size: 48px; |
|||
margin-bottom: 16px; |
|||
color: #ddd; |
|||
} |
|||
|
|||
.empty-material p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 360px) { |
|||
.header-bar { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.search-container { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.material-info-card { |
|||
margin: 4px 12px; |
|||
padding: 6px 16px; |
|||
} |
|||
|
|||
.section-title { |
|||
margin: 0 12px; |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.label-list { |
|||
margin: 0 12px 8px; |
|||
} |
|||
|
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
|
|||
.label-list .el-form-item__label { |
|||
font-size: 10px; |
|||
} |
|||
|
|||
.label-list .el-form-item__content { |
|||
font-size: 10px; |
|||
} |
|||
|
|||
.label-list .el-form-item { |
|||
margin-bottom: 2px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue