<template>
|
<el-dialog v-model="dialogVisible"
|
:title="dialogTitle"
|
width="800px"
|
:close-on-click-modal="false"
|
custom-class="custom-dialog">
|
<div class="detail-container">
|
<!-- 基础信息 -->
|
<div class="detail-section">
|
<h3 class="section-title">基础信息</h3>
|
<el-descriptions :column="3"
|
border>
|
<el-descriptions-item label="检测日期">{{ formatTime(detailData.checkTime) }}</el-descriptions-item>
|
<el-descriptions-item label="供应商">{{ detailData.supplier || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="检验员"><span style="color: #eb9113;">{{ detailData.checkName || '-' }}</span></el-descriptions-item>
|
<el-descriptions-item label="产品名称"><span style="color: hsl(210, 100%, 63%);">{{ detailData.productName || '-' }}</span></el-descriptions-item>
|
<el-descriptions-item label="规格型号"><span style="">{{ detailData.model || '-' }}</span></el-descriptions-item>
|
<el-descriptions-item label="单位"><span style="">{{ detailData.unit || '-' }}</span></el-descriptions-item>
|
<el-descriptions-item label="数量">{{ detailData.quantity || 0 }}</el-descriptions-item>
|
<el-descriptions-item label="试样编号">{{ detailData.sampleCode || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="车牌号">{{ detailData.licensePlateNumber || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="试样状态"><el-tag>{{ detailData.sampleState || '-' }}</el-tag></el-descriptions-item>
|
<el-descriptions-item label="检测性质"><el-tag type="info">{{ detailData.inspectNature || '-' }}</el-tag></el-descriptions-item>
|
<el-descriptions-item label="指标选择"><el-tag type="warning">{{ detailData.testStandardName || detailData.testStandardId || '-' }}</el-tag></el-descriptions-item>
|
<el-descriptions-item label="取样日期">{{ formatTime(detailData.sampleTime) }}</el-descriptions-item>
|
<el-descriptions-item label="检测单位">{{ detailData.checkCompany || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="检测结果"><el-tag :type="detailData.checkResult == '合格' ? 'success' : 'danger'">{{ detailData.checkResult || '-' }}</el-tag></el-descriptions-item>
|
<el-descriptions-item label="提交状态"><el-tag :type="detailData.inspectState ? 'success' : 'danger'">{{ detailData.inspectState ? '已提交' : '未提交' }}</el-tag></el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<!-- 指标信息 -->
|
<div class="detail-section"
|
v-if="detailData.qualityInspectParams && detailData.qualityInspectParams.length > 0">
|
<h3 class="section-title">指标信息</h3>
|
<el-table :data="detailData.qualityInspectParams"
|
style="width: 100%"
|
border>
|
<el-table-column prop="parameterItem"
|
label="指标"
|
min-width="150"></el-table-column>
|
<el-table-column prop="unit"
|
label="单位"
|
width="100"></el-table-column>
|
<el-table-column prop="standardValue"
|
label="标准值"
|
width="120"></el-table-column>
|
<el-table-column prop="controlValue"
|
label="内控值"
|
width="120"></el-table-column>
|
<el-table-column prop="testValue"
|
label="检验值"
|
width="120">
|
<template #default="scope">
|
<span style="color: hsl(210, 100%, 63%);">{{ scope.row.testValue || '-' }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, computed, watch } from "vue";
|
import dayjs from "dayjs";
|
import {
|
qualityInspectDetailByProductId,
|
getQualityTestStandardParamByTestStandardId,
|
} from "@/api/qualityManagement/metricMaintenance.js";
|
import { qualityInspectParamInfo } from "@/api/qualityManagement/qualityInspectParam.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
data: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
const emit = defineEmits(["update:visible"]);
|
|
const dialogVisible = computed({
|
get: () => props.visible,
|
set: value => emit("update:visible", value),
|
});
|
|
const dialogTitle = computed(() => "原材料检验详情");
|
const detailData = ref(props.data);
|
const loading = ref(false);
|
|
// 格式化时间
|
const formatTime = time => {
|
return time ? dayjs(time).format("YYYY-MM-DD HH:mm:ss") : "-";
|
};
|
|
// 加载指标选择和表格数据
|
const loadIndicatorData = async () => {
|
if (!detailData.value.productId) return;
|
|
loading.value = true;
|
try {
|
// 加载指标选择列表
|
const params = {
|
productId: detailData.value.productId,
|
inspectType: 0,
|
};
|
const standardRes = await qualityInspectDetailByProductId(params);
|
if (standardRes.data && standardRes.data.length > 0) {
|
// 查找当前选择的指标名称
|
const selectedStandard = standardRes.data.find(
|
item => item.id == detailData.value.testStandardId
|
);
|
if (selectedStandard) {
|
detailData.value.testStandardName =
|
selectedStandard.standardName || selectedStandard.standardNo;
|
}
|
}
|
|
// 加载参数数据（与编辑页面保持一致）
|
if (detailData.value.id) {
|
getQualityInspectParamList(detailData.value.id);
|
}
|
} catch (error) {
|
console.error("加载指标数据失败:", error);
|
} finally {
|
loading.value = false;
|
}
|
};
|
const getQualityInspectParamList = id => {
|
qualityInspectParamInfo(id).then(res => {
|
detailData.value.qualityInspectParams = res.data;
|
});
|
};
|
// 监听数据变化
|
watch(
|
() => props.data,
|
newData => {
|
detailData.value = newData;
|
},
|
{ deep: true }
|
);
|
|
// 暴露方法给父组件
|
defineExpose({
|
loadIndicatorData,
|
});
|
</script>
|
|
<style scoped>
|
.detail-container {
|
max-height: 600px;
|
overflow-y: auto;
|
padding: 0 16px;
|
}
|
|
.detail-section {
|
margin-bottom: 28px;
|
background-color: #ffffff;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 16px;
|
color: #1a1a1a;
|
border-bottom: 2px solid #409eff;
|
padding-bottom: 10px;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
padding: 20px;
|
border-top: 1px solid #ebeef5;
|
}
|
|
.dialog-footer .el-button {
|
min-width: 100px;
|
padding: 8px 20px;
|
}
|
|
/* 自定义对话框样式 */
|
:deep(.custom-dialog) {
|
border-radius: 12px;
|
overflow: hidden;
|
}
|
|
:deep(.custom-dialog .el-dialog__header) {
|
background-color: #f5f7fa;
|
padding: 20px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
:deep(.custom-dialog .el-dialog__title) {
|
font-size: 18px;
|
font-weight: 600;
|
color: #1a1a1a;
|
}
|
|
:deep(.custom-dialog .el-dialog__body) {
|
padding: 20px;
|
}
|
|
/* 描述列表样式优化 */
|
:deep(.el-descriptions) {
|
border-radius: 6px;
|
overflow: hidden;
|
}
|
|
:deep(.el-descriptions__label) {
|
font-weight: 500;
|
color: #606266;
|
}
|
|
:deep(.el-descriptions__content) {
|
color: #1a1a1a;
|
font-weight: 500;
|
}
|
|
/* 表格样式优化 */
|
:deep(.el-table) {
|
border-radius: 6px;
|
overflow: hidden;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
}
|
|
:deep(.el-table th) {
|
background-color: #f5f7fa;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
:deep(.el-table tr:hover > td) {
|
background-color: #ecf5ff !important;
|
}
|
|
:deep(.el-table td) {
|
color: #303133;
|
}
|
</style>
|
