From 65193cc9b4e27aad36a65eca447e6c62f6ee037f Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 17 四月 2026 15:25:07 +0800
Subject: [PATCH] 不合格管理：重构详情展示与操作按钮
---
src/views/qualityManagement/nonconformingManagement/index.vue | 69 ++++---------
src/views/qualityManagement/nonconformingManagement/components/detailDia.vue | 219 +++++++++++++++++++++++++++++++++++++++++++
2 files changed, 241 insertions(+), 47 deletions(-)
diff --git a/src/views/qualityManagement/nonconformingManagement/components/detailDia.vue b/src/views/qualityManagement/nonconformingManagement/components/detailDia.vue
new file mode 100644
index 0000000..bfb5189
--- /dev/null
+++ b/src/views/qualityManagement/nonconformingManagement/components/detailDia.vue
@@ -0,0 +1,219 @@
+<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>
diff --git a/src/views/qualityManagement/nonconformingManagement/index.vue b/src/views/qualityManagement/nonconformingManagement/index.vue
index 98a0731..132921a 100644
--- a/src/views/qualityManagement/nonconformingManagement/index.vue
+++ b/src/views/qualityManagement/nonconformingManagement/index.vue
@@ -53,35 +53,9 @@
@pagination="pagination"
:total="page.total"
>
- <template #reasonAnalysis="{ row }">
- <el-button
- link
- type="primary"
- @click="openTextPreviewDialog('鍘熷洜鍒嗘瀽', row?.reasonAnalysis)"
- >
- {{ row?.reasonAnalysis}}
- </el-button>
- </template>
- <template #preventiveCorrective="{ row }">
- <el-button
- link
- type="primary"
- @click="openTextPreviewDialog('棰勯槻涓庣籂姝ｆ帾鏂�', row?.preventiveCorrective)"
- >
- {{ row?.preventiveCorrective}}
- </el-button>
- </template>
- <template #lossWorking="{ row }">
- <span>{{ row?.lossWorking ?? '-' }}</span>
- </template>
- <template #lossMaterial="{ row }">
- <span>{{ row?.lossMaterial ?? '-' }}</span>
- </template>
</PIMTable>
</div>
- <el-dialog v-model="textPreviewDialogVisible" :title="textPreviewTitle" width="600px">
- <div class="text-preview-content">{{ textPreviewContent || "鏆傛棤鍐呭" }}</div>
- </el-dialog>
+ <DetailDia ref="detailDiaRef" />
<FormDia ref="formDia" @close="handleQuery"></FormDia>
<InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
</div>
@@ -94,6 +68,7 @@
import {ElMessageBox} from "element-plus";
import {qualityUnqualifiedDel, qualityUnqualifiedListPage} from "@/api/qualityManagement/nonconformingManagement.js";
import InspectionFormDia from "@/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue";
+import DetailDia from "@/views/qualityManagement/nonconformingManagement/components/detailDia.vue";
import dayjs from "dayjs";
const data = reactive({
@@ -204,16 +179,14 @@
{
label: "鍘熷洜鍒嗘瀽",
prop: "reasonAnalysis",
- dataType: "slot",
slot: "reasonAnalysis",
- width: 160
+ width: 120
},
{
label: "棰勯槻涓庣籂姝ｆ帾鏂�",
prop: "preventiveCorrective",
- dataType: "slot",
slot: "preventiveCorrective",
- width: 180
+ width: 120
},
{
label: "宸ユ椂鎹熷け",
@@ -230,8 +203,15 @@
label: "鎿嶄綔",
align: "center",
fixed: "right",
- width: 100,
+ width: 140,
operation: [
+ {
+ name: "璇︽儏",
+ type: "text",
+ clickFun: (row) => {
+ openDetailDialog(row);
+ },
+ },
{
name: "澶勭悊",
type: "text",
@@ -246,9 +226,6 @@
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
-const textPreviewDialogVisible = ref(false);
-const textPreviewTitle = ref("");
-const textPreviewContent = ref("");
const page = reactive({
current: 1,
size: 100,
@@ -256,6 +233,7 @@
});
const formDia = ref()
const inspectionFormDia = ref()
+const detailDiaRef = ref()
const { proxy } = getCurrentInstance()
const changeDaterange = (value) => {
@@ -315,11 +293,9 @@
inspectionFormDia.value?.openDialog(type, row)
})
};
-// 鏌ョ湅瀛楁璇︽儏
-const openTextPreviewDialog = (title, content) => {
- textPreviewTitle.value = title;
- textPreviewContent.value = content || "";
- textPreviewDialogVisible.value = true;
+// 鎵撳紑璇︽儏寮规
+const openDetailDialog = (row) => {
+ detailDiaRef.value?.openDialog(row);
};
// 鍒犻櫎
@@ -366,12 +342,11 @@
</script>
<style scoped>
-.text-preview-content {
- white-space: pre-wrap;
- line-height: 1.6;
- color: #606266;
- word-break: break-word;
- max-height: 60vh;
- overflow-y: auto;
+.text-ellipsis {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
</style>
--
Gitblit v1.9.3