6、非草稿状态实验单的原材料清单增删改需增加修改记录

src/api/erf/erf.js

@@ -171,6 +171,11 @@ export const confirmSample = data => createAPI(`/erf/expApply/confirmSample`, 'p
  */
 export const getRawMaterialList = data => createAPI(`/erf/rawMaterial/getRawMaterialList`, 'post', data)
 
+/**
+ * 根据申请单号查询原材料修改记录
+ */
+export const getRawMaterialChangeLogList = data => createAPI(`/erf/rawMaterial/getRawMaterialChangeLogList`, 'post', data)
+
 /**
  * 根据ID查询单条原材料记录
  */

src/views/modules/erf/components/expRawMaterialList.vue

@@ -2,29 +2,54 @@
   <!-- 原材料清单组件 -->
   <div class="raw-material-container">
     <!-- 工具栏 -->
-    <div style="margin-bottom: 10px">
-      <el-button
-        type="primary"
-        size="small"
-        class="add-btn"
-        v-if="canEdit"
-        @click="openAddDialog">
-        新增物料
-      </el-button>
-      <el-button
-        type="primary"
-        size="small"
-        class="reset-btn"
-        v-if="canEdit"
-        :disabled="selectedRows.length === 0"
-        @click="batchDeleteRawMaterial">
-        批量删除
-      </el-button>
-      <span
-        v-if="!disabled && !canEdit"
-        style="margin-left: 8px; color: #909399; font-size: 12px;">
-        仅试验负责人可维护原材料清单
-      </span>
+    <div class="toolbar-row">
+      <div class="toolbar-left">
+        <el-button
+          type="primary"
+          size="small"
+          class="add-btn"
+          v-if="canEdit"
+          @click="openAddDialog">
+          新增物料
+        </el-button>
+        <el-button
+          type="primary"
+          size="small"
+          class="reset-btn"
+          v-if="canEdit"
+          :disabled="selectedRows.length === 0"
+          @click="batchDeleteRawMaterial">
+          批量删除
+        </el-button>
+        <span
+          v-if="!disabled && !canEdit"
+          style="margin-left: 8px; color: #909399; font-size: 12px;">
+          仅试验负责人可维护原材料清单
+        </span>
+        <span
+          v-if="canEdit && shouldRecordChangeLog"
+          style="margin-left: 8px; color: #E6A23C; font-size: 12px;">
+          当前为非草稿状态：原材料增删改将自动记录详细修改日志，可点击右上角“修改记录”查看
+        </span>
+      </div>
+      <div class="toolbar-right" v-if="applyNo">
+        <el-tooltip content="查看原材料修改记录" placement="top">
+          <el-badge
+            :value="changeLogList.length"
+            :max="99"
+            :hidden="changeLogList.length === 0"
+            class="change-log-badge">
+            <el-button
+              type="warning"
+              plain
+              size="small"
+              icon="el-icon-tickets"
+              @click="openChangeLogDrawer">
+              修改记录
+            </el-button>
+          </el-badge>
+        </el-tooltip>
+      </div>
     </div>
 
     <!-- 数据表格 -->
@@ -145,6 +170,106 @@
       </el-table-column>
     </el-table>
 
+    <!-- 原材料修改记录抽屉 -->
+    <el-drawer
+      title="原材料修改记录"
+      :visible.sync="changeLogDrawerVisible"
+      :append-to-body="true"
+      size="55%">
+      <div class="change-log-drawer-body">
+        <div class="change-log-drawer-toolbar">
+          <span class="change-log-count">共 {{ changeLogList.length }} 条</span>
+          <el-button
+            type="text"
+            size="small"
+            :loading="changeLogLoading"
+            @click="loadChangeLogList">
+            刷新
+          </el-button>
+        </div>
+        <el-table
+          :data="changeLogList"
+          v-loading="changeLogLoading"
+          border
+          size="small"
+          class="change-log-table"
+          height="68vh"
+          style="width: 100%">
+
+          <el-table-column type="expand" width="50">
+            <template slot-scope="scope">
+              <div class="log-detail-wrapper">
+                <div class="log-detail-item">
+                  <span class="log-detail-label">详细说明：</span>
+                  <pre class="log-detail-pre">{{ scope.row.detailContent || '-' }}</pre>
+                </div>
+<!--                <div class="log-detail-item" v-if="scope.row.beforeContent">
+                  <span class="log-detail-label">修改前快照：</span>
+                  <pre class="log-detail-pre">{{ scope.row.beforeContent }}</pre>
+                </div>
+                <div class="log-detail-item" v-if="scope.row.afterContent">
+                  <span class="log-detail-label">修改后快照：</span>
+                  <pre class="log-detail-pre">{{ scope.row.afterContent }}</pre>
+                </div>-->
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="createdDate"
+            label="时间"
+            width="160"
+            align="center"
+            header-align="center">
+            <template slot-scope="scope">
+              {{ formatDateTime(scope.row.createdDate) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="operationType"
+            label="操作类型"
+            width="90"
+            align="center"
+            class-name="operation-type-cell"
+            header-align="center">
+            <template slot-scope="scope">
+              <span
+                :class="['operation-type-pill', getOperationTypeClass(scope.row.operationType)]">
+                {{ formatOperationType(scope.row.operationType) || '-' }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="operatorDisplayName"
+            label="操作人"
+            width="120"
+            align="center"
+            header-align="center">
+            <template slot-scope="scope">
+              {{ scope.row.operatorDisplayName || scope.row.operatorUserName || '-' }}
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="applyStatus"
+            label="单据状态"
+            width="90"
+            align="center"
+            header-align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="operationDesc"
+            label="操作摘要"
+            min-width="240"
+            show-overflow-tooltip>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-drawer>
+
     <!-- 新增/编辑弹窗 -->
     <el-dialog
       :title="dialogTitle"
@@ -232,7 +357,7 @@
 </template>
 
 <script>
-import { getRawMaterialList, saveRawMaterial, deleteRawMaterial, batchDeleteRawMaterial, getPartDescByPartNo } from '@/api/erf/erf'
+import { getRawMaterialList, getRawMaterialChangeLogList, saveRawMaterial, deleteRawMaterial, batchDeleteRawMaterial, getPartDescByPartNo } from '@/api/erf/erf'
 import { searchStandardRoutingOperationList } from '@/api/part/standardRoutingOperation'
 
 export default {
@@ -254,6 +379,11 @@ export default {
       type: String,
       default: ''
     },
+    // 当前申请单状态
+    applyStatus: {
+      type: String,
+      default: ''
+    },
     // 试验负责人（显示名）
     projectLeader: {
       type: String,
@@ -276,9 +406,18 @@ export default {
       // 原材料清单数据
       rawMaterialList: [],
 
+      // 原材料修改记录
+      changeLogList: [],
+
       // 表格加载状态
       tableLoading: false,
 
+      // 修改记录加载状态
+      changeLogLoading: false,
+
+      // 修改记录抽屉
+      changeLogDrawerVisible: false,
+
       // 已选中的行
       selectedRows: [],
 
@@ -315,12 +454,17 @@ export default {
 
   mounted() {
     this.loadRawMaterialList()
+    this.loadChangeLogList()
   },
 
   watch: {
     applyNo(newVal) {
       if (newVal) {
         this.loadRawMaterialList()
+        this.loadChangeLogList()
+      } else {
+        this.changeLogList = []
+        this.changeLogDrawerVisible = false
       }
     },
     buNo(newVal, oldVal) {
@@ -360,6 +504,12 @@ export default {
       }
 
       return leaderList.some(item => item === currentUserName || item === currentUserDisplay)
+    },
+    /**
+     * 非草稿状态下需记录详细修改日志
+     */
+    shouldRecordChangeLog() {
+      return !!this.applyStatus && this.applyStatus !== '草稿'
     }
   },
 
@@ -388,6 +538,39 @@ export default {
       })
     },
 
+    /**
+     * 加载原材料修改记录
+     */
+    loadChangeLogList() {
+      if (!this.applyNo) {
+        this.changeLogList = []
+        return
+      }
+
+      this.changeLogLoading = true
+      getRawMaterialChangeLogList({ applyNo: this.applyNo }).then(({data}) => {
+        this.changeLogLoading = false
+        if (data && data.code === 0) {
+          this.changeLogList = data.list || []
+        } else {
+          this.changeLogList = []
+          this.$message.error(data.msg || '查询原材料修改记录失败')
+        }
+      }).catch(() => {
+        this.changeLogLoading = false
+        this.changeLogList = []
+        this.$message.error('查询原材料修改记录异常')
+      })
+    },
+
+    /**
+     * 打开修改记录抽屉
+     */
+    openChangeLogDrawer() {
+      this.changeLogDrawerVisible = true
+      this.loadChangeLogList()
+    },
+
     /**
      * 按BU加载标准工序下拉
      */
@@ -536,6 +719,7 @@ export default {
           this.$message.success('保存成功')
           this.dialogVisible = false
           this.loadRawMaterialList()
+          this.loadChangeLogList()
         } else {
           this.$message.error(data.msg || '保存失败')
         }
@@ -558,6 +742,7 @@ export default {
           if (data && data.code === 0) {
             this.$message.success('删除成功')
             this.loadRawMaterialList()
+            this.loadChangeLogList()
           } else {
             this.$message.error(data.msg || '删除失败')
           }
@@ -587,6 +772,7 @@ export default {
           if (data && data.code === 0) {
             this.$message.success('删除成功')
             this.loadRawMaterialList()
+            this.loadChangeLogList()
             this.selectedRows = []
           } else {
             this.$message.error(data.msg || '删除失败')
@@ -629,6 +815,49 @@ export default {
      */
     handleSelectionChange(selection) {
       this.selectedRows = selection
+    },
+
+    /**
+     * 格式化时间
+     */
+    formatDateTime(dateValue) {
+      if (!dateValue) {
+        return '-'
+      }
+      if (typeof dateValue === 'string') {
+        return dateValue
+      }
+      const date = new Date(dateValue)
+      if (isNaN(date.getTime())) {
+        return '-'
+      }
+      const y = date.getFullYear()
+      const m = String(date.getMonth() + 1).padStart(2, '0')
+      const d = String(date.getDate()).padStart(2, '0')
+      const hh = String(date.getHours()).padStart(2, '0')
+      const mm = String(date.getMinutes()).padStart(2, '0')
+      const ss = String(date.getSeconds()).padStart(2, '0')
+      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+    },
+
+    /**
+     * 操作类型对应样式
+     */
+    getOperationTypeClass(operationType) {
+      const operation = this.formatOperationType(operationType)
+      const classMap = {
+        '新增': 'operation-type-add',
+        '删除': 'operation-type-delete',
+        '修改': 'operation-type-edit'
+      }
+      return classMap[operation] || 'operation-type-default'
+    },
+
+    /**
+     * 标准化操作类型
+     */
+    formatOperationType(operationType) {
+      return operationType ? String(operationType).trim() : ''
     }
   }
 }
@@ -640,6 +869,130 @@ export default {
   background-color: #ffffff;
 }
 
+.toolbar-row {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.change-log-badge {
+  margin-right: 2px;
+}
+
+.change-log-drawer-body {
+  padding: 0 16px 12px 16px;
+}
+
+.change-log-drawer-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.change-log-count {
+  color: #606266;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* 覆盖全局 .el-table .cell 固定14px，避免操作类型被上下裁切 */
+.change-log-table >>> td.operation-type-cell .cell {
+  height: auto !important;
+  line-height: 20px !important;
+  overflow: visible !important;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.operation-type-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 20px;
+  line-height: 16px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.operation-type-add {
+  background: #f0f9eb;
+  color: #67c23a;
+  border: 1px solid #c2e7b0;
+}
+
+.operation-type-delete {
+  background: #fef0f0;
+  color: #f56c6c;
+  border: 1px solid #f5bcbc;
+}
+
+.operation-type-edit {
+  background: #fdf6ec;
+  color: #e6a23c;
+  border: 1px solid #f5dab1;
+}
+
+.operation-type-default {
+  background: #f4f4f5;
+  color: #909399;
+  border: 1px solid #e9e9eb;
+}
+
+.log-detail-wrapper {
+  padding: 8px 12px;
+  background: #fafafa;
+}
+
+.log-detail-item {
+  margin-bottom: 8px;
+}
+
+.log-detail-item:last-child {
+  margin-bottom: 0;
+}
+
+.log-detail-label {
+  display: inline-block;
+  margin-bottom: 4px;
+  color: #606266;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.log-detail-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 2px;
+  padding: 6px 8px;
+  color: #606266;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 /* 按钮样式 - 与附件上传保持一致 */
 .add-btn {
   background-color: #F0F9FF;

src/views/modules/erf/expApplyList.vue

@@ -135,7 +135,7 @@
 
       <el-table-column
         label="操作"
-        width="150"
+        width="100"
         align="center"
         header-align="center">
         <template slot-scope="scope">
@@ -329,6 +329,7 @@
           :apply-no="currentRow.applyNo"
           :site="currentRow.site || $store.state.user.site"
           :buNo="currentRow.buNo"
+          :apply-status="currentRow.status"
           :project-leader="currentRow.projectLeader"
           :project-leader-name="currentRow.projectLeaderName"
           :disabled="currentRow.status === '已完成' || currentRow.status === '已取消'"