产品和原材料配置BOM

klp-ui/src/views/wms/order/panels/detail.vue

@@ -58,13 +58,14 @@
       </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="orderDetailList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" :selectable="canEdit" />
-      <!-- <el-table-column label="明细ID" align="center" prop="detailId" v-if="false"/>
-      <el-table-column label="订单ID" align="center" prop="orderId" /> -->
+    <el-table v-loading="loading" :data="orderDetailList">
       <el-table-column label="产品" align="center">
         <template slot-scope="scope">
-          {{ scope.row.productName }}<span v-if="scope.row.productCode">({{ scope.row.productCode }})</span>
+          <ProductInfo :product-id="scope.row.productId">
+            <template #default="{ product }">
+              {{ product.productName }}<span v-if="product.productCode">({{ product.productCode }})</span>
+            </template>
+          </ProductInfo>
         </template>
       </el-table-column>
       <el-table-column label="产品数量" align="center" prop="quantity" />
@@ -130,6 +131,7 @@ import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, update
 import { getOrder } from "@/api/wms/order";
 import ProductSelect from '@/components/KLPService/ProductSelect';
 import { EOrderStatus } from "@/utils/enums";
+import { ProductInfo } from '@/components/KLPService';
 
 export default {
   name: "OrderDetailPanel",
@@ -140,6 +142,10 @@ export default {
       required: true
     }
   },
+  components: {
+    ProductSelect,
+    ProductInfo
+  },
   data() {
     return {
       buttonLoading: false,
@@ -323,9 +329,6 @@ export default {
       }, `orderDetail_${new Date().getTime()}.xlsx`)
     }
   },
-  components: {
-    ProductSelect
-  }
 };
 </script>