fengyuan_yang
4 months ago
5 changed files with 1336 additions and 8 deletions
-
12src/api/po/po.js
-
2src/router/index.js
-
30src/views/modules/other-transaction/index.vue
-
677src/views/modules/other-transaction/other-inbound.vue
-
623src/views/modules/other-transaction/other-outbound.vue
@ -0,0 +1,677 @@ |
|||||
|
<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 style="overflow-y: auto"> |
||||
|
<!-- 搜索框 --> |
||||
|
<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"> |
||||
|
<div class="input-form"> |
||||
|
<div class="form-row"> |
||||
|
<div class="form-item"> |
||||
|
<label class="form-label">操作员</label> |
||||
|
<el-input |
||||
|
v-model="inboundForm.operatorName" |
||||
|
placeholder="请输入操作员" |
||||
|
size="small"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="form-item"> |
||||
|
<label class="form-label">操作时间</label> |
||||
|
<el-date-picker |
||||
|
v-model="inboundForm.operateTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择操作时间" |
||||
|
size="small" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-row"> |
||||
|
<div class="form-item"> |
||||
|
<label class="form-label">入库原因</label> |
||||
|
<el-input |
||||
|
v-model="inboundForm.inboundReason" |
||||
|
placeholder="请输入入库原因" |
||||
|
size="small"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="form-item"> |
||||
|
<label class="form-label">目标库位</label> |
||||
|
<el-input |
||||
|
v-model="inboundForm.targetLocationId" |
||||
|
placeholder="请输入目标库位" |
||||
|
size="small"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 其它入库信息确认标题 --> |
||||
|
<div class="section-title"> |
||||
|
<div class="title-left"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<span>其它入库信息确认</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 扫描的HandlingUnit明细列表 --> |
||||
|
<div class="scanned-items" v-if="scannedItems.length > 0" style="margin: 2px;"> |
||||
|
<div class="label-list"> |
||||
|
<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; margin-bottom: 8px; padding: 8px;"> |
||||
|
<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> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="scannedItems.length === 0" class="empty-labels"> |
||||
|
<div style="text-align: center; padding: 20px;"> |
||||
|
<p style="color: #999; margin: 0;">暂无扫描HandlingUnit</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部操作按钮 --> |
||||
|
<div class="bottom-actions" v-if="scannedItems.length > 0"> |
||||
|
<button class="action-btn primary" @click="confirmInbound"> |
||||
|
确认其它入库 |
||||
|
</button> |
||||
|
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelProcess"> |
||||
|
取消 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { scanHandlingUnitLabel, confirmOtherInbound } from '@/api/po/po.js'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scanCode: '', |
||||
|
isRemoveMode: false, // 默认为添加模式 |
||||
|
inboundForm: { |
||||
|
operatorName: '', |
||||
|
operateTime: '', |
||||
|
inboundReason: '', |
||||
|
targetLocationId: '' |
||||
|
}, |
||||
|
scannedItems: [], |
||||
|
site: localStorage.getItem('site') || 'SITE01' |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理扫描 |
||||
|
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.site, |
||||
|
}; |
||||
|
|
||||
|
scanHandlingUnitLabel(params).then(({ data }) => { |
||||
|
if (data && data.code === 0 && data.data) { |
||||
|
const huInfo = data.data; |
||||
|
this.processHandlingUnit(unitId, huInfo); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || 'HandlingUnit不存在或查询失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.$message.error('扫描失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 处理HandlingUnit数据 |
||||
|
processHandlingUnit(unitId, huInfo) { |
||||
|
// 检查是否已经扫描过 |
||||
|
const exists = this.scannedItems.find(item => item.unitId === unitId); |
||||
|
if (exists) { |
||||
|
this.$message.warning('该HandlingUnit已扫描，请勿重复扫描'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 校验HU是否属于当前站点 |
||||
|
if (huInfo.site && huInfo.site !== this.site) { |
||||
|
this.$message.error('HandlingUnit站点不匹配'); |
||||
|
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('扫描成功'); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 辅助函数：字符串左填充（兼容Vue2） |
||||
|
padStart(str, targetLength, padString) { |
||||
|
str = String(str); |
||||
|
if (str.length >= targetLength) { |
||||
|
return str; |
||||
|
} |
||||
|
padString = String(padString || ' '); |
||||
|
const padLength = targetLength - str.length; |
||||
|
let pad = ''; |
||||
|
for (let i = 0; i < padLength; i++) { |
||||
|
pad += padString; |
||||
|
} |
||||
|
return pad + str; |
||||
|
}, |
||||
|
|
||||
|
// 通过条码移除标签 |
||||
|
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'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 确认其它入库 |
||||
|
confirmInbound() { |
||||
|
// 验证必填字段 |
||||
|
if (!this.inboundForm.operatorName) { |
||||
|
this.$message.error('请输入操作员'); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.inboundForm.operateTime) { |
||||
|
this.$message.error('请选择操作时间'); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.inboundForm.targetLocationId) { |
||||
|
this.$message.error('请输入目标库位'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.scannedItems.length === 0) { |
||||
|
this.$message.warning('请先扫描HandlingUnit'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.$confirm('确认要进行其它入库操作吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.submitConfirmInbound(); |
||||
|
}).catch(() => { |
||||
|
// 用户取消 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 提交确认入库 |
||||
|
submitConfirmInbound() { |
||||
|
const handlingUnitIds = this.scannedItems.map(item => item.unitId); |
||||
|
|
||||
|
const params = { |
||||
|
site: this.site, |
||||
|
operatorName: this.inboundForm.operatorName, |
||||
|
operateTime: this.inboundForm.operateTime, |
||||
|
inboundReason: this.inboundForm.inboundReason, |
||||
|
targetLocationId: this.inboundForm.targetLocationId, |
||||
|
handlingUnitIds: handlingUnitIds, |
||||
|
scannedItems: this.scannedItems |
||||
|
}; |
||||
|
|
||||
|
// 调用后端API |
||||
|
confirmOtherInbound(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message({ |
||||
|
message: '其它入库成功！处理单元: ' + handlingUnitIds.length + '个', |
||||
|
type: 'success', |
||||
|
duration: 3000 |
||||
|
}); |
||||
|
|
||||
|
// 跳转回其他出入库页面 |
||||
|
setTimeout(() => { |
||||
|
this.$router.push({ path: '/otherinout' }); |
||||
|
}, 1000); |
||||
|
} 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(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 初始化表单数据 |
||||
|
initFormData() { |
||||
|
// 设置默认操作时间为当前时间 |
||||
|
const now = new Date(); |
||||
|
this.inboundForm.operateTime = now.getFullYear() + '-' + |
||||
|
this.padStart((now.getMonth() + 1).toString(), 2, '0') + '-' + |
||||
|
this.padStart(now.getDate().toString(), 2, '0') + ' ' + |
||||
|
this.padStart(now.getHours().toString(), 2, '0') + ':' + |
||||
|
this.padStart(now.getMinutes().toString(), 2, '0'); |
||||
|
|
||||
|
// 设置默认操作员 |
||||
|
this.inboundForm.operatorName = localStorage.getItem('userName') || '系统用户'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
// 初始化表单数据 |
||||
|
this.initFormData(); |
||||
|
|
||||
|
// 聚焦扫描框 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.scanInput) { |
||||
|
this.$refs.scanInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 复用unqualifiedProcess.vue的样式 */ |
||||
|
.pda-container { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.status-bar { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
padding: 8px 16px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
} |
||||
|
|
||||
|
.goBack { |
||||
|
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%; |
||||
|
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%; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
/* 表单样式 */ |
||||
|
.input-form { |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.form-row { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.form-row:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.form-item { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.form-label { |
||||
|
font-size: 11px; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 4px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.form-item .el-input { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.form-item .el-date-editor { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 区域标题 */ |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
/* 标签列表 */ |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.bottom-line-row { |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
margin-bottom: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.empty-labels { |
||||
|
padding: 20px; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
background: white; |
||||
|
margin: 0 16px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
/* 底部操作按钮 */ |
||||
|
.bottom-actions { |
||||
|
display: flex; |
||||
|
padding: 16px; |
||||
|
gap: 20px; |
||||
|
background: white; |
||||
|
margin-top: auto; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
flex: 1; |
||||
|
padding: 12px; |
||||
|
border: 1px solid #17B3A3; |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
border-radius: 20px; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.action-btn.secondary { |
||||
|
background: white; |
||||
|
color: #17B3A3; |
||||
|
} |
||||
|
|
||||
|
.action-btn:hover { |
||||
|
background: #0d8f7f; |
||||
|
border-color: #0d8f7f; |
||||
|
} |
||||
|
|
||||
|
.action-btn.secondary:hover { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.action-btn:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 360px) { |
||||
|
.status-bar { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.material-info-card { |
||||
|
margin: 4px 12px; |
||||
|
padding: 6px 16px; |
||||
|
} |
||||
|
|
||||
|
.item-list { |
||||
|
margin: 0 12px 8px; |
||||
|
} |
||||
|
|
||||
|
.form-row { |
||||
|
gap: 8px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.form-label { |
||||
|
font-size: 10px; |
||||
|
margin-bottom: 2px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,623 @@ |
|||||
|
<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 style="overflow-y: auto"> |
||||
|
<!-- 搜索框 --> |
||||
|
<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"> |
||||
|
<div class="input-form"> |
||||
|
<div class="form-row"> |
||||
|
<div class="form-item"> |
||||
|
<label class="form-label">操作员</label> |
||||
|
<el-input |
||||
|
v-model="outboundForm.operatorName" |
||||
|
placeholder="请输入操作员" |
||||
|
size="small"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="form-item"> |
||||
|
<label class="form-label">操作时间</label> |
||||
|
<el-date-picker |
||||
|
v-model="outboundForm.operateTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择操作时间" |
||||
|
size="small" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-row"> |
||||
|
<div class="form-item full-width"> |
||||
|
<label class="form-label">出库原因</label> |
||||
|
<el-input |
||||
|
v-model="outboundForm.outboundReason" |
||||
|
placeholder="请输入出库原因" |
||||
|
size="small"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 其它出库信息确认标题 --> |
||||
|
<div class="section-title"> |
||||
|
<div class="title-left"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<span>其它出库信息确认</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 扫描的HandlingUnit列表 --> |
||||
|
<div class="scanned-items" v-if="scannedItems.length > 0" style="margin: 2px;"> |
||||
|
<div class="label-list"> |
||||
|
<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; margin-bottom: 8px; padding: 8px;"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="HandlingUnit" style="margin-bottom: 3px;"> |
||||
|
<el-input :value="label.unitId" readonly size="mini" style="font-size: 11px; color: #666;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="当前库位" style="margin-bottom: 3px;"> |
||||
|
<el-input :value="label.locationId" readonly size="mini" style="font-size: 11px; color: #666;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="物料号" style="margin-bottom: 3px;"> |
||||
|
<el-input :value="label.partNo" readonly size="mini" style="font-size: 11px; color: #666;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="批次号" style="margin-bottom: 3px;"> |
||||
|
<el-input :value="label.batchNo" readonly size="mini" style="font-size: 11px; color: #666;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="物料描述" style="margin-bottom: 3px;"> |
||||
|
<el-input :value="label.partDesc" readonly size="mini" style="font-size: 11px; color: #666;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="数量" style="margin-bottom: 0;"> |
||||
|
<el-input :value="label.qty + ' ' + label.unit" readonly size="mini" style="font-size: 11px; color: #666;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="action-buttons" style="text-align: right; margin-top: 18px;"> |
||||
|
<el-button size="mini" type="danger" @click="removeLabel(label)">删除</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="scannedItems.length === 0" class="empty-labels"> |
||||
|
<div style="text-align: center; padding: 20px;"> |
||||
|
<p style="color: #999; margin: 0;">暂无扫描HandlingUnit</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部操作按钮 --> |
||||
|
<div class="bottom-actions" v-if="scannedItems.length > 0"> |
||||
|
<button class="action-btn primary" @click="confirmOutbound">确认出库</button> |
||||
|
<button class="action-btn" @click="cancelProcess">取消</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { scanHandlingUnitLabel, confirmOtherOutbound, getOtherOutboundHistory } from '@/api/po/po' |
||||
|
|
||||
|
export default { |
||||
|
name: 'OtherOutbound', |
||||
|
data() { |
||||
|
return { |
||||
|
scanCode: '', |
||||
|
isRemoveMode: false, // 默认为添加模式 |
||||
|
outboundForm: { |
||||
|
operatorName: '', |
||||
|
operateTime: '', |
||||
|
outboundReason: '' |
||||
|
}, |
||||
|
scannedItems: [], |
||||
|
site: localStorage.getItem('site') || 'SITE01' |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理扫描 |
||||
|
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.site, |
||||
|
}; |
||||
|
|
||||
|
scanHandlingUnitLabel(params).then(({ data }) => { |
||||
|
if (data && data.code === 0 && data.data) { |
||||
|
const huInfo = data.data; |
||||
|
this.processHandlingUnit(unitId, huInfo); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || 'HandlingUnit不存在或查询失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.$message.error('扫描失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 处理HandlingUnit数据 |
||||
|
processHandlingUnit(unitId, huInfo) { |
||||
|
// 检查是否已经扫描过 |
||||
|
const exists = this.scannedItems.find(item => item.unitId === unitId); |
||||
|
if (exists) { |
||||
|
this.$message.warning('该HandlingUnit已扫描，请勿重复扫描'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 校验HU是否属于当前站点 |
||||
|
if (huInfo.site && huInfo.site !== this.site) { |
||||
|
this.$message.error('HandlingUnit站点不匹配'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 校验HU是否在库 |
||||
|
if (huInfo.inStockFlag !== 'Y') { |
||||
|
this.$message.error('HandlingUnit不在库，无法出库'); |
||||
|
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('扫描成功'); |
||||
|
}, |
||||
|
|
||||
|
// 根据扫描码移除标签 |
||||
|
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'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 删除标签 |
||||
|
removeLabel(label) { |
||||
|
const index = this.scannedItems.indexOf(label); |
||||
|
if (index > -1) { |
||||
|
this.scannedItems.splice(index, 1); |
||||
|
this.$message.success('删除成功'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 确认其它出库 |
||||
|
confirmOutbound() { |
||||
|
// 验证必填字段 |
||||
|
if (!this.outboundForm.operatorName) { |
||||
|
this.$message.error('请输入操作员'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.outboundForm.operateTime) { |
||||
|
this.$message.error('请选择操作时间'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.scannedItems.length === 0) { |
||||
|
this.$message.error('请至少扫描一个HandlingUnit'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 构建HandlingUnit ID列表 |
||||
|
const handlingUnitIds = this.scannedItems.map(item => item.unitId); |
||||
|
|
||||
|
const params = { |
||||
|
site: this.site, |
||||
|
operatorName: this.outboundForm.operatorName, |
||||
|
operateTime: this.outboundForm.operateTime, |
||||
|
outboundReason: this.outboundForm.outboundReason, |
||||
|
handlingUnitIds: handlingUnitIds, |
||||
|
scannedItems: this.scannedItems |
||||
|
}; |
||||
|
|
||||
|
// 调用后端API |
||||
|
confirmOtherOutbound(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message({ |
||||
|
message: '其它出库成功！处理单元: ' + handlingUnitIds.length + '个', |
||||
|
type: 'success', |
||||
|
duration: 3000 |
||||
|
}); |
||||
|
|
||||
|
// 跳转回其他出入库页面 |
||||
|
setTimeout(() => { |
||||
|
this.$router.push({ path: '/otherinout' }); |
||||
|
}, 1000); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '其它出库失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('其它出库失败:', error); |
||||
|
this.$message.error('其它出库失败，请重试'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 取消处理 |
||||
|
cancelProcess() { |
||||
|
if (this.scannedItems.length > 0) { |
||||
|
this.$confirm('确认取消当前操作？已扫描的数据将会丢失。', '确认', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.$router.go(-1); |
||||
|
}).catch(() => { |
||||
|
// 用户取消，不做任何操作 |
||||
|
}); |
||||
|
} else { |
||||
|
this.$router.go(-1); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 初始化表单数据 |
||||
|
initFormData() { |
||||
|
// 设置默认操作时间为当前时间 |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
const day = now.getDate().toString().padStart(2, '0'); |
||||
|
const hours = now.getHours().toString().padStart(2, '0'); |
||||
|
const minutes = now.getMinutes().toString().padStart(2, '0'); |
||||
|
const seconds = now.getSeconds().toString().padStart(2, '0'); |
||||
|
|
||||
|
this.outboundForm.operateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initFormData(); |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.scanInput) { |
||||
|
this.$refs.scanInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 搜索容器样式 */ |
||||
|
.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 .el-input__inner { |
||||
|
height: 36px; |
||||
|
line-height: 36px; |
||||
|
font-size: 14px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
/* 模式切换按钮样式 */ |
||||
|
.mode-switch { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.custom-switch { |
||||
|
transform: scale(1.3); |
||||
|
} |
||||
|
|
||||
|
.switch-text { |
||||
|
position: absolute; |
||||
|
left: 25%; |
||||
|
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%; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
/* 表单样式 */ |
||||
|
.input-form { |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.form-row { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.form-row:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.form-item { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.form-item.full-width { |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.form-label { |
||||
|
font-size: 11px; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 4px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.form-item .el-input { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.form-item .el-date-editor { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 区域标题 */ |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
/* 标签列表 */ |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.bottom-line-row { |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
margin-bottom: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.empty-labels { |
||||
|
background: white; |
||||
|
margin: 0 16px 12px; |
||||
|
border-radius: 0 0 8px 8px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
/* 底部操作按钮 */ |
||||
|
.bottom-actions { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
justify-content: center; |
||||
|
padding: 16px; |
||||
|
background: white; |
||||
|
margin: 0 16px 12px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
flex: 1; |
||||
|
max-width: 120px; |
||||
|
height: 40px; |
||||
|
border: none; |
||||
|
border-radius: 6px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.action-btn.primary { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.action-btn.primary:hover { |
||||
|
background: #13a094; |
||||
|
} |
||||
|
|
||||
|
.action-btn:not(.primary) { |
||||
|
background: #f5f5f5; |
||||
|
color: #666; |
||||
|
border: 1px solid #ddd; |
||||
|
} |
||||
|
|
||||
|
.action-btn:not(.primary):hover { |
||||
|
background: #e9e9e9; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 360px) { |
||||
|
.search-container { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.search-container .el-input { |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.form-row { |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.material-info-card { |
||||
|
margin: 4px 12px; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
margin: 0 12px; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
|
||||
|
.label-list { |
||||
|
margin: 0 12px 12px; |
||||
|
} |
||||
|
|
||||
|
.empty-labels { |
||||
|
margin: 0 12px 12px; |
||||
|
} |
||||
|
|
||||
|
.bottom-actions { |
||||
|
margin: 0 12px 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue