pms 设备分类BOM功能优化

src/views/pms/bom/MaterialList.vue

@@ -1,6 +1,21 @@
 <template>
   <Dialog v-model="dialogVisible" :title="t('iotMaintain.selectMaterials')"
           style="width: 1300px; min-height: 300px" :close-on-click-modal="false" @close="handleClose">
+
+    <!-- 新增设备分类和BOM节点信息显示 -->
+    <div style="margin: 0 0px 15px; background: #f5f7fa; padding: 12px 20px; border-radius: 4px;">
+      <el-row>
+        <el-col :span="12">
+          <span style="font-weight: bold; margin-right: 10px;">设备分类：</span>
+          <span>{{ deviceCategoryName }}</span>
+        </el-col>
+        <el-col :span="12">
+          <span style="font-weight: bold; margin-right: 10px;">BOM节点：</span>
+          <span>{{ bomNodeName }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
     <ContentWrap>
       <el-form
         class="-mb-15px"
@@ -50,6 +65,28 @@
         </el-form-item>
       </el-form>
     </ContentWrap>
+
+    <!-- 新增：已选物料标签区域 -->
+    <ContentWrap v-if="selectedRows.length > 0"
+                 style="margin: -10px 0px 10px; padding: 10px 15px; background: #f8fafc; border-radius: 4px; border: 1px solid #ebeef5;">
+      <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px;">
+        <div style="font-weight: bold; color: #606266; margin-right: 10px;">已选物料：</div>
+        <el-tag
+          v-for="item in selectedRows"
+          :key="item.id"
+          closable
+          @close="removeTag(item)"
+          style="margin-bottom: 5px; position: relative; padding-right: 25px;"
+        >
+          {{ item.name }}-{{ item.code }}
+          <!-- 自定义关闭按钮 -->
+          <span class="close-icon" @click.stop="removeTag(item)">
+            <Icon icon="ep:close" style="font-size: 12px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);"/>
+          </span>
+        </el-tag>
+      </div>
+    </ContentWrap>
+
     <ContentWrap>
       <el-table
         ref="tableRef"
@@ -117,6 +154,9 @@ const total = ref(0) // 列表的总页数
 const selectedRows = ref<MaterialApi.MaterialVO[]>([]); // 多选数据（存储所有选中行的数组）
 const tableRef = ref();
 
+const deviceCategoryName = ref('') // 存储设备分类名称
+const bomNodeName = ref('') // 存储BOM节点名称
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -146,7 +186,11 @@ const selectRow = (row) => {
 const handleRowClick = (row) => {
   selectRow(row);
 };
-const open = async (type: string, id?: number) => {
+const open = async (row: any) => {
+  // 设置传递过来的设备分类名称和BOM节点名称
+  deviceCategoryName.value = row.deviceCategoryName || ''
+  bomNodeName.value = row.name || ''
+
   queryParams.name = '';
   queryParams.code = '';
   dialogVisible.value = true
@@ -170,6 +214,23 @@ const handleClose = () => {
   emit('close')
 };
 
+// 新增：移除标签方法
+const removeTag = (material: MaterialApi.MaterialVO) => {
+  // 从已选列表中移除
+  const index = selectedRows.value.findIndex(item => item.id === material.id);
+  if (index !== -1) {
+    selectedRows.value.splice(index, 1);
+  }
+
+  // 如果当前行在当前页，取消其选中状态
+  const rowInTable = list.value.find(item => item.id === material.id);
+  if (rowInTable) {
+    const rowIndex = list.value.indexOf(rowInTable);
+    // 这里可以添加逻辑强制更新行状态（如果需要）
+  }
+};
+
+
 // 确认选择
 const handleConfirm = () => {
   if (selectedRows.value.length === 0) {
@@ -235,4 +296,25 @@ onMounted(async () => {
   border-color: #c2dca8;
 }
 
+// 新增标签样式
+.close-icon {
+  cursor: pointer;
+  color: #999;
+  transition: color 0.2s;
+
+  &:hover {
+    color: #ff4d4f;
+  }
+}
+
+.el-tag {
+  position: relative;
+  padding-right: 25px;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
 </style>

src/views/pms/bom/index.vue

@@ -138,7 +138,7 @@
               <el-button
                 link
                 type="primary"
-                @click="openSelectMaterialForm(scope.row.id, scope.row.deviceCategoryId)"
+                @click="openSelectMaterialForm(scope.row)"
                 v-hasPermi="['rq:iot-bom:update']"
               >
                 添加物料
@@ -240,11 +240,11 @@ const getList = async () => {
 
 /** 选择物料操作 */
 const materialListRef = ref()
-const openSelectMaterialForm = (id?: number, deviceCategoryId?: number) => {
-  materialListRef.value.open(id)
-  currentBomNodeId.value = id
+const openSelectMaterialForm = (row: any) => {
+  materialListRef.value.open(row)
+  currentBomNodeId.value = row.id
   // 保存当前BOM节点的deviceCategoryId
-  CommonBomMaterialData.value.deviceCategoryId = deviceCategoryId
+  CommonBomMaterialData.value.deviceCategoryId = row.deviceCategoryId
 }
 
 /** 查看物料详情 */