From f1501c47fb5663a3f76ba08f48cbd6740748761c Mon Sep 17 00:00:00 2001
From: qiankanghui <kanghui.qian@xujiesoft.com>
Date: Tue, 9 Jun 2026 15:24:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(inspection):=20=E6=B7=BB=E5=8A=A0=E6=A3=80?=
 =?UTF-8?q?=E9=AA=8C=E7=94=B3=E8=AF=B7=E8=AF=A6=E6=83=85=E5=92=8C=E8=B4=A8?=
 =?UTF-8?q?=E9=87=8F=E6=A3=80=E6=9F=A5=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 inspectionRequestDetail.vue 组件实现检验申请详情的查看和编辑功能
- 新增 com_inspectionRequestPoDetailTab.vue 组件用于展示检验申请的 PO 明细表格
- 新增 npcIqcDetail.vue 组件用于展示 IQC 检验详情信息
- 新增 qualityIssueDetail.vue 组件实现质量问题详情的查看和编辑功能
- 实现了编辑模式与查看模式的切换功能
- 集成了数据保存、取消编辑和表单验证功能
- 添加了表格行样式高亮以标识修改过的记录
---
 .../com_inspectionRequestDetail.vue           | 397 +++------
 .../com_inspectionRequestPoDetailTab.vue      |  11 +-
 .../inspection/inspectionRequestList.vue      |  18 +-
 src/views/modules/npcIqc/com_npcIqcDetail.vue | 460 +++++-----
 .../quality/com_qualityIssueDetail.vue        | 816 +++++++++++-------
 5 files changed, 867 insertions(+), 835 deletions(-)

diff --git a/src/views/modules/inspection/com_inspectionRequestDetail.vue b/src/views/modules/inspection/com_inspectionRequestDetail.vue
index 8784f29..740eba3 100644
--- a/src/views/modules/inspection/com_inspectionRequestDetail.vue
+++ b/src/views/modules/inspection/com_inspectionRequestDetail.vue
@@ -1,264 +1,152 @@
 <template>
-  <div class="detail-container">
-
-    <!-- 修改模式下的编辑表单 -->
+  <div class="inspection-request-detail">
+    <!-- 编辑模式 -->
     <div v-if="isEditMode" class="edit-form">
-      <!-- 第一行 - 4列布局 -->
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">申请单号：</span>
-            <span class="value disabled">{{ detailData.requestNo }}</span>
+          <div class="form-item">
+            <div class="label">申请单号：</div>
+            <div class="value disabled">{{ detailData.requestNo }}</div>
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">申请日期：</span>
-            <span class="value disabled">{{ formatDate(detailData.requestDate) }}</span>
+          <div class="form-item">
+            <div class="label">申请日期：</div>
+            <div class="value disabled">{{ formatDate(detailData.requestDate) }}</div>
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">供应商编码：</span>
-            <span class="value disabled">{{ detailData.supplierNo }}</span>
+          <div class="form-item">
+            <div class="label">供应商编码：</div>
+            <div class="value disabled">{{ detailData.supplierNo }}</div>
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">供应商名称：</span>
-            <span class="value disabled">{{ detailData.supplierName }}</span>
+          <div class="form-item">
+            <div class="label">供应商名称：</div>
+            <div class="value disabled">{{ detailData.supplierName }}</div>
           </div>
         </el-col>
       </el-row>
 
-      <!-- 第二行 - 2列布局 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <div class="grid-item">
-            <span class="label">验货地址：</span>
-            <el-input
-              v-model="editData.inspectAddress"
-              placeholder="请输入验货地址"
-              size="small"
-              class="edit-input">
-            </el-input>
+          <div class="form-item">
+            <div class="label">验货地址：</div>
+            <el-input v-model="editData.inspectAddress" size="small" />
           </div>
         </el-col>
         <el-col :span="12">
-          <div class="grid-item">
-            <span class="label">联系人：</span>
-            <el-input
-              v-model="editData.inspectContract"
-              placeholder="请输入联系人"
-              size="small"
-              class="edit-input">
-            </el-input>
+          <div class="form-item">
+            <div class="label">联系人：</div>
+            <el-input v-model="editData.inspectContract" size="small" />
           </div>
         </el-col>
       </el-row>
 
-      <!-- 第三行 - 3列布局 -->
       <el-row :gutter="20">
         <el-col :span="8">
-          <div class="grid-item">
-            <span class="label">申请录入人：</span>
-            <span class="value disabled">{{ detailData.createBy }}</span>
+          <div class="form-item">
+            <div class="label">申请录入人：</div>
+            <div class="value disabled">{{ detailData.createBy }}</div>
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="grid-item">
-            <span class="label">申请录入时间：</span>
-            <span class="value disabled">{{ detailData.createDate }}</span>
+          <div class="form-item">
+            <div class="label">申请录入时间：</div>
+            <div class="value disabled">{{ detailData.createDate }}</div>
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="grid-item">
-            <span class="label">建议验货日期：</span>
+          <div class="form-item">
+            <div class="label">建议验货日期：</div>
             <el-date-picker
               v-model="editData.needInspectDate"
               type="date"
               value-format="yyyy-MM-dd"
-              placeholder="选择日期"
               size="small"
-              class="edit-input"
-              style="width: 100%">
-            </el-date-picker>
+              style="width: 100%"
+            />
           </div>
         </el-col>
       </el-row>
 
-      <!-- 第四行 - 4列布局 -->
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">排程人：</span>
-            <span class="value disabled">{{ detailData.scheduledBy || ' ' }}</span>
+          <div class="form-item">
+            <div class="label">排程人：</div>
+            <div class="value disabled">{{ detailData.scheduledBy || ' ' }}</div>
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">排程时间：</span>
-            <span class="value disabled">{{ detailData.scheduledDate || ' ' }}</span>
+          <div class="form-item">
+            <div class="label">排程时间：</div>
+            <div class="value disabled">{{ detailData.scheduledDate || ' ' }}</div>
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">状态：</span>
-            <span class="value disabled">{{ detailData.status }}</span>
+          <div class="form-item">
+            <div class="label">状态：</div>
+            <div class="value disabled">{{ detailData.status }}</div>
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">计划验货日期：</span>
-            <span class="value disabled">{{ detailData.planStartDate || ' ' }}</span>
+          <div class="form-item">
+            <div class="label">计划验货日期：</div>
+            <div class="value disabled">{{ detailData.planStartDate || ' ' }}</div>
           </div>
         </el-col>
       </el-row>
 
-      <!-- 第五行 - QC和修改按钮 -->
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">QC：</span>
-            <span class="value disabled">{{ detailData.qcOperator || ' ' }}</span>
+          <div class="form-item">
+            <div class="label">QC：</div>
+            <div class="value disabled">{{ detailData.qcOperator || ' ' }}</div>
           </div>
         </el-col>
         <el-col :span="18" style="text-align: right;">
-          <div class="grid-item" style="margin-bottom: 0;">
-            <el-button
-              type="primary"
-              size="default"
-              @click="handleEdit"
-              v-if="isDraftStatus"
-              :disabled="isEditMode">
-              修改
-            </el-button>
-          </div>
+          <el-button type="primary" size="small" @click="handleSave" :loading="saveLoading">
+            保存
+          </el-button>
+          <el-button size="small" @click="handleCancelEdit">取消</el-button>
         </el-col>
       </el-row>
-
-      <!-- 编辑模式底部按钮 -->
-      <div class="edit-actions">
-        <el-button type="primary" size="small" @click="handleSave" :loading="saveLoading">保存</el-button>
-        <el-button size="small" @click="handleCancelEdit">取消</el-button>
-      </div>
     </div>
 
     <!-- 查看模式 -->
     <div v-else>
-      <!-- 第一行 - 4列布局 -->
       <el-row :gutter="20">
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">申请单号：</span>
-            <span class="value">{{ detailData.requestNo }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">申请日期：</span>
-            <span class="value">{{ formatDate(detailData.requestDate) }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">供应商编码：</span>
-            <span class="value">{{ detailData.supplierNo }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">供应商名称：</span>
-            <span class="value">{{ detailData.supplierName }}</span>
-          </div>
-        </el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">申请单号：</div><div class="value">{{ detailData.requestNo }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">申请日期：</div><div class="value">{{ formatDate(detailData.requestDate) }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">供应商编码：</div><div class="value">{{ detailData.supplierNo }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">供应商名称：</div><div class="value">{{ detailData.supplierName }}</div></div></el-col>
       </el-row>
 
-      <!-- 第二行 - 2列布局 -->
       <el-row :gutter="20">
-        <el-col :span="12">
-          <div class="grid-item">
-            <span class="label">验货地址：</span>
-            <span class="value">{{ detailData.inspectAddress || ' ' }}</span>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-item">
-            <span class="label">联系人：</span>
-            <span class="value">{{ detailData.inspectContract || ' ' }}</span>
-          </div>
-        </el-col>
+        <el-col :span="12"><div class="form-item"><div class="label">验货地址：</div><div class="value">{{ detailData.inspectAddress || ' ' }}</div></div></el-col>
+        <el-col :span="12"><div class="form-item"><div class="label">联系人：</div><div class="value">{{ detailData.inspectContract || ' ' }}</div></div></el-col>
       </el-row>
 
-      <!-- 第三行 - 3列布局 -->
       <el-row :gutter="20">
-        <el-col :span="8">
-          <div class="grid-item">
-            <span class="label">申请录入人：</span>
-            <span class="value">{{ detailData.createBy }}</span>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="grid-item">
-            <span class="label">申请录入时间：</span>
-            <span class="value">{{ detailData.createDate }}</span>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="grid-item">
-            <span class="label">建议验货日期：</span>
-            <span class="value">{{ formatDate(detailData.needInspectDate) || ' ' }}</span>
-          </div>
-        </el-col>
+        <el-col :span="8"><div class="form-item"><div class="label">申请录入人：</div><div class="value">{{ detailData.createBy }}</div></div></el-col>
+        <el-col :span="8"><div class="form-item"><div class="label">申请录入时间：</div><div class="value">{{ detailData.createDate }}</div></div></el-col>
+        <el-col :span="8"><div class="form-item"><div class="label">建议验货日期：</div><div class="value">{{ formatDate(detailData.needInspectDate) }}</div></div></el-col>
       </el-row>
 
-      <!-- 第四行 - 4列布局 -->
       <el-row :gutter="20">
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">排程人：</span>
-            <span class="value">{{ detailData.scheduledBy || ' ' }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">排程时间：</span>
-            <span class="value">{{ detailData.scheduledDate || ' ' }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">状态：</span>
-            <span class="value">{{ detailData.status }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">计划验货日期：</span>
-            <span class="value">{{ detailData.planStartDate || ' ' }}</span>
-          </div>
-        </el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">排程人：</div><div class="value">{{ detailData.scheduledBy || ' ' }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">排程时间：</div><div class="value">{{ detailData.scheduledDate || ' ' }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">状态：</div><div class="value">{{ detailData.status }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">计划验货日期：</div><div class="value">{{ detailData.planStartDate || ' ' }}</div></div></el-col>
       </el-row>
 
-      <!-- 第五行 - QC和修改按钮 -->
       <el-row :gutter="20">
-        <el-col :span="6">
-          <div class="grid-item">
-            <span class="label">QC：</span>
-            <span class="value">{{ detailData.qcOperator || ' ' }}</span>
-          </div>
-        </el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">QC：</div><div class="value">{{ detailData.qcOperator || ' ' }}</div></div></el-col>
         <el-col :span="18" style="text-align: right;">
-          <div class="grid-item" style="margin-bottom: 0;">
-            <el-button
-              type="primary"
-              size="default"
-              @click="handleEdit"
-              v-if="isDraftStatus"
-              :disabled="isEditMode">
-              修改
-            </el-button>
-          </div>
+          <el-button type="primary" size="default" @click="handleEdit" v-if="isDraftStatus">
+            修改
+          </el-button>
         </el-col>
       </el-row>
     </div>
@@ -270,59 +158,30 @@ import { updateInspectionRequest } from '@/api/inspection/inspectionRequestHeade
 
 export default {
   name: 'InspectionRequestDetail',
-
   props: {
     detailData: {
       type: Object,
       default: () => ({})
     }
   },
-
   data() {
     return {
       isEditMode: false,
       saveLoading: false,
-      editData: {
-        requestNo: '',
-        needInspectDate: '',
-        inspectAddress: '',
-        inspectContract: ''
-      }
+      editData: {},
+      originalData: {}
     }
   },
-
   computed: {
-    // 判断是否为草稿状态
     isDraftStatus() {
       const status = this.detailData.status || this.detailData.statusDb || ''
-      return status === 'Draft' || status === 'draft' || status === '草稿'
+      return ['Draft', 'draft', '草稿'].includes(status)
     }
   },
-
-  watch: {
-    detailData: {
-      handler(newVal) {
-        if (newVal) {
-          this.editData = {
-            requestNo: newVal.requestNo,
-            needInspectDate: newVal.needInspectDate,
-            inspectAddress: newVal.inspectAddress,
-            inspectContract: newVal.inspectContract
-          }
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-
   methods: {
     formatDate(dateStr) {
       if (!dateStr) return ''
-      if (dateStr.length > 10) {
-        return dateStr.substring(0, 10)
-      }
-      return dateStr
+      return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
     },
 
     handleEdit() {
@@ -332,47 +191,37 @@ export default {
         inspectAddress: this.detailData.inspectAddress,
         inspectContract: this.detailData.inspectContract
       }
+
+      this.originalData = JSON.parse(JSON.stringify(this.editData))
       this.isEditMode = true
     },
 
     handleCancelEdit() {
+      this.editData = JSON.parse(JSON.stringify(this.originalData))
       this.isEditMode = false
-      this.editData = {
-        requestNo: this.detailData.requestNo,
-        needInspectDate: this.detailData.needInspectDate,
-        inspectAddress: this.detailData.inspectAddress,
-        inspectContract: this.detailData.inspectContract
-      }
     },
 
-    // 保存修改
     async handleSave() {
       if (!this.editData.needInspectDate) {
         this.$message.warning('请选择建议验货日期')
         return
       }
 
+      const isChanged =
+        JSON.stringify(this.editData) !== JSON.stringify(this.originalData)
+
       this.saveLoading = true
       try {
-        const submitData = {
-          requestNo: this.editData.requestNo,
-          needInspectDate: this.editData.needInspectDate,
-          inspectAddress: this.editData.inspectAddress,
-          inspectContract: this.editData.inspectContract
-        }
+        await updateInspectionRequest({
+          ...this.editData,
+          isChanged: isChanged ? 'Y' : 'N'
+        })
 
-        await updateInspectionRequest(submitData)
         this.$message.success('修改成功')
-
-        // 触发父组件刷新主表数据
-        this.$emit('update-success')  // ← 已经有了，确保这行存在
-
-        // 退出编辑模式
+        this.$emit('update-success')
         this.isEditMode = false
-
-      } catch (error) {
-        console.error('保存失败:', error)
-        this.$message.error(error.message || '修改失败，请稍后重试')
+      } catch (e) {
+        this.$message.error(e.message || '修改失败')
       } finally {
         this.saveLoading = false
       }
@@ -380,71 +229,35 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
 
-.detail-container {
-  padding: 15px 20px;
-  border: 1px solid #dcdfe6;
+<style scoped lang="scss">
+.inspection-request-detail {
+  padding: 10px 15px;
   background: #fff;
-  position: relative;
+  border: 1px solid #dcdfe6;
 }
 
-// 栅格布局样式
-.grid-item {
+.form-item {
   margin-bottom: 15px;
-  
-  .label {
-    display: block;
-    color: #606266;
-    font-size: 13px;
-    padding-bottom: 5px;
-    line-height: 1;
-    height: auto;
-    white-space: nowrap;
-  }
-  
-  .value {
-    display: block;
-    min-height: 28px;
-    line-height: 28px;
-    padding: 0 10px;
-    border: 1px solid #dcdfe6;
-    background: #fff;
-    color: #303133;
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  .value.disabled {
-    background: #f5f7fa;
-    color: #c0c4cc;
-    cursor: not-allowed;
-  }
-  
-  .edit-input {
-    width: 100%;
-    
-    /deep/ .el-input__inner {
-      height: 28px;
-      line-height: 28px;
-      font-size: 14px;
-    }
-    
-    /deep/ .el-date-editor .el-input__inner {
-      padding-left: 10px;
-    }
-  }
 }
 
-.edit-actions {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
-  margin-top: 15px;
-  padding-top: 12px;
-  border-top: 1px solid #ebeef5;
+.form-item .label {
+  font-size: 13px;
+  color: #606266;
+  margin-bottom: 6px;
 }
 
+.form-item .value {
+  min-height: 32px;
+  line-height: 32px;
+  padding: 0 10px;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.form-item .value.disabled {
+  color: #909399;
+}
 </style>
diff --git a/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue b/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
index 3f30eab..42f8ebb 100644
--- a/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
+++ b/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue
@@ -58,15 +58,9 @@ export default {
   },
 
   methods: {
+    // 根据 isChanged 字段判断是否需要红色背景
     tableRowClassName ({ row }) {
-      return (
-        row.hasModifiedQty === true ||
-        row.hasModifiedQty === 'true' ||
-        row.hasModifiedQty === 'Y' ||
-        row.hasModifiedQty === 'y' ||
-        row.hasModifiedQty === 1 ||
-        row.hasModifiedQty === '1'
-      ) ? 'modified-row' : ''
+      return row.isChanged === 'Y' ? 'modified-row' : ''
     },
     // 加载明细列表
     loadDetailList () {
@@ -97,6 +91,7 @@ export default {
   padding: 0;
   background: #fff;
 }
+
 .el-table .modified-row td {
   background-color: #ffe6e6 !important;
   color: #f56c6c !important;
diff --git a/src/views/modules/inspection/inspectionRequestList.vue b/src/views/modules/inspection/inspectionRequestList.vue
index 43cb103..1d7805a 100644
--- a/src/views/modules/inspection/inspectionRequestList.vue
+++ b/src/views/modules/inspection/inspectionRequestList.vue
@@ -286,8 +286,7 @@
                   :max="scope.row.waitInspectQty || 999999"
                   size="mini"
                   :controls="false"
-                  style="width: 100%; box-sizing: border-box;"
-                  @input="handleInspectQtyChange(scope.row, $event)">
+                  style="width: 100%; box-sizing: border-box;">
                 </el-input-number>
               </template>
             </el-table-column>
@@ -870,7 +869,6 @@ export default {
           this.poList = data.page.list.map(item => ({
             ...item,
             inspectQty: item.waitInspectQty || 0, // 默认值为未验货数量
-            originalWaitInspectQty: item.waitInspectQty || 0, // 保存原始未验货数量用于比较
             shipMethod: item.shipMethod || '',// 运输方式
             crd: item.crd ? item.crd.split(' ')[0] : ''
           }))
@@ -898,10 +896,12 @@ export default {
 
     // 表格行样式（验货数量与原始值不同时标红）
     tableRowClassName ({ row }) {
-      if (row.inspectQty !== row.originalWaitInspectQty) {
-        return 'modified-row'
-      }
-      return ''
+      const inspectQty = Number(row.inspectQty || 0)
+      const waitInspectQty = Number(row.waitInspectQty || 0)
+
+      return inspectQty !== waitInspectQty
+        ? 'modified-row'
+        : ''
     },
     // 保存
     handleSaveAdd () {
@@ -1432,10 +1432,6 @@ export default {
   &:hover > td {
     background-color: #fde2e2 !important;
   }
-
-  td {
-    color: #f56c6c;
-  }
 }
 
 .po-section {
diff --git a/src/views/modules/npcIqc/com_npcIqcDetail.vue b/src/views/modules/npcIqc/com_npcIqcDetail.vue
index ef08955..56fc8f6 100644
--- a/src/views/modules/npcIqc/com_npcIqcDetail.vue
+++ b/src/views/modules/npcIqc/com_npcIqcDetail.vue
@@ -1,179 +1,211 @@
 <template>
-  <div class="detail-container">
+  <div class="npc-iqc-detail">
     <div v-if="Object.keys(detailData).length === 0" class="empty-tip">
       请选择一条记录查看详情
     </div>
     <div v-else>
-      <!-- 第一行 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">IQC检验单号：</span>
-          <span class="value">{{ detailData.iqcNo }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">采购订单号：</span>
-          <span class="value">{{ detailData.purOrder }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">收货日期：</span>
-          <span class="value">{{ formatDate(detailData.dateReceived) }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">物料编码：</span>
-          <span class="value">{{ detailData.itemCode }}</span>
-        </div>
-      </div>
-
-      <!-- 第二行 -->
-      <div class="detail-row">
-        <div class="detail-item long">
-          <span class="label">供应商名称：</span>
-          <span class="value">{{ detailData.supplierName }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">供应商编码：</span>
-          <span class="value">{{ detailData.supplierNo }}</span>
-        </div>
-      </div>
-
-      <!-- 第三行 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">物料名称：</span>
-          <span class="value">{{ detailData.itemName }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">数量：</span>
-          <span class="value">{{ detailData.quantity }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">抽样数量：</span>
-          <span class="value">{{ detailData.sampleSize }}</span>
-        </div>
-      </div>
-
-      <!-- 第四行 - 尺寸信息 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">尺寸A：</span>
-          <span class="value">{{ detailData.dimA }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">尺寸B：</span>
-          <span class="value">{{ detailData.dimB }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">尺寸C：</span>
-          <span class="value">{{ detailData.dimC }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">尺寸D：</span>
-          <span class="value">{{ detailData.dimD }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">尺寸E：</span>
-          <span class="value">{{ detailData.dimE }}</span>
-        </div>
-      </div>
-
-      <!-- 第五行 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">检验结果总计：</span>
-          <span class="value">{{ detailData.inspectionTotal }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">检验员姓名：</span>
-          <span class="value">{{ detailData.inspectorName }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">录入日期：</span>
-          <span class="value">{{ formatDate(detailData.entryDate) }}</span>
-        </div>
-      </div>
-
-      <!-- 第六行 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">供应商邮箱：</span>
-          <span class="value">{{ detailData.supplierEmail }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">纠正措施请求：</span>
-          <span class="value">{{ formatCaRequest(detailData.caRequest) }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">收集/批次号：</span>
-          <span class="value">{{ detailData.collectionBatch }}</span>
-        </div>
-      </div>
-
-      <!-- 第七行 - 问题描述 -->
-      <div class="detail-row full-width">
-        <span class="label">问题描述：</span>
-        <div class="value textarea">{{ detailData.problem }}</div>
-      </div>
-
-      <!-- 第八行 - 备注 -->
-      <div class="detail-row full-width">
-        <span class="label">备注：</span>
-        <div class="value textarea">{{ detailData.comments }}</div>
-      </div>
-
-      <!-- 第九行 - 返工信息 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">返工工时：</span>
-          <span class="value">{{ detailData.reworkHours }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">返工费率：</span>
-          <span class="value">{{ detailData.reworkRate }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">返工总成本：</span>
-          <span class="value">{{ detailData.reworkTotal }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">物料成本：</span>
-          <span class="value">{{ detailData.materialCost }}</span>
-        </div>
-      </div>
-
-      <!-- 第十行 - 其他信息 -->
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">Created By：</span>
-          <span class="value">{{ detailData.createdBy }}</span>
-        </div>
-
-<!--        <div class="detail-item">-->
-<!--          <span class="label">Update By：</span>-->
-<!--          <span class="value">{{ detailData.updateBy }}</span>-->
-<!--        </div>-->
-
-<!--        <div class="detail-item">-->
-<!--          <span class="label">Update Date：</span>-->
-<!--          <span class="value">{{ formatDate(detailData.updateDate) }}</span>-->
-<!--        </div>-->
-      </div>
+      <!-- 第一行：IQC检验单号、采购订单号、收货日期、物料编码 -->
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">IQC检验单号：</div>
+            <div class="value">{{ detailData.iqcNo }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">采购订单号：</div>
+            <div class="value">{{ detailData.purOrder }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">收货日期：</div>
+            <div class="value">{{ formatDate(detailData.dateReceived) }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">物料编码：</div>
+            <div class="value">{{ detailData.itemCode }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行：供应商名称、供应商编码 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="form-item">
+            <div class="label">供应商名称：</div>
+            <div class="value">{{ detailData.supplierName }}</div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="form-item">
+            <div class="label">供应商编码：</div>
+            <div class="value">{{ detailData.supplierNo }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第三行：物料名称、数量、抽样数量 -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">物料名称：</div>
+            <div class="value">{{ detailData.itemName }}</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">数量：</div>
+            <div class="value">{{ detailData.quantity }}</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">抽样数量：</div>
+            <div class="value">{{ detailData.sampleSize }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第四行：尺寸A-E -->
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <div class="form-item">
+            <div class="label">尺寸A：</div>
+            <div class="value">{{ detailData.dimA }}</div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">尺寸B：</div>
+            <div class="value">{{ detailData.dimB }}</div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">尺寸C：</div>
+            <div class="value">{{ detailData.dimC }}</div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">尺寸D：</div>
+            <div class="value">{{ detailData.dimD }}</div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">尺寸E：</div>
+            <div class="value">{{ detailData.dimE }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第五行：检验结果总计、检验员姓名、录入日期 -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">检验结果总计：</div>
+            <div class="value">{{ detailData.inspectionTotal }}</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">检验员姓名：</div>
+            <div class="value">{{ detailData.inspectorName }}</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">录入日期：</div>
+            <div class="value">{{ formatDate(detailData.entryDate) }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第六行：供应商邮箱、纠正措施请求、收集/批次号 -->
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">供应商邮箱：</div>
+            <div class="value">{{ detailData.supplierEmail }}</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">纠正措施请求：</div>
+            <div class="value">{{ formatCaRequest(detailData.caRequest) }}</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="form-item">
+            <div class="label">收集/批次号：</div>
+            <div class="value">{{ detailData.collectionBatch }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第七行：问题描述（全宽） -->
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <div class="form-item textarea-item">
+            <div class="label">问题描述：</div>
+            <div class="value textarea-content">{{ detailData.problem }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第八行：备注（全宽） -->
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <div class="form-item textarea-item">
+            <div class="label">备注：</div>
+            <div class="value textarea-content">{{ detailData.comments }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第九行：返工信息 -->
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">返工工时：</div>
+            <div class="value">{{ detailData.reworkHours }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">返工费率：</div>
+            <div class="value">{{ detailData.reworkRate }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">返工总成本：</div>
+            <div class="value">{{ detailData.reworkTotal }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">物料成本：</div>
+            <div class="value">{{ detailData.materialCost }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第十行：Created By、Update By、Update Date（可选） -->
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">Created By：</div>
+            <div class="value">{{ detailData.createdBy }}</div>
+          </div>
+        </el-col>
+        <!-- 如需显示 Update By / Update Date，取消注释并调整列宽 -->
+      </el-row>
     </div>
   </div>
 </template>
@@ -195,15 +227,6 @@ export default {
       }
       return dateStr
     },
-    getStatusText (status) {
-      const statusMap = {
-        'Confirmed': '已确认',
-        'Analyzed': '已分析',
-        'Closed': '已关闭',
-        'Cancelled': '已取消'
-      }
-      return statusMap[status] || status
-    },
     formatCaRequest (caRequest) {
       if (caRequest === true || caRequest === 'true' || caRequest === 1 || caRequest === '1') {
         return '是'
@@ -215,13 +238,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.detail-container {
-  padding: 10px;
-  border: 1px solid #e4e7ed;
+.npc-iqc-detail {
+  padding: 10px 15px;
   background: #fff;
-  min-height: 300px;
-  max-height: 100%;
-  overflow-y: auto;
+  border: 1px solid #dcdfe6;
 }
 
 .empty-tip {
@@ -231,62 +251,34 @@ export default {
   padding: 80px 0;
 }
 
-.detail-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  flex-wrap: wrap;
-}
-
-.detail-row.full-width {
-  flex-direction: column;
-  align-items: flex-start;
-
-  .label {
-    margin-bottom: 3px;
-  }
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  min-width: 260px;
-  margin-right: 15px;
-  margin-bottom: 3px;
-}
-
-.detail-item.long {
-  min-width: 380px;
-  flex: 1;
+.form-item {
+  margin-bottom: 15px;
 }
 
-.label {
-  color: #606266;
-  font-size: 12px;
+.form-item .label {
+  font-size: 13px;
   font-weight: 500;
-  white-space: nowrap;
+  color: #606266;
+  margin-bottom: 6px;
+  line-height: 1.2;
 }
 
-.value {
-  flex: 1;
-  min-height: 24px;
-  line-height: 24px;
-  padding: 0 6px;
-  border: 1px solid #dcdfe6;
-  background: #fff;
+.form-item .value {
+  min-height: 32px;
+  line-height: 32px;
+  padding: 0 10px;
+  background-color: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
   color: #303133;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-size: 13px;
+  word-break: break-all;
+  white-space: pre-wrap;
 }
 
-.value.textarea {
-  width: 100%;
-  min-height: 40px;
+.form-item.textarea-item .value.textarea-content {
+  min-height: 60px;
   line-height: 1.5;
-  padding: 6px;
-  white-space: pre-wrap;
-  word-break: break-all;
+  padding: 8px 10px;
 }
 </style>
diff --git a/src/views/modules/quality/com_qualityIssueDetail.vue b/src/views/modules/quality/com_qualityIssueDetail.vue
index 09860e5..1395c52 100644
--- a/src/views/modules/quality/com_qualityIssueDetail.vue
+++ b/src/views/modules/quality/com_qualityIssueDetail.vue
@@ -1,231 +1,425 @@
 <template>
-  <div class="detail-container">
-    <!-- 第一行：反馈单号、问题日期、供应商编码、供应商名称、供应商负责人 -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">反馈单号：</span>
-        <span class="value">{{ detailData.issueNo }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">问题日期：</span>
-        <span class="value">{{ formatDate(detailData.issueDate) }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">供应商编码：</span>
-        <span class="value">{{ detailData.supplierNo }}</span>
-      </div>
-
-      <div class="detail-item long">
-        <span class="label">供应商名称：</span>
-        <span class="value">{{ detailData.supplierName }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">供应商负责人：</span>
-        <span class="value">{{ detailData.supplierResponsible }}</span>
-      </div>
-    </div>
-
-    <!-- 第二行：Plant、Claim No、Product Category、Part No -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">Plant：</span>
-        <span class="value">{{ detailData.plant }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Claim No：</span>
-        <span class="value">{{ detailData.claimNo }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Product Category：</span>
-        <span class="value">{{ detailData.productCategory }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Part No：</span>
-        <span class="value">{{ detailData.partNo }}</span>
-      </div>
-    </div>
-
-    <!-- 新增行：PO No、批次数量、拒收批次数量、投诉接收日期、样品接收日期 -->
-    <div class="detail-row">
-
-      <div class="detail-item">
-        <span class="label">批次数量：</span>
-        <span class="value">{{ detailData.batchQty }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">拒收批次数量：</span>
-        <span class="value">{{ detailData.rejectBatchQty }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">投诉接收日期：</span>
-        <span class="value">{{ formatDate(detailData.receiveComplaintDate) }}</span>
-      </div>
-    </div>
-
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">样品接收日期：</span>
-        <span class="value">{{ formatDate(detailData.receiveSampleDate) }}</span>
-      </div>
-
-      <div class="detail-item long">
-        <span class="label">问题简述：</span>
-        <span class="value">{{ detailData.issueSummary }}</span>
-      </div>
-    </div>
-
-    <!-- 第四行：问题详细描述 -->
-    <div class="detail-row full-width">
-      <span class="label">问题详细描述：</span>
-      <div class="value textarea">{{ detailData.issueDescription }}</div>
-    </div>
-
-    <!-- 第五行：Level、Mode 1、Mode 2、Mode 3、Inspector -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">Level：</span>
-        <span class="value">{{ detailData.levelNo }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Mode 1：</span>
-        <span class="value">{{ detailData.mode1 }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Mode 2：</span>
-        <span class="value">{{ detailData.mode2 }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Mode 3：</span>
-        <span class="value">{{ detailData.mode3 }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">Inspector：</span>
-        <span class="value">{{ detailData.inspector }}</span>
-      </div>
-    </div>
-
-    <!-- 第六行：录入人（回复）、录入时间（回复）、要求回复日期、状态 -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">录入人：</span>
-        <span class="value">{{ detailData.createBy }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">录入时间：</span>
-        <span class="value">{{ detailData.createBy }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">要求回复日期：</span>
-        <span class="value">{{ formatDate(detailData.requireReplyDate) }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">状态：</span>
-        <span class="value">{{ detailData.status }}</span>
-      </div>
+  <div class="quality-issue-detail">
+    <!-- 编辑模式 -->
+    <div v-if="isEditMode" class="edit-form">
+      <!-- 基础信息区 -->
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">反馈单号：</div>
+            <div class="value disabled">{{ detailData.issueNo }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">问题日期：</div>
+            <el-date-picker
+              v-model="editData.issueDate"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              size="small"
+              class="edit-input"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">供应商编码：</div>
+            <div class="value disabled">{{ detailData.supplierNo }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">供应商名称：</div>
+            <div class="value disabled">{{ detailData.supplierName }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">供应商负责人：</div>
+            <el-input v-model="editData.supplierResponsible" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">Plant：</div>
+            <el-input v-model="editData.plant" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">Claim No：</div>
+            <el-input v-model="editData.claimNo" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">Product Category：</div>
+            <el-input v-model="editData.productCategory" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">Part No：</div>
+            <el-input v-model="editData.partNo" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">批次数量：</div>
+            <el-input-number v-model="editData.batchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">拒收批次数量：</div>
+            <el-input-number v-model="editData.rejectBatchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">投诉接收日期：</div>
+            <el-date-picker
+              v-model="editData.receiveComplaintDate"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              size="small"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">样品接收日期：</div>
+            <el-date-picker
+              v-model="editData.receiveSampleDate"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              size="small"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+        <el-col :span="18">
+          <div class="form-item">
+            <div class="label">问题简述：</div>
+            <el-input v-model="editData.issueSummary" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <div class="form-item textarea-item">
+            <div class="label">问题详细描述：</div>
+            <el-input type="textarea" v-model="editData.issueDescription" :rows="3" placeholder="请输入"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <div class="form-item">
+            <div class="label">Level：</div>
+            <el-input v-model="editData.levelNo" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">Mode 1：</div>
+            <el-input v-model="editData.mode1" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">Mode 2：</div>
+            <el-input v-model="editData.mode2" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">Mode 3：</div>
+            <el-input v-model="editData.mode3" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="form-item">
+            <div class="label">Inspector：</div>
+            <el-input v-model="editData.inspector" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">录入人：</div>
+            <div class="value disabled">{{ detailData.createBy }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">录入时间：</div>
+            <div class="value disabled">{{ detailData.createDate }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">要求回复日期：</div>
+            <el-date-picker
+              v-model="editData.requireReplyDate"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              size="small"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">状态：</div>
+            <div class="value disabled">{{ detailData.status }}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <div class="form-item textarea-item">
+            <div class="label">Why Escape：</div>
+            <el-input type="textarea" v-model="editData.whyEscape" :rows="2" placeholder="请输入"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <div class="form-item textarea-item">
+            <div class="label">原因分析：</div>
+            <el-input type="textarea" v-model="editData.analysis" :rows="3" placeholder="请输入"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <div class="form-item textarea-item">
+            <div class="label">后续措施：</div>
+            <el-input type="textarea" v-model="editData.correctiveAction" :rows="3" placeholder="请输入"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">回复人：</div>
+            <el-input v-model="editData.replyBy" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">回复时间：</div>
+            <el-date-picker
+              v-model="editData.replyTime"
+              type="datetime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              placeholder="选择日期时间"
+              size="small"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">录入人(回复)：</div>
+            <el-input v-model="editData.entryBy" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">录入时间(回复)：</div>
+            <el-date-picker
+              v-model="editData.entryDate"
+              type="datetime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              placeholder="选择日期时间"
+              size="small"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 索赔信息区块 -->
+      <div class="claim-section">
+        <div class="claim-title">索赔信息</div>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <div class="form-item">
+              <div class="label">是否被索赔：</div>
+              <el-select v-model="editData.claimFlag" placeholder="请选择" size="small" style="width: 100%">
+                <el-option label="是" value="Y"></el-option>
+                <el-option label="否" value="N"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="form-item">
+              <div class="label">被索赔金额：</div>
+              <el-input-number v-model="editData.claimAmount" :min="0" :precision="2" size="small" controls-position="right" style="width: 100%"></el-input-number>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="form-item">
+              <div class="label">处置备注：</div>
+              <el-input v-model="editData.disposalRemark" placeholder="请输入" size="small"></el-input>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <div class="form-item">
+              <div class="label">录入人(索赔)：</div>
+              <el-input v-model="editData.entryByClaim" placeholder="请输入" size="small"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="form-item">
+              <div class="label">录入时间(索赔)：</div>
+              <el-date-picker
+                v-model="editData.entryDateClaim"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择日期时间"
+                size="small"
+                style="width: 100%">
+              </el-date-picker>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">关闭人：</div>
+            <el-input v-model="editData.closeBy" placeholder="请输入" size="small"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="form-item">
+            <div class="label">关闭时间：</div>
+            <el-date-picker
+              v-model="editData.closeTime"
+              type="datetime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              placeholder="选择日期时间"
+              size="small"
+              style="width: 100%">
+            </el-date-picker>
+          </div>
+        </el-col>
+        <el-col :span="12" style="text-align: right;">
+          <div class="form-item" style="margin-bottom: 0;">
+            <el-button type="primary" size="small" @click="handleSave" :loading="saveLoading">保存</el-button>
+            <el-button size="small" @click="handleCancelEdit">取消</el-button>
+          </div>
+        </el-col>
+      </el-row>
     </div>
 
-    <!-- 第七行：Why Escape -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">Why Escape：</span>
-        <span class="value">{{ detailData.whyEscape }}</span>
-      </div>
-    </div>
-
-    <!-- 第八行：原因分析 -->
-    <div class="detail-row full-width">
-      <span class="label">原因分析：</span>
-      <div class="value textarea">{{ detailData.analysis }}</div>
-    </div>
-
-    <!-- 第九行：后续措施 -->
-    <div class="detail-row full-width">
-      <span class="label">后续措施：</span>
-      <div class="value textarea">{{ detailData.correctiveAction }}</div>
-    </div>
-
-    <!-- 第十行：回复人、回复时间、录入人（回复）、录入时间（回复） -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">回复人：</span>
-        <span class="value">{{ detailData.replyBy }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">回复时间：</span>
-        <span class="value">{{ detailData.replyTime }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">录入人：</span>
-        <span class="value">{{ detailData.entryBy }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">录入时间：</span>
-        <span class="value">{{ detailData.entryDate }}</span>
-      </div>
-    </div>
-
-    <!-- 第十一行：索赔信息 -->
-    <div class="claim-section">
-      <div class="claim-title">索赔信息</div>
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">是否被索赔：</span>
-          <span class="value">{{ detailData.claimFlag === 'Y' ? '是' : '否' }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">被索赔金额：</span>
-          <span class="value">{{ detailData.claimAmount }}</span>
-        </div>
-
-        <div class="detail-item long">
-          <span class="label">处置备注：</span>
-          <span class="value">{{ detailData.disposalRemark }}</span>
-        </div>
-      </div>
-
-      <div class="detail-row">
-        <div class="detail-item">
-          <span class="label">录入人：</span>
-          <span class="value">{{ detailData.entryBy }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="label">录入时间：</span>
-          <span class="value">{{ detailData.entryDate }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- 第十二行：关闭人、关闭时间 -->
-    <div class="detail-row">
-      <div class="detail-item">
-        <span class="label">关闭人：</span>
-        <span class="value">{{ detailData.closeBy }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">关闭时间：</span>
-        <span class="value">{{ detailData.closeTime }}</span>
-      </div>
+    <!-- 查看模式 -->
+    <div v-else>
+      <!-- 保持原有的只读展示布局，但使用相同的栅格结构更整洁 -->
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">反馈单号：</div><div class="value">{{ detailData.issueNo }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">问题日期：</div><div class="value">{{ formatDate(detailData.issueDate) }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">供应商编码：</div><div class="value">{{ detailData.supplierNo }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">供应商名称：</div><div class="value">{{ detailData.supplierName }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">供应商负责人：</div><div class="value">{{ detailData.supplierResponsible }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">Plant：</div><div class="value">{{ detailData.plant }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">Claim No：</div><div class="value">{{ detailData.claimNo }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">Product Category：</div><div class="value">{{ detailData.productCategory }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">Part No：</div><div class="value">{{ detailData.partNo }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">批次数量：</div><div class="value">{{ detailData.batchQty }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">拒收批次数量：</div><div class="value">{{ detailData.rejectBatchQty }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">投诉接收日期：</div><div class="value">{{ formatDate(detailData.receiveComplaintDate) }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">样品接收日期：</div><div class="value">{{ formatDate(detailData.receiveSampleDate) }}</div></div></el-col>
+        <el-col :span="18"><div class="form-item"><div class="label">问题简述：</div><div class="value">{{ detailData.issueSummary }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24"><div class="form-item textarea-item"><div class="label">问题详细描述：</div><div class="value textarea-content">{{ detailData.issueDescription }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="4"><div class="form-item"><div class="label">Level：</div><div class="value">{{ detailData.levelNo }}</div></div></el-col>
+        <el-col :span="5"><div class="form-item"><div class="label">Mode 1：</div><div class="value">{{ detailData.mode1 }}</div></div></el-col>
+        <el-col :span="5"><div class="form-item"><div class="label">Mode 2：</div><div class="value">{{ detailData.mode2 }}</div></div></el-col>
+        <el-col :span="5"><div class="form-item"><div class="label">Mode 3：</div><div class="value">{{ detailData.mode3 }}</div></div></el-col>
+        <el-col :span="5"><div class="form-item"><div class="label">Inspector：</div><div class="value">{{ detailData.inspector }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">录入人：</div><div class="value">{{ detailData.createBy }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">录入时间：</div><div class="value">{{ detailData.createDate }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">要求回复日期：</div><div class="value">{{ formatDate(detailData.requireReplyDate) }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">状态：</div><div class="value">{{ detailData.status }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24"><div class="form-item textarea-item"><div class="label">Why Escape：</div><div class="value textarea-content">{{ detailData.whyEscape }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24"><div class="form-item textarea-item"><div class="label">原因分析：</div><div class="value textarea-content">{{ detailData.analysis }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24"><div class="form-item textarea-item"><div class="label">后续措施：</div><div class="value textarea-content">{{ detailData.correctiveAction }}</div></div></el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">回复人：</div><div class="value">{{ detailData.replyBy }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">回复时间：</div><div class="value">{{ detailData.replyTime }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">录入人(回复)：</div><div class="value">{{ detailData.entryBy }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">录入时间(回复)：</div><div class="value">{{ detailData.entryDate }}</div></div></el-col>
+      </el-row>
+      <div class="claim-section">
+        <div class="claim-title">索赔信息</div>
+        <el-row :gutter="20">
+          <el-col :span="6"><div class="form-item"><div class="label">是否被索赔：</div><div class="value">{{ detailData.claimFlag === 'Y' ? '是' : '否' }}</div></div></el-col>
+          <el-col :span="6"><div class="form-item"><div class="label">被索赔金额：</div><div class="value">{{ detailData.claimAmount }}</div></div></el-col>
+          <el-col :span="12"><div class="form-item"><div class="label">处置备注：</div><div class="value">{{ detailData.disposalRemark }}</div></div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div class="form-item"><div class="label">录入人(索赔)：</div><div class="value">{{ detailData.entryByClaim }}</div></div></el-col>
+          <el-col :span="6"><div class="form-item"><div class="label">录入时间(索赔)：</div><div class="value">{{ detailData.entryDateClaim }}</div></div></el-col>
+        </el-row>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6"><div class="form-item"><div class="label">关闭人：</div><div class="value">{{ detailData.closeBy }}</div></div></el-col>
+        <el-col :span="6"><div class="form-item"><div class="label">关闭时间：</div><div class="value">{{ detailData.closeTime }}</div></div></el-col>
+        <el-col :span="12" style="text-align: right;">
+          <div class="form-item" style="margin-bottom: 0;">
+            <el-button type="primary" size="default" @click="handleEdit" v-if="canEdit" :disabled="isEditMode">修改</el-button>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -233,118 +427,160 @@
 <script>
 export default {
   name: 'QualityIssueDetail',
-
   props: {
     detailData: {
       type: Object,
       default: () => ({})
+    },
+    canEdit: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isEditMode: false,
+      editData: {},
+      saveLoading: false
+    }
+  },
+  watch: {
+    detailData: {
+      handler(newVal) {
+        if (newVal && Object.keys(newVal).length) {
+          this.initEditData()
+        }
+      },
+      immediate: true,
+      deep: true
     }
   },
-
   methods: {
-    // 格式化日期，只显示年月日
-    formatDate (dateStr) {
+    formatDate(dateStr) {
       if (!dateStr) return ''
       // 如果包含时分秒，截取前10位
-      if (dateStr.length > 10) {
-        return dateStr.substring(0, 10)
+      return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
+    },
+    initEditData() {
+      this.editData = {
+        issueDate: this.detailData.issueDate,
+        supplierResponsible: this.detailData.supplierResponsible,
+        plant: this.detailData.plant,
+        claimNo: this.detailData.claimNo,
+        productCategory: this.detailData.productCategory,
+        partNo: this.detailData.partNo,
+        batchQty: this.detailData.batchQty,
+        rejectBatchQty: this.detailData.rejectBatchQty,
+        receiveComplaintDate: this.detailData.receiveComplaintDate,
+        receiveSampleDate: this.detailData.receiveSampleDate,
+        issueSummary: this.detailData.issueSummary,
+        issueDescription: this.detailData.issueDescription,
+        levelNo: this.detailData.levelNo,
+        mode1: this.detailData.mode1,
+        mode2: this.detailData.mode2,
+        mode3: this.detailData.mode3,
+        inspector: this.detailData.inspector,
+        requireReplyDate: this.detailData.requireReplyDate,
+        whyEscape: this.detailData.whyEscape,
+        analysis: this.detailData.analysis,
+        correctiveAction: this.detailData.correctiveAction,
+        replyBy: this.detailData.replyBy,
+        replyTime: this.detailData.replyTime,
+        entryBy: this.detailData.entryBy,
+        entryDate: this.detailData.entryDate,
+        claimFlag: this.detailData.claimFlag,
+        claimAmount: this.detailData.claimAmount,
+        disposalRemark: this.detailData.disposalRemark,
+        entryByClaim: this.detailData.entryByClaim,
+        entryDateClaim: this.detailData.entryDateClaim,
+        closeBy: this.detailData.closeBy,
+        closeTime: this.detailData.closeTime
       }
-      return dateStr
+    },
+    handleEdit() {
+      this.isEditMode = true
+      this.initEditData()
+    },
+    handleCancelEdit() {
+      this.isEditMode = false
+      this.initEditData()
+    },
+    handleSave() {
+      this.saveLoading = true
+      // 触发父组件的保存事件，传递修改后的数据
+      this.$emit('save', this.editData, (success) => {
+        this.saveLoading = false
+        if (success !== false) {
+          this.isEditMode = false
+        }
+      })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-
-.detail-container {
+.quality-issue-detail {
   padding: 10px 15px;
-  border: 1px solid #dcdfe6;
   background: #fff;
+  border: 1px solid #dcdfe6;
 }
 
-.detail-row {
+.form-item {
+  margin-bottom: 15px;
   display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.detail-row.full-width {
   flex-direction: column;
-  align-items: flex-start;
-
-  .label {
-    margin-bottom: 8px;
-  }
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  width: 280px;
-  margin-right: 20px;
 }
 
-.detail-item.long {
-  width: 400px;
-}
-
-.label {
-  color: #606266;
+.form-item .label {
   font-size: 13px;
   font-weight: 500;
-  white-space: nowrap;
+  color: #606266;
+  margin-bottom: 6px;
+  line-height: 1.2;
 }
 
-.value {
-  flex: 1;
-  min-height: 26px;
-  line-height: 26px;
-  padding: 0 8px;
-  border: 1px solid #dcdfe6;
-  background: #fff;
+.form-item .value {
+  min-height: 32px;
+  line-height: 32px;
+  padding: 0 10px;
+  background-color: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
   color: #303133;
   font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  word-break: break-all;
+  white-space: pre-wrap;
 }
 
-.value.textarea {
-  width: 100%;
-  min-height: 50px;
-  line-height: 1.5;
-  padding: 8px;
-  white-space: pre-wrap;
-  word-break: break-all;
+.form-item .value.disabled {
+  background-color: #f5f7fa;
+  color: #909399;
 }
 
-.detail-item.note {
-  flex: 1;
-  margin-right: 0;
+.form-item.textarea-item .value.textarea-content {
+  min-height: 60px;
+  line-height: 1.5;
+  padding: 8px 10px;
 }
 
-.detail-item.note .label {
-  color: #909399;
-  font-weight: normal;
-  font-size: 12px;
+.edit-input {
+  width: 100%;
 }
 
-/* 索赔信息区域样式 */
 .claim-section {
   border: 1px solid #dcdfe6;
   padding: 10px 12px;
-  margin-bottom: 12px;
-  background: #fff;
+  margin: 10px 0;
+  background: #fafafa;
 }
 
 .claim-title {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: #303133;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   padding-left: 8px;
   border-left: 3px solid #409eff;
 }
-
 </style>