klp-oa/klp-ui/src/components/KLPService/Renderer/ProductInfo.vue

<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 || '无厂家' }}
        </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.productId || '',
        productName: this.product.productName || '',
        productCode: this.product.productCode || '',
        specification: this.product.specification || '',
        material: this.product.material || '',
        surfaceTreatment: this.product.surfaceTreatment || '',
        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>