You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
11 KiB
329 lines
11 KiB
<template>
|
|
<div>
|
|
<div class="pda-container" v-loading.fullscreen.lock="fullscreenLoading">
|
|
<div class="status-bar">
|
|
<div class="goBack" @click="handleBack"><i class="el-icon-arrow-left"></i>上一页</div>
|
|
<div class="goBack">{{ viewMode === 'records' ? '补打标签' : 'HandlingUnit列表' }}</div>
|
|
<div class="network" style="color: #fff" @click="$router.push({ path: '/' })">🏠首页</div>
|
|
</div>
|
|
<div style="overflow-y: auto">
|
|
<!-- 扫描PO单号 -->
|
|
<div v-if="viewMode === 'records'" class="scan-box" style="margin: 2px;">
|
|
<el-input clearable v-model="scanCode" placeholder="扫描PO条码或输入PO号"
|
|
@keyup.enter.native="searchReceiveRecords" ref="scanCodeRef" />
|
|
</div>
|
|
|
|
<!-- 接收记录列表 -->
|
|
<div v-if="viewMode === 'records' && receiveRecords.length > 0" class="item-list" style="margin: 2px;">
|
|
<el-form label-position="top" style="margin: 3px;">
|
|
<el-row :gutter="5"
|
|
v-for="(record, index) in receiveRecords"
|
|
:key="index"
|
|
:class="index < receiveRecords.length - 1 ? 'bottom-line-row' : ''"
|
|
@click.native="viewHandlingUnits(record)">
|
|
<el-col :span="8">
|
|
<el-form-item label="商品编码"><span>{{ record.partNo }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="行号/下达号"><span>{{ record.lineNo }}/{{ record.wdr || '*' }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="">
|
|
<el-button type="text" class="viewButton" @click.stop="viewHandlingUnits(record)"
|
|
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>{{ record.description }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="6" :class="{ mt10: getTextWidth(record.description) > 34 }">
|
|
<el-form-item label="接收数量"><span>{{ record.transQty }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="6" :class="{ mt10: getTextWidth(record.description) > 34 }">
|
|
<el-form-item label="批号"><span>{{ record.batchNo }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="6" :class="{ mt10: getTextWidth(record.description) > 34 }">
|
|
<el-form-item label="库位"><span>{{ record.locationNo }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="6" :class="{ mt10: getTextWidth(record.description) > 34 }">
|
|
<el-form-item label="接收日期"><span>{{ formatDate(record.receiveDate) }}</span></el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- HandlingUnit列表 -->
|
|
<div v-if="viewMode === 'handlingUnits'" class="item-list" style="margin: 2px;">
|
|
<div v-if="currentReceiveRecord" style="background: #f5f7fa; padding: 10px; margin-bottom: 10px; border-radius: 4px;">
|
|
<div style="font-weight: bold; margin-bottom: 5px;">接收记录信息</div>
|
|
<div style="font-size: 14px; color: #666;">
|
|
{{ currentReceiveRecord.partNo }} - {{ currentReceiveRecord.description }}
|
|
<br>接收单号: {{ currentReceiveRecord.receiptNo }}
|
|
</div>
|
|
</div>
|
|
|
|
<el-form label-position="top" style="margin: 3px;" v-if="handlingUnits.length > 0">
|
|
<el-row :gutter="5"
|
|
v-for="(unit, index) in handlingUnits"
|
|
:key="index"
|
|
:class="index < handlingUnits.length - 1 ? 'bottom-line-row' : ''">
|
|
<el-col :span="12">
|
|
<el-form-item label="Unit ID"><span>{{ unit.unitId }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="数量"><span>{{ unit.qty }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="">
|
|
<el-button type="text" class="printButton" @click="reprintHandlingUnitLabel(unit)"
|
|
style="margin-top: 10px;margin-left: 20px" size="small">补打</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="批号"><span>{{ unit.batchNo }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="库位"><span>{{ unit.locationId }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="状态"><span>{{ unit.status }}</span></el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="创建日期"><span>{{ formatDate(unit.createdDate) }}</span></el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<div v-if="handlingUnits.length === 0 && !fullscreenLoading"
|
|
style="text-align: center; padding: 20px; color: #999;">
|
|
该接收记录下没有HandlingUnit
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 无数据提示 -->
|
|
<div v-if="viewMode === 'records' && scanCode && receiveRecords.length === 0 && !fullscreenLoading"
|
|
style="text-align: center; padding: 20px; color: #999;">
|
|
未找到该PO单号的接收记录
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPoReceiveRecords, getHandlingUnitsByReceiptNo, printLabel } from "@/api/po/po.js";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
scanCode: '',
|
|
receiveRecords: [],
|
|
handlingUnits: [],
|
|
currentReceiptNo: '',
|
|
currentReceiveRecord: null,
|
|
viewMode: 'records', // 'records' | 'handlingUnits'
|
|
site: localStorage.getItem('site'),
|
|
warehouseId: localStorage.getItem('selectedWarehouse'),
|
|
fullscreenLoading: false,
|
|
// 打印相关配置
|
|
reportId: 'PO_RECEIVE_LABEL',
|
|
zplCode: '',
|
|
paperSize: 'A4',
|
|
orientation: 'Portrait',
|
|
dpi: 300
|
|
};
|
|
},
|
|
methods: {
|
|
// 计算"显示宽度"
|
|
getTextWidth(text) {
|
|
if (!text) return 0
|
|
let len = 0
|
|
for (let char of text) {
|
|
// 中文、全角符号
|
|
if (/[\u4e00-\u9fa5\u3000-\u303F\uFF00-\uFFEF]/.test(char)) {
|
|
len += 2
|
|
} else {
|
|
len += 1
|
|
}
|
|
}
|
|
return len
|
|
},
|
|
handleBack() {
|
|
if (this.viewMode === 'handlingUnits') {
|
|
// 从HandlingUnit列表返回到接收记录列表
|
|
this.viewMode = 'records';
|
|
this.handlingUnits = [];
|
|
this.currentReceiveRecord = null;
|
|
this.currentReceiptNo = '';
|
|
} else {
|
|
// 从接收记录列表返回到上一页
|
|
this.$router.back();
|
|
}
|
|
},
|
|
// 搜索PO接收记录
|
|
searchReceiveRecords() {
|
|
if (!this.scanCode) {
|
|
this.receiveRecords = [];
|
|
return;
|
|
}
|
|
|
|
this.fullscreenLoading = true;
|
|
getPoReceiveRecords({
|
|
poNumber: this.scanCode,
|
|
site: this.site,
|
|
warehouseId: this.warehouseId
|
|
}).then(({ data }) => {
|
|
if (data.code === 0) {
|
|
this.receiveRecords = data.rows || [];
|
|
if (this.receiveRecords.length === 0) {
|
|
this.$message.warning('未找到该PO单号的接收记录');
|
|
}
|
|
} else {
|
|
this.$message.error(data.msg || '查询失败');
|
|
this.receiveRecords = [];
|
|
}
|
|
}).catch(error => {
|
|
console.error('查询接收记录失败:', error);
|
|
this.$message.error('网络错误，请重试');
|
|
this.receiveRecords = [];
|
|
}).finally(() => {
|
|
this.fullscreenLoading = false;
|
|
});
|
|
},
|
|
// 查看HandlingUnit列表
|
|
viewHandlingUnits(record) {
|
|
this.currentReceiveRecord = record;
|
|
this.currentReceiptNo = record.receiptNo;
|
|
this.fullscreenLoading = true;
|
|
|
|
getHandlingUnitsByReceiptNo({
|
|
site: this.site,
|
|
receiptNo: record.receiptNo
|
|
}).then(({ data }) => {
|
|
if (data.code === 0) {
|
|
this.handlingUnits = data.rows || [];
|
|
this.viewMode = 'handlingUnits';
|
|
if (this.handlingUnits.length === 0) {
|
|
this.$message.warning('该接收记录下没有HandlingUnit');
|
|
}
|
|
} else {
|
|
this.$message.error(data.msg || '查询HandlingUnit失败');
|
|
}
|
|
}).catch(error => {
|
|
console.error('查询HandlingUnit失败:', error);
|
|
this.$message.error('网络错误，请重试');
|
|
}).finally(() => {
|
|
this.fullscreenLoading = false;
|
|
});
|
|
},
|
|
// 补打HandlingUnit标签
|
|
async reprintHandlingUnitLabel(unit) {
|
|
if (this.fullscreenLoading) return;
|
|
|
|
this.fullscreenLoading = true;
|
|
try {
|
|
await this.printViaServer(unit.unitId);
|
|
this.$message.success('补打标签任务已发送！');
|
|
} catch (error) {
|
|
console.error('补打标签失败:', error);
|
|
this.$message.error(`补打标签失败: ${error.message || error}`);
|
|
} finally {
|
|
this.fullscreenLoading = false;
|
|
}
|
|
},
|
|
/**
|
|
* 通过服务器打印
|
|
*/
|
|
async printViaServer(unitId) {
|
|
try {
|
|
const printRequest = {
|
|
reportId: this.reportId,
|
|
zplCode: this.zplCode,
|
|
paperSize: this.paperSize,
|
|
orientation: this.orientation,
|
|
dpi: this.dpi,
|
|
userId: localStorage.getItem('userName'),
|
|
username: localStorage.getItem('userName'),
|
|
site: localStorage.getItem('site'),
|
|
unitId: unitId
|
|
}
|
|
const { data } = await printLabel(printRequest)
|
|
if (data.code === 200) {
|
|
return Promise.resolve();
|
|
} else {
|
|
return Promise.reject(new Error(data.msg || '打印失败'));
|
|
}
|
|
} catch (error) {
|
|
return Promise.reject(error);
|
|
}
|
|
},
|
|
// 格式化日期
|
|
formatDate(dateString) {
|
|
if (!dateString) return '-';
|
|
try {
|
|
const date = new Date(dateString);
|
|
return date.getFullYear() + '-' +
|
|
String(date.getMonth() + 1).padStart(2, '0') + '-' +
|
|
String(date.getDate()).padStart(2, '0') + ' ' +
|
|
String(date.getHours()).padStart(2, '0') + ':' +
|
|
String(date.getMinutes()).padStart(2, '0');
|
|
} catch (error) {
|
|
return dateString;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.scanCodeRef) {
|
|
this.$refs.scanCodeRef.focus();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mt10 {
|
|
margin-top: 10px;
|
|
}
|
|
.scan-box input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
}
|
|
.item-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
margin: 10px 0;
|
|
border: 1px solid rgba(200, 200, 200, 0.8);
|
|
}
|
|
.item-list span {
|
|
color: #000;
|
|
font-size: 15px;
|
|
}
|
|
.bottom-line-row {
|
|
border-bottom: 1px solid rgba(200, 200, 200, 0.8);
|
|
}
|
|
.printButton, .viewButton {
|
|
font-size: 16px;
|
|
border-radius: 3px;
|
|
color: #17b3a3;
|
|
}
|
|
.item-list .el-row {
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
.item-list .el-row:hover {
|
|
background: #f5f7fa;
|
|
}
|
|
.form-section >>> .el-col {
|
|
margin-bottom: 12px;
|
|
}
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #17b3a3;
|
|
color: white;
|
|
}
|
|
</style>
|