<template>
|
<el-dialog v-model="dialogVisible" title="详情" width="720px">
|
<div class="detail-content">
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">状态：</span><span class="detail-value">{{ formatInspectState(detailForm.inspectState) }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">检测日期：</span><span class="detail-value">{{ detailForm.checkTime || "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">类别：</span><span class="detail-value">{{ formatInspectType(detailForm.inspectType) }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">检验员：</span><span class="detail-value">{{ detailForm.checkName || "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">产品名称：</span><span class="detail-value">{{ detailForm.productName || "-" }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">规格型号：</span><span class="detail-value">{{ detailForm.model || "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">单位：</span><span class="detail-value">{{ detailForm.unit || "-" }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">数量：</span><span class="detail-value">{{ detailForm.quantity ?? "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">不合格现象：</span><span class="detail-value">{{ detailForm.defectivePhenomena || "-" }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">处理结果：</span><span class="detail-value">{{ detailForm.dealResult || "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">处理人：</span><span class="detail-value">{{ detailForm.dealName || "-" }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">处理日期：</span><span class="detail-value">{{ detailForm.dealTime || "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="detail-row">
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">工时损失：</span><span class="detail-value">{{ detailForm.lossWorking ?? "-" }}</span></p>
|
</el-col>
|
<el-col :span="12">
|
<p class="detail-item"><span class="detail-label">材料费损失：</span><span class="detail-value">{{ detailForm.lossMaterial ?? "-" }}</span></p>
|
</el-col>
|
</el-row>
|
<el-row class="detail-row">
|
<el-col :span="24">
|
<p class="detail-item">
|
<span class="detail-label">原因分析：</span>
|
<span class="detail-value detail-textarea">{{ detailForm.reasonAnalysis || "-" }}</span>
|
</p>
|
</el-col>
|
</el-row>
|
<el-row class="detail-row">
|
<el-col :span="24">
|
<p class="detail-item">
|
<span class="detail-label">预防与纠正措施：</span>
|
<span class="detail-value detail-textarea">{{ detailForm.preventiveCorrective || "-" }}</span>
|
</p>
|
</el-col>
|
</el-row>
|
<!-- <el-row class="detail-row">
|
<el-col :span="24">
|
<div class="detail-item">
|
<span class="detail-label">附件：</span>
|
<div class="detail-value">
|
<div v-if="attachmentList.length" class="attachment-list">
|
<p
|
v-for="(item, idx) in attachmentList"
|
:key="`${item.url}-${idx}`"
|
:href="item.url"
|
target="_blank"
|
rel="noopener noreferrer"
|
class="attachment-link"
|
>
|
{{ item.name }}
|
</p>
|
</div>
|
<span v-else>-</span>
|
</div>
|
</div>
|
</el-col>
|
</el-row> -->
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, ref } from "vue";
|
|
const dialogVisible = ref(false);
|
const detailForm = ref({});
|
const baseApi = import.meta.env.VITE_APP_BASE_API;
|
|
const normalizeUrl = (url) => {
|
if (!url) return "";
|
if (String(url).startsWith("http")) return url;
|
return `${baseApi}${url}`;
|
};
|
// const attachmentList = computed(() => {
|
// const list = [];
|
// const commonFileList = Array.isArray(detailForm.value?.commonFileList) ? detailForm.value.commonFileList : [];
|
// commonFileList.forEach((item, index) => {
|
// const url = normalizeUrl(item?.url || item?.tempPath);
|
// if (!url) return;
|
// list.push({
|
// name: item?.name || `附件${index + 1}`,
|
// url,
|
// });
|
// });
|
// if (list.length) return list;
|
|
// const photos = detailForm.value?.defectivePhotos;
|
// if (!photos) return [];
|
// return String(photos)
|
// .split(",")
|
// .map((item, index) => {
|
// const path = item?.trim();
|
// if (!path) return null;
|
// return {
|
// name: `附件${index + 1}`,
|
// url: normalizeUrl(path),
|
// };
|
// })
|
// .filter(Boolean);
|
// });
|
|
const formatInspectState = (value) => {
|
if (value == 0) return "待处理";
|
if (value == 1) return "已处理";
|
return "-";
|
};
|
const formatInspectType = (value) => {
|
if (value == 0) return "原材料检验";
|
if (value == 1) return "过程检验";
|
if (value == 2) return "出厂检验";
|
return "-";
|
};
|
|
const openDialog = (row) => {
|
detailForm.value = { ...(row || {}) };
|
dialogVisible.value = true;
|
};
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
.detail-content {
|
line-height: 1.6;
|
color: #606266;
|
max-height: 60vh;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
.detail-row {
|
margin-bottom: 10px;
|
}
|
.detail-item {
|
margin: 0;
|
display: flex;
|
align-items: flex-start;
|
}
|
.detail-label {
|
flex: 0 0 116px;
|
color: #303133;
|
font-weight: 600;
|
}
|
.detail-value {
|
flex: 1;
|
min-width: 0;
|
overflow-x: hidden;
|
}
|
.detail-value-multiline {
|
white-space: pre-wrap;
|
word-break: break-word;
|
}
|
.detail-textarea {
|
display: block;
|
min-height: 92px;
|
max-height: 92px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
padding: 8px 10px;
|
border-radius: 4px;
|
background: #f5f7fa;
|
white-space: pre-wrap;
|
word-break: break-word;
|
overflow-wrap: anywhere;
|
}
|
.attachment-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px 12px;
|
}
|
.attachment-link {
|
color: #409eff;
|
text-decoration: none;
|
}
|
.attachment-link:hover {
|
text-decoration: underline;
|
}
|
</style>
|
