做了两个组件

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span class="product-name" @click="showDetail = true">
+      {{ product.productName ? product.productName : '--' }}
+    </span>
+    <el-dialog v-model="showDetail" @close="showDetail = false" :title="product.name" width="400px" v-if="product" 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: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      productMap: state => state.category.productMap // 假设vuex中为product模块
+    }),
+  },
+  watch: {
+    productId: {
+      handler: function(newVal) {
+        const res = this.productMap ? this.productMap[this.productId] : null;
+        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>

klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span class="material-name" @click="showDetail = true">
+      {{ material.rawMaterialName ? material.rawMaterialName : '--' }}
+    </span>
+    <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px" v-if="material" append-to-body>
+      <div>
+        <p><strong>ID:</strong> {{ material.rawMaterialId }}</p>
+        <p><strong>名称:</strong> {{ material.rawMaterialName }}</p>
+        <p><strong>描述:</strong> {{ material.rawMaterialCode }}</p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'RawMaterialInfo',
+  props: {
+    materialId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      showDetail: false,
+      material: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
+    }),
+  },
+  watch: {
+    materialId: {
+      handler: function(newVal) {
+        const res = this.materialMap ? this.materialMap[this.materialId] : null;
+        console.log(this.materialMap, this.materialId, 'materialMap', 'materialId', res);
+        this.material = res;
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.material-name {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

klp-ui/src/components/KLPService/index.js

@@ -5,3 +5,5 @@ export { default as RawMaterialSelect } from './RawMaterialSelect/index.vue';
 export { default as CategoryRenderer } from './Renderer/CategoryRenderer.vue';
 export { default as UserSelect } from './UserSelect/index.vue';
 export { default as WarehouseSelect } from './WarehouseSelect/index.vue';
+export { default as ProductInfo } from './Renderer/ProductInfo.vue';
+export { default as RawMaterialInfo } from './Renderer/RawMaterialInfo.vue';