9 changed files with 543 additions and 90 deletions
-
4src/api/outsourcing/outsourcing-issue.js
-
1src/api/outsourcing/outsourcing-return.js
-
4src/router/index.js
-
75src/views/modules/outsourcing-issue/outsourcingDirectIssue.vue
-
19src/views/modules/outsourcing-issue/outsourcingDirectIssueDetail.vue
-
335src/views/modules/outsourcing-issue/outsourcingDirectIssueList.vue
-
140src/views/modules/outsourcing-return/index.vue
-
45src/views/modules/outsourcing-return/outsourcingReturnPDAIssueList.vue
-
10src/views/modules/outsourcing-return/outsourcingReturnPDAList.vue
@ -0,0 +1,335 @@ |
|||
<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"> |
|||
<div class="card-title"> |
|||
<label class="title-label">委外订单号:{{ outsourcingNo }}</label> |
|||
</div> |
|||
<div class="card-title"> |
|||
<label class="title-label">物料编码:{{ partNo }}</label> |
|||
</div> |
|||
<div class="card-title"> |
|||
<label class="title-label">需求数量:{{ requiredQty }}</label> |
|||
</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"> |
|||
需求日期：{{ item.dateRequired }} 行号：{{ item.lineNo }} |
|||
</span> |
|||
</div> |
|||
<div class="part-desc-row"> |
|||
<span class="desc-text">料号：{{ item.componentPartNo }}</span> |
|||
</div> |
|||
<div class="part-desc-row"> |
|||
<span class="desc-text">{{ item.componentPartDescription }}</span> |
|||
</div> |
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">需求数量</div> |
|||
<div class="detail-value">{{ item.qtyRequired }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">已发数量</div> |
|||
<div class="detail-value">{{ item.qtyIssued || 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 { getOutsourcingMaterials } from '@/api/outsourcing/outsourcing-issue.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
outsourcingNo: '', |
|||
partNo: '', |
|||
requiredQty: 0, |
|||
loading: false, |
|||
issueList: [], |
|||
} |
|||
}, |
|||
methods: { |
|||
async loadIssueList() { |
|||
if (!this.outsourcingNo || !this.partNo) { |
|||
return |
|||
} |
|||
this.loading = true |
|||
const params = { |
|||
outsourcingNo: this.outsourcingNo, |
|||
site: this.$store.state.user.site, |
|||
partNo: this.partNo, |
|||
} |
|||
|
|||
getOutsourcingMaterials(params).then(({data})=>{ |
|||
this.loading = false |
|||
if (data && data.code === 0) { |
|||
this.issueList = data.materials || [] |
|||
} else { |
|||
this.$message.error(data.msg || '获取发料记录失败') |
|||
this.issueList = [] |
|||
} |
|||
}) |
|||
}, |
|||
goDetail(item) { |
|||
this.$router.push({ |
|||
name: 'outsourcingDirectIssueDetail', |
|||
params: { |
|||
outsourcingNo: this.outsourcingNo, |
|||
partNo: this.partNo, |
|||
partDesc: item.partDesc || '', |
|||
requiredQty: this.requiredQty, |
|||
issuedQty: item.issuedQty || 0, |
|||
issueRecord: { |
|||
itemNo: item.itemNo, |
|||
orderType: 'outsourcing', |
|||
transactionId: item.transactionId, |
|||
quantity: item.quantity, |
|||
batchNo: item.batchNo, |
|||
issuedQty: item.issuedQty || 0, |
|||
accountingId: item.accountingId, |
|||
} |
|||
}, |
|||
}) |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.outsourcingNo = this.$route.params.outsourcingNo |
|||
this.partNo = this.$route.params.partNo |
|||
this.requiredQty = this.$route.params.outsourcingInfo.requiredQty |
|||
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; |
|||
} |
|||
|
|||
.search-container { |
|||
padding: 12px 16px; |
|||
background: white; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.card-title { |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.title-label { |
|||
font-size: 12px; |
|||
color: #666; |
|||
display: block; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.content-area { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.work-order-list { |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.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); |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
.material-card { |
|||
padding: 12px; |
|||
} |
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue