19 changed files with 6384 additions and 1292 deletions
-
11src/api/production/production-inbound.js
-
12src/api/purchase/purchase-return.js
-
18src/router/index.js
-
4src/views/main.vue
-
387src/views/modules/production-inbound/inboundRegister.vue
-
1027src/views/modules/production-inbound/inboundRegisterDetail.vue
-
1373src/views/modules/production-inbound/index.vue
-
166src/views/modules/production-inbound/production.vue
-
387src/views/modules/production-inbound/productionPick.vue
-
982src/views/modules/production-inbound/productionPickingDetail.vue
-
38src/views/modules/production-issue/production.vue
-
0src/views/modules/production-return/pick.vue
-
169src/views/modules/production-return/production.vue
-
0src/views/modules/production-return/productionReturnPDA.vue
-
440src/views/modules/production-return/productionReturnPicking.vue
-
1128src/views/modules/production-return/productionReturnPickingDetail.vue
-
165src/views/modules/purchase-return/index.vue
-
387src/views/modules/purchase-return/purchaseReturnPicking.vue
-
982src/views/modules/purchase-return/purchaseReturnPickingDetail.vue
@ -0,0 +1,12 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// 获取采购退库通知单信息
|
|||
export const getPurchaseReturnNotifyByNo = data => createAPI(`/purchase/return/getPurchaseReturnNotifyByNo`,'post',data) |
|||
// 获取采购退库通知单列表
|
|||
export const getPurchaseReturnNotifyListByNo = data => createAPI(`/purchase/return/getPurchaseReturnNotifyListByNo`,'post',data) |
|||
// 扫描物料标签
|
|||
export const scanMaterialLabel = data => createAPI(`/purchase/return/scanMaterialLabel`,'post',data) |
|||
// 获取退库物料清单
|
|||
export const getReturnMaterials = data => createAPI(`/purchase/return/getReturnMaterials`,'post',data) |
|||
// 确认采购退库
|
|||
export const confirmPurchaseReturn = data => createAPI(`/purchase/return/confirmPurchaseReturn`,'post',data) |
|||
@ -0,0 +1,387 @@ |
|||
<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 inboundList" |
|||
:key="index" |
|||
class="inbound-card" |
|||
@click="goToRegisterPage(item)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label">入库申请单号</span> |
|||
<span class="title-value">{{ item.notifyNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">关联单号</div> |
|||
<div class="detail-value">{{ item.workOrderNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">箱子数量</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.registeredBoxes }}</span><span class="total">{{ item.totalBoxes }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">物料总数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.registeredQty }}</span><span class="total">{{ item.totalQty }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="inboundList.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 { |
|||
getInboundNotifyByNo, |
|||
getInboundNotifyListByNo, |
|||
} from '@/api/production/production-inbound' |
|||
import { getCurrentWarehouse } from '@/utils' |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchCode: '', |
|||
inboundList: [], |
|||
loading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : ''; |
|||
}, |
|||
// 处理搜索 |
|||
handleSearch() { |
|||
if (this.searchCode.trim()) { |
|||
this.searchInboundList(this.searchCode.trim()); |
|||
} else { |
|||
this.loadInboundList(); |
|||
} |
|||
}, |
|||
|
|||
// 加载生产入库申请单列表 |
|||
loadInboundList() { |
|||
this.loading = true; |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
status: '待登记', |
|||
} |
|||
console.log('params', params); |
|||
|
|||
getInboundNotifyListByNo(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
this.inboundList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取数据失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
console.error('获取生产入库申请单列表失败:', error); |
|||
this.$message.error('获取数据失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 搜索特定入库申请单 |
|||
searchInboundList(searchCode) { |
|||
this.loading = true; |
|||
const params = { |
|||
notifyNo: searchCode, |
|||
site: this.$store.state.user.site, |
|||
status: 'REGISTER' |
|||
}; |
|||
|
|||
getInboundNotifyListByNo(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
if (data.list.length === 0) { |
|||
this.$message.warning('未找到匹配的入库申请单'); |
|||
} |
|||
this.inboundList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
this.$message.error('查询失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 跳转到入库登记页面 |
|||
goToRegisterPage(item) { |
|||
this.$router.push({ |
|||
name: 'inboundRegisterDetail', |
|||
params: { |
|||
inboundNo: item.notifyNo, |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 聚焦搜索框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.searchInput) { |
|||
this.$refs.searchInput.focus(); |
|||
} |
|||
}); |
|||
|
|||
// 加载数据 |
|||
this.loadInboundList(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.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: 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; |
|||
} |
|||
|
|||
/* 卡片详情 */ |
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.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-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.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> |
|||
1027
src/views/modules/production-inbound/inboundRegisterDetail.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1373
src/views/modules/production-inbound/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,166 @@ |
|||
<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="menu-grid"> |
|||
<div |
|||
class="menu-item" |
|||
v-for="(btn, index) in buttons" |
|||
:key="index" |
|||
:class="{ 'disabled': btn.disabled }" |
|||
@click="handleButtonClick(btn)" |
|||
> |
|||
<div class="menu-icon" :class="btn.iconClass"> |
|||
<van-icon :name="btn.icon" size="24" /> |
|||
</div> |
|||
<div class="menu-text">{{ btn.label }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
buttons: [ |
|||
{ icon: 'scan', label: '包装', iconClass: 'purchase', to: 'productionPick', disabled: false }, |
|||
{ icon: 'records', label: '装托盘', iconClass: 'qualified', to: 'productionPick', disabled: true }, |
|||
{ icon: 'box', label: '入库登记', iconClass: 'inspection', to: 'inboundRegister', disabled: false }, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleButtonClick(btn) { |
|||
if (btn.disabled) { |
|||
this.$message.warning('正在开发中，敬请期待...'); |
|||
} else { |
|||
this.$router.push(btn.to); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
:root { |
|||
--columns: 3; |
|||
--button-size: calc(100vw / var(--columns) - 20px); |
|||
} |
|||
|
|||
/* 头部栏 */ |
|||
.header-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 8px 16px; |
|||
background: #17B3A3; |
|||
color: white; |
|||
height: 40px; |
|||
min-height: 40px; |
|||
max-height: 40px; |
|||
} |
|||
|
|||
.header-left { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
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; |
|||
} |
|||
|
|||
.menu-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 15px; |
|||
padding: 20px; |
|||
justify-content: center; /* 水平居中 */ |
|||
align-content: center; /* 垂直居中 */ |
|||
width: 100%; /* 确保占满容器宽度 */ |
|||
} |
|||
|
|||
.menu-item { |
|||
background: white; |
|||
border-radius: 12px; |
|||
padding: 12px 6px; |
|||
text-align: center; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|||
transition: transform 0.2s; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.menu-item:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.menu-item.disabled { |
|||
opacity: 0.6; |
|||
position: relative; |
|||
} |
|||
|
|||
.menu-item.disabled::after { |
|||
content: '开发中'; |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
background: #ff9500; |
|||
color: white; |
|||
font-size: 8px; |
|||
padding: 2px 4px; |
|||
border-radius: 8px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.menu-icon { |
|||
width: 38px; |
|||
height: 38px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 0 auto 6px; |
|||
color: white; |
|||
} |
|||
|
|||
.menu-icon.purchase { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.inspection { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.qualified { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-text { |
|||
font-size: 10px; |
|||
color: #333; |
|||
font-weight: bold; /* 加粗字体 */ |
|||
white-space: nowrap; /* 防止文字换行 */ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
margin-top: 2px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,387 @@ |
|||
<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 inboundList" |
|||
:key="index" |
|||
class="inbound-card" |
|||
@click="goToInboundPage(item)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label">入库申请单号</span> |
|||
<span class="title-value">{{ item.notifyNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">关联单号</div> |
|||
<div class="detail-value">{{ item.workOrderNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">标签张数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.createdLabels }}</span><span class="total">{{ item.totalLabels }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">物料总数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.inboundQty }}</span><span class="total">{{ item.totalQty }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="inboundList.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 { |
|||
getInboundNotifyByNo, |
|||
getInboundNotifyListByNo, |
|||
} from '@/api/production/production-inbound' |
|||
import { getCurrentWarehouse } from '@/utils' |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchCode: '', |
|||
inboundList: [], |
|||
loading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : ''; |
|||
}, |
|||
// 处理搜索 |
|||
handleSearch() { |
|||
if (this.searchCode.trim()) { |
|||
this.searchInboundList(this.searchCode.trim()); |
|||
} else { |
|||
this.loadInboundList(); |
|||
} |
|||
}, |
|||
|
|||
// 加载生产入库申请单列表 |
|||
loadInboundList() { |
|||
this.loading = true; |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
status: '待入库', |
|||
} |
|||
console.log('params', params); |
|||
|
|||
getInboundNotifyListByNo(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
this.inboundList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取数据失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
console.error('获取生产入库申请单列表失败:', error); |
|||
this.$message.error('获取数据失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 搜索特定入库申请单 |
|||
searchInboundList(searchCode) { |
|||
this.loading = true; |
|||
const params = { |
|||
notifyNo: searchCode, |
|||
site: this.$store.state.user.site, |
|||
status: 'INBOUND' |
|||
}; |
|||
|
|||
getInboundNotifyListByNo(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
if (data.list.length === 0) { |
|||
this.$message.warning('未找到匹配的入库申请单'); |
|||
} |
|||
this.inboundList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
this.$message.error('查询失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 跳转到入库页面 |
|||
goToInboundPage(item) { |
|||
this.$router.push({ |
|||
name: 'productionInboundDetail', |
|||
params: { |
|||
inboundNo: item.notifyNo, |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 聚焦搜索框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.searchInput) { |
|||
this.$refs.searchInput.focus(); |
|||
} |
|||
}); |
|||
|
|||
// 加载数据 |
|||
this.loadInboundList(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.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: 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; |
|||
} |
|||
|
|||
/* 卡片详情 */ |
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.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-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.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> |
|||
@ -0,0 +1,982 @@ |
|||
<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="material-info-card" v-if="inboundInfo.inboundNo"> |
|||
<div class="card-title"> |
|||
<span class="title-label">入库申请单号</span> |
|||
<span class="title-value">{{ inboundInfo.inboundNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">关联单号</div> |
|||
<div class="detail-value">{{ inboundInfo.relatedNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">标签张数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ inboundInfo.createdLabels }}</span><span class="total">{{ inboundInfo.totalLabels }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">物料总数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ inboundInfo.inboundQty }}</span><span class="total">{{ inboundInfo.totalQty }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 入库信息确认标题 --> |
|||
<div class="section-title"> |
|||
<div class="title-left"> |
|||
<i class="el-icon-circle-check"></i> |
|||
<span>入库信息确认</span> |
|||
</div> |
|||
<div class="title-right"> |
|||
<span class="material-list-link" @click="showMaterialListDialog">物料清单</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-part">物料编码</div> |
|||
<div class="col-unit">单位</div> |
|||
<div class="col-qty">标签数量</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-for="(label, index) in labelList" |
|||
:key="label.id" |
|||
class="list-item" |
|||
> |
|||
<div class="col-no">{{ labelList.length - index }}</div> |
|||
<div class="col-label">{{ label.labelCode }}</div> |
|||
<div class="col-part">{{ label.partNo }}</div> |
|||
<div class="col-unit">{{ label.unit || '个' }}</div> |
|||
<div class="col-qty">{{ label.quantity }}</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="labelList.length === 0" class="empty-labels"> |
|||
<p>暂无扫描标签</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部操作按钮 --> |
|||
<div class="bottom-actions"> |
|||
<button class="action-btn secondary" @click="confirmInbound"> |
|||
确定 |
|||
</button> |
|||
<button class="action-btn secondary" style="margin-left: 10px;" @click="printLabels"> |
|||
打印 |
|||
</button> |
|||
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelInbound"> |
|||
取消 |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- 物料清单弹窗 --> |
|||
<div v-if="showMaterialDialog" class="material-overlay"> |
|||
<div class="material-modal"> |
|||
<div class="modal-header"> |
|||
<span class="modal-title">物料清单</span> |
|||
<i class="el-icon-close close-btn" @click="closeMaterialDialog"></i> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<!-- 加载状态 --> |
|||
<div v-if="materialListLoading" class="loading-container"> |
|||
<i class="el-icon-loading"></i> |
|||
<span>加载中...</span> |
|||
</div> |
|||
|
|||
<!-- 物料表格 --> |
|||
<div v-else-if="materialList.length > 0" class="material-table"> |
|||
<div class="table-header"> |
|||
<div class="col-no">NO.</div> |
|||
<div class="col-material-code">物料编码</div> |
|||
<div class="col-required-qty">需求数量</div> |
|||
<div class="col-inbound-qty">已入库数量</div> |
|||
</div> |
|||
|
|||
<div class="table-body"> |
|||
<div |
|||
v-for="(item, index) in materialList" |
|||
:key="index" |
|||
class="table-row" |
|||
> |
|||
<div class="col-no">{{ index + 1 }}</div> |
|||
<div class="col-material-code">{{ item.materialCode || item.partNo }}</div> |
|||
<div class="col-required-qty">{{ item.requiredQty || 0 }}</div> |
|||
<div class="col-inbound-qty">{{ item.inboundQty || 0 }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空数据状态 --> |
|||
<div v-else class="empty-material"> |
|||
<i class="el-icon-document"></i> |
|||
<p>暂无物料数据</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modal-footer"> |
|||
<button class="btn-close" @click="closeMaterialDialog">关闭</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { scanMaterialLabel, getRequestMaterials } from '@/api/production/production-inbound'; |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
scanCode: '', |
|||
inboundInfo: {}, |
|||
labelList: [], |
|||
inboundNo: '', |
|||
buNo: '', |
|||
showMaterialDialog: false, |
|||
materialList: [], |
|||
materialListLoading: false, |
|||
isRemoveMode: false // 默认为添加模式 |
|||
}; |
|||
}, |
|||
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 = ''; |
|||
}, |
|||
|
|||
// 验证标签并添加到列表 |
|||
validateAndAddLabel(labelCode) { |
|||
const params = { |
|||
labelCode: labelCode, |
|||
notifyNo: this.inboundNo, |
|||
site: this.$store.state.user.site, |
|||
}; |
|||
|
|||
scanMaterialLabel(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
// 检查是否已经扫描过 |
|||
const exists = this.labelList.find(item => item.labelCode === labelCode); |
|||
if (exists) { |
|||
this.$message.warning('该标签已扫描，请勿重复扫描'); |
|||
return; |
|||
} |
|||
|
|||
// 添加到列表 |
|||
this.labelList.push({ |
|||
id: Date.now(), |
|||
labelCode: labelCode, |
|||
partNo: data.labelInfo.partNo, |
|||
quantity: data.labelInfo.quantity, |
|||
unit: data.labelInfo.unit, |
|||
batchNo: data.labelInfo.batchNo |
|||
}); |
|||
|
|||
this.$message.success('操作成功'); |
|||
} else { |
|||
this.$message.error(data.msg || '该标签与入库申请单不符，请检查'); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error('操作失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 通过条码移除标签 |
|||
removeLabelByCode(labelCode) { |
|||
const index = this.labelList.findIndex(item => item.labelCode === labelCode); |
|||
if (index !== -1) { |
|||
this.labelList.splice(index, 1); |
|||
this.$message.success('操作成功'); |
|||
} else { |
|||
this.$message.warning('未找到该标签'); |
|||
} |
|||
}, |
|||
|
|||
// 确认入库 |
|||
confirmInbound() { |
|||
if (this.labelList.length === 0) { |
|||
this.$message.warning('请先扫描标签'); |
|||
return; |
|||
} |
|||
|
|||
const params = { |
|||
site: this.inboundInfo.site, |
|||
inboundNo: this.inboundNo, |
|||
labels: this.labelList.map(label => ({ |
|||
labelCode: label.labelCode, |
|||
quantity: label.quantity, |
|||
batchNo: label.batchNo, |
|||
partNo: label.partNo |
|||
})) |
|||
}; |
|||
|
|||
confirmProductionInbound(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('操作成功'); |
|||
this.$router.back(); |
|||
} else { |
|||
this.$message.error(data.msg || '操作失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('入库确认失败:', error); |
|||
this.$message.error('操作失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 打印标签 |
|||
printLabels() { |
|||
if (this.labelList.length === 0) { |
|||
this.$message.warning('暂无标签可打印'); |
|||
return; |
|||
} |
|||
|
|||
this.$message.warning('打印功能开发中...'); |
|||
}, |
|||
|
|||
// 取消入库 |
|||
cancelInbound() { |
|||
if (this.labelList.length > 0) { |
|||
this.$confirm('取消后将清空已扫描的标签，确定取消吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '继续操作', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$router.back(); |
|||
}).catch(() => { |
|||
// 用户选择继续操作 |
|||
}); |
|||
} else { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
// 显示物料清单弹窗 |
|||
showMaterialListDialog() { |
|||
this.showMaterialDialog = true; |
|||
this.loadMaterialList(); |
|||
}, |
|||
|
|||
// 加载物料清单 |
|||
loadMaterialList() { |
|||
console.log('加载物料清单', this.inboundInfo, this.inboundNo); |
|||
|
|||
if (!this.$store.state.user.site || !this.inboundNo) { |
|||
this.$message.error('缺少必要参数，无法获取物料清单'); |
|||
return; |
|||
} |
|||
|
|||
this.materialListLoading = true; |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
inboundNo: this.inboundNo |
|||
}; |
|||
|
|||
getRequestMaterials(params).then(({ data }) => { |
|||
this.materialListLoading = false; |
|||
if (data && data.code === 0) { |
|||
this.materialList = data.materials || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取物料清单失败'); |
|||
this.materialList = []; |
|||
} |
|||
}).catch(error => { |
|||
this.materialListLoading = false; |
|||
this.$message.error('获取物料清单失败'); |
|||
this.materialList = []; |
|||
}); |
|||
}, |
|||
|
|||
// 关闭物料清单弹窗 |
|||
closeMaterialDialog() { |
|||
this.showMaterialDialog = false; |
|||
}, |
|||
|
|||
// 加载入库申请单详情 |
|||
loadInboundDetails() { |
|||
const params = { |
|||
inboundNo: this.inboundNo, |
|||
site: this.$store.state.user.site, |
|||
}; |
|||
console.log('加载入库申请单详情参数:', params); |
|||
|
|||
/* getInboundDetails(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.inboundInfo = data.data; |
|||
} else { |
|||
this.$message.error(data.msg || '获取入库申请单详情失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取入库申请单详情失败:', error); |
|||
this.$message.error('获取入库申请单详情失败'); |
|||
}); */ |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 获取路由参数 |
|||
this.inboundNo = this.$route.params.inboundNo; |
|||
console.log("入库申请单号:", this.inboundNo); |
|||
|
|||
if (!this.inboundNo) { |
|||
this.$message.error('参数错误'); |
|||
this.$router.back(); |
|||
return; |
|||
} |
|||
|
|||
// 聚焦扫描框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.scanInput) { |
|||
this.$refs.scanInput.focus(); |
|||
} |
|||
}); |
|||
|
|||
// 加载入库申请单详情 |
|||
this.loadInboundDetails(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
/* 调整 switch 尺寸以便容纳文字 */ |
|||
.custom-switch ::v-deep .el-switch__core { |
|||
width: 60px; |
|||
height: 28px; |
|||
} |
|||
|
|||
/* 物料信息卡片 */ |
|||
.material-info-card { |
|||
background: white; |
|||
margin: 4px 16px; |
|||
padding: 6px 20px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.card-title { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.title-label { |
|||
font-size: 11px; |
|||
color: #999; |
|||
display: block; |
|||
margin-bottom: 6px; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.title-value { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
line-height: 1.2; |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 11px; |
|||
color: #999; |
|||
margin-bottom: 6px; |
|||
font-weight: normal; |
|||
line-height: 1.2; |
|||
margin-left: -12px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 13px; |
|||
color: #333; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
margin-left: -12px; |
|||
} |
|||
|
|||
.detail-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 区域标题 */ |
|||
.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; |
|||
} |
|||
|
|||
.title-left { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.title-left i { |
|||
color: #17B3A3; |
|||
font-size: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.title-left span { |
|||
color: #17B3A3; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.title-right { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.material-list-link { |
|||
color: #17B3A3; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
text-decoration: underline; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
.material-list-link:hover { |
|||
color: #0d8f7f; |
|||
} |
|||
|
|||
/* 标签列表 */ |
|||
.label-list { |
|||
background: white; |
|||
margin: 0 16px 12px; |
|||
border-radius: 0 0 8px 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-part { |
|||
flex: 2; |
|||
text-align: center; |
|||
} |
|||
|
|||
.col-unit { |
|||
width: 40px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.col-qty { |
|||
width: 60px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-labels { |
|||
padding: 40px 20px; |
|||
text-align: center; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-labels p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 底部操作按钮 */ |
|||
.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); |
|||
} |
|||
|
|||
/* 物料清单弹窗样式 */ |
|||
.material-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 9999; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.material-modal { |
|||
background: white; |
|||
border-radius: 12px; |
|||
width: 100%; |
|||
max-width: 800px; |
|||
max-height: 80vh; |
|||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.material-modal .modal-header { |
|||
background: #17B3A3; |
|||
color: white; |
|||
padding: 5px 16px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
min-height: 28px; |
|||
} |
|||
|
|||
.close-btn { |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
color: white; |
|||
transition: color 0.2s ease; |
|||
padding: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.close-btn:hover { |
|||
color: #e0e0e0; |
|||
} |
|||
|
|||
.material-modal .modal-title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
margin: 0; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.material-modal .modal-body { |
|||
flex: 1; |
|||
overflow: auto; |
|||
padding: 0; |
|||
} |
|||
|
|||
.material-table { |
|||
width: 100%; |
|||
} |
|||
|
|||
.table-header { |
|||
display: flex; |
|||
background: #f8f9fa; |
|||
padding: 10px 6px; |
|||
border-bottom: 2px solid #17B3A3; |
|||
font-size: 12px; |
|||
color: #333; |
|||
font-weight: 600; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.table-body { |
|||
max-height: 400px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.table-row { |
|||
display: flex; |
|||
padding: 10px 6px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
font-size: 12px; |
|||
color: #333; |
|||
transition: background-color 0.2s ease; |
|||
} |
|||
|
|||
.table-row:hover { |
|||
background-color: #f8f9fa; |
|||
} |
|||
|
|||
.table-row:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.material-table .col-no { |
|||
width: 25px; |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-table .col-material-code { |
|||
flex: 1.8; |
|||
text-align: center; |
|||
min-width: 100px; |
|||
font-size: 12px; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.material-table .col-required-qty { |
|||
flex: 0.8; |
|||
text-align: center; |
|||
min-width: 65px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-table .col-inbound-qty { |
|||
flex: 0.8; |
|||
text-align: center; |
|||
min-width: 65px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-modal .modal-footer { |
|||
padding: 15px 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.btn-close { |
|||
padding: 10px 20px; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.2s; |
|||
border: 1px solid #17B3A3; |
|||
background: white; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
.btn-close:hover { |
|||
background: #17B3A3; |
|||
color: white; |
|||
} |
|||
|
|||
/* 加载状态样式 */ |
|||
.loading-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #666; |
|||
} |
|||
|
|||
.loading-container i { |
|||
font-size: 24px; |
|||
margin-bottom: 12px; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
.loading-container span { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 空数据状态样式 */ |
|||
.empty-material { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-material i { |
|||
font-size: 48px; |
|||
margin-bottom: 16px; |
|||
color: #ddd; |
|||
} |
|||
|
|||
.empty-material p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 360px) { |
|||
.header-bar { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.search-container { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.material-info-card { |
|||
margin: 4px 12px; |
|||
padding: 6px 16px; |
|||
} |
|||
|
|||
.section-title { |
|||
margin: 0 12px; |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.label-list { |
|||
margin: 0 12px 8px; |
|||
} |
|||
|
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
|
|||
.list-header, .list-item { |
|||
font-size: 11px; |
|||
} |
|||
|
|||
.col-label, .col-part { |
|||
flex: 1.5; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<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="menu-grid"> |
|||
<div |
|||
class="menu-item" |
|||
v-for="(btn, index) in buttons" |
|||
:key="index" |
|||
:class="{ 'disabled': btn.disabled }" |
|||
@click="handleButtonClick(btn)" |
|||
> |
|||
<div class="menu-icon" :class="btn.iconClass"> |
|||
<van-icon :name="btn.icon" size="24" /> |
|||
</div> |
|||
<div class="menu-text">{{ btn.label }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
buttons: [ |
|||
{ icon: 'scan', label: '直接退料', iconClass: 'direct', to: 'productionReturnPicking', disabled: false }, |
|||
{ icon: 'records', label: '申请单退料', iconClass: 'request', to: 'productionReturnPicking', disabled: false }, |
|||
{ icon: 'logistics', label: '移库退料', iconClass: 'move', to: 'productionReturnPicking', disabled: true }, |
|||
{ icon: 'revoke', label: '退料撤销', iconClass: 'cancel', to: 'productionReturnPicking', disabled: true }, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleButtonClick(btn) { |
|||
if (btn.disabled) { |
|||
this.$message.warning('正在开发中，敬请期待...'); |
|||
} else { |
|||
this.$router.push(btn.to); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
:root { |
|||
--columns: 3; |
|||
--button-size: calc(100vw / var(--columns) - 20px); |
|||
} |
|||
|
|||
/* 头部栏 */ |
|||
.header-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 8px 16px; |
|||
background: #17B3A3; |
|||
color: white; |
|||
height: 40px; |
|||
min-height: 40px; |
|||
max-height: 40px; |
|||
} |
|||
|
|||
.header-left { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
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; |
|||
} |
|||
|
|||
.menu-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 15px; |
|||
padding: 20px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
width: 100%; |
|||
} |
|||
|
|||
.menu-item { |
|||
background: white; |
|||
border-radius: 12px; |
|||
padding: 12px 6px; |
|||
text-align: center; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|||
transition: transform 0.2s; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.menu-item:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.menu-item.disabled { |
|||
opacity: 0.6; |
|||
position: relative; |
|||
} |
|||
|
|||
.menu-item.disabled::after { |
|||
content: '开发中'; |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
background: #ff9500; |
|||
color: white; |
|||
font-size: 8px; |
|||
padding: 2px 4px; |
|||
border-radius: 8px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.menu-icon { |
|||
width: 38px; |
|||
height: 38px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 0 auto 6px; |
|||
color: white; |
|||
} |
|||
|
|||
.menu-icon.direct { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.request { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.move { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.cancel { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-text { |
|||
font-size: 10px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
margin-top: 2px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,440 @@ |
|||
<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 returnList" |
|||
:key="index" |
|||
class="return-card" |
|||
@click="goToReturnPage(item)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label">{{ item.type === 'workOrder' ? '工单号' : '退料申请单号' }}</span> |
|||
<span class="title-value">{{ item.orderNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">{{ item.type === 'workOrder' ? '产品编码' : '关联工单' }}</div> |
|||
<div class="detail-value">{{ item.relatedNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">退料物料</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.returnedMaterials }}</span><span class="total">{{ item.totalMaterials }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">退料数量</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.returnedQty }}</span><span class="total">{{ item.totalQty }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="returnList.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 { getWorkOrderMaterials, getReturnRequestMaterials } from '@/api/production/production-return' |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchCode: '', |
|||
returnList: [], |
|||
loading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : ''; |
|||
}, |
|||
// 处理搜索 |
|||
handleSearch() { |
|||
if (this.searchCode.trim()) { |
|||
this.searchReturnList(this.searchCode.trim()); |
|||
} else { |
|||
this.loadReturnList(); |
|||
} |
|||
}, |
|||
|
|||
// 加载生产退料单列表 |
|||
loadReturnList() { |
|||
this.loading = true; |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
status: '待退料', |
|||
} |
|||
console.log('params', params); |
|||
|
|||
// 模拟获取退料数据 |
|||
this.simulateReturnList(params).then((data) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
this.returnList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取数据失败'); |
|||
} |
|||
}).catch(() => { |
|||
this.loading = false; |
|||
this.$message.error('获取数据失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 搜索特定退料单 |
|||
searchReturnList(searchCode) { |
|||
this.loading = true; |
|||
const params = { |
|||
orderNo: searchCode, |
|||
site: this.$store.state.user.site, |
|||
status: '待退料' |
|||
}; |
|||
|
|||
this.simulateReturnList(params).then((data) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
if (data.list.length === 0) { |
|||
this.$message.warning('未找到匹配的退料订单'); |
|||
} |
|||
this.returnList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败'); |
|||
} |
|||
}).catch(() => { |
|||
this.loading = false; |
|||
this.$message.error('查询失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 模拟退料列表API |
|||
simulateReturnList(params) { |
|||
return new Promise((resolve) => { |
|||
setTimeout(() => { |
|||
const mockData = [ |
|||
{ |
|||
orderNo: 'WO202401001', |
|||
type: 'workOrder', |
|||
relatedNo: 'PROD001', |
|||
returnedMaterials: 2, |
|||
totalMaterials: 5, |
|||
returnedQty: 150, |
|||
totalQty: 500, |
|||
status: '待退料' |
|||
}, |
|||
{ |
|||
orderNo: 'RT202401001', |
|||
type: 'returnRequest', |
|||
relatedNo: 'WO202401002', |
|||
returnedMaterials: 0, |
|||
totalMaterials: 3, |
|||
returnedQty: 0, |
|||
totalQty: 200, |
|||
status: '待退料' |
|||
}, |
|||
{ |
|||
orderNo: 'WO202401003', |
|||
type: 'workOrder', |
|||
relatedNo: 'PROD003', |
|||
returnedMaterials: 1, |
|||
totalMaterials: 4, |
|||
returnedQty: 80, |
|||
totalQty: 300, |
|||
status: '待退料' |
|||
} |
|||
]; |
|||
|
|||
// 如果有搜索条件，过滤数据 |
|||
let filteredData = mockData; |
|||
if (params.orderNo) { |
|||
filteredData = mockData.filter(item => |
|||
item.orderNo.includes(params.orderNo) || |
|||
item.relatedNo.includes(params.orderNo) |
|||
); |
|||
} |
|||
|
|||
resolve({ |
|||
code: 0, |
|||
list: filteredData, |
|||
msg: '成功' |
|||
}); |
|||
}, 500); |
|||
}); |
|||
}, |
|||
|
|||
// 跳转到退料页面 |
|||
goToReturnPage(item) { |
|||
this.$router.push({ |
|||
name: 'productionReturnPickingDetail', |
|||
params: { |
|||
orderNo: item.orderNo, |
|||
orderType: item.type |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 聚焦搜索框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.searchInput) { |
|||
this.$refs.searchInput.focus(); |
|||
} |
|||
}); |
|||
|
|||
// 加载数据 |
|||
this.loadReturnList(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.content-area { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 12px 16px; |
|||
} |
|||
|
|||
/* 退料卡片 */ |
|||
.return-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-left: 4px solid #17B3A3; |
|||
} |
|||
|
|||
.return-card:hover { |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.return-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; |
|||
} |
|||
|
|||
/* 卡片详情 */ |
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.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-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.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; |
|||
} |
|||
|
|||
.return-card { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
} |
|||
</style> |
|||
1128
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
@ -0,0 +1,165 @@ |
|||
<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="menu-grid"> |
|||
<div |
|||
class="menu-item" |
|||
v-for="(btn, index) in buttons" |
|||
:key="index" |
|||
:class="{ 'disabled': btn.disabled }" |
|||
@click="handleButtonClick(btn)" |
|||
> |
|||
<div class="menu-icon" :class="btn.iconClass"> |
|||
<van-icon :name="btn.icon" size="24" /> |
|||
</div> |
|||
<div class="menu-text">{{ btn.label }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
buttons: [ |
|||
{ icon: 'scan', label: '直接退库', iconClass: 'purchase', to: 'purchaseReturnPicking', disabled: true }, |
|||
{ icon: 'records', label: '申请单退库', iconClass: 'qualified', to: 'purchaseReturnPicking', disabled: false }, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleButtonClick(btn) { |
|||
if (btn.disabled) { |
|||
this.$message.warning('正在开发中，敬请期待...'); |
|||
} else { |
|||
this.$router.push(btn.to); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
:root { |
|||
--columns: 3; |
|||
--button-size: calc(100vw / var(--columns) - 20px); |
|||
} |
|||
|
|||
/* 头部栏 */ |
|||
.header-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 8px 16px; |
|||
background: #17B3A3; |
|||
color: white; |
|||
height: 40px; |
|||
min-height: 40px; |
|||
max-height: 40px; |
|||
} |
|||
|
|||
.header-left { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
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; |
|||
} |
|||
|
|||
.menu-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 15px; |
|||
padding: 20px; |
|||
justify-content: center; /* 水平居中 */ |
|||
align-content: center; /* 垂直居中 */ |
|||
width: 100%; /* 确保占满容器宽度 */ |
|||
} |
|||
|
|||
.menu-item { |
|||
background: white; |
|||
border-radius: 12px; |
|||
padding: 12px 6px; |
|||
text-align: center; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|||
transition: transform 0.2s; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.menu-item:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.menu-item.disabled { |
|||
opacity: 0.6; |
|||
position: relative; |
|||
} |
|||
|
|||
.menu-item.disabled::after { |
|||
content: '开发中'; |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
background: #ff9500; |
|||
color: white; |
|||
font-size: 8px; |
|||
padding: 2px 4px; |
|||
border-radius: 8px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.menu-icon { |
|||
width: 38px; |
|||
height: 38px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 0 auto 6px; |
|||
color: white; |
|||
} |
|||
|
|||
.menu-icon.purchase { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.inspection { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-icon.qualified { |
|||
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
|||
} |
|||
|
|||
.menu-text { |
|||
font-size: 10px; |
|||
color: #333; |
|||
font-weight: bold; /* 加粗字体 */ |
|||
white-space: nowrap; /* 防止文字换行 */ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
margin-top: 2px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,387 @@ |
|||
<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 returnList" |
|||
:key="index" |
|||
class="return-card" |
|||
@click="goToReturnPage(item)" |
|||
> |
|||
<div class="card-title"> |
|||
<span class="title-label">退库单号</span> |
|||
<span class="title-value">{{ item.returnNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">关联单号</div> |
|||
<div class="detail-value">{{ item.purchaseOrderNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">标签张数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.returnedLabels }}</span><span class="total">{{ item.totalLabels }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">物料总数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ item.returnedQty }}</span><span class="total">{{ item.totalQty }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="returnList.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 { |
|||
getPurchaseReturnNotifyByNo, |
|||
getPurchaseReturnNotifyListByNo, |
|||
} from '@/api/purchase/purchase-return' |
|||
import { getCurrentWarehouse } from '@/utils' |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchCode: '', |
|||
returnList: [], |
|||
loading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
return date ? moment(date).format('YYYY-MM-DD') : ''; |
|||
}, |
|||
// 处理搜索 |
|||
handleSearch() { |
|||
if (this.searchCode.trim()) { |
|||
this.searchReturnList(this.searchCode.trim()); |
|||
} else { |
|||
this.loadReturnList(); |
|||
} |
|||
}, |
|||
|
|||
// 加载采购退库单列表 |
|||
loadReturnList() { |
|||
this.loading = true; |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
status: '待退库', |
|||
} |
|||
console.log('params', params); |
|||
|
|||
getPurchaseReturnNotifyListByNo(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
this.returnList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取数据失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
console.error('获取采购退库单列表失败:', error); |
|||
this.$message.error('获取数据失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 搜索特定退库单 |
|||
searchReturnList(searchCode) { |
|||
this.loading = true; |
|||
const params = { |
|||
returnNo: searchCode, |
|||
site: this.$store.state.user.site, |
|||
status: 'RETURN' |
|||
}; |
|||
|
|||
getPurchaseReturnNotifyListByNo(params).then(({ data }) => { |
|||
this.loading = false; |
|||
if (data && data.code === 0) { |
|||
if (data.list.length === 0) { |
|||
this.$message.warning('未找到匹配的退库单'); |
|||
} |
|||
this.returnList = data.list || []; |
|||
} else { |
|||
this.$message.error(data.msg || '查询失败'); |
|||
} |
|||
}).catch(error => { |
|||
this.loading = false; |
|||
this.$message.error('查询失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 跳转到退库页面 |
|||
goToReturnPage(item) { |
|||
this.$router.push({ |
|||
name: 'purchaseReturnPickingDetail', |
|||
params: { |
|||
returnNo: item.returnNo, |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 聚焦搜索框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.searchInput) { |
|||
this.$refs.searchInput.focus(); |
|||
} |
|||
}); |
|||
|
|||
// 加载数据 |
|||
this.loadReturnList(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.content-area { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 12px 16px; |
|||
} |
|||
|
|||
/* 退库卡片 */ |
|||
.return-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; |
|||
} |
|||
|
|||
.return-card:hover { |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.return-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; |
|||
} |
|||
|
|||
/* 卡片详情 */ |
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.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-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.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; |
|||
} |
|||
|
|||
.return-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,982 @@ |
|||
<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="material-info-card" v-if="returnInfo.returnNo"> |
|||
<div class="card-title"> |
|||
<span class="title-label">退库单号</span> |
|||
<span class="title-value">{{ returnInfo.returnNo }}</span> |
|||
</div> |
|||
|
|||
<div class="card-details"> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">关联单号</div> |
|||
<div class="detail-value">{{ returnInfo.relatedNo }}</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">标签张数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ returnInfo.returnedLabels }}</span><span class="total">{{ returnInfo.totalLabels }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<div class="detail-label">物料总数</div> |
|||
<div class="detail-value"> |
|||
<span class="qualified">{{ returnInfo.returnedQty }}</span><span class="total">{{ returnInfo.totalQty }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 退库信息确认标题 --> |
|||
<div class="section-title"> |
|||
<div class="title-left"> |
|||
<i class="el-icon-circle-check"></i> |
|||
<span>退库信息确认</span> |
|||
</div> |
|||
<div class="title-right"> |
|||
<span class="material-list-link" @click="showMaterialListDialog">物料清单</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-part">物料编码</div> |
|||
<div class="col-unit">单位</div> |
|||
<div class="col-qty">标签数量</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-for="(label, index) in labelList" |
|||
:key="label.id" |
|||
class="list-item" |
|||
> |
|||
<div class="col-no">{{ labelList.length - index }}</div> |
|||
<div class="col-label">{{ label.labelCode }}</div> |
|||
<div class="col-part">{{ label.partNo }}</div> |
|||
<div class="col-unit">{{ label.unit || '个' }}</div> |
|||
<div class="col-qty">{{ label.quantity }}</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="labelList.length === 0" class="empty-labels"> |
|||
<p>暂无扫描标签</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部操作按钮 --> |
|||
<div class="bottom-actions"> |
|||
<button class="action-btn secondary" @click="confirmReturn"> |
|||
确定 |
|||
</button> |
|||
<button class="action-btn secondary" style="margin-left: 10px;" @click="printLabels"> |
|||
打印 |
|||
</button> |
|||
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelReturn"> |
|||
取消 |
|||
</button> |
|||
</div> |
|||
|
|||
<!-- 物料清单弹窗 --> |
|||
<div v-if="showMaterialDialog" class="material-overlay"> |
|||
<div class="material-modal"> |
|||
<div class="modal-header"> |
|||
<span class="modal-title">物料清单</span> |
|||
<i class="el-icon-close close-btn" @click="closeMaterialDialog"></i> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<!-- 加载状态 --> |
|||
<div v-if="materialListLoading" class="loading-container"> |
|||
<i class="el-icon-loading"></i> |
|||
<span>加载中...</span> |
|||
</div> |
|||
|
|||
<!-- 物料表格 --> |
|||
<div v-else-if="materialList.length > 0" class="material-table"> |
|||
<div class="table-header"> |
|||
<div class="col-no">NO.</div> |
|||
<div class="col-material-code">物料编码</div> |
|||
<div class="col-required-qty">需退数量</div> |
|||
<div class="col-returned-qty">已退数量</div> |
|||
</div> |
|||
|
|||
<div class="table-body"> |
|||
<div |
|||
v-for="(item, index) in materialList" |
|||
:key="index" |
|||
class="table-row" |
|||
> |
|||
<div class="col-no">{{ index + 1 }}</div> |
|||
<div class="col-material-code">{{ item.materialCode || item.partNo }}</div> |
|||
<div class="col-required-qty">{{ item.requiredQty || 0 }}</div> |
|||
<div class="col-returned-qty">{{ item.returnedQty || 0 }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空数据状态 --> |
|||
<div v-else class="empty-material"> |
|||
<i class="el-icon-document"></i> |
|||
<p>暂无物料数据</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modal-footer"> |
|||
<button class="btn-close" @click="closeMaterialDialog">关闭</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { scanMaterialLabel, getReturnMaterials, confirmPurchaseReturn } from '@/api/purchase/purchase-return'; |
|||
import moment from 'moment'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
scanCode: '', |
|||
returnInfo: {}, |
|||
labelList: [], |
|||
returnNo: '', |
|||
buNo: '', |
|||
showMaterialDialog: false, |
|||
materialList: [], |
|||
materialListLoading: false, |
|||
isRemoveMode: false // 默认为添加模式 |
|||
}; |
|||
}, |
|||
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 = ''; |
|||
}, |
|||
|
|||
// 验证标签并添加到列表 |
|||
validateAndAddLabel(labelCode) { |
|||
const params = { |
|||
labelCode: labelCode, |
|||
returnNo: this.returnNo, |
|||
site: this.$store.state.user.site, |
|||
}; |
|||
|
|||
scanMaterialLabel(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
// 检查是否已经扫描过 |
|||
const exists = this.labelList.find(item => item.labelCode === labelCode); |
|||
if (exists) { |
|||
this.$message.warning('该标签已扫描，请勿重复扫描'); |
|||
return; |
|||
} |
|||
|
|||
// 添加到列表 |
|||
this.labelList.push({ |
|||
id: Date.now(), |
|||
labelCode: labelCode, |
|||
partNo: data.labelInfo.partNo, |
|||
quantity: data.labelInfo.quantity, |
|||
unit: data.labelInfo.unit, |
|||
batchNo: data.labelInfo.batchNo |
|||
}); |
|||
|
|||
this.$message.success('操作成功'); |
|||
} else { |
|||
this.$message.error(data.msg || '该标签与退库单不符，请检查'); |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error('操作失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 通过条码移除标签 |
|||
removeLabelByCode(labelCode) { |
|||
const index = this.labelList.findIndex(item => item.labelCode === labelCode); |
|||
if (index !== -1) { |
|||
this.labelList.splice(index, 1); |
|||
this.$message.success('操作成功'); |
|||
} else { |
|||
this.$message.warning('未找到该标签'); |
|||
} |
|||
}, |
|||
|
|||
// 确认退库 |
|||
confirmReturn() { |
|||
if (this.labelList.length === 0) { |
|||
this.$message.warning('请先扫描标签'); |
|||
return; |
|||
} |
|||
|
|||
const params = { |
|||
site: this.returnInfo.site, |
|||
returnNo: this.returnNo, |
|||
labels: this.labelList.map(label => ({ |
|||
labelCode: label.labelCode, |
|||
quantity: label.quantity, |
|||
batchNo: label.batchNo, |
|||
partNo: label.partNo |
|||
})) |
|||
}; |
|||
|
|||
confirmPurchaseReturn(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('操作成功'); |
|||
this.$router.back(); |
|||
} else { |
|||
this.$message.error(data.msg || '操作失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('退库确认失败:', error); |
|||
this.$message.error('操作失败'); |
|||
}); |
|||
}, |
|||
|
|||
// 打印标签 |
|||
printLabels() { |
|||
if (this.labelList.length === 0) { |
|||
this.$message.warning('暂无标签可打印'); |
|||
return; |
|||
} |
|||
|
|||
this.$message.warning('打印功能开发中...'); |
|||
}, |
|||
|
|||
// 取消退库 |
|||
cancelReturn() { |
|||
if (this.labelList.length > 0) { |
|||
this.$confirm('取消后将清空已扫描的标签，确定取消吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '继续操作', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$router.back(); |
|||
}).catch(() => { |
|||
// 用户选择继续操作 |
|||
}); |
|||
} else { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
// 显示物料清单弹窗 |
|||
showMaterialListDialog() { |
|||
this.showMaterialDialog = true; |
|||
this.loadMaterialList(); |
|||
}, |
|||
|
|||
// 加载物料清单 |
|||
loadMaterialList() { |
|||
console.log('加载物料清单', this.returnInfo, this.returnNo); |
|||
|
|||
if (!this.$store.state.user.site || !this.returnNo) { |
|||
this.$message.error('缺少必要参数，无法获取物料清单'); |
|||
return; |
|||
} |
|||
|
|||
this.materialListLoading = true; |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
returnNo: this.returnNo |
|||
}; |
|||
|
|||
getReturnMaterials(params).then(({ data }) => { |
|||
this.materialListLoading = false; |
|||
if (data && data.code === 0) { |
|||
this.materialList = data.materials || []; |
|||
} else { |
|||
this.$message.error(data.msg || '获取物料清单失败'); |
|||
this.materialList = []; |
|||
} |
|||
}).catch(error => { |
|||
this.materialListLoading = false; |
|||
this.$message.error('获取物料清单失败'); |
|||
this.materialList = []; |
|||
}); |
|||
}, |
|||
|
|||
// 关闭物料清单弹窗 |
|||
closeMaterialDialog() { |
|||
this.showMaterialDialog = false; |
|||
}, |
|||
|
|||
// 加载退库单详情 |
|||
loadReturnDetails() { |
|||
const params = { |
|||
returnNo: this.returnNo, |
|||
site: this.$store.state.user.site, |
|||
}; |
|||
console.log('加载退库单详情参数:', params); |
|||
|
|||
/* getReturnDetails(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.returnInfo = data.data; |
|||
} else { |
|||
this.$message.error(data.msg || '获取退库单详情失败'); |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取退库单详情失败:', error); |
|||
this.$message.error('获取退库单详情失败'); |
|||
}); */ |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 获取路由参数 |
|||
this.returnNo = this.$route.params.returnNo; |
|||
console.log("退库单号:", this.returnNo); |
|||
|
|||
if (!this.returnNo) { |
|||
this.$message.error('参数错误'); |
|||
this.$router.back(); |
|||
return; |
|||
} |
|||
|
|||
// 聚焦扫描框 |
|||
this.$nextTick(() => { |
|||
if (this.$refs.scanInput) { |
|||
this.$refs.scanInput.focus(); |
|||
} |
|||
}); |
|||
|
|||
// 加载退库单详情 |
|||
this.loadReturnDetails(); |
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
|
|||
/* 调整 switch 尺寸以便容纳文字 */ |
|||
.custom-switch ::v-deep .el-switch__core { |
|||
width: 60px; |
|||
height: 28px; |
|||
} |
|||
|
|||
/* 物料信息卡片 */ |
|||
.material-info-card { |
|||
background: white; |
|||
margin: 4px 16px; |
|||
padding: 6px 20px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.card-title { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.title-label { |
|||
font-size: 11px; |
|||
color: #999; |
|||
display: block; |
|||
margin-bottom: 6px; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.title-value { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
line-height: 1.2; |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.card-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
min-width: 60px; |
|||
max-width: 60px; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 11px; |
|||
color: #999; |
|||
margin-bottom: 6px; |
|||
font-weight: normal; |
|||
line-height: 1.2; |
|||
margin-left: -12px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 13px; |
|||
color: #333; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
margin-left: -12px; |
|||
} |
|||
|
|||
.detail-value .qualified { |
|||
color: #17B3A3; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total { |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-value .total::before { |
|||
content: '/'; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 区域标题 */ |
|||
.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; |
|||
} |
|||
|
|||
.title-left { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.title-left i { |
|||
color: #17B3A3; |
|||
font-size: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.title-left span { |
|||
color: #17B3A3; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.title-right { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.material-list-link { |
|||
color: #17B3A3; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
text-decoration: underline; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
.material-list-link:hover { |
|||
color: #0d8f7f; |
|||
} |
|||
|
|||
/* 标签列表 */ |
|||
.label-list { |
|||
background: white; |
|||
margin: 0 16px 12px; |
|||
border-radius: 0 0 8px 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-part { |
|||
flex: 2; |
|||
text-align: center; |
|||
} |
|||
|
|||
.col-unit { |
|||
width: 40px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.col-qty { |
|||
width: 60px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-labels { |
|||
padding: 40px 20px; |
|||
text-align: center; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-labels p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 底部操作按钮 */ |
|||
.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); |
|||
} |
|||
|
|||
/* 物料清单弹窗样式 */ |
|||
.material-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 9999; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.material-modal { |
|||
background: white; |
|||
border-radius: 12px; |
|||
width: 100%; |
|||
max-width: 800px; |
|||
max-height: 80vh; |
|||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.material-modal .modal-header { |
|||
background: #17B3A3; |
|||
color: white; |
|||
padding: 5px 16px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
min-height: 28px; |
|||
} |
|||
|
|||
.close-btn { |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
color: white; |
|||
transition: color 0.2s ease; |
|||
padding: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.close-btn:hover { |
|||
color: #e0e0e0; |
|||
} |
|||
|
|||
.material-modal .modal-title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
margin: 0; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.material-modal .modal-body { |
|||
flex: 1; |
|||
overflow: auto; |
|||
padding: 0; |
|||
} |
|||
|
|||
.material-table { |
|||
width: 100%; |
|||
} |
|||
|
|||
.table-header { |
|||
display: flex; |
|||
background: #f8f9fa; |
|||
padding: 10px 6px; |
|||
border-bottom: 2px solid #17B3A3; |
|||
font-size: 12px; |
|||
color: #333; |
|||
font-weight: 600; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.table-body { |
|||
max-height: 400px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.table-row { |
|||
display: flex; |
|||
padding: 10px 6px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
font-size: 12px; |
|||
color: #333; |
|||
transition: background-color 0.2s ease; |
|||
} |
|||
|
|||
.table-row:hover { |
|||
background-color: #f8f9fa; |
|||
} |
|||
|
|||
.table-row:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.material-table .col-no { |
|||
width: 25px; |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-table .col-material-code { |
|||
flex: 1.8; |
|||
text-align: center; |
|||
min-width: 100px; |
|||
font-size: 12px; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.material-table .col-required-qty { |
|||
flex: 0.8; |
|||
text-align: center; |
|||
min-width: 65px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-table .col-returned-qty { |
|||
flex: 0.8; |
|||
text-align: center; |
|||
min-width: 65px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.material-modal .modal-footer { |
|||
padding: 15px 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.btn-close { |
|||
padding: 10px 20px; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.2s; |
|||
border: 1px solid #17B3A3; |
|||
background: white; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
.btn-close:hover { |
|||
background: #17B3A3; |
|||
color: white; |
|||
} |
|||
|
|||
/* 加载状态样式 */ |
|||
.loading-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #666; |
|||
} |
|||
|
|||
.loading-container i { |
|||
font-size: 24px; |
|||
margin-bottom: 12px; |
|||
color: #17B3A3; |
|||
} |
|||
|
|||
.loading-container span { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 空数据状态样式 */ |
|||
.empty-material { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60px 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
.empty-material i { |
|||
font-size: 48px; |
|||
margin-bottom: 16px; |
|||
color: #ddd; |
|||
} |
|||
|
|||
.empty-material p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 360px) { |
|||
.header-bar { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.search-container { |
|||
padding: 8px 12px; |
|||
} |
|||
|
|||
.material-info-card { |
|||
margin: 4px 12px; |
|||
padding: 6px 16px; |
|||
} |
|||
|
|||
.section-title { |
|||
margin: 0 12px; |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.label-list { |
|||
margin: 0 12px 8px; |
|||
} |
|||
|
|||
.card-details { |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
} |
|||
|
|||
.detail-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 6px; |
|||
min-width: 50px; |
|||
} |
|||
|
|||
.list-header, .list-item { |
|||
font-size: 11px; |
|||
} |
|||
|
|||
.col-label, .col-part { |
|||
flex: 1.5; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue