Files
klp-oa/klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
砂糖 499654907b feat(调拨单): 新增调拨单管理功能
- 新增调拨单主表和明细表相关API接口
- 新增调拨单主表和明细表前端页面
- 新增钢卷选择器组件和调拨明细表格组件
- 修改产品信息和原料信息渲染组件支持更多字段
- 修改产品选择和原料选择组件支持数值类型值
- 修改钢卷号渲染组件支持更多字段和外部数据
- 新增调拨单匹配物料接口
2026-03-28 14:08:27 +08:00

92 lines
2.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<el-popover
trigger="hover"
placement="top"
width="400"
:visible-arrow="true"
append-to-body
popper-class="product-info-popover"
>
<!-- popover 内容原dialog中的描述列表 -->
<el-descriptions :column="2" class="popover-content">
<el-descriptions-item label="产品名称">
{{ productFull.productName || '--' }}
</el-descriptions-item>
<!-- <el-descriptions-item label="产品编码">
{{ productFull.productCode || '--' }}
</el-descriptions-item> -->
<el-descriptions-item label="规格">
{{ productFull.specification || '--' }}
</el-descriptions-item>
<el-descriptions-item label="材质">
{{ productFull.material || '--' }}
</el-descriptions-item>
<el-descriptions-item label="表面处理">
{{ productFull.surfaceTreatment || '--' }}
</el-descriptions-item>
<el-descriptions-item label="镀层质量">
{{ productFull.zincLayer || '--' }}
</el-descriptions-item>
<el-descriptions-item label="厂家">
{{ productFull.manufacturer || '--' }}
</el-descriptions-item>
</el-descriptions>
<!-- 触发元素原产品名称文本 -->
<span slot="reference" class="product-name">
<slot name="default" :product="productFull">
{{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}]({{ productFull.material || '无材质' }})-{{ productFull.manufacturer || '无厂家' }}-{{ productFull.zincLayer || '无镀层' }}
</slot>
</span>
</el-popover>
</div>
</template>
<script>
export default {
name: 'ProductInfo',
props: {
product: {
type: Object,
default: () => ({})
},
},
data() {
return {
// 移除showDetail无需弹窗控制
};
},
computed: {
productFull() {
// 完整的product, 确保每个字段都有值
if (!this.product) {
return {};
}
return {
productId: this.product.itemId || this.product.productId || '',
productName: this.product.itemName || this.product.productName || '',
// productCode: this.product.productCode || '',
specification: this.product.specification || '',
material: this.product.material || '',
surfaceTreatment: this.product.surfaceTreatmentDesc || '',
zincLayer: this.product.zincLayer || '',
manufacturer: this.product.manufacturer || '',
};
}
},
methods: {
// 移除clickHandle方法无需点击触发
},
};
</script>
<style scoped>
.product-name {
color: #1890ff;
cursor: pointer;
text-decoration: underline;
/* 增加内边距,优化悬停触发区域 */
padding: 2px 4px;
}
</style>