2 changed files with 626 additions and 356 deletions
@ -1,132 +1,495 @@ |
|||
<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="searchQualifiedList" ref="scanCodeRef" /> |
|||
</div> |
|||
<!-- <div class="filter-box" style="margin: 2px;"> |
|||
<el-button type="text" @click="searchQualifiedList" style="font-size: 16px;">查询检验合格单据</el-button> |
|||
</div>--> |
|||
<div class="item-list" v-if="qualifiedList.length > 0" style="margin: 2px;"> |
|||
<el-form label-position="top" style="margin: 3px;"> |
|||
<el-row :gutter="5" @click.native="selectInboundItem(qualifiedDetail)" |
|||
v-for="(qualifiedDetail, index) in qualifiedList" :key="index" |
|||
:class="index < qualifiedList.length - 1 ? 'bottom-line-row' : ''"> |
|||
<el-col :span="8"> |
|||
<el-form-item label="物料编码"><span>{{ qualifiedDetail.partNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="入库单号"><span>{{ qualifiedDetail.transNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label=""> |
|||
<el-button type="text" class="inboundButton" @click="selectInboundItem(qualifiedDetail)" |
|||
style="margin-top: 10px;" size="small">入库</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="物料描述"><span>{{ qualifiedDetail.partDesc }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="合格数量"><span style="color: #67C23A;">{{ qualifiedDetail.qualifiedQty }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="批次号"><span>{{ qualifiedDetail.batchNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="PO号"><span>{{ qualifiedDetail.orderRef1 }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="检验日期"><span>{{ formatDate(qualifiedDetail.inspectionDate) }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</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="recvQty" header-align="center" align="center" label="入库数量"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="scope.row.recvQty" style="height: 11px;width:98%"></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="locnCode" header-align="center" align="center" label="库位"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="scope.row.locnCode" style="height: 11px;width:98%"></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- Step 2: 入库确认 --> |
|||
<div v-if="processFlag === 2"> |
|||
<el-form label-position="top" class="form-section" style="margin: 5px;"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="入库单号"> |
|||
<el-input v-model="inboundItem.transNo" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="物料编码"> |
|||
<el-input v-model="inboundItem.partNo" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="物料描述"> |
|||
<el-input v-model="inboundItem.partDesc" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="合格数量"> |
|||
<el-input v-model="inboundItem.qualifiedQty" disabled style="color: #67C23A;" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="批次号"> |
|||
<el-input v-model="inboundItem.batchNo" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="PO号"> |
|||
<el-input v-model="inboundItem.orderRef1" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="检验日期"> |
|||
<el-input :value="formatDate(inboundItem.inspectionDate)" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<!-- 操作按钮区 --> |
|||
<el-button prevent-re-click class="submit-btn" @click="submit">确认入库</el-button> |
|||
</div> |
|||
<el-dialog |
|||
style="font-size: 12px" |
|||
v-drag |
|||
:title="'Dialog'" |
|||
:visible.sync="siteVisible" |
|||
width="260px" :append-to-body="true" > |
|||
<el-form label-position="top" style="margin-left: 7px;margin-top: 10px;"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="24"> |
|||
<el-form-item :label="'Test'" > |
|||
<el-radio label="Y">Y</el-radio> |
|||
<el-radio label="N">N</el-radio> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<el-footer style="height:40px;margin-top: 10px;text-align:center"> |
|||
<el-button type="primary" @click="">确定</el-button> |
|||
<el-button type="primary" @click="siteVisible=false">关闭</el-button> |
|||
</el-footer> |
|||
</el-dialog> |
|||
<!-- 入库信息确认区域 --> |
|||
<el-col :span="24" style="border-top: 1px solid #ddd; padding-top: 15px; margin-top: 10px;"> |
|||
<h4 style="margin: 0 0 15px 0; color: #67C23A;">入库信息确认</h4> |
|||
</el-col> |
|||
|
|||
<el-col :span="12"> |
|||
<el-form-item label="入库数量"> |
|||
<el-input v-model="inboundData.inboundQty" type="number" |
|||
:max="inboundItem.qualifiedQty" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="目标库位"> |
|||
<el-input v-model="inboundData.targetLocationId" placeholder="请输入目标库位" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="12"> |
|||
<el-form-item label="入库日期"> |
|||
<el-date-picker v-model="inboundData.inboundDate" type="date" |
|||
format="yyyy-MM-dd" value-format="yyyy-MM-dd" |
|||
placeholder="选择入库日期" style="width: 100%" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="操作员"> |
|||
<el-input v-model="inboundData.operatorName" placeholder="操作员姓名" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<!-- |
|||
<el-col :span="24"> |
|||
<el-form-item label="入库备注"> |
|||
<el-input v-model="inboundData.inboundRemark" type="textarea" rows="3" |
|||
placeholder="请输入入库备注信息" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
--> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<el-col :span="8"> |
|||
<el-form-item> |
|||
<el-button type="text" style="font-size: 16px;" @click="processFlag = 1">回退</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item> |
|||
<el-button type="text" style="font-size: 16px; color: #67C23A;" @click="confirmInbound"> |
|||
确认入库 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item> |
|||
<el-button type="text" style="font-size: 16px;" @click="$router.push('/')">退出</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- Step 3: 入库历史查询 --> |
|||
<div v-if="processFlag === 3"> |
|||
<div class="filter-box" style="margin: 2px;"> |
|||
<el-button type="text" @click="searchInboundHistory" style="font-size: 16px;">查询入库历史</el-button> |
|||
</div> |
|||
<div class="item-list" v-if="historyList.length > 0" style="margin: 2px;"> |
|||
<el-form label-position="top" style="margin: 3px;"> |
|||
<el-row :gutter="5" v-for="(historyDetail, index) in historyList" :key="index" |
|||
:class="index < historyList.length - 1 ? 'bottom-line-row' : ''"> |
|||
<el-col :span="8"> |
|||
<el-form-item label="物料编码"><span>{{ historyDetail.partNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="入库单号"><span>{{ historyDetail.transNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="入库状态"> |
|||
<span style="color: #67C23A;">已入库</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="物料描述"><span>{{ historyDetail.partDesc }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="入库数量"><span>{{ historyDetail.inboundQty }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="批次号"><span>{{ historyDetail.batchNo }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="操作员"><span>{{ historyDetail.operatorName }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="入库日期"><span>{{ formatDate(historyDetail.inboundDate) }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部导航 --> |
|||
<!-- <div class="bottom-nav"> |
|||
<el-button :type="processFlag === 1 ? 'primary' : 'text'" @click="processFlag = 1">待入库</el-button> |
|||
<el-button :type="processFlag === 3 ? 'primary' : 'text'" @click="processFlag = 3">入库历史</el-button> |
|||
</div>--> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getQualifiedInspectionList, confirmQualifiedInbound, getInboundHistory } from "@/api/po/po.js"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
siteVisible: false, |
|||
processFlag: 1, // 1-检验合格列表, 2-入库确认, 3-入库历史 |
|||
scanCode: '', |
|||
items: [{code: 'A001', qty: 1}, {code: 'A002', qty: 2}] |
|||
} |
|||
}, |
|||
computed: { |
|||
totalQty() { |
|||
return this.items.reduce((sum, item) => sum + item.qty, 0) |
|||
} |
|||
qualifiedList: [], |
|||
historyList: [], |
|||
inboundItem: {}, |
|||
inboundData: { |
|||
inboundQty: '', |
|||
targetLocationId: '', |
|||
inboundDate: '', |
|||
operatorName: '', |
|||
inboundRemark: '' |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
rowClick(row){ |
|||
handleBack() { |
|||
if (this.processFlag === 1) { |
|||
this.$router.back(); |
|||
} else if (this.processFlag === 2) { |
|||
this.processFlag = 1; |
|||
this.resetInboundData(); |
|||
} else { |
|||
this.processFlag = 1; |
|||
} |
|||
}, |
|||
|
|||
// 查询检验合格单据 |
|||
searchQualifiedList() { |
|||
const params = { |
|||
site: '1' // 默认站点 |
|||
}; |
|||
if (this.scanCode) { |
|||
params.transNo = this.scanCode; |
|||
} |
|||
|
|||
getQualifiedInspectionList(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.qualifiedList = data.rows || []; |
|||
if (this.qualifiedList.length === 0) { |
|||
this.$message.success("暂无检验合格待入库单据"); |
|||
} |
|||
} else { |
|||
this.$message.error(data.msg || "查询失败"); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error("查询失败"); |
|||
console.error(error); |
|||
}); |
|||
}, |
|||
|
|||
// 选择入库项目 |
|||
selectInboundItem(item) { |
|||
this.inboundItem = { ...item }; |
|||
this.resetInboundData(); |
|||
// 默认入库数量为合格数量 |
|||
this.inboundData.inboundQty = item.qualifiedQty; |
|||
this.inboundData.targetLocationId = item.locationId; // 默认使用原库位 |
|||
this.inboundData.inboundDate = this.getCurrentDate(); |
|||
this.inboundData.operatorName = 'current_user'; // 这里应该从用户信息中获取 |
|||
this.processFlag = 2; |
|||
}, |
|||
|
|||
// 确认入库 |
|||
confirmInbound() { |
|||
// 验证必填项 |
|||
if (!this.inboundData.inboundQty || this.inboundData.inboundQty <= 0) { |
|||
return this.$message.error("请输入有效的入库数量"); |
|||
} |
|||
|
|||
if (!this.inboundData.targetLocationId) { |
|||
return this.$message.error("请输入目标库位"); |
|||
} |
|||
|
|||
if (!this.inboundData.inboundDate) { |
|||
return this.$message.error("请选择入库日期"); |
|||
} |
|||
|
|||
const inboundQty = parseFloat(this.inboundData.inboundQty); |
|||
const qualifiedQty = parseFloat(this.inboundItem.qualifiedQty); |
|||
|
|||
if (inboundQty > qualifiedQty) { |
|||
return this.$message.error("入库数量不能大于合格数量"); |
|||
} |
|||
|
|||
const params = { |
|||
site: this.inboundItem.site, |
|||
transNo: this.inboundItem.transNo, |
|||
itemNo: this.inboundItem.itemNo, |
|||
partNo: this.inboundItem.partNo, |
|||
batchNo: this.inboundItem.batchNo, |
|||
inboundQty: inboundQty, |
|||
targetLocationId: this.inboundData.targetLocationId, |
|||
inboundDate: this.inboundData.inboundDate, |
|||
operatorName: this.inboundData.operatorName, |
|||
inboundRemark: this.inboundData.inboundRemark, |
|||
warehouseId: this.inboundItem.warehouseId, |
|||
orderRef1: this.inboundItem.orderRef1, |
|||
orderRef2: this.inboundItem.orderRef2, |
|||
orderRef3: this.inboundItem.orderRef3 |
|||
}; |
|||
|
|||
confirmQualifiedInbound(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success("检验合格入库成功"); |
|||
this.processFlag = 1; |
|||
this.resetInboundData(); |
|||
this.searchQualifiedList(); // 刷新列表 |
|||
} else { |
|||
this.$message.error(data.msg || "入库失败"); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error("入库失败"); |
|||
console.error(error); |
|||
}); |
|||
}, |
|||
addItem() { |
|||
if (!this.scanCode) return |
|||
this.items.push({ |
|||
code: this.scanCode, |
|||
qty: 1 |
|||
}) |
|||
this.scanCode = '' |
|||
|
|||
// 查询入库历史 |
|||
searchInboundHistory() { |
|||
const params = { |
|||
site: '1' |
|||
}; |
|||
|
|||
getInboundHistory(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.historyList = data.rows || []; |
|||
if (this.historyList.length === 0) { |
|||
this.$message.info("暂无入库历史记录"); |
|||
} |
|||
} else { |
|||
this.$message.error(data.msg || "查询失败"); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error("查询失败"); |
|||
console.error(error); |
|||
}); |
|||
}, |
|||
removeItem(index) { |
|||
this.items.splice(index, 1) |
|||
|
|||
// 重置入库数据 |
|||
resetInboundData() { |
|||
this.inboundData = { |
|||
inboundQty: '', |
|||
targetLocationId: '', |
|||
inboundDate: '', |
|||
operatorName: '', |
|||
inboundRemark: '' |
|||
}; |
|||
}, |
|||
|
|||
// 获取当前日期 |
|||
getCurrentDate() { |
|||
const now = new Date(); |
|||
return now.getFullYear() + '-' + |
|||
String(now.getMonth() + 1).padStart(2, '0') + '-' + |
|||
String(now.getDate()).padStart(2, '0'); |
|||
}, |
|||
submit() { |
|||
alert(`已提交${this.items.length}种商品`) |
|||
this.items = [] |
|||
|
|||
// 格式化日期 |
|||
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.searchQualifiedList(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pda-container { |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.status-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
//background: #67C23A; |
|||
color: white; |
|||
padding: 10px 15px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.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-list span { |
|||
color: #000; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.bottom-line-row { |
|||
border-bottom: 1px solid rgba(200, 200, 200, 0.8); |
|||
} |
|||
|
|||
.inboundButton { |
|||
font-size: 16px; |
|||
border-radius: 3px; |
|||
color: #67C23A; |
|||
} |
|||
|
|||
.item-row { |
|||
.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-between; |
|||
padding: 8px; |
|||
border-bottom: 1px solid #eee; |
|||
justify-content: space-around; |
|||
padding: 10px; |
|||
background: white; |
|||
border-top: 1px solid #ddd; |
|||
} |
|||
|
|||
/deep/ .el-table .cell { |
|||
line-height: 24px; |
|||
font-size: 12px; |
|||
height: 24px; |
|||
.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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue