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="产品信息" width="400px" append-to-body>
      <div>
        <p><strong>ID:</strong> {{ product.productId }}</p>
        <p><strong>名称:</strong> {{ product.productName }}</p>
        <p><strong>描述:</strong> {{ product.productCode }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'ProductInfo',
  props: {
    productId: {
      type: [String, Number],
      required: true
    },
  },
  data() {
    return {
      showDetail: false,
      product: {},
    };
  },
  computed: {
    ...mapState({
      productMap: state => state.category.productMap // 假设vuex中为product模块
    }),
  },
  methods: {
    clickHandle() {
      console.log('clickHandle');
      this.showDetail = true;
    }
  },
  watch: {
    productId: {
      handler: function (newVal) {
        const res = this.productMap ? this.productMap[this.productId] : {};
        console.log(this.productMap, this.productId, 'productMap', 'productId', res);
        this.product = res;
      },
      immediate: true
    }
  }
};
</script>

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