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.
514 lines
12 KiB
514 lines
12 KiB
<template>
|
|
<div>
|
|
<div class="pda-container">
|
|
<!-- 头部栏 -->
|
|
<div class="header-bar">
|
|
<div class="header-left" @click="handleBack">
|
|
<i class="el-icon-arrow-left"></i>
|
|
<span>销售临时</span>
|
|
</div>
|
|
<div class="header-right" @click="$router.push({ path: '/' })">
|
|
首页
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-body" style="max-height: 500px; overflow-y: auto;">
|
|
<div class="main-content form-section">
|
|
<!-- 标签扫描输入框 -->
|
|
<div class="input-group">
|
|
<el-input v-model="labelCode" placeholder="请扫描标签编码" class="form-input" clearable inputmode="none"
|
|
autocomplete="off" autocorrect="off" spellcheck="false" @keyup.enter.native="handleLabelScan"
|
|
ref="labelInput" />
|
|
</div>
|
|
|
|
<!-- 标签信息显示 (扫描后显示) -->
|
|
<div v-if="labelInfo" class="info-section">
|
|
<div class="info-title">
|
|
<i class="el-icon-document">标签信息</i>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">标签编码:</span>
|
|
<span class="info-value">{{ labelInfo.unitId || '-' }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">物料编码:</span>
|
|
<span class="info-value">{{ labelInfo.partNo || '-' }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">入库数量:</span>
|
|
<el-input v-model="editableQty" class="qty-input" type="number" :min="0" placeholder="请输入数量" clearable />
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">批次号:</span>
|
|
<span class="info-value">{{ labelInfo.batchNo || '-' }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">仓库:</span>
|
|
<span class="info-value">{{ labelInfo.warehouseId || '-' }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">库位:</span>
|
|
<span class="info-value">{{ labelInfo.locationId || '-' }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">WDR:</span>
|
|
<span class="info-value">{{ labelInfo.wdr || '-' }}</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">创建时间:</span>
|
|
<span class="info-value">{{ formatDate(labelInfo.createdDate) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<div v-if="labelInfo" class="bottom-actions">
|
|
<button class="action-btn primary" @click="handlePrint" :disabled="printLoading || createloading">
|
|
创建打印
|
|
</button>
|
|
<button class="action-btn secondary" @click="clearData">
|
|
清空
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryLabelInfo,
|
|
createNewHu,
|
|
} from '@/api/customerIssue/customer-issue.js'
|
|
import { printLabelCommon } from '@/api/production/production-inbound.js'
|
|
|
|
export default {
|
|
name: 'SalesTemporary',
|
|
|
|
data() {
|
|
return {
|
|
site: localStorage.getItem('site'),
|
|
labelCode: '',
|
|
labelInfo: null,
|
|
editableQty: '',
|
|
loading: false,
|
|
printLoading: false,
|
|
createloading: false,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 返回上一页
|
|
*/
|
|
handleBack() {
|
|
this.$router.back()
|
|
},
|
|
|
|
/**
|
|
* 处理标签扫描
|
|
*/
|
|
handleLabelScan() {
|
|
if (!this.labelCode.trim()) {
|
|
this.$message.error('请扫描有效的标签编码')
|
|
return
|
|
}
|
|
|
|
this.loading = true
|
|
|
|
queryLabelInfo({
|
|
site: this.site,
|
|
labelCode: this.labelCode.trim(),
|
|
})
|
|
.then(({ data }) => {
|
|
this.loading = false
|
|
|
|
if (data && data.code === 0) {
|
|
this.labelInfo = data.data
|
|
this.editableQty = data.data.qty || '0'
|
|
this.$message.success('查询成功')
|
|
} else {
|
|
this.$message.error(data.msg || '标签不存在')
|
|
this.labelCode = ''
|
|
this.labelInfo = null
|
|
this.focusLabelInput()
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.loading = false
|
|
console.error('查询标签失败:', error)
|
|
this.$message.error('查询异常')
|
|
this.labelCode = ''
|
|
this.labelInfo = null
|
|
this.focusLabelInput()
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 清空数据
|
|
*/
|
|
clearData() {
|
|
this.labelCode = ''
|
|
this.labelInfo = null
|
|
this.editableQty = ''
|
|
this.focusLabelInput()
|
|
},
|
|
|
|
/**
|
|
* 聚焦标签输入框
|
|
*/
|
|
focusLabelInput() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.labelInput) {
|
|
this.$refs.labelInput.focus()
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 格式化日期
|
|
*/
|
|
formatDate(date) {
|
|
if (!date) return '-'
|
|
|
|
const d = new Date(date)
|
|
const year = d.getFullYear()
|
|
const month = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
const hours = String(d.getHours()).padStart(2, '0')
|
|
const minutes = String(d.getMinutes()).padStart(2, '0')
|
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|
},
|
|
|
|
/**
|
|
* 获取状态标签类型
|
|
*/
|
|
getStatusType(inStockFlag) {
|
|
return inStockFlag === 'Y' ? 'success' : 'danger'
|
|
},
|
|
|
|
/**
|
|
* 处理打印
|
|
*/
|
|
handlePrint() {
|
|
if (!this.labelInfo || !this.labelInfo.unitId) {
|
|
this.$message.error('没有可打印的标签信息')
|
|
return
|
|
}
|
|
if(!this.editableQty){
|
|
this.$message.error('请输入数量')
|
|
return
|
|
}
|
|
this.labelInfo.qty = this.editableQty || '0'
|
|
let selectedMaterials = [
|
|
{
|
|
...this.labelInfo,
|
|
},
|
|
]
|
|
console.log('准备创建新HU并打印，标签信息:', selectedMaterials)
|
|
let params = {
|
|
site: localStorage.getItem('site'),
|
|
workOrderNo: this.labelInfo.workOrderNo || '',
|
|
WarehouseId: this.labelInfo.warehouseId || '',
|
|
selectedMaterials: selectedMaterials,
|
|
}
|
|
this.createloading = true
|
|
createNewHu(params).then(({ data }) => {
|
|
if (data && data.code == 0) {
|
|
if(data.unitIds.length == 0){
|
|
this.$message.error('创建拆分新HU失败: 未返回有效的HU信息')
|
|
return
|
|
}
|
|
let printLabelType
|
|
if (
|
|
this.labelInfo.partNo &&
|
|
this.labelInfo.partNo.startsWith('80')
|
|
) {
|
|
printLabelType = '库存成品标签'
|
|
} else {
|
|
printLabelType = 'BIL标签'
|
|
}
|
|
// 调用打印方法，传入unitId数组和标签类型
|
|
this.printViaServer(data.unitIds, printLabelType)
|
|
}else {
|
|
this.$message.error(data.msg || '创建拆分新HU失败')
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.$message.error('创建拆分新HU失败:', error.msg)
|
|
}).finally(() => {
|
|
this.createloading = false
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 通过服务器打印
|
|
* @param {Array} unitIds - HU unitId列表
|
|
* @param {String} printLabelType - 标签类型
|
|
*/
|
|
async printViaServer(unitIds, printLabelType) {
|
|
if (!unitIds || unitIds.length === 0) {
|
|
console.warn('没有可打印的标签')
|
|
return
|
|
}
|
|
|
|
this.printLoading = true
|
|
|
|
try {
|
|
const printRequest = {
|
|
userId: localStorage.getItem('userName'),
|
|
username: localStorage.getItem('userName'),
|
|
site: localStorage.getItem('site'),
|
|
unitIds: unitIds,
|
|
labelType: printLabelType,
|
|
}
|
|
console.log('打印请求:', printRequest)
|
|
|
|
const { data } = await printLabelCommon(printRequest)
|
|
|
|
if (data.code === 200 || data.code === 0) {
|
|
this.$message.success(`打印任务已发送！`)
|
|
this.clearData()
|
|
} else {
|
|
this.$message.error(data.msg || '打印失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('服务器打印失败:', error)
|
|
this.$message.error(`打印失败: ${error.message || error}`)
|
|
} finally {
|
|
this.printLoading = false
|
|
}
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
// 页面加载后自动聚焦标签输入框
|
|
this.focusLabelInput()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* PDA容器样式 */
|
|
.pda-container {
|
|
width: 100vw;
|
|
height: 120vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f5f5f5;
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
|
|
/* 头部栏样式 */
|
|
.header-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
background: #17b3a3;
|
|
color: white;
|
|
height: 40px;
|
|
min-height: 40px;
|
|
max-height: 40px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-left i {
|
|
margin-right: 8px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.header-left span {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.header-right {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 主要内容区 */
|
|
.table-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
/* 输入组样式 */
|
|
|
|
.input-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
height: 44px;
|
|
}
|
|
|
|
/* 信息展示区 */
|
|
.info-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.info-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #17b3a3;
|
|
margin-bottom: 6px;
|
|
padding-bottom: 5px;
|
|
border-bottom: 2px solid #17b3a3;
|
|
}
|
|
|
|
.info-title i {
|
|
margin-right: 8px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 数量输入框 */
|
|
.qty-input {
|
|
flex: 1;
|
|
max-width: 200px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.qty-input >>> .el-input__inner {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
min-width: 90px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
flex: 1;
|
|
text-align: right;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* 底部按钮区 */
|
|
.bottom-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: #17b3a3;
|
|
color: white;
|
|
}
|
|
|
|
.action-btn.primary:hover:not(:disabled) {
|
|
background: #15a394;
|
|
}
|
|
|
|
.action-btn.primary:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.action-btn.secondary:hover {
|
|
background: #e8e8e8;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media screen and (max-width: 480px) {
|
|
.header-bar {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 12px;
|
|
}
|
|
|
|
.info-section {
|
|
padding: 2px;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 13px;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
|