5 changed files with 1478 additions and 0 deletions
-
62src/api/production/production-issue-no-material.js
-
2src/router/index.js
-
507src/views/modules/production-issue/directIssueNoMaterial.vue
-
900src/views/modules/production-issue/directIssueNoMaterialDetail.vue
-
7src/views/modules/production-issue/production.vue
@ -0,0 +1,62 @@ |
|||||
|
import { createAPI } from "@/utils/httpRequest.js"; |
||||
|
|
||||
|
// NoMaterial版：生产领料（直接领料/申请单领料）接口，路径与原版隔离
|
||||
|
const base = "/pda/production/issue"; |
||||
|
|
||||
|
// 查询处理单元列表
|
||||
|
export const getWorkOrderMaterials = (data) => |
||||
|
createAPI(`${base}/getWorkOrderMaterials`, "post", data); |
||||
|
// 解析物料标签
|
||||
|
export const parseMaterialLabel = (data) => |
||||
|
createAPI(`${base}/parseMaterialLabel`, "post", data); |
||||
|
// 获取申请单物料列表
|
||||
|
export const getRequestMaterials = (data) => |
||||
|
createAPI(`${base}/getRequestMaterials`, "post", data); |
||||
|
// 基于申请单发料
|
||||
|
export const requestIssue = (data) => |
||||
|
createAPI(`${base}/requestIssue`, "post", data); |
||||
|
// 创建拣选托盘
|
||||
|
export const createPickingPallet = (data) => |
||||
|
createAPI(`${base}/createPickingPallet`, "post", data); |
||||
|
// 绑定处理单元到托盘
|
||||
|
export const bindUnitsToPallet = (data) => |
||||
|
createAPI(`${base}/bindUnitsToPallet`, "post", data); |
||||
|
// 打印托盘标签
|
||||
|
export const printPalletLabel = (data) => |
||||
|
createAPI(`${base}/printPalletLabel`, "post", data); |
||||
|
// 获取托盘信息
|
||||
|
export const getPalletInfo = (data) => |
||||
|
createAPI(`${base}/getPalletInfo`, "post", data); |
||||
|
// 获取发料历史记录
|
||||
|
export const getIssueHistory = (data) => |
||||
|
createAPI(`${base}/getIssueHistory`, "post", data); |
||||
|
// 验证工单状态
|
||||
|
export const validateWorkOrder = (data) => |
||||
|
createAPI(`${base}/validateWorkOrder`, "post", data); |
||||
|
// 验证申请单状态
|
||||
|
export const validateNotify = (data) => |
||||
|
createAPI(`${base}/validateNotify`, "post", data); |
||||
|
// 扫描材料是否存在
|
||||
|
export const scanMaterialLabelNoPartNo = (data) => |
||||
|
createAPI(`${base}/scanMaterialLabelNoPartNo`, "post", data); |
||||
|
// 获取工单列表
|
||||
|
export const getIssureNotifyByNo = (data) => |
||||
|
createAPI(`${base}/getIssureNotifyByNo`, "post", data); |
||||
|
// 获取工单列表
|
||||
|
export const getIssureNotifyListByNo = (data) => |
||||
|
createAPI(`${base}/getIssureNotifyListByNo`, "post", data); |
||||
|
export const getIssueNotifyHeaderInfo = (data) => |
||||
|
createAPI(`${base}/getIssueNotifyHeaderInfo`, "post", data); |
||||
|
|
||||
|
// 直接领料相关接口
|
||||
|
export const getWorkOrderInfo = (data) => |
||||
|
createAPI(`${base}/getWorkOrderInfo`, "post", data); |
||||
|
export const confirmDirectIssue = (data) => |
||||
|
createAPI(`${base}/confirmDirectIssue`, "post", data); |
||||
|
export const confirmProductionPicking = (data) => |
||||
|
createAPI(`${base}/confirmProductionPicking`, "post", data); |
||||
|
export const getShopOrderLine = (data) => |
||||
|
createAPI(`${base}/getShopOrderLine`, "post", data); |
||||
|
export const confirmDirectIssueNoMaterial = (data) => |
||||
|
createAPI(`${base}/confirmDirectIssueNoMaterial`, "post", data); |
||||
|
|
||||
@ -0,0 +1,507 @@ |
|||||
|
<template> |
||||
|
<div class="pda-container"> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="$router.back()"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>直接领料(NoMaterial)</span> |
||||
|
</div> |
||||
|
<div class="header-right" @click="$router.push({ path: '/' })">首页</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="search-container"> |
||||
|
<el-input clearable v-model="workOrderNo" placeholder="请输入工单号" prefix-icon="el-icon-search" |
||||
|
@keyup.enter.native="handleSearchWorkOrderByShopOrderLine" ref="workOrderInput" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="work-order-list" v-if="workOrderList.length > 0"> |
||||
|
<div v-for="(workOrder, index) in displayWorkOrderList" :key="index" :class="[ |
||||
|
'work-order-card', |
||||
|
{ selected: selectedWorkOrder && isSameWorkOrder(selectedWorkOrder, workOrder) }, |
||||
|
{ disabled: loading }, |
||||
|
]" @click="selectWorkOrder(workOrder)"> |
||||
|
<div class="card-title"> |
||||
|
<span |
||||
|
class="title-label">工单号：{{ workOrder.orderNo }}-{{ workOrder.releaseNo }}-{{ workOrder.sequenceNo }}</span> |
||||
|
<span class="title-value">{{ workOrder.partNo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="part-desc-row"> |
||||
|
<span class="desc-text">{{ workOrder.partDesc }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">计划数量</div> |
||||
|
<div class="detail-value">{{ workOrder.lotSize }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">状态</div> |
||||
|
<div class="detail-value">{{ workOrder.status }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">单位</div> |
||||
|
<div class="detail-value">{{ workOrder.uom }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--注释代码 |
||||
|
<div class="content-area" v-if="selectedWorkOrder && materialList.length > 0"> |
||||
|
<div v-for="(material, index) in materialList" :key="index" class="material-card" |
||||
|
@click="selectMaterial(material)"> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label">物料编码：{{ material.componentPartNo }} 行号：{{ material.lineItemNo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="part-desc-row"> |
||||
|
<span class="desc-text">{{ material.componentPartDesc }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">需求数量</div> |
||||
|
<div class="detail-value">{{ material.qtyRequired }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item" :class="{ 'issued-qty-highlight': (material.qtyIssued || 0) > 0 }"> |
||||
|
<div class="detail-label">已发数量</div> |
||||
|
<div class="detail-value">{{ material.qtyIssued || 0 }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">单位</div> |
||||
|
<div class="detail-value">{{ material.uom || '个' }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
|
||||
|
<div v-if="selectedWorkOrder && materialList.length === 0" class="empty-state"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<p>该工单暂无材料清单</p> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="loading" class="loading-state"> |
||||
|
<i class="el-icon-loading"></i> |
||||
|
<p>加载中...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
getWorkOrderInfo, |
||||
|
getWorkOrderMaterials, |
||||
|
getShopOrderLine, |
||||
|
} from '@/api/production/production-issue-no-material' |
||||
|
import moment from 'moment' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
workOrderNo: '', |
||||
|
releaseNo: '*', |
||||
|
sequenceNo: '*', |
||||
|
workOrderList: [], |
||||
|
selectedWorkOrder: null, |
||||
|
materialList: [], |
||||
|
loading: false, |
||||
|
showOnlySelected: false, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
displayWorkOrderList() { |
||||
|
if (this.showOnlySelected && this.selectedWorkOrder) |
||||
|
return [this.selectedWorkOrder] |
||||
|
return this.workOrderList |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(date) { |
||||
|
return date ? moment(date).format('YYYY-MM-DD') : '' |
||||
|
}, |
||||
|
savePageStateForDetail() { |
||||
|
const state = { |
||||
|
workOrderNo: this.workOrderNo, |
||||
|
releaseNo: this.releaseNo, |
||||
|
sequenceNo: this.sequenceNo, |
||||
|
workOrderList: this.workOrderList, |
||||
|
selectedWorkOrder: this.selectedWorkOrder, |
||||
|
materialList: this.materialList, |
||||
|
showOnlySelected: this.showOnlySelected, |
||||
|
} |
||||
|
sessionStorage.setItem( |
||||
|
'directIssueNoMaterial_state_fromDetail', |
||||
|
JSON.stringify(state) |
||||
|
) |
||||
|
}, |
||||
|
restorePageStateFromDetail() { |
||||
|
try { |
||||
|
const shouldRestore = sessionStorage.getItem( |
||||
|
'directIssueNoMaterial_shouldRestore' |
||||
|
) |
||||
|
const savedState = sessionStorage.getItem( |
||||
|
'directIssueNoMaterial_state_fromDetail' |
||||
|
) |
||||
|
if (shouldRestore === 'true' && savedState) { |
||||
|
const state = JSON.parse(savedState) |
||||
|
this.workOrderNo = state.workOrderNo || '' |
||||
|
this.releaseNo = state.releaseNo || '*' |
||||
|
this.sequenceNo = state.sequenceNo || '*' |
||||
|
this.workOrderList = state.workOrderList || [] |
||||
|
this.selectedWorkOrder = state.selectedWorkOrder || null |
||||
|
this.materialList = state.materialList || [] |
||||
|
this.showOnlySelected = state.showOnlySelected || false |
||||
|
|
||||
|
const needRefresh = sessionStorage.getItem( |
||||
|
'directIssueNoMaterial_needRefresh' |
||||
|
) |
||||
|
if (needRefresh === 'true' && this.selectedWorkOrder) |
||||
|
this.loadMaterialList() |
||||
|
|
||||
|
sessionStorage.removeItem('directIssueNoMaterial_shouldRestore') |
||||
|
sessionStorage.removeItem('directIssueNoMaterial_state_fromDetail') |
||||
|
sessionStorage.removeItem('directIssueNoMaterial_needRefresh') |
||||
|
} |
||||
|
} catch (e) { |
||||
|
sessionStorage.removeItem('directIssueNoMaterial_shouldRestore') |
||||
|
sessionStorage.removeItem('directIssueNoMaterial_state_fromDetail') |
||||
|
sessionStorage.removeItem('directIssueNoMaterial_needRefresh') |
||||
|
} |
||||
|
}, |
||||
|
handleSearchWorkOrderByShopOrderLine() { |
||||
|
if (this.loading) return |
||||
|
if (!this.workOrderNo.trim()) { |
||||
|
this.$message.warning('请输入工单号') |
||||
|
return |
||||
|
} |
||||
|
this.loading = true |
||||
|
const params = { |
||||
|
workOrderNo: this.workOrderNo.trim(), |
||||
|
site: localStorage.getItem('site'), |
||||
|
} |
||||
|
getShopOrderLine(params) |
||||
|
.then(({ data }) => { |
||||
|
this.loading = false |
||||
|
if ( |
||||
|
data.workOrders && |
||||
|
data.workOrders.length > 0 && |
||||
|
data.code === 0 |
||||
|
) { |
||||
|
this.workOrderList = data.workOrders |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '未找到该工单信息') |
||||
|
this.workOrderList = [] |
||||
|
} |
||||
|
this.selectedWorkOrder = null |
||||
|
this.materialList = [] |
||||
|
this.showOnlySelected = false |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
this.loading = false |
||||
|
this.$message.error(error.msg || '查询工单信息失败') |
||||
|
}) |
||||
|
}, |
||||
|
isSameWorkOrder(a, b) { |
||||
|
if (!a || !b) return false |
||||
|
return ( |
||||
|
a.orderNo === b.orderNo && |
||||
|
a.releaseNo === b.releaseNo && |
||||
|
a.sequenceNo === b.sequenceNo |
||||
|
) |
||||
|
}, |
||||
|
selectWorkOrder(workOrder) { |
||||
|
if (this.loading) return |
||||
|
if ( |
||||
|
this.showOnlySelected && |
||||
|
this.selectedWorkOrder && |
||||
|
this.isSameWorkOrder(this.selectedWorkOrder, workOrder) |
||||
|
) { |
||||
|
this.selectedWorkOrder = null |
||||
|
this.materialList = [] |
||||
|
this.showOnlySelected = false |
||||
|
return |
||||
|
} |
||||
|
this.selectedWorkOrder = workOrder |
||||
|
this.showOnlySelected = true |
||||
|
this.loadMaterialList() |
||||
|
}, |
||||
|
loadMaterialList() { |
||||
|
if (this.loading) return |
||||
|
if (!this.selectedWorkOrder) return |
||||
|
this.loading = true |
||||
|
const params = { |
||||
|
workOrderNo: this.selectedWorkOrder.orderNo, |
||||
|
site: localStorage.getItem('site'), |
||||
|
releaseNo: (this.selectedWorkOrder.releaseNo || '*').trim() || '*', |
||||
|
sequenceNo: (this.selectedWorkOrder.sequenceNo || '*').trim() || '*', |
||||
|
} |
||||
|
getWorkOrderMaterials(params) |
||||
|
.then(({ data }) => { |
||||
|
this.loading = false |
||||
|
if (data && data.code === 0) { |
||||
|
this.materialList = (data.materials || []).map((item, index) => ({ |
||||
|
...item, |
||||
|
id: index + 1, |
||||
|
})) |
||||
|
console.log('获取材料清单成功:', this.materialList.length); |
||||
|
|
||||
|
if (this.materialList.length == 0) { |
||||
|
this.$message.info('该工单暂无材料清单') |
||||
|
console.log('不成功:', this.materialList.length); |
||||
|
} else { |
||||
|
// 跳转前保存当前页面状态（用于从详情页返回时恢复工单号/列表等） |
||||
|
this.savePageStateForDetail() |
||||
|
this.$router.push({ |
||||
|
name: 'directIssueNoMaterialDetail', |
||||
|
query: { |
||||
|
workOrderNo: this.selectedWorkOrder.orderNo, |
||||
|
partNo: 0, |
||||
|
itemNo: 0, |
||||
|
releaseNo: this.selectedWorkOrder.releaseNo, |
||||
|
sequenceNo: this.selectedWorkOrder.sequenceNo, |
||||
|
requiredQty: 0, |
||||
|
issuedQty: 0, |
||||
|
partDesc: '物料详情', |
||||
|
materialList: JSON.stringify(this.materialList), |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取材料清单失败') |
||||
|
this.materialList = [] |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.loading = false |
||||
|
this.$message.error('获取材料清单失败') |
||||
|
}) |
||||
|
}, |
||||
|
handleSearchWorkOrder() { |
||||
|
// 保留原实现入口（如果后续要精确查询） |
||||
|
if (!this.workOrderNo.trim()) { |
||||
|
this.$message.warning('请输入工单号') |
||||
|
return |
||||
|
} |
||||
|
this.loading = true |
||||
|
const params = { |
||||
|
workOrderNo: this.workOrderNo.trim(), |
||||
|
releaseNo: (this.releaseNo || '*').trim() || '*', |
||||
|
sequenceNo: (this.sequenceNo || '*').trim() || '*', |
||||
|
site: localStorage.getItem('site'), |
||||
|
} |
||||
|
getWorkOrderInfo(params) |
||||
|
.then(({ data }) => { |
||||
|
this.loading = false |
||||
|
if ( |
||||
|
data.workOrders && |
||||
|
data.workOrders.length > 0 && |
||||
|
data.code === 0 |
||||
|
) { |
||||
|
this.workOrderList = data.workOrders |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '未找到该工单信息') |
||||
|
this.workOrderList = [] |
||||
|
} |
||||
|
this.selectedWorkOrder = null |
||||
|
this.materialList = [] |
||||
|
this.showOnlySelected = false |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
this.loading = false |
||||
|
this.$message.error(error.msg || '查询工单信息失败') |
||||
|
}) |
||||
|
}, |
||||
|
selectMaterial(material) { |
||||
|
if (material.reserveIssueMethod != 'Reserve And Backflush') { |
||||
|
this.$message.warning( |
||||
|
`该物料为${material.reserveIssueMethod},不支持直接领料，请选择其他物料！` |
||||
|
) |
||||
|
return |
||||
|
} |
||||
|
this.savePageStateForDetail() |
||||
|
this.$router.push({ |
||||
|
name: 'directIssueNoMaterialDetail', |
||||
|
query: { |
||||
|
workOrderNo: this.selectedWorkOrder.orderNo, |
||||
|
partNo: material.componentPartNo, |
||||
|
itemNo: material.lineItemNo, |
||||
|
releaseNo: this.selectedWorkOrder.releaseNo, |
||||
|
sequenceNo: this.selectedWorkOrder.sequenceNo, |
||||
|
requiredQty: material.qtyRequired, |
||||
|
issuedQty: material.qtyIssued || 0, |
||||
|
partDesc: material.componentPartDesc, |
||||
|
}, |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.restorePageStateFromDetail() |
||||
|
this.$nextTick( |
||||
|
() => this.$refs.workOrderInput && this.$refs.workOrderInput.focus() |
||||
|
) |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pda-container { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
.header-bar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 8px 16px; |
||||
|
background: #17b3a3; |
||||
|
color: white; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
} |
||||
|
.header-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.header-left i { |
||||
|
margin-right: 8px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.header-right { |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.search-container { |
||||
|
padding: 3px 16px; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
.search-container .el-input { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.work-order-list { |
||||
|
overflow-y: auto; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
.work-order-card { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 12px; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
border: 2px solid transparent; |
||||
|
} |
||||
|
.work-order-card.disabled { |
||||
|
opacity: 0.7; |
||||
|
cursor: not-allowed; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.work-order-card:hover { |
||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
.work-order-card.selected { |
||||
|
border-color: #17b3a3; |
||||
|
background: #f0fffe; |
||||
|
} |
||||
|
.content-area { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
.material-card { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 12px; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
border: 2px solid transparent; |
||||
|
} |
||||
|
.material-card:hover { |
||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
.card-title { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
.title-label { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
.title-value { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
.part-desc-row { |
||||
|
margin-bottom: 12px; |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
.desc-text { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
line-height: 1.3; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.card-details { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
.detail-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
min-width: 50px; |
||||
|
max-width: 70px; |
||||
|
} |
||||
|
.detail-label { |
||||
|
font-size: 11px; |
||||
|
color: #666; |
||||
|
margin-bottom: 4px; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
.detail-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
.detail-item.issued-qty-highlight .detail-label, |
||||
|
.detail-item.issued-qty-highlight .detail-value { |
||||
|
font-weight: bold; |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #999; |
||||
|
} |
||||
|
.loading-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #17b3a3; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,900 @@ |
|||||
|
<template> |
||||
|
<div class="pda-container"> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="handleBack"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>直接领料(NoMaterial)</span> |
||||
|
</div> |
||||
|
<div class="header-right" @click="$router.push({ path: '/' })">首页</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="search-container"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
class="compact-input" |
||||
|
v-model="scanCode" |
||||
|
placeholder="请扫描材料纸质标签" |
||||
|
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" /> |
||||
|
<span v-if="isRemoveMode" class="switch-text">{{ "移除" }}</span> |
||||
|
<span v-else class="switch-text2">{{ "添加" }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="partial-checkbox-container"> |
||||
|
<el-checkbox v-model="isPartial" :disabled="scannedLabels.length > 0">是否部分领料</el-checkbox> |
||||
|
</div> |
||||
|
|
||||
|
<div class="scrollable-content"> |
||||
|
<div class="work-order-list" v-if="workOrderNo"> |
||||
|
<div class="work-order-card"> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label">工单号：{{ workOrderNo }}</span> |
||||
|
<span class="title-label"> 本次: {{ totalScannedQty }}</span> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
size="mini" |
||||
|
style="margin-left: auto" |
||||
|
@click="materialListViewVisible = true" |
||||
|
>查看物料行</el-button> |
||||
|
</div> |
||||
|
<!-- <div class="part-desc-row"> |
||||
|
<span class="desc-text">物料编码：{{ componentPartNo }}</span> |
||||
|
</div> |
||||
|
<div class="part-desc-row"> |
||||
|
<span class="desc-text">物料名称：{{ componentPartDesc }}</span> |
||||
|
</div> --> |
||||
|
<!-- <div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">需求数量</div> |
||||
|
<div class="detail-value">{{ requiredQty }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">已发数量</div> |
||||
|
<div class="detail-value">{{ issuedQty }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">本次</div> |
||||
|
<div class="detail-value">{{ totalScannedQty }}</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section-title"> |
||||
|
<div class="title-left"> |
||||
|
<i class="el-icon-circle-check"></i> |
||||
|
<span>出库信息确认</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="label-list"> |
||||
|
<div class="list-header"> |
||||
|
<div class="col-no">NO.</div> |
||||
|
<div class="col-label">标签条码</div> |
||||
|
<div class="col-batch">库位</div> |
||||
|
<div class="col-batch">物料</div> |
||||
|
<div v-if="isPartial" class="col-qty">剩余高</div> |
||||
|
<div class="col-qty">数量</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="list-body"> |
||||
|
<div |
||||
|
v-for="(label, index) in scannedLabels" |
||||
|
:key="label.id" |
||||
|
class="list-item" |
||||
|
:class="{ clickable: isPartial }" |
||||
|
@click="isPartial ? handleLabelClick(label, index) : null" |
||||
|
> |
||||
|
<div class="col-no">{{ index + 1 }}</div> |
||||
|
<div class="col-label">{{ label.labelCode }}</div> |
||||
|
<div class="col-batch">{{ label.locationId }}</div> |
||||
|
<div class="col-batch">{{ label.componentPartNo }}</div> |
||||
|
<div v-if="isPartial" class="col-qty">{{ label.height.toFixed(3) }}</div> |
||||
|
<div class="col-qty"> |
||||
|
<span class="quantity-display">{{ label.quantity }}</span> |
||||
|
<i v-if="isPartial" class="el-icon-edit edit-icon"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="scannedLabels.length === 0" class="empty-labels"> |
||||
|
<p>暂无扫描标签</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bottom-actions"> |
||||
|
<el-button class="action-btn secondary" :loading="loading" @click="confirmIssue">确定</el-button> |
||||
|
<button class="action-btn secondary" style="margin-left: 10px" @click="clearScannedLabels">取消</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 物料行选择弹框 --> |
||||
|
<el-dialog |
||||
|
title="选择物料行" |
||||
|
:visible.sync="materialSelectDialogVisible" |
||||
|
width="92%" |
||||
|
append-to-body |
||||
|
> |
||||
|
<div v-if="materialSelectOptions.length === 0" style="color: #999; text-align: center; padding: 12px 0"> |
||||
|
暂无可选物料行 |
||||
|
</div> |
||||
|
<el-radio-group v-model="selectedMaterialKey" style="display: block" v-else> |
||||
|
<div |
||||
|
v-for="opt in materialSelectOptions" |
||||
|
:key="opt.key" |
||||
|
class="material-option" |
||||
|
> |
||||
|
<el-radio :label="opt.key"> |
||||
|
<div class="material-option-main"> |
||||
|
<div class="material-option-title"> |
||||
|
{{ opt.componentPartNo }}（行号：{{ opt.lineItemNo }}） |
||||
|
</div> |
||||
|
<div class="material-option-desc"> |
||||
|
{{ opt.componentPartDesc || '-' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-radio> |
||||
|
</div> |
||||
|
</el-radio-group> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="cancelMaterialSelect">取消</el-button> |
||||
|
<el-button type="primary" :disabled="!selectedMaterialKey" @click="confirmMaterialSelect">确定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- materialList 查看弹框 --> |
||||
|
<el-dialog |
||||
|
title="物料行" |
||||
|
:visible.sync="materialListViewVisible" |
||||
|
width="92%" |
||||
|
append-to-body |
||||
|
> |
||||
|
<div v-if="!Array.isArray(materialList) || materialList.length === 0" class="empty-state" style="padding: 20px 0"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<p>暂无材料清单</p> |
||||
|
</div> |
||||
|
<div v-else class="content-area" style="padding: 0"> |
||||
|
<div v-for="(material, index) in materialList" :key="index" class="material-card material-card-view"> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label"> |
||||
|
物料编码：{{ material.componentPartNo }} 行号：{{ material.lineItemNo }} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="part-desc-row"> |
||||
|
<span class="desc-text">{{ material.componentPartDesc }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">需求数量</div> |
||||
|
<div class="detail-value">{{ material.qtyRequired }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item" :class="{ 'issued-qty-highlight': (material.qtyIssued || 0) > 0 }"> |
||||
|
<div class="detail-label">已发数量</div> |
||||
|
<div class="detail-value">{{ material.qtyIssued || 0 }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">单位</div> |
||||
|
<div class="detail-value">{{ material.uom || '个' }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="materialListViewVisible = false">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<div v-if="quantityDialogVisible" class="edit-overlay" @click.self="quantityDialogVisible = false"> |
||||
|
<div class="edit-modal"> |
||||
|
<div class="modal-header"> |
||||
|
<span class="modal-title">修改数量</span> |
||||
|
<i class="el-icon-close close-btn" @click="quantityDialogVisible = false"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
<div class="form-group"> |
||||
|
<label class="form-label">标签条码</label> |
||||
|
<el-input v-model="currentEditLabel.labelCode" disabled class="form-input" /> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="form-label">当前数量</label> |
||||
|
<el-input v-model="currentEditLabel.quantity" disabled class="form-input" /> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="form-label">剩余高度(mm) <span class="required">*</span></label> |
||||
|
<el-input-number |
||||
|
v-model="editHeight" |
||||
|
:min="0.001" |
||||
|
:precision="3" |
||||
|
:step="0.001" |
||||
|
class="form-input" |
||||
|
style="width: 100%" |
||||
|
:controls="false" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="form-label">需要发料数量 <span class="required">*</span></label> |
||||
|
<el-input-number |
||||
|
v-model="editQuantity" |
||||
|
:min="0.0001" |
||||
|
:precision="4" |
||||
|
:step="0.0001" |
||||
|
class="form-input" |
||||
|
style="width: 100%" |
||||
|
:controls="false" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
<el-button class="btn-cancel" @click="quantityDialogVisible = false">取消</el-button> |
||||
|
<el-button class="btn-confirm" @click="confirmQuantityChange">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { scanMaterialLabelNoPartNo, confirmDirectIssue,confirmDirectIssueNoMaterial } from "@/api/production/production-issue-no-material"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scanCode: "", |
||||
|
isRemoveMode: false, |
||||
|
isPartial: true, |
||||
|
scannedLabels: [], |
||||
|
workOrderNo: "", |
||||
|
componentPartNo: "", |
||||
|
componentPartDesc: "", |
||||
|
requiredQty: 0, |
||||
|
issuedQty: 0, |
||||
|
itemNo: "", |
||||
|
loading: false, |
||||
|
issueInfo: {}, |
||||
|
quantityDialogVisible: false, |
||||
|
currentEditLabel: {}, |
||||
|
currentEditIndex: -1, |
||||
|
editQuantity: 0, |
||||
|
editHeight: 0, |
||||
|
materialList: [], |
||||
|
materialSelectDialogVisible: false, |
||||
|
materialSelectOptions: [], |
||||
|
selectedMaterialKey: "", |
||||
|
pendingLabelToAdd: null, |
||||
|
materialListViewVisible: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
totalScannedQty() { |
||||
|
const total = this.scannedLabels.reduce((sum, l) => sum + (l.quantity || 0), 0); |
||||
|
return Math.round(total * 10000) / 10000; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
handleScan() { |
||||
|
if (!this.scanCode.trim()) return; |
||||
|
if (this.isRemoveMode) this.removeLabelByCode(this.scanCode.trim()); |
||||
|
else this.validateAndAddLabel(this.scanCode.trim()); |
||||
|
this.scanCode = ""; |
||||
|
}, |
||||
|
validateAndAddLabel(labelCode) { |
||||
|
const params = { |
||||
|
scannedLabel: labelCode, |
||||
|
workOrderNo: this.workOrderNo, |
||||
|
//componentPartNo: this.componentPartNo, |
||||
|
site: localStorage.getItem("site"), |
||||
|
}; |
||||
|
scanMaterialLabelNoPartNo(params) |
||||
|
.then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
if (this.scannedLabels.find((item) => item.labelCode === labelCode)) { |
||||
|
this.$message.warning("该标签已扫描，请勿重复扫描"); |
||||
|
return; |
||||
|
} |
||||
|
const labelPartNo = data.labelInfo.partNo; |
||||
|
const labelPartDesc = data.labelInfo.partDesc ||""; |
||||
|
const newLabel = { |
||||
|
id: Date.now(), |
||||
|
labelCode, |
||||
|
componentPartNo: labelPartNo, |
||||
|
componentPartDesc: labelPartDesc, |
||||
|
quantity: data.labelInfo.availableQty, |
||||
|
batchNo: data.labelInfo.batchNo, |
||||
|
warehouseId: data.labelInfo.warehouseId, |
||||
|
locationId: data.labelInfo.locationId, |
||||
|
height: data.labelInfo.height || 0, |
||||
|
wdrNo: data.labelInfo.wdrNo, |
||||
|
engChgLevel: data.labelInfo.engChgLevel, |
||||
|
lineItemNo: "", |
||||
|
itemNo: "", |
||||
|
}; |
||||
|
this.resolveLabelLineItemNoAndAdd(newLabel); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || "标签验证失败"); |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => this.$message.error("扫描失败")); |
||||
|
}, |
||||
|
|
||||
|
normalizeMaterialList() { |
||||
|
if (!Array.isArray(this.materialList)) return []; |
||||
|
return this.materialList |
||||
|
.map((m) => ({ |
||||
|
componentPartNo: m.componentPartNo, |
||||
|
componentPartDesc: m.componentPartDesc, |
||||
|
lineItemNo: m.lineItemNo, |
||||
|
itemNo: m.itemNo, |
||||
|
})) |
||||
|
.filter((m) => m.componentPartNo && m.lineItemNo); |
||||
|
}, |
||||
|
|
||||
|
materialKey(componentPartNo, componentPartDesc) { |
||||
|
return `${componentPartNo}@@${componentPartDesc || ""}`; |
||||
|
}, |
||||
|
|
||||
|
findMatchingMaterialsForLabel(labelPartNo, labelPartDesc) { |
||||
|
const list = this.normalizeMaterialList(); |
||||
|
// label 侧有 desc 才做双字段匹配，否则退化成仅 partNo 匹配 |
||||
|
if (labelPartDesc) { |
||||
|
return list.filter( |
||||
|
(m) => |
||||
|
m.componentPartNo === labelPartNo && |
||||
|
(m.componentPartDesc || "") === labelPartDesc |
||||
|
); |
||||
|
} |
||||
|
return list.filter((m) => m.componentPartNo === labelPartNo); |
||||
|
}, |
||||
|
|
||||
|
resolveLabelLineItemNoAndAdd(newLabel) { |
||||
|
console.log("111"); |
||||
|
|
||||
|
const labelPartNo = newLabel.componentPartNo; |
||||
|
const labelPartDesc = newLabel.componentPartDesc || ""; |
||||
|
|
||||
|
const matches = this.findMatchingMaterialsForLabel(labelPartNo, labelPartDesc); |
||||
|
if (!matches || matches.length === 0) { |
||||
|
this.$message.error("当前shoporder中没有标签的物料"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 如果同一物料可能对应多行（同 partNo/desc 但不同 lineItemNo），需要弹框选择 |
||||
|
const uniqueByLine = []; |
||||
|
const seen = new Set(); |
||||
|
for (const m of matches) { |
||||
|
const k = `${this.materialKey(m.componentPartNo, m.componentPartDesc)}@@${m.lineItemNo}`; |
||||
|
if (!seen.has(k)) { |
||||
|
seen.add(k); |
||||
|
uniqueByLine.push(m); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (uniqueByLine.length === 1) { |
||||
|
const picked = uniqueByLine[0]; |
||||
|
// 将选中的物料行信息写回标签 |
||||
|
newLabel.lineItemNo = picked.lineItemNo; |
||||
|
newLabel.itemNo = picked.itemNo; |
||||
|
this.pushLabelAndMaybeEdit(newLabel); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 多个可选行：弹框让用户选 |
||||
|
this.pendingLabelToAdd = newLabel; |
||||
|
this.materialSelectOptions = uniqueByLine.map((m) => ({ |
||||
|
...m, |
||||
|
key: `${this.materialKey(m.componentPartNo, m.componentPartDesc)}@@${m.lineItemNo}`, |
||||
|
})); |
||||
|
this.selectedMaterialKey = this.materialSelectOptions[0].key || ""; |
||||
|
this.materialSelectDialogVisible = true; |
||||
|
}, |
||||
|
|
||||
|
pushLabelAndMaybeEdit(label) { |
||||
|
console.log("333"); |
||||
|
|
||||
|
this.scannedLabels.push(label); |
||||
|
this.$message.success("扫描成功"); |
||||
|
if (this.isPartial) { |
||||
|
const newIndex = this.scannedLabels.length - 1; |
||||
|
this.$nextTick(() => this.handleLabelClick(label, newIndex)); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
cancelMaterialSelect() { |
||||
|
this.materialSelectDialogVisible = false; |
||||
|
this.selectedMaterialKey = ""; |
||||
|
this.materialSelectOptions = []; |
||||
|
this.pendingLabelToAdd = null; |
||||
|
}, |
||||
|
|
||||
|
confirmMaterialSelect() { |
||||
|
const pending = this.pendingLabelToAdd; |
||||
|
const picked = this.materialSelectOptions.find((o) => o.key === this.selectedMaterialKey); |
||||
|
if (!pending || !picked) { |
||||
|
this.cancelMaterialSelect(); |
||||
|
return; |
||||
|
} |
||||
|
this.materialSelectDialogVisible = false; |
||||
|
this.selectedMaterialKey = ""; |
||||
|
this.materialSelectOptions = []; |
||||
|
this.pendingLabelToAdd = null; |
||||
|
// 将用户选择的物料行信息写回标签 |
||||
|
pending.lineItemNo = picked.lineItemNo; |
||||
|
pending.itemNo = picked.itemNo; |
||||
|
this.pushLabelAndMaybeEdit(pending); |
||||
|
}, |
||||
|
removeLabelByCode(labelCode) { |
||||
|
const index = this.scannedLabels.findIndex((item) => item.labelCode === labelCode); |
||||
|
if (index !== -1) { |
||||
|
this.scannedLabels.splice(index, 1); |
||||
|
this.$message.success("移除成功"); |
||||
|
} else { |
||||
|
this.$message.warning("未找到该标签"); |
||||
|
} |
||||
|
}, |
||||
|
clearScannedLabels() { |
||||
|
const back = () => { |
||||
|
sessionStorage.setItem("directIssueNoMaterial_shouldRestore", "true"); |
||||
|
this.$router.back(); |
||||
|
}; |
||||
|
if (this.scannedLabels.length > 0) { |
||||
|
this.$confirm("确定清空所有已扫描的标签吗？", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.scannedLabels = []; |
||||
|
back(); |
||||
|
this.$message.success("已清空"); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
} else { |
||||
|
back(); |
||||
|
} |
||||
|
}, |
||||
|
confirmIssue() { |
||||
|
if (this.scannedLabels.length === 0) { |
||||
|
this.$message.warning("请先扫描材料标签"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const params = { |
||||
|
site: localStorage.getItem("site"), |
||||
|
workOrderNo: this.workOrderNo, |
||||
|
componentPartNo: this.componentPartNo, |
||||
|
operatorName: localStorage.getItem("userName"), |
||||
|
itemNo: this.itemNo, |
||||
|
releaseNo: this.issueInfo.releaseNo, |
||||
|
sequenceNo: this.issueInfo.sequenceNo, |
||||
|
isPartial: this.isPartial, |
||||
|
selectedMaterials: this.scannedLabels.map((l) => ({ |
||||
|
labelCode: l.labelCode, |
||||
|
issueQty: l.quantity, |
||||
|
batchNo: l.batchNo, |
||||
|
warehouseId: l.warehouseId, |
||||
|
locationId: l.locationId, |
||||
|
materialCode: l.materialCode, |
||||
|
wdrNo: l.wdrNo, |
||||
|
height: l.height, |
||||
|
engChgLevel: l.engChgLevel, |
||||
|
itemNo: l.itemNo, |
||||
|
lineItemNo: l.lineItemNo, |
||||
|
partNo: l.componentPartNo, |
||||
|
partDesc: l.componentPartDesc, |
||||
|
})), |
||||
|
}; |
||||
|
console.log("发料参数：", params); |
||||
|
|
||||
|
this.loading = true; |
||||
|
confirmDirectIssueNoMaterial(params) |
||||
|
.then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success("发料成功"); |
||||
|
this.$router.back(); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || "发料失败"); |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => this.$message.error("发料失败")) |
||||
|
.finally(() => { |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
}, |
||||
|
initFromRoute() { |
||||
|
this.workOrderNo = this.$route.query.workOrderNo; |
||||
|
this.componentPartNo = this.$route.query.partNo; |
||||
|
this.componentPartDesc = this.$route.query.partDesc || ""; |
||||
|
this.requiredQty = Number(this.$route.query.requiredQty || 0); |
||||
|
this.issuedQty = Number(this.$route.query.issuedQty || 0); |
||||
|
this.itemNo = this.$route.query.itemNo || ""; |
||||
|
this.issueInfo = { |
||||
|
releaseNo: this.$route.query.releaseNo, |
||||
|
sequenceNo: this.$route.query.sequenceNo, |
||||
|
requiredQty: Number(this.$route.query.requiredQty || 0), |
||||
|
issuedQty: Number(this.$route.query.issuedQty || 0), |
||||
|
partDesc: this.$route.query.partDesc || "", |
||||
|
}; |
||||
|
try { |
||||
|
this.materialList = this.$route.query.materialList ? JSON.parse(this.$route.query.materialList) : []; |
||||
|
} catch (e) { |
||||
|
this.materialList = []; |
||||
|
} |
||||
|
}, |
||||
|
handleBack() { |
||||
|
sessionStorage.setItem("directIssueNoMaterial_shouldRestore", "true"); |
||||
|
this.$router.back(); |
||||
|
}, |
||||
|
handleLabelClick(label, index) { |
||||
|
if (!this.isPartial) return; |
||||
|
this.currentEditLabel = { ...label }; |
||||
|
this.currentEditIndex = index; |
||||
|
this.editHeight = label.height; |
||||
|
this.editQuantity = label.quantity; |
||||
|
this.quantityDialogVisible = true; |
||||
|
}, |
||||
|
confirmQuantityChange() { |
||||
|
if (this.editHeight < 0) { |
||||
|
this.$message.warning("高度不能小于0"); |
||||
|
return; |
||||
|
} |
||||
|
if (this.editQuantity <= 0) { |
||||
|
this.$message.warning("数量必须大于0"); |
||||
|
return; |
||||
|
} |
||||
|
if (this.currentEditIndex >= 0 && this.currentEditIndex < this.scannedLabels.length) { |
||||
|
this.scannedLabels[this.currentEditIndex].quantity = this.editQuantity; |
||||
|
this.scannedLabels[this.currentEditIndex].height = this.editHeight; |
||||
|
this.$message.success("数量修改成功"); |
||||
|
this.quantityDialogVisible = false; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initFromRoute(); |
||||
|
this.$nextTick(() => this.$refs.scanInput && this.$refs.scanInput.focus()); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pda-container { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
.header-bar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 8px 16px; |
||||
|
background: #17b3a3; |
||||
|
color: white; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
} |
||||
|
.header-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.header-left i { |
||||
|
margin-right: 8px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.header-right { |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.search-container { |
||||
|
padding: 12px 16px; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
.custom-switch { |
||||
|
transform: scale(1.3); |
||||
|
} |
||||
|
.custom-switch ::v-deep .el-switch__core { |
||||
|
width: 60px; |
||||
|
height: 28px; |
||||
|
} |
||||
|
.mode-switch { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.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; |
||||
|
} |
||||
|
.partial-checkbox-container { |
||||
|
padding: 8px 16px; |
||||
|
background: white; |
||||
|
border-top: 1px solid #f0f0f0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.scrollable-content { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
.work-order-list { |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
.work-order-card { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
border: 2px solid transparent; |
||||
|
} |
||||
|
|
||||
|
/* materialList 弹框卡片样式（参考 directIssueNoMaterial.vue） */ |
||||
|
.content-area { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
.material-card { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 12px; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
transition: all 0.2s ease; |
||||
|
border: 2px solid transparent; |
||||
|
} |
||||
|
.material-card.material-card-view { |
||||
|
cursor: default; |
||||
|
} |
||||
|
.card-title { |
||||
|
margin-bottom: 12px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.title-label { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
.part-desc-row { |
||||
|
margin-bottom: 12px; |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
.desc-text { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
line-height: 1.3; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.card-details { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
.detail-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
min-width: 50px; |
||||
|
max-width: 70px; |
||||
|
} |
||||
|
.detail-label { |
||||
|
font-size: 11px; |
||||
|
color: #666; |
||||
|
margin-bottom: 4px; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
.detail-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
.detail-item.issued-qty-highlight .detail-label, |
||||
|
.detail-item.issued-qty-highlight .detail-value { |
||||
|
font-weight: bold; |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.section-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 6px 8px; |
||||
|
background: white; |
||||
|
margin: 0 8px; |
||||
|
margin-top: 4px; |
||||
|
border-radius: 8px 8px 0 0; |
||||
|
border-bottom: 2px solid #17b3a3; |
||||
|
} |
||||
|
.label-list { |
||||
|
background: white; |
||||
|
margin: 0 16px 12px; |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.list-header, |
||||
|
.list-item { |
||||
|
display: flex; |
||||
|
padding: 12px 8px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.list-header { |
||||
|
background: #f8f9fa; |
||||
|
border-bottom: 1px solid #e0e0e0; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.list-item { |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
color: #333; |
||||
|
align-items: flex-start; |
||||
|
min-height: 40px; |
||||
|
} |
||||
|
.list-item.clickable { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.col-no { |
||||
|
width: 10px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.col-label { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
word-break: break-all; |
||||
|
white-space: normal; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
.col-batch { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.col-qty { |
||||
|
flex: 0.6; |
||||
|
width: 60px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.empty-labels { |
||||
|
padding: 40px 20px; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
} |
||||
|
.bottom-actions { |
||||
|
display: flex; |
||||
|
padding: 16px; |
||||
|
gap: 20px; |
||||
|
background: white; |
||||
|
margin-top: auto; |
||||
|
} |
||||
|
.action-btn { |
||||
|
flex: 1; |
||||
|
padding: 12px; |
||||
|
border: 1px solid #17b3a3; |
||||
|
background: white; |
||||
|
color: #17b3a3; |
||||
|
border-radius: 20px; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.edit-overlay { |
||||
|
position: fixed; |
||||
|
inset: 0; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
z-index: 9999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.edit-modal { |
||||
|
background: white; |
||||
|
border-radius: 12px; |
||||
|
width: 100%; |
||||
|
max-width: 400px; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.modal-header { |
||||
|
background: #17b3a3; |
||||
|
color: white; |
||||
|
padding: 12px 16px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.modal-body { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.modal-footer { |
||||
|
padding: 16px 20px; |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
justify-content: flex-end; |
||||
|
border-top: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.material-option { |
||||
|
padding: 10px 6px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.material-option:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.material-option-main { |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.material-option-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
line-height: 1.3; |
||||
|
} |
||||
|
|
||||
|
.material-option-desc { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
line-height: 1.3; |
||||
|
margin-top: 2px; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue