9 changed files with 529 additions and 8 deletions
-
5src/api/customerIssue/customer-issue.js
-
1src/router/index.js
-
4src/views/main.vue
-
3src/views/modules/customerIssue/customerIssue.vue
-
514src/views/modules/customerIssue/sales-temporary.vue
-
2src/views/modules/production-issue/directIssueDetail.vue
-
2src/views/modules/production-issue/productionPickingDetail.vue
-
2src/views/modules/production-return/productionReturnPDAIssueList.vue
-
4src/views/modules/production-return/productionReturnPickingDetail.vue
@ -0,0 +1,514 @@ |
|||
<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> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue