BOM展示组件封装

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

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <el-descriptions :column="1" border v-if="bomInfo.length > 0">
+      <el-descriptions-item v-for="item in bomInfo" :key="item.attrKey" :label="item.attrKey">
+        {{ item.attrValue }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <div v-else>
+      <el-empty description="暂无BOM信息" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listBomItem } from '../../../api/wms/bomItem';
+
+export default {
+  name: 'BomInfo',
+  props: {
+    bomId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      bomInfo: []
+    }
+  },
+  created() {
+    this.getBomInfo();
+  },
+  methods: {
+    getBomInfo() {
+      listBomItem({ bomId: this.bomId }).then(res => {
+        this.bomInfo = res.rows;
+      })
+    }
+  }
+}
+</script>

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

@@ -5,20 +5,38 @@
         {{ 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 
+      :visible="showDetail" 
+      @close="showDetail = false" 
+      title="产品信息" 
+      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],
@@ -33,21 +51,24 @@ export default {
   },
   computed: {
     ...mapState({
-      productMap: state => state.category.productMap // 假设vuex中为product模块
+      productMap: state => state.category.productMap
     }),
   },
   methods: {
     clickHandle() {
       console.log('clickHandle');
       this.showDetail = true;
+    },
+    getStatusText(status) {
+      return status === 1 ? '启用中' : '已禁用';
     }
   },
   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;
+      handler(newVal) {
+        this.product = this.productMap && this.productMap[this.productId] 
+          ? { ...this.productMap[this.productId] } 
+          : {};
       },
       immediate: true
     }
@@ -61,4 +82,9 @@ export default {
   cursor: pointer;
   text-decoration: underline;
 }
-</style>
+
+/* 可选：调整描述列表的外边距 */
+:deep(.el-descriptions) {
+  margin-top: -10px;
+}
+</style>

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

@@ -8,11 +8,13 @@
     </span>
     <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>
-        <p><strong>描述:</strong> {{ material.rawMaterialCode }}</p>
-      </div>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="ID">{{ material.rawMaterialId }}</el-descriptions-item>
+        <el-descriptions-item label="名称">{{ material.rawMaterialName }}</el-descriptions-item>
+        <el-descriptions-item label="描述">{{ material.rawMaterialCode }}</el-descriptions-item>
+      </el-descriptions>
+
+      <BomInfo :bomId="material.bomId" />
     </el-dialog>
   </div>
 </template>