<template>
|
<div>
|
<el-dialog v-model="dialogVisible"
|
title="检验详情"
|
width="1000px"
|
@close="closeDialog">
|
<el-card class="detail-card">
|
<template #header>
|
<div class="card-header">
|
<span>基本信息</span>
|
</div>
|
</template>
|
<div class="detail-info">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="info-label">日期：</span>
|
<span class="info-value">{{ dayjs(detailData.createTime) .format('YYYY-MM-DD') }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">生产订单号：</span>
|
<span class="info-value">{{ detailData.npsNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">工序：</span>
|
<!-- <span class="info-value">{{ detailData.process }}</span> -->
|
<el-tag type="primary">{{ detailData.process }}</el-tag>
|
</div>
|
</div>
|
<div class="info-row">
|
<div class="info-item">
|
<span class="info-label">产品编码：</span>
|
<span class="info-value">{{ detailData.materialCode }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">产品类型：</span>
|
<!-- <span class="info-value">{{ detailData.strength }}</span> -->
|
<el-tag type="info">{{ detailData.strength }}</el-tag>
|
</div>
|
<div class="info-item">
|
<span class="info-label">产品名称：</span>
|
<span class="info-value">{{ detailData.productName }}</span>
|
</div>
|
</div>
|
<div class="info-row">
|
<div class="info-item">
|
<span class="info-label">规格：</span>
|
<span class="info-value">{{ detailData.model }}</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">班次：</span>
|
<el-tag :type="detailData.schedule === '白班' ? 'primary' : 'warning'">{{ detailData.schedule }}</el-tag>
|
</div>
|
<div class="info-item">
|
<span class="info-label">岗位人员：</span>
|
<span class="info-value">{{ detailData.postName }}</span>
|
</div>
|
</div>
|
<div class="info-row">
|
<!-- <div class="info-item">
|
<span class="info-label">报工单号：</span>
|
<span class="info-value">{{ detailData.productionProductRouteItemId }}</span>
|
</div> -->
|
<div class="info-item">
|
<span class="info-label">产出数量：</span>
|
<span class="info-value"><span style="font-weight: bold;color: #409eff;">{{ detailData.quantity }}</span> 方</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">合格数量：</span>
|
<span class="info-value"><span style="font-weight: bold;color: #28e431;">{{ detailData.qualifiedQuantity }}</span> 方</span>
|
</div>
|
<div class="info-item">
|
<span class="info-label">不合格数量：</span>
|
<span class="info-value"><span style="font-weight: bold;color: #b43434;">{{ detailData.unqualifiedQuantity }}</span> 方</span>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
<el-card v-for="group in groupedInspectionData"
|
:key="group.sourceSort"
|
class="detail-card"
|
style="margin-top: 20px;">
|
<template #header>
|
<div class="card-header">
|
<span v-if="groupedInspectionData.length > 1">检验指标组 - {{ group.sourceSort }}</span>
|
<span v-else>检验指标</span>
|
</div>
|
</template>
|
<el-table :data="group.items"
|
style="width: 100%"
|
:row-class-name="rowClassName">
|
<el-table-column prop="paramName"
|
label="指标" />
|
<el-table-column prop="unit"
|
label="单位"
|
width="100">
|
<template #default="scope">
|
{{ scope.row.unit || "/" }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="standardText"
|
label="标准值" />
|
<el-table-column prop="paramValue"
|
label="实际值" />
|
<el-table-column prop="result"
|
label="结果"
|
width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.result === '合格' ? 'success' : 'danger'">
|
{{ scope.row.result }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="closeDialog">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import { qualityInspectProcessDetails } from "@/api/qualityManagement/rawMaterialInspection.js";
|
import dayjs from "dayjs";
|
|
const emit = defineEmits(["close"]);
|
const dialogVisible = ref(false);
|
const detailData = ref({});
|
const inspectionData = ref([]);
|
const groupedInspectionData = ref([]);
|
const loading = ref(false);
|
|
const openDialog = row => {
|
dialogVisible.value = true;
|
detailData.value = {
|
...row,
|
createTime: row.createTime
|
? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
|
: "",
|
};
|
getInspectionDetails(row.productionProductRouteItemId);
|
};
|
|
const getInspectionDetails = id => {
|
loading.value = true;
|
qualityInspectProcessDetails({ productionProductRouteItemId: id })
|
.then(res => {
|
const data = res.data || [];
|
// 计算结果
|
const processedData = data.map(item => {
|
let result = "合格";
|
let standardText = "";
|
if (item.valueMode === 1) {
|
// 单值比较
|
if (item.standardValue !== null) {
|
standardText = item.standardValue;
|
if (item.paramValue !== item.standardValue) {
|
result = "不合格";
|
}
|
} else {
|
standardText = "-";
|
result = "合格";
|
}
|
} else if (item.valueMode === 2) {
|
// 区间比较
|
if (item.minValue !== null || item.maxValue !== null) {
|
standardText =
|
(item.minValue ? item.minValue : "-∞") +
|
"~" +
|
(item.maxValue ? item.maxValue : "+∞");
|
if (
|
item.paramValue < item.minValue ||
|
item.paramValue > item.maxValue
|
) {
|
result = "不合格";
|
}
|
} else {
|
standardText = "-";
|
result = "合格";
|
}
|
}
|
return {
|
...item,
|
standardText,
|
result,
|
};
|
});
|
|
// 按sourceSort分组
|
const grouped = {};
|
processedData.forEach(item => {
|
const key = item.sourceSort || "默认";
|
if (!grouped[key]) {
|
grouped[key] = [];
|
}
|
grouped[key].push(item);
|
});
|
|
// 转换为数组格式
|
groupedInspectionData.value = Object.entries(grouped).map(
|
([key, items]) => ({
|
sourceSort: key,
|
items,
|
})
|
);
|
|
loading.value = false;
|
})
|
.catch(err => {
|
loading.value = false;
|
console.error("获取检验详情失败:", err);
|
});
|
};
|
|
const closeDialog = () => {
|
dialogVisible.value = false;
|
emit("close");
|
};
|
|
// 为不合格的行添加样式
|
const rowClassName = ({ row }) => {
|
return row.result == "不合格" ? "unqualified-row" : "";
|
};
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
.detail-card {
|
margin-bottom: 20px;
|
}
|
|
.card-header {
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.detail-info {
|
padding: 10px 0;
|
}
|
|
.info-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 10px;
|
}
|
|
.info-item {
|
width: 33%;
|
margin-bottom: 10px;
|
}
|
|
.info-label {
|
display: inline-block;
|
width: 100px;
|
font-weight: bold;
|
color: #666;
|
}
|
|
.info-value {
|
color: #333;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
}
|
|
:deep(.unqualified-row) {
|
background-color: rgba(245, 108, 108, 0.05) !important;
|
}
|
|
:deep(.unqualified-row .cell) {
|
color: #f56c6c !important;
|
}
|
</style>
|
