13 changed files with 1947 additions and 289 deletions
-
4src/api/outsourcing/outsourcing.js
-
5src/api/production/production-return.js
-
8src/router/index.js
-
2src/views/modules/outsourcing-issue/index.vue
-
481src/views/modules/outsourcing-issue/outsourcingDirectIssue.vue
-
478src/views/modules/outsourcing-issue/outsourcingDirectIssueDetail.vue
-
6src/views/modules/production-issue/directIssue.vue
-
45src/views/modules/production-issue/directIssueDetail.vue
-
2src/views/modules/production-return/production.vue
-
144src/views/modules/production-return/productionReturnIssueList.vue
-
139src/views/modules/production-return/productionReturnPDA.vue
-
40src/views/modules/production-return/productionReturnPicking.vue
-
882src/views/modules/production-return/productionReturnPickingDetail.vue
@ -0,0 +1,4 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// 获取委外订单信息
|
|||
export const getOutsourceOrderInfo = data => createAPI(`/pda/outsourcing/issue/getOutsourceOrderInfo`,'post',data) |
|||
@ -0,0 +1,481 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<!-- 头部栏 --> |
|||
<div class="header-bar"> |
|||
<div class="header-left" @click="$router.back()"> |
|||
<i class="el-icon-arrow-left"></i> |
|||
<span>委外直接发料</span> |
|||
</div> |
|||
<div class="header-right" @click="$router.push({ path: '/' })">首页</div> |
|||
</div> |
|||
|
|||
<!-- 委外订单输入 --> |
|||
<div class="search-container"> |
|||
<el-input |
|||
clearable |
|||
v-model="outsourcingNo" |
|||
placeholder="请输入委外订单号" |
|||
prefix-icon="el-icon-search" |
|||
@keyup.enter.native="handleSearchOrder" |
|||
ref="orderInput" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 委外订单卡片列表 --> |
|||
<div class="work-order-list" v-if="orderList.length > 0"> |
|||
<div |
|||
v-for="(order, index) in orderList" |
|||
:key="index" |
|||
class="work-order-card" |
|||
@click="selectOrder(order)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label">委外订单号：{{ order.poNumber }}</span> |
|||
<span class="title-value">{{ order.supplierName || order.supplierNo || '-' }}</span> |
|||
</div> |
|||
|
|||
<div class="part-desc-row"> |
|||
<span class="desc-text">申请单：{{ order.requestNo || '-' }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">计划数量</div> |
|||
<div class="detail-value">{{ order.qty || 0 }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">已发数量</div> |
|||
<div class="detail-value">{{ order.recvQty || 0 }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">单位</div> |
|||
<div class="detail-value">{{ order.uom || '个' }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 材料列表 --> |
|||
<div class="content-area" v-if="selectedOrder && 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.partNo }} 行号：{{ |
|||
material.lineNo || index + 1 |
|||
}}</span |
|||
> |
|||
</div> |
|||
|
|||
<div class="part-desc-row"> |
|||
<span class="desc-text">{{ material.partDesc || material.materialDesc }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">需求数量</div> |
|||
<div class="detail-value">{{ material.qty || material.requiredQty || 0 }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">已发数量</div> |
|||
<div class="detail-value">{{ material.issuedQty || material.pickedQty || 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="selectedOrder && 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 { getOutsourceOrderInfo } from '@/api/outsourcing/outsourcing.js' |
|||
import moment from 'moment' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
outsourcingNo: '', |
|||
orderList: [], |
|||
selectedOrder: null, |
|||
materialList: [], |
|||
loading: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : '' |
|||
}, |
|||
// 查询委外订单 |
|||
handleSearchOrder() { |
|||
if (!this.outsourcingNo.trim()) { |
|||
this.$message.warning('请输入委外订单号') |
|||
return |
|||
} |
|||
this.loading = true |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
poNumber: this.outsourcingNo.trim(), |
|||
} |
|||
getOutsourceOrderInfo(params) |
|||
.then(({ data }) => { |
|||
this.loading = false |
|||
if (data && data.code === 0) { |
|||
// 将列表规范为订单列表 |
|||
this.orderList = (data.rows || []).map((row) => ({ |
|||
poNumber: row.poNumber || row.notifyNo, |
|||
requestNo: row.workOrderNo || row.relatedNo, |
|||
qty: row.qty, |
|||
recvQty: row.recvQty || 0, |
|||
uom: row.uom, |
|||
supplierName: row.supplierName, |
|||
supplierNo: row.supplierNo, |
|||
})) |
|||
this.selectedOrder = null |
|||
this.materialList = [] |
|||
if (this.orderList.length === 0) { |
|||
this.$message.warning('未找到该委外订单') |
|||
} |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败') |
|||
this.orderList = [] |
|||
this.selectedOrder = null |
|||
this.materialList = [] |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
this.loading = false |
|||
console.error('查询委外订单失败:', error) |
|||
this.$message.error('查询失败') |
|||
}) |
|||
}, |
|||
// 选择订单 |
|||
selectOrder(order) { |
|||
this.selectedOrder = order |
|||
this.loadMaterialList() |
|||
}, |
|||
// 加载材料清单（通过 poNumber 拉取明细行） |
|||
loadMaterialList() { |
|||
if (!this.selectedOrder) { |
|||
this.materialList = [] |
|||
return |
|||
} |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
poNumber: this.selectedOrder.poNumber, |
|||
} |
|||
getOutsourceOrderInfo(params) |
|||
.then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.materialList = (data.rows || []).map((item, index) => ({ |
|||
id: index + 1, |
|||
partNo: item.partNo || item.materialCode, |
|||
partDesc: item.partDesc || item.materialDesc, |
|||
qty: item.qty || item.requiredQty, |
|||
issuedQty: item.recvQty || item.pickedQty || 0, |
|||
uom: item.uom, |
|||
lineNo: item.lineNo || item.lineNum, |
|||
})) |
|||
} else { |
|||
this.$message.error(data.msg || '获取材料清单失败') |
|||
this.materialList = [] |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
console.error('获取材料清单失败:', error) |
|||
this.$message.error('获取材料清单失败') |
|||
}) |
|||
}, |
|||
// 选择材料，跳转到扫描明细页 |
|||
selectMaterial(material) { |
|||
this.$router.push({ |
|||
name: 'outsourcingDirectIssueDetail', |
|||
params: { |
|||
outsourcingNo: this.selectedOrder.poNumber, |
|||
partNo: material.partNo, |
|||
partDesc: material.partDesc || '', |
|||
requiredQty: material.qty || 0, |
|||
issuedQty: material.issuedQty || 0, |
|||
}, |
|||
}) |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
if (this.$refs.orderInput) { |
|||
this.$refs.orderInput.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; |
|||
} |
|||
|
|||
.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:hover { |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.work-order-card.selected { |
|||
border-color: #17b3a3; |
|||
background: #f0fffe; |
|||
} |
|||
|
|||
.work-order-card:active { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.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); |
|||
} |
|||
|
|||
.material-card.selected { |
|||
border-color: #17b3a3; |
|||
background: #f0fffe; |
|||
} |
|||
|
|||
.material-card:active { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-state i { |
|||
font-size: 48px; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.empty-state p { |
|||
font-size: 14px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.loading-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #17b3a3; |
|||
} |
|||
|
|||
.loading-state i { |
|||
font-size: 24px; |
|||
margin-bottom: 12px; |
|||
animation: spin 1s linear infinite; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.loading-state p { |
|||
font-size: 14px; |
|||
margin: 0; |
|||
} |
|||
|
|||
@media (max-width: 360px) { |
|||
.header-bar { |
|||
padding: 8px 12px; |
|||
} |
|||
.search-container { |
|||
padding: 8px 12px; |
|||
} |
|||
.work-order-list { |
|||
padding: 8px 12px; |
|||
} |
|||
.work-order-card { |
|||
padding: 12px; |
|||
} |
|||
.content-area { |
|||
padding: 8px 12px; |
|||
} |
|||
.material-card { |
|||
padding: 12px; |
|||
} |
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,478 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<!-- 头部栏 --> |
|||
<div class="header-bar"> |
|||
<div class="header-left" @click="$router.back()"> |
|||
<i class="el-icon-arrow-left"></i> |
|||
<span>委外直接发料</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"> |
|||
</el-switch> |
|||
<span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span> |
|||
<span v-else class="switch-text2">{{ '添加' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 订单及物料信息 --> |
|||
<div class="work-order-list" v-if="outsourcingNo && componentPartNo"> |
|||
<div class="work-order-card"> |
|||
<div class="card-title"> |
|||
<span class="title-label">委外订单号：{{ outsourcingNo }}</span> |
|||
</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 class="col-qty">数量</div> |
|||
</div> |
|||
|
|||
<div v-for="(label, index) in scannedLabels" :key="label.id" class="list-item"> |
|||
<div class="col-no">{{ index+1 }}</div> |
|||
<div class="col-label">{{ label.labelCode }}</div> |
|||
<div class="col-batch">{{label.warehouseId}}</div> |
|||
<div class="col-batch">{{ label.batchNo || '-' }}</div> |
|||
<div class="col-qty">{{ label.quantity }}</div> |
|||
</div> |
|||
|
|||
<div v-if="scannedLabels.length === 0" class="empty-labels"> |
|||
<p>暂无扫描标签</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部操作按钮 --> |
|||
<div class="bottom-actions"> |
|||
<button class="action-btn secondary" @click="confirmIssue" :disabled="scannedLabels.length === 0"> |
|||
确定 |
|||
</button> |
|||
<button class="action-btn secondary" style="margin-left: 10px;"> |
|||
打印 |
|||
</button> |
|||
<button class="action-btn secondary" style="margin-left: 10px;" @click="clearScannedLabels"> |
|||
清空 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import moment from 'moment' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
scanCode: '', |
|||
isRemoveMode: false, |
|||
scannedLabels: [], |
|||
outsourcingNo: '', |
|||
componentPartNo: '', |
|||
componentPartDesc: '', |
|||
requiredQty: 0, |
|||
issuedQty: 0, |
|||
} |
|||
}, |
|||
computed: { |
|||
totalScannedQty() { |
|||
return this.scannedLabels.reduce((sum, l) => sum + (l.quantity || 0), 0) |
|||
}, |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : '' |
|||
}, |
|||
handleScan() { |
|||
if (!this.scanCode.trim()) return |
|||
if (this.isRemoveMode) { |
|||
this.removeLabelByCode(this.scanCode.trim()) |
|||
} else { |
|||
this.validateAndAddLabel(this.scanCode.trim()) |
|||
} |
|||
this.scanCode = '' |
|||
}, |
|||
// TODO: 接入委外标签校验API |
|||
validateAndAddLabel(labelCode) { |
|||
// 先允许录入，后续替换为接口校验 |
|||
const exists = this.scannedLabels.find((item) => item.labelCode === labelCode) |
|||
if (exists) { |
|||
this.$message.warning('该标签已扫描，请勿重复扫描') |
|||
return |
|||
} |
|||
this.scannedLabels.push({ |
|||
id: Date.now(), |
|||
labelCode, |
|||
componentPartNo: this.componentPartNo, |
|||
quantity: 1, |
|||
batchNo: '-', |
|||
warehouseId: '-', |
|||
}) |
|||
this.$message.success('扫描成功') |
|||
}, |
|||
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() { |
|||
if (this.scannedLabels.length === 0) return |
|||
this.$confirm('确定清空所有已扫描的标签吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
}) |
|||
.then(() => { |
|||
this.scannedLabels = [] |
|||
this.$message.success('已清空') |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
confirmIssue() { |
|||
if (this.scannedLabels.length === 0) { |
|||
this.$message.warning('请先扫描材料标签') |
|||
return |
|||
} |
|||
// TODO: 调用委外直接发料确认API |
|||
this.$message.success('发料成功（示例）') |
|||
this.$router.back() |
|||
}, |
|||
initFromRoute() { |
|||
this.outsourcingNo = this.$route.params.outsourcingNo |
|||
this.componentPartNo = this.$route.params.partNo |
|||
this.componentPartDesc = this.$route.params.partDesc || '' |
|||
this.requiredQty = Number(this.$route.params.requiredQty || 0) |
|||
this.issuedQty = Number(this.$route.params.issuedQty || 0) |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.initFromRoute() |
|||
this.$nextTick(() => { |
|||
if (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; |
|||
} |
|||
.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; |
|||
} |
|||
.custom-switch ::v-deep .el-switch__core { |
|||
width: 60px; |
|||
height: 28px; |
|||
} |
|||
.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:hover { |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|||
transform: translateY(-1px); |
|||
} |
|||
.work-order-card.selected { |
|||
border-color: #17b3a3; |
|||
background: #f0fffe; |
|||
} |
|||
.work-order-card:active { |
|||
transform: translateY(0); |
|||
} |
|||
.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: 20px; |
|||
} |
|||
.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; |
|||
} |
|||
.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; |
|||
} |
|||
.label-list { |
|||
background: white; |
|||
margin: 0 16px 12px; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
} |
|||
.list-header { |
|||
display: flex; |
|||
background: #f8f9fa; |
|||
padding: 12px 8px; |
|||
border-bottom: 1px solid #e0e0e0; |
|||
font-size: 12px; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
.list-item { |
|||
display: flex; |
|||
padding: 12px 8px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
font-size: 12px; |
|||
color: #333; |
|||
} |
|||
.list-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
.col-no { |
|||
width: 20px; |
|||
text-align: center; |
|||
} |
|||
.col-label { |
|||
flex: 2; |
|||
text-align: center; |
|||
} |
|||
.col-batch { |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.col-qty { |
|||
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; |
|||
transition: all 0.2s ease; |
|||
} |
|||
.action-btn:hover { |
|||
background: #17b3a3; |
|||
color: white; |
|||
} |
|||
.action-btn:active { |
|||
transform: scale(0.98); |
|||
} |
|||
@media (max-width: 360px) { |
|||
.header-bar { padding: 8px 12px; } |
|||
.search-container { padding: 8px 12px; } |
|||
.work-order-list { padding: 8px 12px; } |
|||
.work-order-card { padding: 12px; } |
|||
.card-details { flex-wrap: wrap; gap: 6px; } |
|||
.detail-item { flex: 0 0 48%; margin-bottom: 6px; min-width: 50px; } |
|||
.label-list { margin: 0 12px 8px; } |
|||
} |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<!-- 头部栏 --> |
|||
<div class="header-bar"> |
|||
<div class="header-left" @click="$router.back()"> |
|||
<i class="el-icon-arrow-left"></i> |
|||
<span>退仓 - 领料记录</span> |
|||
</div> |
|||
<div class="header-right" @click="$router.push({ path: '/' })">首页</div> |
|||
</div> |
|||
|
|||
<div class="content-area"> |
|||
<div class="work-order-list" v-if="issueList.length > 0"> |
|||
<div |
|||
v-for="(item, index) in issueList" |
|||
:key="index" |
|||
class="material-card" |
|||
@click="goDetail(item)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label"> |
|||
物料编码：{{ partNo }} 领料号：{{ item.TRANSACTION_ID }} |
|||
</span> |
|||
</div> |
|||
<div class="part-desc-row"> |
|||
<span class="desc-text">批次号：{{ item.LOT_BATCH_NO || '-' }}</span> |
|||
</div> |
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">领料数量</div> |
|||
<div class="detail-value">{{ item.QUANTITY }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">撤销数量</div> |
|||
<div class="detail-value">{{ item.QTY_REVERSED || 0 }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">单位</div> |
|||
<div class="detail-value">{{ item.uom || '个' }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="!loading && issueList.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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getIssueForShopOrder } from '@/api/production/production-return'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
workOrderNo: '', |
|||
partNo: '', |
|||
loading: false, |
|||
issueList: [], |
|||
}; |
|||
}, |
|||
methods: { |
|||
loadIssueList() { |
|||
if (!this.workOrderNo || !this.partNo) { |
|||
return; |
|||
} |
|||
this.loading = true; |
|||
const params = { |
|||
workOrderNo: this.workOrderNo, |
|||
site: this.$store.state.user.site, |
|||
partNo: this.partNo, |
|||
}; |
|||
getIssueForShopOrder(params) |
|||
.then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
this.issueList = data.issueForShopOrder || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取领料记录失败'); |
|||
this.issueList = []; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
this.$message.error('获取领料记录失败'); |
|||
}); |
|||
}, |
|||
goDetail(item) { |
|||
this.$router.push({ |
|||
name: 'productionReturnPickingDetail', |
|||
params: { |
|||
orderNo: this.workOrderNo, |
|||
orderType: 'workOrder', |
|||
partNo: this.partNo, |
|||
transactionId: item.TRANSACTION_ID, |
|||
quantity: item.QUANTITY, |
|||
batchNo: item.LOT_BATCH_NO, |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.workOrderNo = this.$route.params.workOrderNo; |
|||
this.partNo = this.$route.params.partNo; |
|||
this.loadIssueList(); |
|||
}, |
|||
}; |
|||
</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; } |
|||
.content-area { flex: 1; overflow-y: auto; padding: 12px 16px; } |
|||
.work-order-list { 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); } |
|||
.material-card:active { transform: translateY(0); } |
|||
.card-title { margin-bottom: 12px; } |
|||
.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; } |
|||
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #999; } |
|||
.empty-state i { font-size: 48px; margin-bottom: 16px; } |
|||
.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #17B3A3; } |
|||
.loading-state i { font-size: 24px; margin-bottom: 12px; animation: spin 1s linear infinite; } |
|||
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|||
</style> |
|||
|
|||
|
|||
882
src/views/modules/production-return/productionReturnPickingDetail.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue