<template>
|
<view class="detail-page">
|
<PageHeader title="出库详情" @back="goBack" />
|
<view v-if="loading" class="loading-wrap">
|
<text class="loading-text">加载中...</text>
|
</view>
|
<view v-else-if="detail" class="detail-wrap">
|
<!-- 基础信息 -->
|
<view class="section-card">
|
<view class="section-head">
|
<view class="section-dot"></view>
|
<text class="section-title">基础信息</text>
|
</view>
|
<view class="section-body">
|
<view class="detail-row">
|
<text class="label">序号</text>
|
<text class="value">{{ detail.index ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">出库批次</text>
|
<text class="value value-strong">{{ detail.outboundBatches || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">出库时间</text>
|
<text class="value">{{ detail.createTime || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">产品大类</text>
|
<text class="value value-strong">{{ detail.productName || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">规格型号</text>
|
<text class="value">{{ detail.model || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">单位</text>
|
<text class="value">{{ detail.unit || '-' }}</text>
|
</view>
|
<view class="detail-row detail-row-highlight">
|
<text class="label">出库数量</text>
|
<text class="value value-num">{{ detail.stockOutNum ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">出库人</text>
|
<text class="value">{{ detail.createBy || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">来源</text>
|
<text class="value">{{ getRecordType(detail.recordType) || '-' }}</text>
|
</view>
|
</view>
|
</view>
|
<!-- 出库信息 -->
|
<view class="section-card">
|
<view class="section-head">
|
<view class="section-dot"></view>
|
<text class="section-title">出库信息</text>
|
</view>
|
<view class="section-body">
|
<view class="detail-row">
|
<text class="label">车牌号</text>
|
<text class="value">{{ detail.licensePlateNo || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">毛重(吨)</text>
|
<text class="value">{{ detail.grossWeight ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">皮重(吨)</text>
|
<text class="value">{{ detail.tareWeight ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">净重(吨)</text>
|
<text class="value">{{ detail.netWeight ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">过磅日期</text>
|
<text class="value">{{ detail.weighingDate || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">过磅员</text>
|
<text class="value">{{ detail.weighingOperator || '-' }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-else class="empty">
|
<text class="empty-text">暂无详情数据</text>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { onLoad } from '@dcloudio/uni-app'
|
import PageHeader from '@/components/PageHeader.vue'
|
import {
|
findAllQualifiedStockOutRecordTypeOptions,
|
findAllUnQualifiedStockOutRecordTypeOptions
|
} from '@/api/basicData/enum.js'
|
|
const detail = ref(null)
|
const loading = ref(true)
|
const stockRecordTypeOptions = ref([])
|
|
function normalizeDetail(raw) {
|
if (!raw) return null
|
const d = typeof raw === 'object' ? raw : {}
|
return {
|
index: d.index ?? 1,
|
outboundBatches: d.outboundBatches,
|
createTime: d.createTime,
|
productName: d.productName,
|
model: d.model,
|
unit: d.unit,
|
stockOutNum: d.stockOutNum,
|
createBy: d.createBy,
|
recordType: d.recordType,
|
licensePlateNo: d.licensePlateNo,
|
grossWeight: d.grossWeight,
|
tareWeight: d.tareWeight,
|
netWeight: d.netWeight,
|
weighingDate: d.weighingDate,
|
weighingOperator: d.weighingOperator
|
}
|
}
|
|
function getRecordType(recordType) {
|
if (recordType == null || recordType === '') return ''
|
return stockRecordTypeOptions.value.find(item => item.value === recordType)?.label || ''
|
}
|
|
function fetchRecordTypeOptions(type) {
|
const api = type === '1'
|
? findAllUnQualifiedStockOutRecordTypeOptions
|
: findAllQualifiedStockOutRecordTypeOptions
|
api()
|
.then(res => {
|
const data = res.data != null ? res.data : res
|
stockRecordTypeOptions.value = Array.isArray(data) ? data : []
|
})
|
.catch(() => {
|
stockRecordTypeOptions.value = []
|
})
|
}
|
|
onLoad(() => {
|
const cached = uni.getStorageSync('dispatchDetailItem')
|
if (cached) {
|
try {
|
const payload = typeof cached === 'string' ? JSON.parse(cached) : cached
|
const item = payload && payload.item != null ? payload.item : payload
|
const type = payload && payload.type != null ? payload.type : '0'
|
detail.value = normalizeDetail({ ...item, index: 1 })
|
fetchRecordTypeOptions(type)
|
uni.removeStorageSync('dispatchDetailItem')
|
} catch (e) {
|
uni.removeStorageSync('dispatchDetailItem')
|
}
|
}
|
loading.value = false
|
})
|
|
const goBack = () => uni.navigateBack()
|
</script>
|
|
<style lang="scss" scoped>
|
.detail-page {
|
min-height: 100vh;
|
background: linear-gradient(180deg, #e8eef7 0%, #f2f5fa 100%);
|
padding-bottom: 48rpx;
|
}
|
.loading-wrap {
|
padding: 120rpx 48rpx;
|
text-align: center;
|
}
|
.loading-text {
|
color: #8c9aa8;
|
font-size: 28rpx;
|
}
|
.empty {
|
padding: 120rpx 48rpx;
|
text-align: center;
|
}
|
.empty-text {
|
color: #8c9aa8;
|
font-size: 28rpx;
|
}
|
.detail-wrap {
|
padding: 24rpx 24rpx 32rpx;
|
}
|
.section-card {
|
background: #fff;
|
border-radius: 24rpx;
|
overflow: hidden;
|
margin-bottom: 28rpx;
|
box-shadow: 0 8rpx 32rpx rgba(41, 121, 255, 0.06);
|
border: 1rpx solid rgba(41, 121, 255, 0.06);
|
}
|
.section-head {
|
display: flex;
|
align-items: center;
|
padding: 28rpx 32rpx;
|
background: linear-gradient(135deg, #f8fbff 0%, #f0f6ff 100%);
|
border-bottom: 1rpx solid #eef3fa;
|
}
|
.section-dot {
|
width: 8rpx;
|
height: 8rpx;
|
border-radius: 50%;
|
background: #2979ff;
|
margin-right: 16rpx;
|
}
|
.section-title {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: #1e3a5f;
|
letter-spacing: 0.5rpx;
|
}
|
.section-body {
|
padding: 8rpx 32rpx 24rpx;
|
}
|
.detail-row {
|
display: flex;
|
align-items: center;
|
min-height: 96rpx;
|
padding: 0 16rpx;
|
border-radius: 12rpx;
|
font-size: 28rpx;
|
margin-bottom: 4rpx;
|
}
|
.detail-row .label {
|
width: 200rpx;
|
flex-shrink: 0;
|
color: #6b7c93;
|
font-size: 26rpx;
|
}
|
.detail-row .value {
|
flex: 1;
|
color: #2c3e50;
|
text-align: right;
|
word-break: break-all;
|
font-size: 28rpx;
|
}
|
.detail-row .value-strong {
|
color: #1e3a5f;
|
font-weight: 500;
|
}
|
.detail-row .value-num {
|
color: #2979ff;
|
font-weight: 600;
|
font-size: 32rpx;
|
}
|
.detail-row-highlight {
|
background: linear-gradient(90deg, rgba(41, 121, 255, 0.06) 0%, transparent 100%);
|
margin: 12rpx -16rpx 4rpx;
|
padding: 20rpx 16rpx;
|
}
|
</style>
|
