feat(wms/coil): 新增钢卷质量状态流转展示
1. 添加属性箭头样式类用于展示状态流转箭头 2. 新增初始质量状态props传递,在基础信息和生命周期追踪组件中展示质量状态变更 3. 在 futuristic 钢卷卡片中展示初始到当前的质量状态流转
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
@@ -38,6 +38,7 @@
|
|||||||
<span class="card-label">📦 入库</span>
|
<span class="card-label">📦 入库</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) {
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user