DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
1. 移除冗余的timeline外层卡片包装，调整渲染结构
2. 将合卷段的栅格布局改为flex布局，支持横向滚动
3. 删除不再需要的laneColSpan计算方法
4. 新增滚动条样式自定义配置优化视觉体验
5. 同时新增了获取钢卷发货单绑定销售信息的API接口
This commit is contained in:
砂糖
2026-05-15 10:49:30 +08:00
parent 247a443327
commit 92265e0eee
3 changed files with 1307 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
klp-ui/src/api/wms/coil.js
View File

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

1890
klp-ui/src/views/wms/coil/info.vue
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,51 +1,48 @@
<template>
<div class="trace-result-container">
<el-card shadow="hover" class="mb20" v-if="tracePanels && tracePanels.length > 0">
<div slot="header" class="card-header">
<span class="title-dot"></span>
<span class="title-text">钢卷追溯操作步骤</span>
<template v-for="(panel, pIdx) in tracePanels">
<!-- 线性段：单条时间线 -->
<div v-if="panel.type === 'linear'" :key="'lin-' + pIdx" class="trace-panel-block">
<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-if="panel.type === 'linear'" :key="'lin-' + pIdx" class="trace-panel-block">
<el-timeline v-loading="loadingCoilDetails">
<el-timeline-item v-for="(rawStep, idx) in panel.steps" :key="pIdx + '-' + idx"
:timestamp="stepTimestamp(rawStep)" placement="top">
<el-card shadow="hover">
<trace-step-body :standard-step="formatStep(rawStep)"
:get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" />
<!-- 合卷段：多列并排 + 合卷汇聚 -->
<div v-else-if="panel.type === 'merge_join'" :key="'mj-' + pIdx" class="trace-panel-block merge-join-block">
<div class="merge-caption">合卷前各卷加工过程（并排展示）</div>
<div class="merge-lanes-container">
<div v-for="(lane, li) in panel.lanes" :key="li" class="merge-lane">
<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">
<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>
</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>
</div>
</template>
</el-card>
<div class="merge-converge">
<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 {