产品和原材料配置BOM

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;
       },