86 lines
3.2 KiB
Vue
86 lines
3.2 KiB
Vue
<template>
|
|
<div :class="['coil-card-hover', variant]" v-if="coil && coil.currentCoilNo !== '-'">
|
|
<div class="coil-mini-header">
|
|
<span class="coil-mini-no">{{ coil.currentCoilNo }}</span>
|
|
<span class="coil-mini-weight">{{ coil.netWeight ? coil.netWeight + 't' : '-' }}</span>
|
|
</div>
|
|
<div class="coil-mini-body">
|
|
<span class="coil-mini-spec">{{ coil.specification || '-' }}</span>
|
|
<span class="coil-mini-material">{{ coil.material || '-' }}</span>
|
|
<span :class="['coil-mini-status', statusClass(coil.qualityStatus)]">{{ coil.qualityStatus || '-' }}</span>
|
|
</div>
|
|
<div class="coil-detail-popup">
|
|
<div class="popup-header">
|
|
<span class="popup-title">钢卷详情</span>
|
|
<span class="popup-close">✕</span>
|
|
</div>
|
|
<div class="popup-content">
|
|
<div class="popup-row">
|
|
<span class="popup-label">入场卷号</span>
|
|
<span class="popup-value">{{ coil.enterCoilNo || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">当前卷号</span>
|
|
<span class="popup-value">{{ coil.currentCoilNo || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">物料名称</span>
|
|
<span class="popup-value">{{ coil.itemName || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">规格</span>
|
|
<span class="popup-value">{{ coil.specification || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">材质</span>
|
|
<span class="popup-value">{{ coil.material || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">净重</span>
|
|
<span class="popup-value">{{ coil.netWeight || 0 }} t</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">生产厂家</span>
|
|
<span class="popup-value">{{ coil.manufacturer || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">镀层</span>
|
|
<span class="popup-value">{{ coil.zincLayer || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">质量状态</span>
|
|
<span class="popup-value">{{ coil.qualityStatus || '-' }}</span>
|
|
</div>
|
|
<div class="popup-row">
|
|
<span class="popup-label">逻辑库位</span>
|
|
<span class="popup-value">{{ coil.warehouseName || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFuturisticStatusClass } from '../statusUtils'
|
|
|
|
export default {
|
|
name: 'CoilCardCompact',
|
|
props: {
|
|
coil: { type: Object, default: () => ({}) },
|
|
variant: { type: String, default: '' }
|
|
},
|
|
methods: {
|
|
statusClass(status) {
|
|
const cls = getFuturisticStatusClass(status)
|
|
const map = {
|
|
'futuristic-status-success': 'status-success',
|
|
'futuristic-status-danger': 'status-danger',
|
|
'futuristic-status-warning': 'status-warning',
|
|
'futuristic-status-default': 'status-default'
|
|
}
|
|
return map[cls] || 'status-default'
|
|
}
|
|
}
|
|
}
|
|
</script>
|