pms BOM列表查看物料详情 展示设备分类 BOM节点名称

src/views/pms/bom/MaterialListDrawer.vue

@@ -11,6 +11,19 @@
   >
     <template v-if="nodeId">
       <div v-loading="loading" style="height: 100%">
+
+        <div class="info-header">
+          <div class="info-item">
+            <span class="info-label">设备分类：</span>
+            <span class="info-value">{{ rowInfo.deviceCategoryName }}</span>
+          </div>
+          <div class="separator"></div> <!-- 分隔线 -->
+          <div class="info-item">
+            <span class="info-label">BOM节点：</span>
+            <span class="info-value">{{ rowInfo.bomNodeName }}</span>
+          </div>
+        </div>
+
         <el-table :data="materials" style="width: 100%">
           <el-table-column prop="name" label="物料名称" width="180" />
           <el-table-column prop="code" label="物料编码" width="180" />
@@ -82,7 +95,14 @@ const materials = ref([])
 
 const props = defineProps({
   modelValue: Boolean,
-  nodeId: Number
+  nodeId: Number,
+  rowInfo: {  // 新增props
+    type: Object,
+    default: () => ({
+      deviceCategoryName: '',
+      bomNodeName: ''
+    })
+  }
 })
 
 // 监听bom树节点ID变化
@@ -143,4 +163,43 @@ defineExpose({ openDrawer, closeDrawer, loadMaterials }) // 暴露方法给父
 
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.info-header {
+  display: flex;
+  align-items: center;
+  padding: 18px 24px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  margin-bottom: 20px;
+
+  .info-item {
+    flex: 1; /* 平分宽度 */
+    display: flex;
+    align-items: center; /* 垂直居中 */
+  }
+
+  .separator {
+    width: 1px;
+    height: 40px;
+    background-color: #dcdfe6;
+    margin: 0 24px;
+  }
+
+  .info-label {
+    font-weight: bold;
+    color: #606266;
+    margin-right: 8px; /* 标签和值之间的间距 */
+    font-size: 14px;
+    white-space: nowrap; /* 防止标签换行 */
+  }
+
+  .info-value {
+    color: #303133;
+    font-size: 16px;
+    font-weight: 500;
+    white-space: nowrap; /* 防止值换行 */
+    overflow: hidden;
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+}
+</style>

src/views/pms/bom/index.vue

@@ -146,7 +146,7 @@
               <el-button
                 link
                 type="primary"
-                @click="handleView(scope.row.id)"
+                @click="handleView(scope.row)"
                 v-hasPermi="['rq:iot-bom:update']"
               >
                 物料详情
@@ -176,6 +176,7 @@
     @update:model-value="val => drawerVisible = val"
     :node-id="currentBomNodeId"
     ref="showDrawer"
+    :row-info="currentRowInfo"
     @refresh="handleDrawerClosed"
   />
 </template>
@@ -203,6 +204,13 @@ const loading = ref(true) // 列表的加载中
 const currentBomNodeId = ref() // 当前选中的bom节点
 const refreshTable = ref(true) // 重新渲染表格状态
 const list = ref() // 列表的数据
+
+// 添加存储当前行信息的变量 抽屉页面使用
+const currentRowInfo = ref({
+  deviceCategoryName: '',
+  bomNodeName: ''
+})
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -248,12 +256,17 @@ const openSelectMaterialForm = (row: any) => {
 }
 
 /** 查看物料详情 */
-const handleView = async (nodeId) => {
-  currentBomNodeId.value = nodeId
+const handleView = async (row) => {
+  currentBomNodeId.value = row.id
+  // 保存当前行的信息
+  currentRowInfo.value = {
+    deviceCategoryName: row.deviceCategoryName || '暂无',
+    bomNodeName: row.name || '暂无'
+  }
   drawerVisible.value = true
   showDrawer.value.openDrawer()
   // 强制刷新物料数据
-  await showDrawer.value.loadMaterials(nodeId)
+  await showDrawer.value.loadMaterials(row.id)
 }
 
 const chooseSingleMaterial = async(row) => {

src/views/pms/device/MaterialListDrawerDevice.vue

@@ -11,6 +11,19 @@
   >
     <template v-if="nodeId">
       <div v-loading="loading" style="height: 100%">
+
+        <div class="info-header">
+          <div class="info-item">
+            <span class="info-label">设备分类：</span>
+            <span class="info-value">{{ rowInfo.deviceCategoryName }}</span>
+          </div>
+          <div class="separator"></div> <!-- 分隔线 -->
+          <div class="info-item">
+            <span class="info-label">BOM节点：</span>
+            <span class="info-value">{{ rowInfo.bomNodeName }}</span>
+          </div>
+        </div>
+
         <el-table :data="materials" style="width: 100%">
           <el-table-column prop="name" :label="t('workOrderMaterial.materialName')" width="180" />
           <el-table-column prop="code" :label="t('workOrderMaterial.materialCode')" width="180" />
@@ -81,6 +94,13 @@ const props = defineProps({
   modelValue: Boolean,
   nodeId: Number,
   deviceId: Number,
+  rowInfo: {  // 新增props
+    type: Object,
+    default: () => ({
+      deviceCategoryName: '',
+      bomNodeName: ''
+    })
+  }
 })
 
 // 监听bom树节点ID变化
@@ -144,4 +164,43 @@ const handleClose = () => {
 defineExpose({ openDrawer, closeDrawer, loadMaterials }) // 暴露方法给父组件
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.info-header {
+  display: flex;
+  align-items: center;
+  padding: 18px 24px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  margin-bottom: 20px;
+
+  .info-item {
+    flex: 1; /* 平分宽度 */
+    display: flex;
+    align-items: center; /* 垂直居中 */
+  }
+
+  .separator {
+    width: 1px;
+    height: 40px;
+    background-color: #dcdfe6;
+    margin: 0 24px;
+  }
+
+  .info-label {
+    font-weight: bold;
+    color: #606266;
+    margin-right: 8px; /* 标签和值之间的间距 */
+    font-size: 14px;
+    white-space: nowrap; /* 防止标签换行 */
+  }
+
+  .info-value {
+    color: #303133;
+    font-size: 16px;
+    font-weight: 500;
+    white-space: nowrap; /* 防止值换行 */
+    overflow: hidden;
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+}
+</style>

src/views/pms/device/bom/BomList.vue

@@ -134,7 +134,7 @@
           <el-button
             link
             type="primary"
-            @click="handleView(scope.row.id)"
+            @click="handleView(scope.row)"
             v-hasPermi="['rq:iot-bom:update']"
           >
             {{ t('bomList.materialDetail') }}
@@ -163,6 +163,7 @@
     :node-id="currentBomNodeId"
     :deviceId = "props.deviceId"
     ref="showDrawer"
+    :row-info="currentRowInfo"
     @refresh="handleDrawerClosed"
   />
 </template>
@@ -190,6 +191,13 @@ const currentBomNodeId = ref() // 当前选中的bom节点
 const refreshTable = ref(true) // 重新渲染表格状态
 const list = ref() // 列表的数据
 const props = defineProps<{ deviceId?: number , deviceCategoryName?:string }>()
+
+// 添加存储当前行信息的变量 抽屉页面使用
+const currentRowInfo = ref({
+  deviceCategoryName: '',
+  bomNodeName: ''
+})
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -238,12 +246,17 @@ const openSelectMaterialForm = (row: any) => {
 }
 
 /** 查看物料详情 */
-const handleView = async (nodeId) => {
-  currentBomNodeId.value = nodeId
+const handleView = async (row) => {
+  currentBomNodeId.value = row.id
+  // 保存当前行的信息
+  currentRowInfo.value = {
+    deviceCategoryName: props.deviceCategoryName || '暂无',
+    bomNodeName: row.name || '暂无'
+  }
   drawerVisible.value = true
   showDrawer.value.openDrawer()
   // 强制刷新物料数据
-  await showDrawer.value.loadMaterials(nodeId)
+  await showDrawer.value.loadMaterials(row.id)
 }
 
 const chooseMaterial = async (selectedMaterials) => {