143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
||
<div :class="{'g-coil-no': isGCoilNo}">
|
||
<!-- 有coilId时显示popover，无则只显示标签 -->
|
||
<el-popover
|
||
v-if="coilId"
|
||
placement="left"
|
||
width="200"
|
||
trigger="hover"
|
||
>
|
||
<div class="coil-info">
|
||
<div class="info-item">
|
||
<span class="label">物料名称：</span>
|
||
<span class="value">{{ itemName }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">材质：</span>
|
||
<span class="value">{{ material }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">生产厂家：</span>
|
||
<span class="value">{{ manufacturer }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">规格：</span>
|
||
<span class="value">
|
||
{{ specification }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<el-tag type="info" size="small" slot="reference">{{ currentCoilNo }}</el-tag>
|
||
</el-popover>
|
||
|
||
<!-- 无coilId时仅显示标签 -->
|
||
<el-tag v-else type="info" size="small">{{ currentCoilNo }}</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getMaterialCoil } from '@/api/wms/coil'
|
||
|
||
export default {
|
||
props: {
|
||
coilNo: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
coilId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
},
|
||
data() { // 修正：data应该是函数
|
||
return {
|
||
coilInfo: {}
|
||
}
|
||
},
|
||
computed: {
|
||
isGCoilNo() {
|
||
return this.coilNo && this.coilNo.startsWith('G');
|
||
},
|
||
specification() {
|
||
return this.coilInfo.product?.specification || this.coilInfo.rawMaterial?.specification || '-'
|
||
},
|
||
itemName() {
|
||
return this.coilInfo.product?.productName || this.coilInfo.rawMaterial?.rawMaterialName || '-'
|
||
},
|
||
material() {
|
||
return this.coilInfo.product?.material || this.coilInfo.rawMaterial?.material || '-'
|
||
},
|
||
manufacturer() {
|
||
return this.coilInfo.product?.manufacturer || this.coilInfo.rawMaterial?.manufacturer || '-'
|
||
},
|
||
currentCoilNo() {
|
||
return this.coilNo || this.coilInfo?.currentCoilNo || '-'
|
||
}
|
||
},
|
||
methods: {
|
||
getCoilInfo() {
|
||
if (!this.coilId) {
|
||
return;
|
||
}
|
||
getMaterialCoil(this.coilId).then(res => {
|
||
this.coilInfo = res.data || {};
|
||
}).catch(err => {
|
||
console.error('获取钢卷信息失败：', err);
|
||
this.coilInfo = {};
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载时获取线圈信息
|
||
this.getCoilInfo();
|
||
},
|
||
watch: {
|
||
// 监听coilId变化，重新获取信息
|
||
coilId(newVal) {
|
||
if (newVal) {
|
||
this.getCoilInfo();
|
||
} else {
|
||
this.coilInfo = {};
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 调整容器布局，让边框完整包裹标签 */
|
||
.g-coil-no {
|
||
display: inline-block; /* 让容器尺寸贴合内部el-tag */
|
||
border: 2px solid #67c23a !important;
|
||
border-radius: 4px; /* 可选：和el-tag圆角保持一致，更美观 */
|
||
padding: 1px; /* 调整内边距，避免边框和标签重叠 */
|
||
}
|
||
|
||
/* 弹窗信息样式 */
|
||
.coil-info {
|
||
font-size: 12px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.coil-info .info-item {
|
||
display: flex;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.coil-info .info-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.coil-info .label {
|
||
color: #666;
|
||
width: 70px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.coil-info .value {
|
||
color: #333;
|
||
flex: 1;
|
||
word-break: break-all;
|
||
}
|
||
</style> |