产品和原材料配置BOM

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

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <span class="product-name" @click="showDetail = true">
-      {{ product.productName ? product.productName : '--' }}
+    <span class="product-name" @click="clickHandle">
+      <slot name="default" :product="product">
+        {{ product.productName ? product.productName : '--' }}
+      </slot>
     </span>
-    <el-dialog v-model="showDetail" @close="showDetail = false" :title="product.name" width="400px" v-if="product" append-to-body>
+    <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>
@@ -21,12 +23,12 @@ export default {
     productId: {
       type: [String, Number],
       required: true
-    }
+    },
   },
   data() {
     return {
       showDetail: false,
-      product: null,
+      product: {},
     };
   },
   computed: {
@@ -34,10 +36,16 @@ export default {
       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] : null;
+      handler: function (newVal) {
+        const res = this.productMap ? this.productMap[this.productId] : {};
         console.log(this.productMap, this.productId, 'productMap', 'productId', res);
         this.product = res;
       },

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

@@ -1,9 +1,13 @@
 <template>
   <div>
+    <!-- 作用域插槽 -->
     <span class="material-name" @click="showDetail = true">
-      {{ material.rawMaterialName ? material.rawMaterialName : '--' }}
+      <slot name="default" :material="material">
+        {{ material.rawMaterialName ? material.rawMaterialName : '--' }}
+      </slot>
     </span>
-    <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px" v-if="material" append-to-body>
+    <el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px"
+      append-to-body>
       <div>
         <p><strong>ID:</strong> {{ material.rawMaterialId }}</p>
         <p><strong>名称:</strong> {{ material.rawMaterialName }}</p>
@@ -26,7 +30,7 @@ export default {
   data() {
     return {
       showDetail: false,
-      material: null,
+      material: {},
     };
   },
   computed: {
@@ -36,8 +40,8 @@ export default {
   },
   watch: {
     materialId: {
-      handler: function(newVal) {
-        const res = this.materialMap ? this.materialMap[this.materialId] : null;
+      handler: function (newVal) {
+        const res = this.materialMap ? this.materialMap[this.materialId] : {};
         console.log(this.materialMap, this.materialId, 'materialMap', 'materialId', res);
         this.material = res;
       },