84 lines
2.8 KiB
Vue
84 lines
2.8 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 原材料名称（仅hover触发popover） -->
|
||
<el-popover
|
||
trigger="hover"
|
||
placement="top"
|
||
width="400"
|
||
:visible-arrow="true"
|
||
append-to-body
|
||
popper-class="raw-material-info-popover"
|
||
>
|
||
<!-- popover 内容：两列布局的描述列表 -->
|
||
<el-descriptions :column="2" class="popover-content">
|
||
<el-descriptions-item label="原材料名称">{{ materialFull.rawMaterialName || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="原材料编码">{{ materialFull.rawMaterialCode || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="规格">{{ materialFull.specification || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="材质">{{ materialFull.material || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="表面处理">{{ materialFull.surfaceTreatment || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="镀层质量">{{ materialFull.zincLayer || '--' }}</el-descriptions-item>
|
||
<el-descriptions-item label="厂家">{{ materialFull.manufacturer || '--' }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- 触发元素（原材料名称文本） -->
|
||
<span slot="reference" class="material-name">
|
||
<slot name="default" :material="materialFull">
|
||
{{ materialFull.rawMaterialName || '未知' }}[{{ materialFull.specification || '无规格' }}]({{ materialFull.material || '无材质' }})-{{ materialFull.manufacturer || '无厂家' }}
|
||
</slot>
|
||
</span>
|
||
</el-popover>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import BomInfo from './BomInfo.vue'; // 保留导入（如需使用可解除注释）
|
||
|
||
export default {
|
||
name: 'RawMaterialInfo',
|
||
components: {
|
||
BomInfo
|
||
},
|
||
props: {
|
||
material: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 移除showDetail：hover触发无需弹窗控制变量
|
||
};
|
||
},
|
||
computed: {
|
||
materialFull() {
|
||
// 完整的material，确保每个字段有默认值
|
||
if (!this.material) {
|
||
return {};
|
||
}
|
||
return {
|
||
rawMaterialId: this.material.rawMaterialId || '',
|
||
rawMaterialName: this.material.rawMaterialName || '',
|
||
rawMaterialCode: this.material.rawMaterialCode || '',
|
||
specification: this.material.specification || '',
|
||
material: this.material.material || '',
|
||
surfaceTreatment: this.material.surfaceTreatment || '',
|
||
zincLayer: this.material.zincLayer || '',
|
||
manufacturer: this.material.manufacturer || '',
|
||
};
|
||
}
|
||
},
|
||
methods: {
|
||
// 移除click事件相关方法：无需点击触发
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.material-name {
|
||
color: #1890ff;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
/* 优化hover触发区域 */
|
||
padding: 2px 4px;
|
||
}
|
||
</style> |