feat(quality): 移除质量问题详情编辑功能并优化界面显示

- 删除了质量问题详情页面的编辑模式相关代码
- 移除了编辑表单的所有输入控件和编辑逻辑
- 保留只读展示模式的栅格布局结构
- 添加CSS样式隐藏修改按钮
- 在列表页面集成详情保存功能并实现更新接口调用
- 重构数据处理逻辑以支持只读展示模式

src/views/modules/quality/com_qualityIssueDetail.vue

@@ -1,355 +1,6 @@
 <template>
   <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">
-          <div class="form-item btn-form-item">  <!-- 新增 btn-form-item 类 -->
-            <div class="label" style="opacity: 0;">占位</div>  <!-- 透明占位，保持与左侧标签高度一致 -->
-            <div class="btn-area">
-              <el-button type="primary" size="small" @click="handleSave">保存</el-button>
-              <el-button size="small" @click="handleCancelEdit">取消</el-button>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-    </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>
@@ -427,7 +78,6 @@
           </div>
         </el-col>
       </el-row>
-    </div>
   </div>
 </template>
 
@@ -445,82 +95,13 @@ export default {
     }
   },
   data() {
-    return {
-      isEditMode: false,
-      editData: {},
-      saveLoading: false
-    }
-  },
-  watch: {
-    detailData: {
-      handler(newVal) {
-        if (newVal && Object.keys(newVal).length) {
-          this.initEditData()
-        }
-      },
-      immediate: true,
-      deep: true
-    }
+    return {}
   },
   methods: {
     formatDate(dateStr) {
       if (!dateStr) return ''
       // 如果包含时分秒，截取前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
-      }
-    },
-    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
-        }
-      })
     }
   }
 }
@@ -788,6 +369,11 @@ export default {
   min-width: 80px;
 }
 
+/* 隐藏修改按钮 */
+.btn-area .el-button--primary {
+  display: none;
+}
+
 .claim-section /deep/ .el-select {
   width: 100%;
 }

src/views/modules/quality/qualityIssueList.vue

@@ -134,7 +134,9 @@
     <el-tabs v-model="activeTab" :style="{marginTop: '10px', width: '100%'}" @tab-click="handleTabClick" class="customer-tab" type="border-card">
       <!-- 详情 -->
       <el-tab-pane label="详情" name="detail">
-        <quality-issue-detail :detail-data="currentRow" />
+        <quality-issue-detail 
+          :detail-data="currentRow" 
+          @save="handleSaveDetail" />
       </el-tab-pane>
 <!--PO列表-->
       <el-tab-pane label="PO列表" name="po">
@@ -1222,6 +1224,41 @@ export default {
       this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {}
     },
 
+    // 保存详情（从子组件触发）
+    handleSaveDetail (editData, callback) {
+      if (!this.currentRow || !this.currentRow.issueNo) {
+        this.$message.warning('请选择要保存的数据')
+        callback && callback(false)
+        return
+      }
+
+      // 构建提交数据，合并当前行的原始数据和编辑后的数据
+      const submitData = {
+        site: this.currentRow.site,
+        issueNo: this.currentRow.issueNo,
+        ...editData
+      }
+
+      console.log('保存详情数据：', submitData)
+
+      updateQualityIssue(submitData).then(({ data }) => {
+        console.log('更新接口返回：', data)
+        if (data.code === 0) {
+          this.$message.success('保存成功')
+          // 刷新列表和详情
+          this.getMainData()
+          callback && callback(true)
+        } else {
+          this.$message.error(data.msg || '保存失败')
+          callback && callback(false)
+        }
+      }).catch((error) => {
+        console.error('保存接口错误：', error)
+        this.$message.error('保存失败，请稍后重试')
+        callback && callback(false)
+      })
+    },
+
     // 新增质量问题
     addQualityIssue () {
       this.addDialogVisible = true