pms 设备分类bom树 优化页面显示效果

src/views/pms/bom/BomForm.vue

@@ -5,8 +5,20 @@
       v-loading="formLoading"
       :model="formData"
       :rules="formRules"
-      label-width="80px"
+      label-width="120px"
     >
+      <el-form-item label="设备分类" prop="deviceCategoryId">
+        <el-tree-select
+          v-model="formData.deviceCategoryId"
+          :data="deviceCategoryTree"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请选择设备分类"
+          value-key="deviceCategoryId"
+          @node-click="handleDeviceCategoryTreeNodeClick"
+        />
+      </el-form-item>
       <el-form-item label="上级BOM" prop="parentId">
         <el-tree-select
           v-model="formData.parentId"
@@ -14,15 +26,12 @@
           :props="defaultProps"
           check-strictly
           default-expand-all
-          placeholder="请选择上级Bom"
+          placeholder="请选择上级BOM"
           value-key="bomId"
         />
       </el-form-item>
-      <el-form-item label="Bom节点名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入Bom节点名称" />
-      </el-form-item>
-      <el-form-item label="设备分类id" prop="deviceCategoryId">
-        <el-input v-model="formData.deviceCategoryId" placeholder="" :value="localCategoryId" type="hidden"/>
+      <el-form-item label="BOM节点名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入BOM节点名称" />
       </el-form-item>
       <el-form-item label="显示排序" prop="sort">
         <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
@@ -50,7 +59,7 @@ import { defaultProps, handleTree } from '@/utils/tree'
 import * as BomApi from '@/api/pms/bom'
 import { CommonStatusEnum } from '@/utils/constants'
 import { useTreeStore } from '@/store/modules/treeStore';
-
+import * as DeviceCategoryApi from '@/api/pms/productclassify'
 import { FormRules } from 'element-plus'
 import { defineEmits, ref } from 'vue';
 
@@ -60,7 +69,8 @@ defineOptions({ name: 'BomForm' })
 const treeStore = useTreeStore();
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const localCategoryId = ref(null);
+const localCategoryId = ref(null);  // 通过store存储的设备分类id 由父组件传递过来
+const selfDeviceCategoryId = ref(null);  // 当前页面定义的 设备分类id
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -75,13 +85,15 @@ const formData = ref({
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive<FormRules>({
+  deviceCategoryId: [{ required: true, message: '设备分类不能为空', trigger: 'blur' }],
   parentId: [{ required: true, message: '上级Bom不能为空', trigger: 'blur' }],
   name: [{ required: true, message: 'Bom节点名称不能为空', trigger: 'blur' }],
   sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const bomTree = ref() // 树形结构
+const bomTree = ref() // BOM 树形结构
+const deviceCategoryTree = ref()  // 设备分类树
 
 const queryParams = reactive({
   pageNo: 1,
@@ -96,6 +108,7 @@ const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   // 获取store中的设备分类id
   localCategoryId.value = treeStore.selectedId;
+  selfDeviceCategoryId.value = treeStore.selectedId;
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -108,13 +121,26 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
-  // 获得部门树
+  // 获得 设备分类树
+  await getDeviceCategoryTree()
+  // 获得 bom 树
   await getTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件，用于操作成功后的回调
+
+/** 处理 设备分类 树 被点击 */
+const handleDeviceCategoryTreeNodeClick = async (row: { [key: string]: any }) => {
+  emit('node-click', row)
+  // treeStore.setSelectedId(row.id);
+  // 清空设备分类bom树的选择，重新查询筛选bom树
+  selfDeviceCategoryId.value = row.id
+  await getTree()
+}
+
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
 const submitForm = async () => {
   // 校验表单
   if (!formRef.value) return
@@ -124,7 +150,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     // 赋值设备分类id
-    formData.value.deviceCategoryId = localCategoryId.value
+    formData.value.deviceCategoryId = selfDeviceCategoryId.value
     const data = formData.value as unknown as BomApi.BomVO
     if (formType.value === 'create') {
       await BomApi.createBomNode(data)
@@ -145,7 +171,7 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    deviceCategoryId: undefined,
+    deviceCategoryId: localCategoryId.value,
     title: '',
     parentId: undefined,
     name: undefined,
@@ -155,12 +181,19 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
-/* 新增bom树节点时 还需要选择设备分类 */
+/** 获得 设备分类 树 **/
+const getDeviceCategoryTree = async () => {
+  deviceCategoryTree.value = []
+  const res = await DeviceCategoryApi.IotProductClassifyApi.getSimpleProductClassifyList()
+  let bom: Tree = { id: 0, name: '顶级Bom', children: [] }
+  bom.children = handleTree(res)
+  deviceCategoryTree.value.push(bom)
+}
 
 /** 获得 Bom 树 */
 const getTree = async () => {
   bomTree.value = []
-  queryParams.deviceCategoryId = localCategoryId.value;
+  queryParams.deviceCategoryId = selfDeviceCategoryId.value;
   const data = await BomApi.getSimpleBomList(queryParams)
   let bom: Tree = { id: 0, name: '顶级Bom', children: [] }
   bom.children = handleTree(data)

src/views/pms/bom/index.vue

@@ -18,21 +18,21 @@
           :model="queryParams"
           ref="queryFormRef"
           :inline="true"
-          label-width="68px"
+          label-width="110px"
         >
-          <el-form-item label="Bom节点名称" prop="name">
+          <el-form-item label="BOM节点名称" prop="name">
             <el-input
               v-model="queryParams.name"
-              placeholder="请输入Bom节点名称"
+              placeholder="请输入BOM节点名称"
               clearable
               @keyup.enter="handleQuery"
               class="!w-240px"
             />
           </el-form-item>
-          <el-form-item label="Bom节点状态" prop="status">
+          <el-form-item label="BOM节点状态" prop="status">
             <el-select
               v-model="queryParams.status"
-              placeholder="请选择Bom节点状态"
+              placeholder="请选择BOM节点状态"
               clearable
               class="!w-240px"
             >
@@ -70,7 +70,7 @@
           :default-expand-all="isExpandAll"
           v-if="refreshTable"
         >
-          <el-table-column prop="name" label="Bom节点名称" />
+          <el-table-column prop="name" label="BOM节点名称" />
           <el-table-column prop="sort" label="排序" />
           <el-table-column prop="status" label="状态">
             <template #default="scope">