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

<template>
  <div>
    <span class="product-name" @click.stop="clickHandle">
      <slot name="default" :product="productFull">
        {{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}] - (材质：{{ productFull.material || '无材质' }})
      </slot>
    </span>
    <el-dialog 
      :visible="showDetail" 
      @close="showDetail = false" 
      :title="productFull.productName || '--' " 
      width="500px"
      append-to-body
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="产品名称">
          {{ product.productName || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品编码">
          {{ product.productCode || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="规格">
          {{ product.specification || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="材质">
          {{ product.material || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="表面处理">
          {{ product.surfaceTreatment || '--' }}
        </el-descriptions-item>
        <!-- 锌层 -->
        <el-descriptions-item label="锌层">
          {{ product.zincLayer || '--' }}
        </el-descriptions-item>
        <!-- 厂家 -->
        <el-descriptions-item label="厂家">
          {{ product.manufacturer || '--' }}
        </el-descriptions-item>

      </el-descriptions>
      <!-- <BomInfo :bomId="product.bomId" /> -->
    </el-dialog>
  </div>
</template>

<script>
// import { mapState } from 'vuex';
// import BomInfo from './BomInfo.vue';

export default {
  name: 'ProductInfo',
  // components: {
  //   BomInfo
  // },
  props: {
    product: {
      type: Object,
      // required: true,
      default: () => ({})
    },
  },
  // mounted() {
    // console.log(this.productId, this.productMap);
  // },
  data() {
    return {
      showDetail: false,
      // product: {},
    };
  },
  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 || '',
      }
    }
  },
  // computed: {
  //   ...mapState({
  //     productMap: state => state.category.productMap
  //   }),
  //   product() {
  //     // 检查 productMap 是否已加载
  //     if (!this.productMap || Object.keys(this.productMap).length === 0) {
  //       return {};
  //     }
  //     if (!this.productId) {
  //       return {};
  //     }
  //     return this.productMap[this.productId.toString()] || {};
  //   },
  //   loading() {
  //     return !this.productMap || Object.keys(this.productMap).length === 0
  //   }
  // },
  methods: {
    clickHandle() {
      this.showDetail = true;
    }
  },
  // watch: {
  //   productId: {
  //     handler(newVal) {
  //       if (!newVal) {
  //         this.product = {};
  //       }
  //       const res = this.productMap[newVal.toString()] ? this.productMap[newVal.toString()] : {};
  //       this.product = res;
  //     },
  //     immediate: true
  //   }
  // }
};
</script>

<style scoped>
.product-name {
  color: #1890ff;
  cursor: pointer;
  text-decoration: underline;
}

/* 可选：调整描述列表的外边距 */
:deep(.el-descriptions) {
  margin-top: -10px;
}
</style>