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

<template>
  <div>
    <span class="product-name" @click="clickHandle">
      <slot name="default" :product="product">
        {{ product.productName ? product.productName : '--' }}
      </slot>
    </span>
    <el-dialog 
      :visible="showDetail" 
      @close="showDetail = false" 
      :title="product.productName" 
      width="500px"
      append-to-body
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">
          {{ product.productId || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="名称">
          {{ product.productName || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品编码">
          {{ product.productCode || '--' }}
        </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: {
    productId: {
      type: [String, Number],
      required: true
    },
  },
  data() {
    return {
      showDetail: false,
      product: {},
    };
  },
  computed: {
    ...mapState({
      productMap: state => state.category.productMap
    }),
  },
  methods: {
    clickHandle() {
      console.log('clickHandle');
      this.showDetail = true;
    },
    getStatusText(status) {
      return status === 1 ? '启用中' : '已禁用';
    }
  },
  watch: {
    productId: {
      handler(newVal) {
        this.product = this.productMap && this.productMap[this.productId] 
          ? { ...this.productMap[this.productId] } 
          : {};
      },
      immediate: true
    }
  }
};
</script>

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

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