Browse Source

移库

master
han\hanst 5 months ago
parent
commit
ec9cf14821
  1. 3
      src/api/po/po.js
  2. 1
      src/router/index.js
  3. 13
      src/views/modules/other-transaction/index.vue
  4. 688
      src/views/modules/other-transaction/inventory-move.vue

3
src/api/po/po.js

@ -45,3 +45,6 @@ export const getPoReceiveRecords = data => createAPI(`po/getPoReceiveRecords`,'p
// 根据接收单号获取HandlingUnit列表
export const getHandlingUnitsByReceiptNo = data => createAPI(`po/getHandlingUnitsByReceiptNo`,'post',data)
// 确认库存移库
export const confirmInventoryMove = data => createAPI(`other/confirmInventoryMove`,'post',data)

1
src/router/index.js

@ -97,6 +97,7 @@ const globalRoutes = [
{path: "/scrap",name: "scrap", component: resolve => require(["@/views/modules/other-transaction/scrap.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
{path: "/other-inbound",name: "other-inbound", component: resolve => require(["@/views/modules/other-transaction/other-inbound.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
{path: "/other-outbound",name: "other-outbound", component: resolve => require(["@/views/modules/other-transaction/other-outbound.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
{path: "/inventory-move",name: "inventory-move", component: resolve => require(["@/views/modules/other-transaction/inventory-move.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
// Material Requisition
{path: "/mrissue",name: "mrissue", component: resolve => require(["@/views/modules/mr-issue/index.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},

13
src/views/modules/other-transaction/index.vue

@ -60,11 +60,11 @@ export default {
disabled: false,
},
{
icon: "scan",
icon: "exchange",
label: "移库",
iconClass: "purchase",
to: "productionPicking",
disabled: true,
iconClass: "inventory-move",
to: "inventory-move",
disabled: false,
},
/* {
icon: "records",
@ -210,6 +210,11 @@ export default {
box-shadow: 0 4px 8px rgba(245, 34, 45, 0.3);
}
.menu-icon.inventory-move {
background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
box-shadow: 0 4px 8px rgba(114, 46, 209, 0.3);
}
.menu-text {
font-size: 10px;
color: #333;

688
src/views/modules/other-transaction/inventory-move.vue

@ -0,0 +1,688 @@
<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="moveForm.targetLocationId"
placeholder="请扫描或输入目标库位"
size="small"
@keyup.enter.native="handleLocationScan"
ref="locationInput">
</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="16">
<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="24" v-if="label.partDesc">
<el-form-item label="物料描述">
<span>{{ label.partDesc }}</span>
</el-form-item>
</el-col>
<el-col :span="10" v-if="label.batchNo">
<el-form-item label="批次号">
<span>{{ label.batchNo }}</span>
</el-form-item>
</el-col>
<el-col :span="10" v-if="label.locationId">
<el-form-item label="当前库位">
<span>{{ label.locationId }}</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-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="confirmMove">
确认移库
</button>
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelProcess">
取消
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { scanHandlingUnitLabel, confirmInventoryMove } from '@/api/po/po.js';
export default {
data() {
return {
scanCode: '',
isRemoveMode: false, //
moveForm: {
moveReason: '',
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 = '';
},
//
handleLocationScan() {
if (!this.moveForm.targetLocationId.trim()) {
return;
}
//
if (this.$refs.locationInput) {
this.$refs.locationInput.blur();
}
//
this.$nextTick(() => {
// 1
const bottomActions = document.querySelector('.bottom-actions');
if (bottomActions) {
bottomActions.scrollIntoView({
behavior: 'smooth',
block: 'end'
});
return;
}
// 2
const scrollContainer = document.querySelector('.pda-container > div[style*="overflow-y"]') ||
document.querySelector('.pda-container > div:nth-child(2)');
if (scrollContainer) {
scrollContainer.scrollTo({
top: scrollContainer.scrollHeight,
behavior: 'smooth'
});
return;
}
// 3 -
setTimeout(() => {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: 'smooth'
});
}, 100);
});
},
//
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,
wdr: huInfo.wdr
});
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');
}
},
//
confirmMove() {
//
if (!this.moveForm.targetLocationId) {
this.$message.error('请输入目标库位');
return;
}
if (this.scannedItems.length === 0) {
this.$message.warning('请先扫描HandlingUnit');
return;
}
//
const sameLocationItems = this.scannedItems.filter(item =>
item.locationId === this.moveForm.targetLocationId
);
if (sameLocationItems.length > 0) {
this.$message.error('目标库位不能与当前库位相同');
return;
}
this.$confirm('确认要进行移库操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.submitConfirmMove();
}).catch(() => {
//
});
},
//
submitConfirmMove() {
const handlingUnitIds = this.scannedItems.map(item => item.unitId);
const params = {
site: this.site,
moveReason: this.moveForm.moveReason,
targetLocationId: this.moveForm.targetLocationId,
handlingUnitIds: handlingUnitIds,
scannedItems: this.scannedItems
};
// API
confirmInventoryMove(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() {
//
}
},
mounted() {
//
this.initFormData();
//
this.$nextTick(() => {
if (this.$refs.scanInput) {
this.$refs.scanInput.focus();
}
});
}
};
</script>
<style scoped>
/* 复用other-inbound.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%;
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;
}
/* 表单样式 */
.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>
Loading…
Cancel
Save