refactor(wms/coil): 优化钢卷追溯面板布局与渲染逻辑

1. 移除冗余的timeline外层卡片包装，调整渲染结构
2. 将合卷段的栅格布局改为flex布局，支持横向滚动
3. 删除不再需要的laneColSpan计算方法
4. 新增滚动条样式自定义配置优化视觉体验
5. 同时新增了获取钢卷发货单绑定销售信息的API接口

klp-ui/src/api/wms/coil.js

@@ -451,3 +451,14 @@ export function getFirstHeatCoilMaterial(enterCoilNo) {
     }
   })
 }
+
+/**
+ * 查询钢卷发货单绑定的销售信息
+ */
+export function getDeliveryOrderInfo(coilId) {
+  return request({
+    url: `/crm/order/getOrderByCoilId/${coilId}`,
+    method: 'get',
+    timeout: 600000,
+  })
+}

klp-ui/src/views/wms/coil/panels/CoilTraceResult.vue

@@ -1,51 +1,48 @@
 <template>
   <div class="trace-result-container">
-    <el-card shadow="hover" class="mb20" v-if="tracePanels && tracePanels.length > 0">
+    <template v-for="(panel, pIdx) in tracePanels">
-      <div slot="header" class="card-header">
+      <!-- 线性段：单条时间线 -->
-        <span class="title-dot"></span>
+      <div v-if="panel.type === 'linear'" :key="'lin-' + pIdx" class="trace-panel-block">
-        <span class="title-text">钢卷追溯操作步骤</span>
+        <el-card shadow="hover" v-for="(rawStep, idx) in panel.steps">
+          <template v-if="$scopedSlots.stepBody">
+            <slot name="stepBody" :step="formatStep(rawStep)" :compact="false" />
+          </template>
+          <trace-step-body v-else :standard-step="formatStep(rawStep)" :get-step-tag-type="getStepTagType"
+            :parse-changed-fields="parseChangedFields" />
+        </el-card>
       </div>
 
-      <template v-for="(panel, pIdx) in tracePanels">
+      <!-- 合卷段：多列并排 + 合卷汇聚 -->
-        <!-- 线性段：单条时间线 -->
+      <div v-else-if="panel.type === 'merge_join'" :key="'mj-' + pIdx" class="trace-panel-block merge-join-block">
-        <div v-if="panel.type === 'linear'" :key="'lin-' + pIdx" class="trace-panel-block">
+        <div class="merge-caption">合卷前各卷加工过程（并排展示）</div>
-          <el-timeline v-loading="loadingCoilDetails">
+        <div class="merge-lanes-container">
-            <el-timeline-item v-for="(rawStep, idx) in panel.steps" :key="pIdx + '-' + idx"
+          <div v-for="(lane, li) in panel.lanes" :key="li" class="merge-lane">
-              :timestamp="stepTimestamp(rawStep)" placement="top">
+            <div class="lane-header-tag">
-              <el-card shadow="hover">
+              {{ (panel.laneLabels && panel.laneLabels[li]) || ('来源 ' + (li + 1)) }}
-                <trace-step-body :standard-step="formatStep(rawStep)"
+            </div>
-                  :get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" />
+            <div class="lane-steps-stack">
+              <el-card v-for="(rawStep, si) in lane" :key="si" shadow="hover" class="lane-step-card mb10">
+                <template v-if="$scopedSlots.stepBody">
+                  <slot name="stepBody" :step="formatStep(rawStep)" :compact="true" />
+                </template>
+                <trace-step-body v-else :standard-step="formatStep(rawStep)" :get-step-tag-type="getStepTagType"
+                  :parse-changed-fields="parseChangedFields" compact />
               </el-card>
-            </el-timeline-item>
+            </div>
-          </el-timeline>
-        </div>
-
-        <!-- 合卷段：多列并排 + 合卷汇聚 -->
-        <div v-else-if="panel.type === 'merge_join'" :key="'mj-' + pIdx" class="trace-panel-block merge-join-block">
-          <div class="merge-caption">合卷前各卷加工过程（并排展示）</div>
-          <el-row :gutter="12" type="flex" class="merge-lanes-row">
-            <el-col v-for="(lane, li) in panel.lanes" :key="li" :span="laneColSpan(panel.lanes.length)" class="merge-lane-col">
-              <div class="lane-header-tag">
-                {{ (panel.laneLabels && panel.laneLabels[li]) || ('来源 ' + (li + 1)) }}
-              </div>
-              <div class="lane-steps-stack">
-                <el-card v-for="(rawStep, si) in lane" :key="si" shadow="hover" class="lane-step-card mb10">
-                  <trace-step-body :standard-step="formatStep(rawStep)"
-                    :get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" compact />
-                </el-card>
-              </div>
-            </el-col>
-          </el-row>
-          <div class="merge-converge">
-            <el-divider content-position="center">合卷汇聚</el-divider>
-            <el-card shadow="hover">
-              <trace-step-body :standard-step="formatStep(panel.mergeStep)"
-                :get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" />
-            </el-card>
           </div>
         </div>
-      </template>
+        <div class="merge-converge">
-    </el-card>
+          <el-divider content-position="center">合卷汇聚</el-divider>
+          <el-card shadow="hover">
+            <template v-if="$scopedSlots.stepBody">
+              <slot name="stepBody" :step="formatStep(panel.mergeStep)" :compact="false" />
+            </template>
+            <trace-step-body v-else :standard-step="formatStep(panel.mergeStep)" :get-step-tag-type="getStepTagType"
+              :parse-changed-fields="parseChangedFields" />
+          </el-card>
+        </div>
+      </div>
+    </template>
 
     <div class="empty-tip" v-if="!tracePanels || tracePanels.length === 0">
       <el-empty description="未找到相关钢卷记录"></el-empty>
@@ -112,10 +109,6 @@ export default {
       const d = rawStep.display_step != null ? rawStep.display_step : rawStep.step;
       return `步骤 ${d}`;
     },
-    laneColSpan(laneCount) {
-      const n = Math.max(1, laneCount || 1);
-      return Math.max(1, Math.floor(24 / n));
-    },
     // 根据操作类型获取标签样式
     getStepTagType(action) {
       const typeMap = {
@@ -433,12 +426,39 @@ export default {
   font-weight: 500;
 }
 
-.merge-lanes-row {
+.merge-lanes-container {
+  display: flex;
+  gap: 12px;
   align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(59, 130, 246, 0.4) rgba(59, 130, 246, 0.1);
 }
 
-.merge-lane-col {
+.merge-lanes-container::-webkit-scrollbar {
+  height: 6px;
+}
+
+.merge-lanes-container::-webkit-scrollbar-track {
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 3px;
+}
+
+.merge-lanes-container::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.4);
+  border-radius: 3px;
+}
+
+.merge-lanes-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(59, 130, 246, 0.6);
+}
+
+.merge-lane {
+  flex: 1;
   min-width: 0;
+  min-width: 200px;
 }
 
 .lane-header-tag {