You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
8.5 KiB
Vue
289 lines
8.5 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<NavBar :title="'物料详情'" />
|
|
|
|
<view class="content-section" v-if="detail">
|
|
<view class="page-title-bar">
|
|
<view class="page-title-bar-line"></view>
|
|
<text class="page-title">物料基本信息</text>
|
|
</view>
|
|
<view class="detail-card">
|
|
<view class="info-row-top">
|
|
<view class="item-image-wrap">
|
|
<image v-if="detailImage" :src="detailImage" class="item-image" mode="aspectFill" />
|
|
<view v-else class="item-image-placeholder">📦</view>
|
|
</view>
|
|
<view class="item-info-col">
|
|
<view class="item-row"><text class="item-label">物料名称</text><text class="item-value">{{ textValue(detail.name) }}</text></view>
|
|
<view class="item-row"><text class="item-label">物料编码</text><text class="item-value">{{ textValue(detail.barCode) }}</text></view>
|
|
<view class="item-row"><text class="item-label">物料小类</text><text class="item-value">{{ textValue(detail.categoryName) }}</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="info-list">
|
|
<view class="info-row"><text class="info-label">仓库</text><text class="info-value">{{ textValue(warehouseName) }}</text></view>
|
|
<view class="info-row"><text class="info-label">库区</text><text class="info-value">{{ textValue(areaName) }}</text></view>
|
|
<view class="info-row"><text class="info-label">库存展示</text><text class="info-value highlight">{{ textValue(detail.stockDisplay) }}</text></view>
|
|
<view class="info-row"><text class="info-label">基本数量</text><text class="info-value highlight">{{ textValue(stockCount) }}{{ stockUnit !== '-' ? stockUnit : '' }}</text></view>
|
|
<view class="info-row"><text class="info-label">包装/换算规则</text><text class="info-value">{{ textValue(packagingRule) }}</text></view>
|
|
<view class="info-row"><text class="info-label">最近入库</text><text class="info-value">{{ formatDateTime(recentInTime) }}</text></view>
|
|
<view class="info-row"><text class="info-label">最近出库</text><text class="info-value">{{ formatDateTime(recentOutTime) }}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="loading" class="hint">加载中...</view>
|
|
<view v-else class="hint">加载失败</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import NavBar from '@/components/common/NavBar.vue'
|
|
import { getMaterialInventoryPage, getProductDetail } from '@/api/mes/sparepart'
|
|
|
|
const detail = ref(null)
|
|
const loading = ref(true)
|
|
const stockCount = ref(0)
|
|
const stockUnit = ref('-')
|
|
const packagingRule = ref('-')
|
|
const warehouseName = ref('-')
|
|
const areaName = ref('-')
|
|
const recentInTime = ref('')
|
|
const recentOutTime = ref('')
|
|
|
|
const detailImage = computed(() => {
|
|
const images = detail.value?.images
|
|
if (!images) return ''
|
|
if (Array.isArray(images) && images.length) return String(images[0])
|
|
return String(images).split(',')[0]?.trim() || ''
|
|
})
|
|
|
|
function textValue(v) {
|
|
if (v === 0) return '0'
|
|
if (v == null) return '-'
|
|
const s = String(v).trim()
|
|
return s || '-'
|
|
}
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) return '-'
|
|
const n = Number(value)
|
|
if (Number.isFinite(n) && n > 0) {
|
|
const d = new Date(n < 1e12 ? n * 1000 : n)
|
|
if (!Number.isNaN(d.getTime())) {
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
|
|
}
|
|
}
|
|
return String(value)
|
|
}
|
|
|
|
onLoad(async (options) => {
|
|
const id = options?.id
|
|
const productId = options?.productId
|
|
const whId = options?.warehouseId
|
|
const arId = options?.areaId
|
|
if (!id && !productId) {
|
|
loading.value = false
|
|
uni.showToast({ title: '缺少物料信息', icon: 'none' })
|
|
return
|
|
}
|
|
try {
|
|
// 优先从列表页传来的完整数据
|
|
const cached = getApp().globalData._materialInventoryDetail
|
|
if (cached && String(cached.productId) === String(id || productId)) {
|
|
detail.value = {
|
|
name: cached.productName,
|
|
barCode: cached.barCode,
|
|
categoryName: cached.categoryName,
|
|
standard: cached.standard,
|
|
...cached
|
|
}
|
|
stockCount.value = Number(cached.count ?? 0)
|
|
stockUnit.value = cached.unitName || '-'
|
|
detail.value.stockDisplay = cached.stockDisplay || String(cached.count || '')
|
|
packagingRule.value = cached.packagingRule || '-'
|
|
warehouseName.value = cached.warehouseName || '-'
|
|
areaName.value = cached.areaName || '-'
|
|
recentInTime.value = cached.recentInTime || ''
|
|
recentOutTime.value = cached.recentOutTime || ''
|
|
// 异步加载图片
|
|
if (!cached.images) {
|
|
getProductDetail(cached.productId).then(res => {
|
|
const pd = res?.data || res
|
|
if (pd?.images) detail.value = { ...detail.value, images: pd.images }
|
|
}).catch(() => {})
|
|
}
|
|
getApp().globalData._materialInventoryDetail = null
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
// 兜底：并行调 stock/page + product/get
|
|
const [pageRes, prodRes] = await Promise.all([
|
|
getMaterialInventoryPage({
|
|
pageNo: 1,
|
|
pageSize: 1,
|
|
productId: id || productId,
|
|
warehouseId: whId || undefined,
|
|
areaId: arId || undefined
|
|
}),
|
|
getProductDetail(id || productId)
|
|
])
|
|
const root = pageRes?.data || pageRes
|
|
const list = root?.list || root?.rows || root?.records || []
|
|
const item = list[0]
|
|
const pd = prodRes?.data || prodRes
|
|
if (item) {
|
|
detail.value = {
|
|
name: item.productName,
|
|
...item,
|
|
stockDisplay: item.stockDisplay || String(item.count || ''),
|
|
images: pd?.images || item.images
|
|
}
|
|
stockCount.value = Number(item.count ?? 0)
|
|
stockUnit.value = item.unitName || item.purchaseUnitName || '-'
|
|
packagingRule.value = item.packagingRule || '-'
|
|
warehouseName.value = item.warehouseName || '-'
|
|
areaName.value = item.areaName || '-'
|
|
recentInTime.value = item.recentInTime || ''
|
|
recentOutTime.value = item.recentOutTime || ''
|
|
} else {
|
|
detail.value = { name: '-', barCode: '-', categoryName: '-', standard: '-', stockDisplay: '-', images: pd?.images }
|
|
}
|
|
} catch (e) {
|
|
console.error('获取物料详情失败:', e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background: #f3f4f6;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.content-section {
|
|
padding: 24rpx 28rpx;
|
|
}
|
|
|
|
.page-title-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
padding: 0 0 20rpx;
|
|
}
|
|
.page-title-bar-line {
|
|
width: 6rpx;
|
|
height: 32rpx;
|
|
border-radius: 3rpx;
|
|
background: #2563eb;
|
|
flex-shrink: 0;
|
|
}
|
|
.page-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.detail-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 28rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.info-row-top {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #f3f4f6;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.item-image-wrap {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
background: #f8fafc;
|
|
border: 1rpx solid #f0f0f0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 24rpx;
|
|
}
|
|
.item-image { width: 100%; height: 100%; }
|
|
.item-image-placeholder { font-size: 48rpx; opacity: 0.2; }
|
|
|
|
.item-info-col {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
padding: 8rpx 0;
|
|
&:last-child { padding-bottom: 0; }
|
|
}
|
|
.item-label {
|
|
font-size: 28rpx;
|
|
color: #9ca3af;
|
|
flex-shrink: 0;
|
|
}
|
|
.item-value {
|
|
font-size: 28rpx;
|
|
color: #374151;
|
|
text-align: right;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
padding: 16rpx 0;
|
|
border-bottom: 1rpx solid #f3f4f6;
|
|
&:last-child { border-bottom: 0; }
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
color: #9ca3af;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #374151;
|
|
word-break: break-all;
|
|
|
|
&.highlight {
|
|
color: #1f4b79;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
text-align: center;
|
|
padding: 160rpx 0;
|
|
font-size: 28rpx;
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|