<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>
|
