pms 下拉列表筛选

src/locales/en.ts

@@ -602,6 +602,7 @@ export default {
   },
   deviceAllot:{
     setUp:'SetUp',
+    adjustmentRecords:'AllotRecords',
   },
   devicePerson:{
     deviceName:'DeviceName',

src/locales/zh-CN.ts

@@ -596,6 +596,7 @@ export default {
   },
   deviceAllot:{
     setUp:'调拨设备',
+    adjustmentRecords:'调拨记录',
   },
   devicePerson:{
     deviceName:'设备名称',

src/views/pms/bom/BomForm.vue

@@ -16,6 +16,8 @@
           :default-expanded-keys="firstLevelKeys"
           placeholder="请选择设备分类"
           value-key="id"
+          filterable
+          clearable
           @node-click="handleDeviceCategoryTreeNodeClick"
         />
       </el-form-item>
@@ -26,6 +28,8 @@
           :props="defaultProps"
           check-strictly
           default-expand-all
+          filterable
+          clearable
           placeholder="请选择上级BOM"
           value-key="bomId"
         />
@@ -109,7 +113,7 @@ const formRules = reactive<FormRules>({
 })
 const formRef = ref() // 表单 Ref
 const bomTree = ref() // BOM 树形结构
-const deviceCategoryTree = ref()  // 设备分类树
+const deviceCategoryTree = ref<Tree[]>([])  // 设备分类树
 const firstLevelKeys = ref([])
 
 const queryParams = reactive({

src/views/pms/bom/MaterialList.vue

@@ -28,6 +28,7 @@
         </el-form-item>
         <el-form-item label="物料组" prop="materialGroupId">
           <el-tree-select
+            filterable
             v-model="queryParams.materialGroupId"
             :data="materialGroupList"
             :props="defaultProps"
@@ -35,6 +36,7 @@
             node-key="id"
             placeholder="请选择所属物料组"
             class="!w-220px"
+            clearable
           />
         </el-form-item>
         <el-form-item>

src/views/pms/device/allotlog/DeviceAllot.vue

@@ -163,7 +163,7 @@
                 @click="handleView(scope.row.id)"
                 v-hasPermi="['rq:iot-device:query']"
               >
-                {{ t('deviceStatus.adjustmentRecords') }}
+                {{ t('deviceAllot.adjustmentRecords') }}
               </el-button>
             </template>
           </el-table-column>

src/views/pms/devicetemplate/TemplateForm.vue

@@ -15,8 +15,10 @@
               :data="deviceCategoryTree"
               :props="defaultProps"
               check-strictly
-              default-expand-all
-              value-key="deviceCategoryId"
+              filterable
+              clearable
+              value-key="id"
+              :default-expanded-keys="firstLevelKeys"
               placeholder="请选择设备分类"
               @node-click="handleDeviceCategoryTreeNodeClick"
             />
@@ -61,7 +63,7 @@ defineOptions({ name: 'DeviceTemplateForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const firstLevelKeys = ref([])
 const treeStore = useTreeStore();
 const localDeviceCategoryId = ref(null);  // 通过store存储的设备分类id 由父组件传递过来
 const dialogVisible = ref(false) // 弹窗的是否展示
@@ -142,6 +144,7 @@ const getDeviceCategoryTree = async () => {
   let categoryTree: Tree = { id: 0, name: '顶级设备分类', children: [] }
   categoryTree.children = handleTree(res)
   deviceCategoryTree.value.push(categoryTree)
+  firstLevelKeys.value = deviceCategoryTree.value.map(node => node.id);
 }
 
 /** 处理 设备分类 树 被点击 */

src/views/pms/material/MaterialForm.vue

@@ -16,13 +16,15 @@
         <el-col :span="12">
           <el-form-item label="所属物料组" prop="materialGroupId">
             <el-tree-select
+              filterable
               v-model="formData.materialGroupId"
-              :data="materialGroupList"
+              :data="materialGroupTree"
               :props="defaultProps"
+              :default-expanded-keys="firstLevelKeys"
               check-strictly
-              default-expand-all
-              node-key="materialGroupId"
-              value-key="materialGroupId"
+              clearable
+              node-key="id"
+              value-key="id"
               placeholder="请选择所属物料组"
             />
           </el-form-item>
@@ -92,6 +94,7 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const storedMaterialGroupId = ref(null);  // 通过store存储的物料组id 由父组件传递过来
+const materialGroupTree = ref<Tree[]>([])   // 物料组分类树
 
 const formData = ref({
   name: '',
@@ -111,7 +114,7 @@ const formRules = reactive<FormRules>({
 
 })
 const formRef = ref() // 表单 Ref
-const materialGroupList = ref<Tree[]>([]) // 树形结构
+const firstLevelKeys = ref<Tree[]>([])
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -131,10 +134,21 @@ const open = async (type: string, id?: number) => {
     }
   }
   // 加载 物料组 树
-  materialGroupList.value = handleTree(await MaterialGroupApi.getSimpleMaterialGroupList())
+  // materialGroupList.value = handleTree(await MaterialGroupApi.getSimpleMaterialGroupList())
+  await getMaterialGroupTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+/** 获得 物料组分类 树 **/
+const getMaterialGroupTree = async () => {
+  materialGroupTree.value = []
+  const res = await MaterialGroupApi.getSimpleMaterialGroupList()
+  let categoryTree: Tree = { id: 0, name: '物料组分类', children: [] }
+  categoryTree.children = handleTree(res)
+  materialGroupTree.value.push(categoryTree)
+  firstLevelKeys.value = materialGroupTree.value.map(node => node.id);
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {

src/views/pms/materialgroup/MaterialGroupForm.vue

@@ -9,13 +9,17 @@
     >
       <el-form-item label="上级物料组" prop="parentId">
         <el-tree-select
+          ref="treeSelectRef"
+          filterable
           v-model="formData.parentId"
           :data="materialGroupTree"
           :props="defaultProps"
+          :default-expanded-keys="firstLevelKeys"
           check-strictly
-          default-expand-all
+          clearable
           placeholder="请选择上级物料组"
           value-key="id"
+          @filter="handleFilter"
         />
       </el-form-item>
       <el-form-item label="物料组名称" prop="name">
@@ -72,14 +76,18 @@ const formRules = reactive<FormRules>({
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const materialGroupTree = ref() // 树形结构
+const materialGroupTree = ref<Tree[]>([]) // 树形结构
+const firstLevelKeys = ref<Tree[]>([])
+
+const treeSelectRef = ref()
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: number, parentId: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  formData.value.parentId = parentId
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -120,6 +128,21 @@ const submitForm = async () => {
   }
 }
 
+const handleFilter = (val: string) => {
+  // 当筛选值清空时重置展开状态
+  if (val === '') {
+    nextTick(() => {
+      const treeComponent = treeSelectRef.value?.treeRef
+      if (treeComponent) {
+        // 重置到初始展开状态
+        treeComponent.setExpandedKeys(firstLevelKeys.value)
+        // 滚动到顶部确保可视区域正确
+        treeComponent.scrollTo({ top: 0 })
+      }
+    })
+  }
+}
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -137,8 +160,18 @@ const resetForm = () => {
 const getTree = async () => {
   materialGroupTree.value = []
   const data = await MaterialGroupApi.getSimpleMaterialGroupList()
-  let materialGroup: Tree = { id: 0, name: '顶级物料组', children: [] }
-  materialGroup.children = handleTree(data)
-  materialGroupTree.value.push(materialGroup)
+  // let materialGroup: Tree = { id: 0, name: '顶级物料组', children: [] }
+  // materialGroup.children = handleTree(data)
+  // materialGroupTree.value.push(materialGroup)
+  // firstLevelKeys.value = materialGroupTree.value.map(node => node.id);
+
+  // 构建稳定的顶级节点
+  const rootNode = {
+    id: 0,
+    name: '物料组分类',
+    children: handleTree(data)
+  }
+  materialGroupTree.value = [rootNode]
+  firstLevelKeys.value = [rootNode.id]
 }
 </script>

src/views/pms/materialgroup/index.vue

@@ -38,7 +38,7 @@
         <el-button
           type="primary"
           plain
-          @click="openForm('create')"
+          @click="openForm('create', undefined)"
           v-hasPermi="['rq:iot-material-group:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
@@ -58,6 +58,7 @@
       row-key="id"
       :default-expand-all="isExpandAll"
       v-if="refreshTable"
+      @row-click="handleClick"
     >
       <el-table-column prop="name" label="物料组名称" />
       <el-table-column prop="sort" label="排序" />
@@ -123,6 +124,11 @@ const queryFormRef = ref() // 搜索的表单
 const isExpandAll = ref(false) // 是否展开，默认全部展开
 const refreshTable = ref(true) // 重新渲染表格状态
 
+const parentId = ref('')
+const handleClick = (node: {}) => {
+  parentId.value = node.id
+}
+
 /** 查询物料组列表 */
 const getList = async () => {
   loading.value = true
@@ -158,7 +164,7 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formRef.value.open(type, id, parentId.value)
 }
 
 /** 删除按钮操作 */