140 lines
4.0 KiB
Vue
140 lines
4.0 KiB
Vue
<template>
|
|
<el-descriptions :column="column" :border="border" size="small" :title="title">
|
|
<template slot="extra">
|
|
<slot name="extra"></slot>
|
|
</template>
|
|
<el-descriptions-item v-for="(item, index) in filteredFields" :key="index" :label="item.label"
|
|
:span="item.span || 1">
|
|
<template v-if="item.children">
|
|
<span v-for="(child, cIndex) in item.children" :key="cIndex" style="margin-right: 12px;">
|
|
{{ child.label }}: {{ child.value || '-' }}
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
{{ item.value || '-' }}
|
|
</template>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CoilInfo',
|
|
props: {
|
|
coilInfo: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
column: {
|
|
type: Number,
|
|
default: 5
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 只显示有值的字段
|
|
showOnlyValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
}
|
|
},
|
|
computed: {
|
|
fields() {
|
|
return [
|
|
{ label: '入场卷号', key: 'enterCoilNo' },
|
|
{ label: '当前卷号', key: 'currentCoilNo' },
|
|
{ label: '厂家原料号', key: 'supplierCoilNo' },
|
|
{ label: '逻辑库位', key: 'warehouseName' },
|
|
{ label: '实际库区', key: 'actualWarehouseName' },
|
|
{ label: '班组', key: 'team' },
|
|
{ label: '材料类型', key: 'materialType' },
|
|
{ label: '物料名', key: 'itemName' },
|
|
{ label: '规格', key: 'specification' },
|
|
{ label: '材质', key: 'material' },
|
|
{ label: '厂家', key: 'manufacturer' },
|
|
{ label: '镀层质量', key: 'zincLayer' },
|
|
{ label: '表面处理', key: 'surfaceTreatmentDesc' },
|
|
{ label: '质量状态', key: 'qualityStatus' },
|
|
{ label: '切边要求', key: 'trimmingRequirement' },
|
|
{ label: '原料材质', key: 'packingStatus' },
|
|
{ label: '包装要求', key: 'packagingRequirement' },
|
|
// 设置对照属性，两个数量显示在一个格子里
|
|
{
|
|
label: '长度[m]',
|
|
children: [
|
|
{ label: '实测', key: 'actualLength' },
|
|
{ label: '理论', key: 'theoreticalLength' }
|
|
]
|
|
},
|
|
{
|
|
label: '厚度[mm]',
|
|
children: [
|
|
{ label: '实测', key: 'actualThickness' },
|
|
{ label: '理论', key: 'theoreticalThickness' }
|
|
]
|
|
},
|
|
{ label: '排产厚度[mm]', key: 'scheduleThickness' },
|
|
{ label: '实测宽度[mm]', key: 'actualWidth' },
|
|
{ label: '毛重[t]', key: 'grossWeight' },
|
|
{ label: '净重[t]', key: 'netWeight' },
|
|
{ label: '生产开始', key: 'productionStartTime' },
|
|
{ label: '生产结束', key: 'productionEndTime' },
|
|
{ label: '调制度', key: 'temperGrade' },
|
|
{ label: '镀层种类', key: 'coatingType' },
|
|
{ label: '钢卷表面处理', key: 'coilSurfaceTreatment' },
|
|
{ label: '备注', key: 'remark', span: this.column > 2 ? this.column - 2 : 1 }
|
|
]
|
|
},
|
|
filteredFields() {
|
|
let fields = this.fields.map(item => {
|
|
if (item.children) {
|
|
return {
|
|
...item,
|
|
children: item.children.map(child => ({
|
|
...child,
|
|
value: this.coilInfo[child.key]
|
|
}))
|
|
}
|
|
}
|
|
return {
|
|
...item,
|
|
value: this.coilInfo[item.key]
|
|
}
|
|
})
|
|
|
|
if (this.showOnlyValue) {
|
|
fields = fields.filter(item => {
|
|
if (item.children) {
|
|
return item.children.some(child => child.value !== undefined && child.value !== null && child.value !== '')
|
|
}
|
|
return item.value !== undefined && item.value !== null && item.value !== ''
|
|
})
|
|
}
|
|
|
|
return fields
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.status-success {
|
|
color: #67c23a;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-danger {
|
|
color: #f56c6c;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-warning {
|
|
color: #e6a23c;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|