feat(wms/coil): 新增钢卷质量状态流转展示

1.  添加属性箭头样式类用于展示状态流转箭头
2.  新增初始质量状态props传递,在基础信息和生命周期追踪组件中展示质量状态变更
3.  在 futuristic 钢卷卡片中展示初始到当前的质量状态流转
This commit is contained in:
2026-07-03 17:42:05 +08:00
parent 2f01c712e1
commit 053f3ea01e
5 changed files with 53 additions and 7 deletions

View File

@@ -598,6 +598,14 @@
text-shadow: 0 0 6px rgba(100, 116, 139, 0.4) !important; text-shadow: 0 0 6px rgba(100, 116, 139, 0.4) !important;
} }
.attr-arrow {
display: inline-block;
margin: 0 4px;
color: #94a3b8;
font-size: 11px;
font-weight: 400;
}
.coil-futuristic-footer { .coil-futuristic-footer {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;

View File

@@ -5,7 +5,7 @@
<span class="section-title">基本信息</span> <span class="section-title">基本信息</span>
</div> </div>
<div class="section-body"> <div class="section-body">
<CoilInfoRender :coilInfo="coilInfo" :column="5" /> <CoilInfoRender :coilInfo="displayCoilInfo" :column="5" />
</div> </div>
</div> </div>
</template> </template>
@@ -14,7 +14,20 @@
export default { export default {
name: 'BasicInfoSection', name: 'BasicInfoSection',
props: { props: {
coilInfo: { type: Object, default: () => ({}) } coilInfo: { type: Object, default: () => ({}) },
initialQualityStatus: { type: String, default: '' }
},
computed: {
displayCoilInfo() {
const currentStatus = this.coilInfo.qualityStatus || '-'
if (this.initialQualityStatus && this.initialQualityStatus !== currentStatus) {
return {
...this.coilInfo,
qualityStatus: `${this.initialQualityStatus}${currentStatus}`
}
}
return this.coilInfo
}
} }
} }
</script> </script>

View File

@@ -55,7 +55,11 @@
<div class="attr-tag attr-left"> <div class="attr-tag attr-left">
<div class="attr-content"> <div class="attr-content">
<span class="attr-label">{{ leftLabel }}</span> <span class="attr-label">{{ leftLabel }}</span>
<span class="attr-value" :class="statusClass(coil.qualityStatus)">{{ coil.qualityStatus || '-' }}</span> <span class="attr-value" :class="statusClass(initialQualityStatus)">{{ initialQualityStatus || '-' }}</span>
<template v-if="hasQualityChanged">
<span class="attr-arrow"></span>
<span class="attr-value" :class="statusClass(currentQualityStatus)">{{ currentQualityStatus || '-' }}</span>
</template>
</div> </div>
</div> </div>
<div v-if="coil.enterCoilNo && coil.enterCoilNo !== '-'" class="attr-tag attr-top-left"> <div v-if="coil.enterCoilNo && coil.enterCoilNo !== '-'" class="attr-tag attr-top-left">
@@ -116,7 +120,8 @@ export default {
name: 'CoilCardFuturistic', name: 'CoilCardFuturistic',
props: { props: {
coil: { type: Object, default: () => ({}) }, coil: { type: Object, default: () => ({}) },
type: { type: String, default: 'inbound' } type: { type: String, default: 'inbound' },
initialQualityStatus: { type: String, default: '' }
}, },
data() { data() {
uid++ uid++
@@ -142,6 +147,13 @@ export default {
}, },
leftLabel() { leftLabel() {
return this.type === 'inbound' ? '质量状态' : '状态' return this.type === 'inbound' ? '质量状态' : '状态'
},
currentQualityStatus() {
return this.coil.qualityStatus || '-'
},
hasQualityChanged() {
return this.initialQualityStatus && this.currentQualityStatus !== '-'
&& this.initialQualityStatus !== this.currentQualityStatus
} }
}, },
methods: { methods: {

View File

@@ -38,6 +38,7 @@
<span class="card-label">&#128230; 入库</span> <span class="card-label">&#128230; 入库</span>
</div> </div>
<CoilCardFuturistic v-for="(coil, idx) in getCreationCoils(step, allSteps)" :key="idx" :coil="coil" type="inbound" <CoilCardFuturistic v-for="(coil, idx) in getCreationCoils(step, allSteps)" :key="idx" :coil="coil" type="inbound"
:initialQualityStatus="initialQualityStatus"
v-if="coil && coil.currentCoilNo !== '-'" /> v-if="coil && coil.currentCoilNo !== '-'" />
<div v-if="isEmpty(getCreationCoils(step, allSteps))" class="empty-coil"> <div v-if="isEmpty(getCreationCoils(step, allSteps))" class="empty-coil">
<span>无钢卷信息</span> <span>无钢卷信息</span>
@@ -147,7 +148,8 @@ export default {
components: { CoilTraceResult, CoilCardFuturistic, CoilCardCompact, ShipmentCard }, components: { CoilTraceResult, CoilCardFuturistic, CoilCardCompact, ShipmentCard },
props: { props: {
traceResult: { type: Object, default: null }, traceResult: { type: Object, default: null },
coilInfo: { type: Object, default: () => ({}) } coilInfo: { type: Object, default: () => ({}) },
initialQualityStatus: { type: String, default: '' }
}, },
methods: { methods: {
isEmpty(list) { isEmpty(list) {

View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="coil-info-page" v-loading="loading"> <div class="coil-info-page" v-loading="loading">
<div class="content-container"> <div class="content-container">
<BasicInfoSection :coilInfo="coilInfo" /> <BasicInfoSection :coilInfo="coilInfo" :initialQualityStatus="initialQualityStatus" />
<CostInfoSection :coilInfo="coilInfo" :traceResult="traceResult" <CostInfoSection :coilInfo="coilInfo" :traceResult="traceResult"
:hoardingDays="hoardingDays" :hoardingCost="hoardingCost" /> :hoardingDays="hoardingDays" :hoardingCost="hoardingCost" />
<LifecycleTrace :traceResult="traceResult" :coilInfo="coilInfo" /> <LifecycleTrace :traceResult="traceResult" :coilInfo="coilInfo" :initialQualityStatus="initialQualityStatus" />
<ContractInfo title="生产合同信息" :info="salesInfo" emptyText="未找到相关生产合同信息" /> <ContractInfo title="生产合同信息" :info="salesInfo" emptyText="未找到相关生产合同信息" />
@@ -135,6 +135,17 @@ export default {
hoardingCost() { hoardingCost() {
const netWeight = parseFloat(this.coilInfo.netWeight) || 0 const netWeight = parseFloat(this.coilInfo.netWeight) || 0
return (this.hoardingDays * netWeight).toFixed(2) return (this.hoardingDays * netWeight).toFixed(2)
},
initialQualityStatus() {
if (!this.coilQualityRejudgeList || this.coilQualityRejudgeList.length === 0) {
return this.coilInfo.qualityStatus || '-'
}
const sorted = [...this.coilQualityRejudgeList].sort((a, b) => {
const timeA = new Date(a.createTime || 0).getTime()
const timeB = new Date(b.createTime || 0).getTime()
return timeA - timeB
})
return sorted[0].beforeQuality || this.coilInfo.qualityStatus || '-'
} }
}, },
async created() { async created() {