5 changed files with 1879 additions and 1 deletions
-
4src/api/production/production-return2.js
-
8src/router/index.js
-
2src/views/modules/production/production-return.vue
-
412src/views/modules/production/productionApplicationReturnList.vue
-
1454src/views/modules/production/productionApplicationReturnStorage.vue
@ -0,0 +1,412 @@ |
|||
<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="searchCode" |
|||
placeholder="请扫描变动单号或标签条码" |
|||
prefix-icon="el-icon-search" |
|||
@keyup.enter.native="handleSearch" |
|||
ref="searchInput" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 物料列表 --> |
|||
<div class="content-area"> |
|||
<div |
|||
v-for="(item, index) in qualifiedList" |
|||
:key="index" |
|||
class="inbound-card" |
|||
@click="goToInboundPage(item)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label">变动单号</span> |
|||
<span class="title-value" style="margin-left: 20px; font-size: 16px; font-weight: bold; color: #333;">{{ item.transactionId }}</span> |
|||
</div> |
|||
|
|||
<div class="card-info-row" style="display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; padding-top: 8px;"> |
|||
<div class="info-item" style="display: flex; flex-direction: column; align-items: center;"> |
|||
<span class="info-label" style="margin-bottom: 4px;">标签张数</span> |
|||
<span class="info-value highlight" style="color: #17B3A3; font-weight: bold;">{{ item.labelCount }}</span> |
|||
</div> |
|||
<div class="info-item" style="display: flex; flex-direction: column; align-items: center;"> |
|||
<span class="info-label" style="margin-bottom: 4px;">物料总数</span> |
|||
<span class="info-value highlight" style="color: #17B3A3; font-weight: bold;">{{ item.totalQty }}</span> |
|||
</div> |
|||
<div class="info-item" style="display: flex; flex-direction: column; align-items: center;"> |
|||
<span class="info-label" style="margin-bottom: 4px;">操作员</span> |
|||
<span class="info-value">{{ item.transactionBy }}</span> |
|||
</div> |
|||
<div class="info-item" style="display: flex; flex-direction: column; align-items: center;"> |
|||
<span class="info-label" style="margin-bottom: 4px;">变动日期</span> |
|||
<span class="info-value" style="font-weight: bold;">{{ formatDate(item.transactionDate) }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="qualifiedList.length === 0 && !loading" 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 { getApplicationReturnList } from "@/api/production/production-return2.js"; |
|||
import { getCurrentWarehouse } from '@/utils' |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchCode: '', |
|||
qualifiedList: [], |
|||
loading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : ''; |
|||
}, |
|||
|
|||
// 处理搜索 |
|||
handleSearch() { |
|||
if (this.searchCode.trim()) { |
|||
this.searchQualifiedList(this.searchCode.trim()); |
|||
} else { |
|||
this.loadQualifiedList(); |
|||
} |
|||
}, |
|||
|
|||
// 加载待退仓列表 |
|||
loadQualifiedList() { |
|||
this.loading = true; |
|||
const params = { |
|||
site:localStorage.getItem('site'), |
|||
}; |
|||
|
|||
getApplicationReturnList(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
this.qualifiedList = data.data || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取数据失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
console.error('获取列表失败:', error); |
|||
this.$message.error('获取数据失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 搜索特定记录 |
|||
searchQualifiedList(searchCode) { |
|||
this.loading = true; |
|||
const params = { |
|||
searchCode: searchCode, |
|||
site:localStorage.getItem('site'), |
|||
}; |
|||
|
|||
getApplicationReturnList(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
if (data.data.length === 0) { |
|||
this.$message.warning('未找到匹配的记录'); |
|||
} |
|||
this.qualifiedList = data.data || []; |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
console.error('搜索失败:', error); |
|||
this.$message.error('查询失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 跳转到明细页面 |
|||
goToInboundPage(item) { |
|||
this.$router.push({ |
|||
name: 'productionApplicationReturnStorage', |
|||
params: { |
|||
searchCode: item.transactionId |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 聚焦搜索框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.searchInput) { |
|||
this.$refs.searchInput.focus(); |
|||
} |
|||
}); |
|||
// 加载数据 |
|||
this.loadQualifiedList(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
.search-box { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #f8f9fa; |
|||
border: 1px solid #e0e0e0; |
|||
border-radius: 8px; |
|||
padding: 0 12px; |
|||
} |
|||
|
|||
.search-icon { |
|||
color: #999; |
|||
font-size: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.search-box input { |
|||
flex: 1; |
|||
border: none; |
|||
background: transparent; |
|||
padding: 12px 0; |
|||
font-size: 14px; |
|||
outline: none; |
|||
} |
|||
|
|||
.search-box input::placeholder { |
|||
color: #999; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.content-area { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 12px 16px; |
|||
} |
|||
|
|||
/* 入库卡片 */ |
|||
.inbound-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; |
|||
} |
|||
|
|||
.inbound-card:hover { |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.inbound-card:active { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
/* 卡片标题 */ |
|||
.card-title { |
|||
margin-bottom: 0px; |
|||
padding-bottom: 8px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
/* 卡片信息行 */ |
|||
.card-info-row { |
|||
margin-bottom: 8px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.card-info-row:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
align-items: baseline; |
|||
flex: 0 0 auto; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.info-item.full-width { |
|||
flex: 1 1 100%; |
|||
} |
|||
|
|||
.info-label { |
|||
font-size: 12px; |
|||
color: #666; |
|||
white-space: nowrap; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 13px; |
|||
color: #333; |
|||
font-weight: 500; |
|||
word-break: break-all; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.info-value.highlight { |
|||
color: #17B3A3; |
|||
font-weight: bold; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.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; |
|||
} |
|||
|
|||
.content-area { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.inbound-card { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
} |
|||
</style> |
|||
1454
src/views/modules/production/productionApplicationReturnStorage.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