From 0d21be70e3c5d8d8c8c322413d43bcaea36d946b Mon Sep 17 00:00:00 2001
From: qiankanghui <kanghui.qian@xujiesoft.com>
Date: Fri, 29 May 2026 10:28:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(inspection):=20=E4=B8=BA=E6=A3=80=E9=AA=8C?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在详情页面添加了编辑模式和查看模式切换功能
- 实现了检验申请信息的在线编辑和保存功能
- 添加了修改按钮，仅在草稿状态下可编辑
- 集成了日期选择器和输入框的表单控件
- 实现了保存验证和错误处理机制
- 添加了编辑表单的样式和布局优化
- 新增了更新检验申请的API接口
- 在列表页面集成更新成功后的数据刷新机制
---
 src/api/inspection/inspectionRequestHeader.js |   3 +
 .../com_inspectionRequestDetail.vue           | 411 ++++++++++++++----
 .../inspection/inspectionRequestList.vue      |   2 +-
 3 files changed, 329 insertions(+), 87 deletions(-)

diff --git a/src/api/inspection/inspectionRequestHeader.js b/src/api/inspection/inspectionRequestHeader.js
index 4bfb1b4..6b2468e 100644
--- a/src/api/inspection/inspectionRequestHeader.js
+++ b/src/api/inspection/inspectionRequestHeader.js
@@ -48,3 +48,6 @@ export const getQcPersonList = (data) => createAPI(`/inspection/getQcPersonList`
 
 // 查询排程视图
 export const getScheduleView = (qcOperator) => createAPI(`/inspection/scheduleView?qcOperator=${qcOperator}`, 'get')
+
+// 修改验货申请（仅允许修改建议验货日期、验货地址和联系人）
+export const updateInspectionRequest = (data) => createAPI(`/inspection/update`, 'post', data)
diff --git a/src/views/modules/inspection/com_inspectionRequestDetail.vue b/src/views/modules/inspection/com_inspectionRequestDetail.vue
index a5ffd62..adb8f0e 100644
--- a/src/views/modules/inspection/com_inspectionRequestDetail.vue
+++ b/src/views/modules/inspection/com_inspectionRequestDetail.vue
@@ -1,113 +1,222 @@
 <template>
   <div class="detail-container">
-
-    <!-- 第一行 -->
-    <div class="detail-row">
-
-      <div class="detail-item">
-        <span class="label">申请单号：</span>
-        <span class="value">{{ detailData.requestNo }}</span>
-      </div>
-
-      <div class="detail-item">
-        <span class="label">申请日期：</span>
-        <span class="value">{{ formatDate(detailData.requestDate) }}</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="header-buttons">
+      <el-button
+        type="primary"
+        size="default"
+        @click="handleEdit"
+        v-if="isDraftStatus"
+        :disabled="isEditMode">
+        修改
+      </el-button>
     </div>
 
-    <!-- 第二行 -->
-    <div class="detail-row">
-
-      <div class="detail-item address">
-        <span class="label">验货地址：</span>
-        <span class="value">
-          {{ detailData.inspectAddress }}
-        </span>
+    <!-- 修改模式下的编辑表单 -->
+    <div v-if="isEditMode" class="edit-form">
+      <!-- 第一行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">申请单号：</span>
+          <span class="value disabled">{{ detailData.requestNo }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">申请日期：</span>
+          <span class="value disabled">{{ formatDate(detailData.requestDate) }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">供应商编码：</span>
+          <span class="value disabled">{{ detailData.supplierNo }}</span>
+        </div>
+
+        <div class="detail-item long">
+          <span class="label">供应商名称：</span>
+          <span class="value disabled">{{ detailData.supplierName }}</span>
+        </div>
       </div>
 
-      <div class="detail-item long">
-        <span class="label">联系人：</span>
-        <span class="value">
-          {{ detailData.inspectContract }}
-        </span>
+      <!-- 第二行 -->
+      <div class="detail-row">
+        <div class="detail-item address">
+          <span class="label">验货地址：</span>
+          <el-input
+            v-model="editData.inspectAddress"
+            placeholder="请输入验货地址"
+            size="small"
+            class="edit-input">
+          </el-input>
+        </div>
+
+        <div class="detail-item long">
+          <span class="label">联系人：</span>
+          <el-input
+            v-model="editData.inspectContract"
+            placeholder="请输入联系人"
+            size="small"
+            class="edit-input">
+          </el-input>
+        </div>
       </div>
 
-    </div>
-
-    <!-- 第三行 -->
-    <div class="detail-row">
-
-      <div class="detail-item">
-        <span class="label">申请录入人：</span>
-        <span class="value">{{ detailData.createBy }}</span>
+      <!-- 第三行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">申请录入人：</span>
+          <span class="value disabled">{{ detailData.createBy }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">申请录入时间：</span>
+          <span class="value disabled">{{ detailData.createDate }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">建议验货日期：</span>
+          <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>
+        </div>
       </div>
 
-      <div class="detail-item">
-        <span class="label">申请录入时间：</span>
-        <span class="value">{{ detailData.createDate }}</span>
+      <!-- 第四行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">排程人：</span>
+          <span class="value disabled">{{ detailData.scheduledBy || ' ' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">排程时间：</span>
+          <span class="value disabled">{{ detailData.scheduledDate || ' ' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">状态：</span>
+          <span class="value disabled">{{ detailData.status }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">计划验货日期：</span>
+          <span class="value disabled">{{ detailData.planStartDate || ' ' }}</span>
+        </div>
       </div>
 
-      <div class="detail-item">
-        <span class="label">建议验货日期：</span>
-        <span class="value">
-          {{ formatDate(detailData.needInspectDate) }}
-        </span>
+      <!-- 第五行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">QC：</span>
+          <span class="value disabled">{{ detailData.qcOperator || ' ' }}</span>
+        </div>
       </div>
 
+      <!-- 编辑模式底部按钮 -->
+      <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 class="detail-row">
-
-      <div class="detail-item">
-        <span class="label">排程人：</span>
-        <span class="value">{{ detailData.scheduledBy }}</span>
+    <!-- 查看模式 -->
+    <div v-else>
+      <!-- 第一行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">申请单号：</span>
+          <span class="value">{{ detailData.requestNo }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">申请日期：</span>
+          <span class="value">{{ formatDate(detailData.requestDate) }}</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>
 
-      <div class="detail-item">
-        <span class="label">排程时间：</span>
-        <span class="value">{{ detailData.scheduledDate }}</span>
+      <!-- 第二行 -->
+      <div class="detail-row">
+        <div class="detail-item address">
+          <span class="label">验货地址：</span>
+          <span class="value">{{ detailData.inspectAddress || ' ' }}</span>
+        </div>
+
+        <div class="detail-item long">
+          <span class="label">联系人：</span>
+          <span class="value">{{ detailData.inspectContract || ' ' }}</span>
+        </div>
       </div>
 
-      <div class="detail-item">
-        <span class="label">状态：</span>
-        <span class="value">{{ detailData.status }}</span>
+      <!-- 第三行 -->
+      <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.createDate }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">建议验货日期：</span>
+          <span class="value">{{ formatDate(detailData.needInspectDate) || ' ' }}</span>
+        </div>
       </div>
 
-      <div class="detail-item">
-        <span class="label">计划验货日期：</span>
-        <span class="value">
-          {{ detailData.planStartDate }}
-        </span>
+      <!-- 第四行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">排程人：</span>
+          <span class="value">{{ detailData.scheduledBy || ' ' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">排程时间：</span>
+          <span class="value">{{ detailData.scheduledDate || ' ' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">状态：</span>
+          <span class="value">{{ detailData.status }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">计划验货日期：</span>
+          <span class="value">{{ detailData.planStartDate || ' ' }}</span>
+        </div>
       </div>
 
-    </div>
-
-    <!-- 第五行 -->
-    <div class="detail-row">
-
-      <div class="detail-item">
-        <span class="label">QC：</span>
-        <span class="value">{{ detailData.qcOperator }}</span>
+      <!-- 第五行 -->
+      <div class="detail-row">
+        <div class="detail-item">
+          <span class="label">QC：</span>
+          <span class="value">{{ detailData.qcOperator || ' ' }}</span>
+        </div>
       </div>
-
     </div>
-
   </div>
 </template>
 
 <script>
+import { updateInspectionRequest } from '@/api/inspection/inspectionRequestHeader.js'
+
 export default {
   name: 'InspectionRequestDetail',
 
@@ -118,32 +227,131 @@ export default {
     }
   },
 
+  data() {
+    return {
+      isEditMode: false,
+      saveLoading: false,
+      editData: {
+        requestNo: '',
+        needInspectDate: '',
+        inspectAddress: '',
+        inspectContract: ''
+      }
+    }
+  },
+
+  computed: {
+    // 判断是否为草稿状态
+    isDraftStatus() {
+      const status = this.detailData.status || this.detailData.statusDb || ''
+      return status === 'Draft' || status === 'draft' || 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) {
+    formatDate(dateStr) {
       if (!dateStr) return ''
-      // 如果包含时分秒，截取前10位
       if (dateStr.length > 10) {
         return dateStr.substring(0, 10)
       }
       return dateStr
+    },
+
+    handleEdit() {
+      this.editData = {
+        requestNo: this.detailData.requestNo,
+        needInspectDate: this.detailData.needInspectDate,
+        inspectAddress: this.detailData.inspectAddress,
+        inspectContract: this.detailData.inspectContract
+      }
+      this.isEditMode = true
+    },
+
+    handleCancelEdit() {
+      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
+      }
+
+      this.saveLoading = true
+      try {
+        const submitData = {
+          requestNo: this.editData.requestNo,
+          needInspectDate: this.editData.needInspectDate,
+          inspectAddress: this.editData.inspectAddress,
+          inspectContract: this.editData.inspectContract
+        }
+
+        await updateInspectionRequest(submitData)
+        this.$message.success('修改成功')
+
+        // 触发父组件刷新主表数据
+        this.$emit('update-success')  // ← 已经有了，确保这行存在
+
+        // 退出编辑模式
+        this.isEditMode = false
+
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(error.message || '修改失败，请稍后重试')
+      } finally {
+        this.saveLoading = false
+      }
     }
   }
 }
 </script>
-
 <style scoped lang="scss">
 
 .detail-container {
-  padding: 15px 20px;
+  padding: 10px 20px;  // 从15px改为10px
   border: 1px solid #dcdfe6;
   background: #fff;
+  position: relative;
+}
+
+// 左上角按钮区域
+.header-buttons {
+  position: absolute;
+  top: 10px;  // 从15px改为10px，与padding保持一致
+  right: 20px;
+  display: flex;
+  gap: 10px;
 }
 
 .detail-row {
   display: flex;
   align-items: center;
-  margin-bottom: 18px;
+  margin-bottom: 8px;  // 从18px改为8px
+  flex-wrap: wrap;
 }
 
 .detail-item {
@@ -151,6 +359,7 @@ export default {
   align-items: center;
   width: 300px;
   margin-right: 30px;
+  margin-bottom: 6px;  // 从10px改为6px
 }
 
 .detail-item.long {
@@ -166,6 +375,7 @@ export default {
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
+  min-width: 85px;
 }
 
 .value {
@@ -182,4 +392,33 @@ export default {
   white-space: nowrap;
 }
 
+.value.disabled {
+  background: #f5f7fa;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.edit-input {
+  flex: 1;
+
+  /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;  // 从20px改为15px
+  padding-top: 12px;  // 从15px改为12px
+  border-top: 1px solid #ebeef5;
+}
+
 </style>
diff --git a/src/views/modules/inspection/inspectionRequestList.vue b/src/views/modules/inspection/inspectionRequestList.vue
index cea8c88..d9db620 100644
--- a/src/views/modules/inspection/inspectionRequestList.vue
+++ b/src/views/modules/inspection/inspectionRequestList.vue
@@ -123,7 +123,7 @@
     <el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card">
       <!-- 基本信息 -->
       <el-tab-pane label="基本信息" name="base">
-        <inspection-request-detail :detail-data="currentRow" />
+        <inspection-request-detail :detail-data="currentRow" @update-success="getMainData"/>
       </el-tab-pane>
       <!-- 验货明细 -->
       <el-tab-pane label="验货明细" name="detail">