refactor(追溯查询): 重构追溯查询页面代码并优化质量检验记录展示

- 将搜索表单字段名从traceCode/assemblyCode改为partSn/productionSn以匹配后端接口
- 重构数据映射逻辑，使用通用mapTraceDataItem函数处理API响应
- 优化质量检验记录展示，新增打螺丝标签页并完善折叠台和终检台表格
- 为终检台表格添加横向滚动支持以展示更多字段
- 统一状态标签样式，优化表格样式和响应式布局

src/views/menu/trace/index.vue

@@ -3,19 +3,19 @@
     <div class="trace-header">
       <h1>产线追溯信息查询</h1>
     </div>
-    
+
     <!-- 搜索表单 -->
     <div class="trace-search-form">
       <el-form ref="searchFormRef" :model="searchForm" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="追溯码">
-              <el-input v-model="searchForm.traceCode" placeholder="请输入追溯码" />
+              <el-input v-model="searchForm.partSn" placeholder="请输入追溯码" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="总成码">
-              <el-input v-model="searchForm.assemblyCode" placeholder="请输入总成码" />
+              <el-input v-model="searchForm.productionSn" placeholder="请输入总成码" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
@@ -29,18 +29,12 @@
             </el-form-item>
           </el-col>
         </el-row>
-        
+
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="时间区间">
-              <el-date-picker
-                v-model="searchForm.dateRange"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                value-format="YYYY-MM-DD"
-              />
+              <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
             </el-form-item>
           </el-col>
           <el-col :span="12" class="form-actions">
@@ -58,7 +52,7 @@
         <div class="loading-spinner"></div>
         <span>加载中...</span>
       </div>
-      
+
       <!-- 原生表格 -->
       <table class="native-table" v-else>
         <thead>
@@ -81,7 +75,7 @@
             <td>{{ row.projectCode }}</td>
             <td>{{ row.productionCode }}</td>
             <td>{{ row.productionName }}</td>
-             <td>{{ row.specification }}</td>
+            <td>{{ row.specification }}</td>
             <td>{{ row.productionSn }}</td>
             <td>{{ row.partSn }}</td>
             <td>
@@ -99,25 +93,14 @@
 
       <!-- 分页 -->
       <div class="pagination-container">
-        <el-pagination
-          v-model:current-page="pagination.currentPage"
-          v-model:page-size="pagination.pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="pagination.total"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
       </div>
     </div>
 
     <!-- 详情对话框 -->
-    <el-dialog
-      v-model="detailDialogVisible"
-      title="追溯详情"
-      width="70%"
-      :before-close="handleClose"
-    >
+    <el-dialog v-model="detailDialogVisible" title="追溯详情" width="90%" :before-close="handleClose">
       <div v-if="currentTraceData" class="detail-content">
         <!-- 基本信息 -->
         <div class="basic-info-section">
@@ -125,11 +108,11 @@
             <div class="info-row">
               <div class="info-item">
                 <div class="info-label">追溯码</div>
-                <div class="info-value trace-code">{{ currentTraceData.traceCode }}</div>
+                <div class="info-value trace-code">{{ currentTraceData.partSn }}</div>
               </div>
               <div class="info-item">
                 <div class="info-label">总成码</div>
-                <div class="info-value">{{ currentTraceData.assemblyCode }}</div>
+                <div class="info-value">{{ currentTraceData.productionSn }}</div>
               </div>
             </div>
             <div class="info-row">
@@ -139,7 +122,8 @@
               </div>
               <div class="info-item">
                 <div class="info-label">状态</div>
-                <div class="info-value status-badge" :data-status="currentTraceData.status">{{ currentTraceData.status }}</div>
+                <div class="info-value status-badge" :data-status="currentTraceData.status">{{ currentTraceData.status
+                }}</div>
               </div>
             </div>
           </div>
@@ -149,7 +133,8 @@
         <el-tabs v-model="activeTab" type="card">
           <!-- 子零件标签页 -->
           <el-tab-pane label="子零件" name="subpart">
-            <div v-if="currentTraceData.subPartScanRecords && currentTraceData.subPartScanRecords.length > 0" class="sub-part-table-container">
+            <div v-if="currentTraceData.subPartScanRecords && currentTraceData.subPartScanRecords.length > 0"
+              class="sub-part-table-container">
               <table class="sub-part-table">
                 <thead>
                   <tr>
@@ -157,7 +142,7 @@
                     <th>子零件名称</th>
                     <th>规格</th>
                     <th>子零件编码</th>
-                    <th>返工状态</th>
+                    <th>记录类型</th>
                     <th>创建时间</th>
                   </tr>
                 </thead>
@@ -179,30 +164,110 @@
             </div>
             <div v-else class="no-data">暂无子零件记录</div>
           </el-tab-pane>
-          
+
           <!-- 折叠标签页 -->
           <el-tab-pane label="折叠台" name="fold">
-              <div v-if="getQualityRecordsByType('折叠').length > 0" class="quality-table-container">
+            <div v-if="getQualityRecordsByType('zd').length > 0" class="quality-table-container">
+              <table class="quality-table">
+                <thead>
+                  <tr>
+                    <th>记录类型</th>
+                    <th>测试结果</th>
+                    <th>正向最大扭矩</th>
+                    <th>负向最大扭矩</th>
+                    <th>扭矩最大值上限</th>
+                    <th>扭矩最大值下限</th>
+                    <th>扭矩最小值上限</th>
+                    <th>扭矩最小值下限</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(record, index) in getQualityRecordsByType('zd')" :key="index">
+                    <td>
+                      <span :class="['status-tag', record.isBack === 0 ? '' : 'danger']">
+                        {{ record.isBack === 0 ? '正常' : '返工' }}
+                      </span>
+                    </td>
+                    <td>
+                      <span :class="['status-tag', record.value01 === '0' ? 'success' : 'danger']">
+                        {{ record.value01 === "0" ? 'OK' : 'NG' }}
+                      </span>
+                    </td>
+                    <td>{{ record.value02 || '-' }}</td>
+                    <td>{{ record.value03 || '-' }}</td>
+                    <td>{{ record.value04 || '-' }}</td>
+                    <td>{{ record.value05 || '-' }}</td>
+                    <td>{{ record.value06 || '-' }}</td>
+                    <td>{{ record.value07 || '-' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div v-else class="no-data">暂无折叠检验记录</div>
+          </el-tab-pane>
+
+          <!-- 终检台标签页 -->
+          <el-tab-pane label="终检台" name="final">
+            <div v-if="getQualityRecordsByType('eol').length > 0" class="quality-table-container">
+              <!-- 添加横向滚动容器 -->
+              <div class="scrollable-table-wrapper">
                 <table class="quality-table">
                   <thead>
                     <tr>
-                      <th>返工状态</th>
-                      <th>value01</th>
-                      <th>value02</th>
-                      <th>value03</th>
-                      <th>value04</th>
-                      <th>value05</th>
-                      <th>value06</th>
-                      <th>value07</th>
-                      <th>value08</th>
-                      <th>value09</th>
-                      <th>value10</th>
+                      <th>记录类型</th>
+                      <th>结果</th>
+                      <th>A向角度</th>
+                      <th>A向时间</th>
+                      <th>A向电阻</th>
+                      <th>B向角度</th>
+                      <th>B向时间</th>
+                      <th>B向电阻</th>
+                      <th>AB向电流</th>
+                      <th>AB向卡流</th>
+                      <th>C向角度</th>
+                      <th>C向时间</th>
+                      <th>C向电阻</th>
+                      <th>D向角度</th>
+                      <th>D向时间</th>
+                      <th>D向电阻</th>
+                      <th>CD向电流</th>
+                      <th>CD向卡流</th>
+                      <th>折叠电流</th>
+                      <th>折叠卡流</th>
+                      <th>电加热电流</th>
+                      <th>转向灯点亮</th>
+                      <th>转向灯电流</th>
+                      <th>照地灯电流</th>
+                      <th>SWA</th>
+                      <th>A摄像头</th>
+                      <th>B摄像头</th>
+                      <th>镜面拉脱力</th>
+                      <th>EC</th>
+                      <!-- 新增字段 -->
+                      <th>折叠运行时间</th>
+                      <th>展开运行时间</th>
+                      <th>展开堵转电流</th>
+                      <th>展开运行时间</th>
+                      <th>温度</th>
+                      <th>展CMS摄像头</th>
+                      <th>360摄像头</th>
+                      <th>盲区摄像头</th>
+                      <th>展开到位</th>
+                      <th>折叠到位</th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr v-for="(record, index) in getQualityRecordsByType('折叠')" :key="index">
-                      <td>{{ record.isBack === '0'?'正常':'返工' }}</td>
-                      <td>{{ record.value01 || '-' }}</td>
+                    <tr v-for="(record, index) in getQualityRecordsByType('eol')" :key="index">
+                      <td>
+                        <span :class="['status-tag', record.isBack === 0 ? '' : 'danger']">
+                          {{ record.isBack === 0 ? '正常' : '返工' }}
+                        </span>
+                      </td>
+                      <td>
+                        <span :class="['status-tag', record.value01 === '0' ? 'success' : 'danger']">
+                          {{ record.value01 === "0" ? 'OK' : 'NG' }}
+                        </span>
+                      </td>
                       <td>{{ record.value02 || '-' }}</td>
                       <td>{{ record.value03 || '-' }}</td>
                       <td>{{ record.value04 || '-' }}</td>
@@ -212,52 +277,76 @@
                       <td>{{ record.value08 || '-' }}</td>
                       <td>{{ record.value09 || '-' }}</td>
                       <td>{{ record.value10 || '-' }}</td>
+                      <td>{{ record.value11 || '-' }}</td>
+                      <td>{{ record.value12 || '-' }}</td>
+                      <td>{{ record.value13 || '-' }}</td>
+                      <td>{{ record.value14 || '-' }}</td>
+                      <td>{{ record.value15 || '-' }}</td>
+                      <td>{{ record.value16 || '-' }}</td>
+                      <td>{{ record.value17 || '-' }}</td>
+                      <td>{{ record.value18 || '-' }}</td>
+                      <td>{{ record.value19 || '-' }}</td>
+                      <td>{{ record.value20 || '-' }}</td>
+                      <td>{{ record.value21 || '-' }}</td>
+                      <td>{{ record.value22 || '-' }}</td>
+                      <td>{{ record.value23 || '-' }}</td>
+                      <td>{{ record.value24 || '-' }}</td>
+                      <td>{{ record.value25 || '-' }}</td>
+                      <td>{{ record.value26 || '-' }}</td>
+                      <td>{{ record.value27 || '-' }}</td>
+                      <td>{{ record.value28 || '-' }}</td>
+                      <!-- 新增字段展示 -->
+                      <td>{{ record.value29 || '-' }}</td>
+                      <td>{{ record.value30 || '-' }}</td>
+                      <td>{{ record.value31 || '-' }}</td>
+                      <td>{{ record.value32 || '-' }}</td>
+                      <td>{{ record.value33 || '-' }}</td>
+                      <td>{{ record.value34 || '-' }}</td>
+                      <td>{{ record.value35 || '-' }}</td>
+                      <td>{{ record.value36 || '-' }}</td>
+                      <td>{{ record.value37 || '-' }}</td>
+                      <td>{{ record.value38 || '-' }}</td>
                     </tr>
                   </tbody>
                 </table>
               </div>
-              <div v-else class="no-data">暂无折叠检验记录</div>
-            </el-tab-pane>
-            
-            <!-- 终检台标签页 -->
-            <el-tab-pane label="终检台" name="final">
-              <div v-if="getQualityRecordsByType('终检台').length > 0" class="quality-table-container">
-                <table class="quality-table">
-                  <thead>
-                    <tr>
-                      <th>返工状态</th>
-                      <th>value01</th>
-                      <th>value02</th>
-                      <th>value03</th>
-                      <th>value04</th>
-                      <th>value05</th>
-                      <th>value06</th>
-                      <th>value07</th>
-                      <th>value08</th>
-                      <th>value09</th>
-                      <th>value10</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="(record, index) in getQualityRecordsByType('终检台')" :key="index">
-                      <td>{{ record.isBack === '0'?'正常':'返工' }}</td>
-                      <td>{{ record.value01 || '-' }}</td>
-                      <td>{{ record.value02 || '-' }}</td>
-                      <td>{{ record.value03 || '-' }}</td>
-                      <td>{{ record.value04 || '-' }}</td>
-                      <td>{{ record.value05 || '-' }}</td>
-                      <td>{{ record.value06 || '-' }}</td>
-                      <td>{{ record.value07 || '-' }}</td>
-                      <td>{{ record.value08 || '-' }}</td>
-                      <td>{{ record.value09 || '-' }}</td>
-                      <td>{{ record.value10 || '-' }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <div v-else class="no-data">暂无终检台检验记录</div>
-            </el-tab-pane>
-          </el-tabs>
+            </div>
+            <div v-else class="no-data">暂无终检台检验记录</div>
+          </el-tab-pane>
+
+          <!-- 打螺丝标签页 -->
+          <el-tab-pane label="打螺丝" name="dls">
+            <div v-if="getQualityRecordsByType('dls').length > 0" class="quality-table-container">
+              <table class="quality-table">
+                <thead>
+                  <tr>
+                    <th>记录类型</th>
+                    <th>结果</th>
+                    <th>扭矩</th>
+                    <th>角度</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(record, index) in getQualityRecordsByType('dls')" :key="index">
+                    <td>
+                      <span :class="['status-tag', record.isBack === 0 ? '' : 'danger']">
+                        {{ record.isBack === 0 ? '正常' : '返工' }}
+                      </span>
+                    </td>
+                    <td>
+                      <span :class="['status-tag', record.value01 === '0' ? 'success' : 'danger']">
+                        {{ record.value01 === "0" ? 'OK' : 'NG' }}
+                      </span>
+                    </td>
+                    <td>{{ record.value02 || '-' }}</td>
+                    <td>{{ record.value03 || '-' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div v-else class="no-data">暂无打螺丝检验记录</div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </el-dialog>
   </div>
@@ -293,7 +382,7 @@ interface SubPartScanRecord {
 // 定义质量检验记录接口
 interface QualityInspectionRecord {
   qcType: string;
-  isBack: string;
+  isBack: number;
   value01?: string;
   value02?: string;
   value03?: string;
@@ -334,19 +423,17 @@ interface QualityInspectionRecord {
   value38?: string;
   value39?: string;
   value40?: string;
-  [key: string]: string | undefined;
+  [key: string]: string | number | undefined;
 }
 
 // 定义追溯数据接口
 interface TraceData {
-  traceCode: string;
-  assemblyCode: string;
+  partSn: string;
+  productionSn: string;
   projectCode: string;
   subPartScanCode: string;
   productCode: string;
   productionCode: string;
-  productionSn: string;
-  partSn: string;
   productName: string;
   productionName: string;
   specification: string;
@@ -368,8 +455,8 @@ interface TraceData {
 
 // 搜索表单数据
 const searchForm = reactive({
-  traceCode: '',
-  assemblyCode: '',
+  partSn: '',
+  productionSn: '',
   projectCode: '',
   subPartScanCode: '',
   dateRange: null as [string, string] | null
@@ -396,7 +483,7 @@ const getQualityRecordsByType = (type: string) => {
   if (!currentTraceData.value?.qualityInspectionRecords) {
     return [];
   }
-  return currentTraceData.value.qualityInspectionRecords.filter(record => 
+  return currentTraceData.value.qualityInspectionRecords.filter(record =>
     record.qcType === type
   );
 };
@@ -408,6 +495,24 @@ onMounted(() => {
   loadTraceData();
 });
 
+// 通用的数据映射函数
+function mapTraceDataItem(item) {
+  return {
+    id: item.id,
+    projectCode: item.projectCode,
+    productionSn: item.productionSn || '',
+    partSn: item.partSn || '',
+    productName: item.productName || item.specification || '未命名产品',
+    productionName: item.productionName || '未命名产品',
+    specification: item.specification || '',
+    productCode: item.productCode || '',
+    productionCode: item.productionCode || '',
+    createTime: item.createTime || '',
+    result: '合格', // 结果字段，默认显示合格
+    status: '合格' // 状态字段，用于样式判断
+  };
+}
+
 // 加载追溯数据
 async function loadTraceData() {
   loading.value = true;
@@ -415,8 +520,8 @@ async function loadTraceData() {
     const params = {
       pageNum: pagination.currentPage,
       pageSize: pagination.pageSize,
-      ...(searchForm.traceCode && { traceCode: searchForm.traceCode }),
-      ...(searchForm.assemblyCode && { assemblyCode: searchForm.assemblyCode }),
+      ...(searchForm.partSn && { partSn: searchForm.partSn }),
+      ...(searchForm.productionSn && { productionSn: searchForm.productionSn }),
       ...(searchForm.projectCode && { projectCode: searchForm.projectCode }),
       ...(searchForm.subPartScanCode && { subPartScanCode: searchForm.subPartScanCode }),
       ...(searchForm.dateRange && searchForm.dateRange.length === 2 && {
@@ -424,45 +529,11 @@ async function loadTraceData() {
         endTime: dayjs(searchForm.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
       })
     };
-    
+
     const response = await getPartSnList(params);
     if (response.code === 200) {
-      // 映射API返回字段到我们的TraceData结构
       const resultData = response.data?.result || [];
-      traceDataList.value = resultData.map(item => ({
-        // 直接映射的字段
-        id: item.id,
-        projectCode: item.projectCode,
-        // 映射并重命名的字段
-        assemblyCode: item.productionCode || '',
-        traceCode: item.partSn || '',
-        productionTime: item.createTime || '',
-        productName: item.productName || '未命名产品',
-        productionName: item.productionName || '未命名产品',
-        specification: item.specification || '',
-        // 表格中使用的新字段
-        productCode: item.productCode || '',
-        productionCode: item.productionCode || '',
-        productionSn: item.productionSn || '',
-        partSn: item.partSn || '',
-        createTime: item.createTime || '',
-        result: '合格', // 结果字段，默认显示合格
-        // 设置默认值的字段
-        subPartScanCode: '',
-        batchNumber: '',
-        productionLine: '',
-        operator: '',
-        operatorId: '',
-        inspectionTime: '',
-        status: '合格', // 状态字段，默认显示合格
-        inspector: '',
-        remark: '',
-        processSteps: [],
-        subPartScanRecords: [],
-        qualityInspectionRecords: []
-      }));
-      
-      // 更新分页信息
+      traceDataList.value = resultData.map(mapTraceDataItem);
       pagination.total = response.data?.totalNum || 0;
     } else {
       ElMessage.error(response.msg || '获取数据失败');
@@ -486,8 +557,8 @@ async function handleSearch() {
     const params = {
       pageNum: 1,
       pageSize: pagination.pageSize,
-      ...(searchForm.traceCode && { traceCode: searchForm.traceCode }),
-      ...(searchForm.assemblyCode && { assemblyCode: searchForm.assemblyCode }),
+      ...(searchForm.partSn && { partSn: searchForm.partSn }),
+      ...(searchForm.productionSn && { productionSn: searchForm.productionSn }),
       ...(searchForm.projectCode && { projectCode: searchForm.projectCode }),
       ...(searchForm.subPartScanCode && { subPartScanCode: searchForm.subPartScanCode }),
       ...(searchForm.dateRange && searchForm.dateRange.length === 2 && {
@@ -495,48 +566,14 @@ async function handleSearch() {
         endTime: dayjs(searchForm.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
       })
     };
-    
+
     const response = await getPartSnList(params);
     if (response.code === 200) {
-      // 映射API返回字段到我们的TraceData结构
       const resultData = response.data?.result || [];
-      traceDataList.value = resultData.map(item => ({
-        // 直接映射的字段
-        id: item.id,
-        projectCode: item.projectCode,
-        // 映射并重命名的字段
-        assemblyCode: item.productionCode || '',
-        traceCode: item.partSn || '',
-        productionTime: item.createTime || '',
-        productName: item.specification || '未命名产品',
-        productionName: item.productionName || '未命名产品',
-        specification: item.specification || '',
-        // 表格中使用的新字段
-        productCode: item.productCode || '',
-        productionCode: item.productionCode || '',
-        productionSn: item.productionSn || '',
-        partSn: item.partSn || '',
-        createTime: item.createTime || '',
-        result: '合格', // 结果字段，默认显示合格
-        // 设置默认值的字段
-        subPartScanCode: '',
-        batchNumber: '',
-        productionLine: '',
-        operator: '',
-        operatorId: '',
-        inspectionTime: '',
-        status: '合格', // 状态字段，默认显示合格
-        inspector: '',
-        remark: '',
-        processSteps: [],
-        subPartScanRecords: [],
-        qualityInspectionRecords: []
-      }));
-      
-      // 更新分页信息
+      traceDataList.value = resultData.map(mapTraceDataItem);
       pagination.total = response.data?.totalNum || 0;
       pagination.currentPage = 1; // 重置到第一页
-      
+
       if (traceDataList.value.length === 0) {
         ElMessage.info('未找到匹配的数据');
       }
@@ -557,15 +594,15 @@ async function handleSearch() {
 
 // 处理重置
 function handleReset() {
-  searchForm.traceCode = '';
-  searchForm.assemblyCode = '';
+  searchForm.partSn = '';
+  searchForm.productionSn = '';
   searchForm.projectCode = '';
   searchForm.subPartScanCode = '';
   searchForm.dateRange = null;
-  
+
   // 重置分页
   pagination.currentPage = 1;
-  
+
   // 重新加载所有数据
   loadTraceData();
 }
@@ -591,42 +628,55 @@ async function handleViewDetail(row) {
     subPartScanRecords: [], // 初始化空数组
     qualityInspectionRecords: [] // 初始化空数组
   };
-  
+
   try {
     // 获取子零件扫码数据（如果需要）
     const subPartResponse = await getSnSubScanList({ partSn: row.partSn });
-    if (subPartResponse && Array.isArray(subPartResponse.data)) {
-      mergedData.subPartScanRecords = subPartResponse.data;
+    if (subPartResponse?.code === 200 && Array.isArray(subPartResponse.data?.result)) {
+      mergedData.subPartScanRecords = subPartResponse.data.result || [];
     }
   } catch (error) {
     console.warn('获取子零件数据失败:', error);
   }
-  
+
   try {
     // 获取折叠检验数据
     const foldResponse = await getSnQcRecordList({ partSn: row.partSn, qcType: 'zd' });
-    if (foldResponse?.code === 200 && Array.isArray(foldResponse.data)) {
-      mergedData.qualityInspectionRecords = mergedData.qualityInspectionRecords.concat(
-        foldResponse.data.map(item => ({ ...item, qcType: '折叠' }))
-      );
+    if (foldResponse?.code === 200 && Array.isArray(foldResponse.data?.result)) {
+      // 为折叠检验数据添加qcType标识
+      const foldRecords = foldResponse.data.result.map(item => ({ ...item, qcType: 'zd' }));
+      mergedData.qualityInspectionRecords = [...mergedData.qualityInspectionRecords, ...foldRecords];
     }
   } catch (error) {
     console.warn('获取折叠检验数据失败:', error);
   }
-  
+
   try {
     // 获取终检数据
     const finalResponse = await getSnQcRecordList({ partSn: row.partSn, qcType: 'eol' });
-    if (finalResponse?.code === 200 && Array.isArray(finalResponse.data)) {
-      mergedData.qualityInspectionRecords = mergedData.qualityInspectionRecords.concat(
-        finalResponse.data.map(item => ({ ...item, qcType: 'eol' }))
-      );
+    if (finalResponse?.code === 200 && Array.isArray(finalResponse.data?.result)) {
+      // 为终检数据添加qcType标识
+      const finalRecords = finalResponse.data.result.map(item => ({ ...item, qcType: 'eol' }));
+      mergedData.qualityInspectionRecords = [...mergedData.qualityInspectionRecords, ...finalRecords];
     }
   } catch (error) {
     console.warn('获取终检数据失败:', error);
   }
-  
+
+  try {
+    // 获取打螺丝数据
+    const dlsResponse = await getSnQcRecordList({ partSn: row.partSn, qcType: 'dls' });
+    if (dlsResponse?.code === 200 && Array.isArray(dlsResponse.data?.result)) {
+      // 为打螺丝数据添加qcType标识
+      const dlsRecords = dlsResponse.data.result.map(item => ({ ...item, qcType: 'dls' }));
+      mergedData.qualityInspectionRecords = [...mergedData.qualityInspectionRecords, ...dlsRecords];
+    }
+  } catch (error) {
+    console.warn('获取打螺丝数据失败:', error);
+  }
+
   currentTraceData.value = mergedData;
+  console.log('mergedData', mergedData);
   detailDialogVisible.value = true;
 }
 
@@ -651,6 +701,7 @@ function handleRowClick(row, event) {
 
 .trace-header {
   margin-bottom: 20px;
+
   h1 {
     color: #ffffff;
     font-size: 24px;
@@ -664,6 +715,7 @@ function handleRowClick(row, event) {
   border-radius: 8px;
   margin-bottom: 20px;
   border: 1px solid #ffffff;
+
   .form-actions {
     display: flex;
     justify-content: flex-end;
@@ -684,7 +736,8 @@ function handleRowClick(row, event) {
   width: 100%;
   border-collapse: collapse;
   background-color: #2c3e50;
-  table-layout: auto; /* 使用自动布局让内容决定列宽 */
+  table-layout: auto;
+  /* 使用自动布局让内容决定列宽 */
 }
 
 .native-table thead {
@@ -700,8 +753,10 @@ function handleRowClick(row, event) {
   color: #ffffff !important;
   font-weight: 500;
   line-height: 1.5;
-  white-space: normal; /* 允许内容换行 */
-  word-break: break-word; /* 长单词换行 */
+  white-space: normal;
+  /* 允许内容换行 */
+  word-break: break-word;
+  /* 长单词换行 */
 }
 
 .native-table th {
@@ -739,7 +794,9 @@ function handleRowClick(row, event) {
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* 状态标签 */
@@ -834,6 +891,7 @@ function handleRowClick(row, event) {
 /* 工序步骤时间线 */
 .process-steps {
   margin-top: 20px;
+
   h3 {
     margin-bottom: 15px;
     color: #ffffff;
@@ -906,15 +964,17 @@ function handleRowClick(row, event) {
 /* 详情页标签页样式 - 修复边框对齐问题 */
 :deep(.el-tabs) {
   .el-tabs__header {
-    margin-bottom: 0; /* 移除底部边距 */
+    margin-bottom: 0;
+    /* 移除底部边距 */
     border-bottom: 1px solid #4a90e2;
   }
-  
+
   .el-tabs__nav {
     height: 48px;
-    margin-bottom: -1px; /* 负margin解决边框重叠问题 */
+    margin-bottom: -1px;
+    /* 负margin解决边框重叠问题 */
   }
-  
+
   .el-tabs__item {
     color: #90a4ae;
     font-size: 16px;
@@ -928,23 +988,24 @@ function handleRowClick(row, event) {
     border-bottom: none;
     transition: all 0.3s ease;
   }
-  
+
   .el-tabs__item:hover {
     color: #4a90e2;
     background-color: rgba(74, 144, 226, 0.1);
   }
-  
+
   .el-tabs__item.is-active {
     color: #ffffff;
     background-color: #2c3e50;
     border-color: #4a90e2;
     font-weight: 600;
   }
-  
+
   .el-tabs__active-bar {
-    display: none; /* 隐藏默认下划线 */
+    display: none;
+    /* 隐藏默认下划线 */
   }
-  
+
   .el-tabs__content {
     padding: 20px;
     border: 1px solid #4a90e2;
@@ -977,7 +1038,8 @@ function handleRowClick(row, event) {
 :deep(.el-dialog__body) {
   background-color: #2c3e50;
   color: #ffffff;
-  padding: 0; /* 移除body内边距，避免与内容区域重复 */
+  padding: 0;
+  /* 移除body内边距，避免与内容区域重复 */
 }
 
 :deep(.el-dialog__footer) {
@@ -1293,6 +1355,79 @@ h3 {
   overflow-x: auto;
 }
 
+/* 横向滚动容器样式 */
+.scrollable-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 16px;
+  /* 添加滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #4a90e2 #1e293b;
+}
+
+/* 自定义滚动条 - Webkit浏览器 */
+.scrollable-table-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.scrollable-table-wrapper::-webkit-scrollbar-track {
+  background: #1e293b;
+  border-radius: 4px;
+}
+
+.scrollable-table-wrapper::-webkit-scrollbar-thumb {
+  background: #4a90e2;
+  border-radius: 4px;
+}
+
+.scrollable-table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #5ba2f2;
+}
+
+/* 质量表格样式 */
+.quality-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: #2c3e50;
+  table-layout: auto;
+}
+
+.quality-table thead {
+  background-color: #34495e;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.quality-table th,
+.quality-table td {
+  padding: 12px 10px;
+  text-align: left;
+  vertical-align: middle;
+  border: 1px solid #ffffff;
+  color: #ffffff !important;
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+  /* 保持内容不换行以便横向滚动 */
+  min-width: 100px;
+}
+
+.quality-table th {
+  font-weight: 600;
+  color: #ffffff;
+  background-color: #34495e;
+}
+
+.quality-table tbody tr {
+  height: 48px;
+}
+
+.quality-table tbody tr:hover {
+  background-color: #34495e !important;
+  cursor: pointer;
+}
+
 .no-data {
   text-align: center;
   padding: 40px 20px;