<template>
|
<view class="material-inspection-detail">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="出厂检验详情"
|
@back="goBack" />
|
<!-- 详情内容 -->
|
<view class="detail-section"
|
v-if="detailData">
|
<view class="detail-card">
|
<view class="card-header">
|
<view class="header-icon">
|
<up-icon name="file-text"
|
size="20"
|
color="#ffffff"></up-icon>
|
</view>
|
<text class="header-title">{{ detailData.productName || '-' }}</text>
|
<view class="status-tags">
|
<u-tag :type="getTagType(detailData.checkResult)"
|
size="small"
|
class="status-tag">
|
{{ detailData.checkResult || '-' }}
|
</u-tag>
|
<u-tag :type="getStateTagType(detailData.inspectState)"
|
size="small"
|
class="status-tag">
|
{{ detailData.inspectState ? '已提交' : '未提交' }}
|
</u-tag>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
<view class="detail-content">
|
<view class="detail-row">
|
<text class="detail-label">检测日期</text>
|
<text class="detail-value">{{ formatDateTime(detailData.checkTime) || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">生产工单号</text>
|
<text class="detail-value">{{ detailData.workOrderNo || '-' }}</text>
|
</view>
|
<!-- <view class="detail-row">
|
<text class="detail-label">工序</text>
|
<text class="detail-value">{{ detailData.process || '-' }}</text>
|
</view> -->
|
<view class="detail-row">
|
<text class="detail-label">检验员</text>
|
<text class="detail-value">{{ detailData.checkName || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">产品名称</text>
|
<text class="detail-value">{{ detailData.productName || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">规格型号</text>
|
<text class="detail-value">{{ detailData.model || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">单位</text>
|
<text class="detail-value">{{ detailData.unit || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">数量</text>
|
<text class="detail-value">{{ detailData.quantity || 0 }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">检测单位</text>
|
<text class="detail-value">{{ detailData.checkCompany || '-' }}</text>
|
</view>
|
<!-- <view class="detail-row">
|
<text class="detail-label">检验标准</text>
|
<text class="detail-value">{{ detailData.testStandardName || '-' }}</text>
|
</view> -->
|
</view>
|
</view>
|
<!-- 检验项目 -->
|
<view class="detail-card"
|
v-if="inspectionItems.length > 0">
|
<view class="card-header">
|
<view class="header-icon secondary">
|
<up-icon name="list"
|
size="20"
|
color="#ffffff"></up-icon>
|
</view>
|
<text class="header-title">检验项目</text>
|
</view>
|
<up-divider></up-divider>
|
<view class="inspection-items">
|
<view v-for="(item, index) in inspectionItems"
|
:key="index"
|
class="inspection-item">
|
<text class="item-name">{{ item.parameterItem || '检验项目' }}</text>
|
<view class="item-details">
|
<view class="item-detail-row">
|
<text class="item-detail-label">单位:</text>
|
<text class="item-detail-value">{{ item.unit || '-' }}</text>
|
</view>
|
<view class="item-detail-row">
|
<text class="item-detail-label">标准值:</text>
|
<text class="item-detail-value">{{ item.standardValue || '-' }}</text>
|
</view>
|
<view class="item-detail-row">
|
<text class="item-detail-label">内控值:</text>
|
<text class="item-detail-value">{{ item.controlValue || '-' }}</text>
|
</view>
|
<view class="item-detail-row">
|
<text class="item-detail-label">检验值:</text>
|
<text class="item-detail-value result"
|
:class="getResultClass(item.testValue, item.standardValue)">
|
{{ item.testValue || '-' }}
|
</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 操作按钮 -->
|
<!-- <view class="action-buttons">
|
<u-button type="primary"
|
class="action-btn"
|
@click="downloadReport">
|
下载报告
|
</u-button>
|
</view> -->
|
</view>
|
<view v-else
|
class="no-data">
|
<up-empty mode="data"
|
text="暂无检验详情"></up-empty>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import dayjs from "dayjs";
|
import { qualityInspectParamInfo } from "@/api/qualityManagement/materialInspection.js";
|
|
// 显示提示信息
|
const showToast = message => {
|
uni.showToast({
|
title: message,
|
icon: "none",
|
});
|
};
|
|
// 详情数据
|
const detailData = ref(null);
|
// 检验项目
|
const inspectionItems = ref([]);
|
|
// 返回上一页
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
// 格式化日期时间
|
const formatDateTime = date => {
|
if (!date) return "";
|
return dayjs(date).format("YYYY-MM-DD");
|
};
|
|
// 获取标签类型
|
const getTagType = result => {
|
switch (result) {
|
case "合格":
|
return "success";
|
case "不合格":
|
return "error";
|
default:
|
return "info";
|
}
|
};
|
|
// 获取状态标签类型
|
const getStateTagType = state => {
|
return state ? "success" : "warning";
|
};
|
|
// 获取结果样式
|
const getResultClass = (testValue, standardValue) => {
|
// 简单的结果判断逻辑，实际项目中可能需要更复杂的判断
|
if (testValue === "合格") {
|
return "result-passed";
|
} else if (testValue === "不合格") {
|
return "result-rejected";
|
}
|
return "";
|
};
|
|
// 下载报告
|
const downloadReport = () => {
|
uni.showToast({
|
title: "报告下载中...",
|
icon: "loading",
|
});
|
|
// 模拟下载
|
setTimeout(() => {
|
uni.showToast({
|
title: "报告下载成功",
|
icon: "success",
|
});
|
}, 1500);
|
};
|
|
// 获取页面ID
|
const getPageId = () => {
|
const pages = getCurrentPages();
|
const currentPage = pages[pages.length - 1];
|
return currentPage.options.id;
|
};
|
|
// 获取详情数据
|
const getDetail = () => {
|
const id = getPageId();
|
if (!id) {
|
showToast("参数错误");
|
return;
|
}
|
|
// 从本地存储获取详情数据
|
try {
|
const detailDataFromStorage = uni.getStorageSync("finalInspectionEditData");
|
if (detailDataFromStorage) {
|
detailData.value = detailDataFromStorage;
|
console.log(detailData.value, "detailData.value");
|
// 使用qualityInspectParamInfo获取检验项目
|
qualityInspectParamInfo(id)
|
.then(res => {
|
if (res.data && res.data.length > 0) {
|
inspectionItems.value = res.data;
|
} else if (
|
detailDataFromStorage.qualityInspectParams &&
|
detailDataFromStorage.qualityInspectParams.length > 0
|
) {
|
// 如果接口没有返回数据，使用本地存储中的数据
|
inspectionItems.value = detailDataFromStorage.qualityInspectParams;
|
}
|
})
|
.catch(error => {
|
console.error("获取检验项目失败:", error);
|
// 接口调用失败时，使用本地存储中的数据或模拟数据
|
if (
|
detailDataFromStorage.qualityInspectParams &&
|
detailDataFromStorage.qualityInspectParams.length > 0
|
) {
|
inspectionItems.value = detailDataFromStorage.qualityInspectParams;
|
}
|
});
|
}
|
} catch (error) {
|
console.error("加载详情数据失败:", error);
|
showToast("加载详情数据失败，请重试");
|
}
|
};
|
|
onShow(() => {
|
getDetail();
|
});
|
|
onMounted(() => {
|
getDetail();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.material-inspection-detail {
|
min-height: 100vh;
|
background: #f5f5f5;
|
padding-bottom: 20px;
|
}
|
|
.detail-section {
|
padding: 15px;
|
}
|
|
.detail-card {
|
background: #fff;
|
border-radius: 12px;
|
padding: 16px;
|
margin-bottom: 12px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
}
|
|
.card-header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 12px;
|
}
|
|
.header-icon {
|
width: 40px;
|
height: 40px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 12px;
|
}
|
|
.header-icon.secondary {
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
}
|
|
.header-icon.tertiary {
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
}
|
|
.header-title {
|
flex: 1;
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.status-tag {
|
margin-left: 20rpx;
|
}
|
|
.detail-content {
|
padding-top: 8px;
|
}
|
|
.detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10px 0;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.detail-row:last-child {
|
border-bottom: none;
|
}
|
|
.detail-label {
|
font-size: 14px;
|
color: #666;
|
min-width: 100px;
|
}
|
|
.detail-value {
|
font-size: 14px;
|
color: #333;
|
text-align: right;
|
flex: 1;
|
}
|
|
// 检验项目
|
.inspection-items {
|
padding-top: 8px;
|
}
|
|
.inspection-item {
|
padding: 12px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
margin-bottom: 10px;
|
}
|
|
.inspection-item:last-child {
|
margin-bottom: 0;
|
}
|
|
.item-name {
|
display: block;
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 8px;
|
padding-bottom: 8px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.item-details {
|
padding-top: 8px;
|
}
|
|
.item-detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 6px;
|
}
|
|
.item-detail-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.item-detail-label {
|
font-size: 12px;
|
color: #666;
|
min-width: 60px;
|
}
|
|
.item-detail-value {
|
font-size: 12px;
|
color: #333;
|
text-align: right;
|
flex: 1;
|
}
|
|
.item-detail-value.result {
|
font-weight: 500;
|
}
|
|
.result-passed {
|
color: #67c23a;
|
}
|
|
.result-rejected {
|
color: #f56c6c;
|
}
|
|
// 空状态
|
.no-data {
|
padding: 60px 20px;
|
text-align: center;
|
}
|
</style>
|
