klp-oa/klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.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 || '无材质' }})
        </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>