add(mes): 物料信息页面增加物料类型树筛选功能

- 添加左侧物料类型树，实现树形结构展示和筛选
- 增加搜索框，支持模糊搜索物料类型
- 优化物料信息列表，调整部分字段名称
- 重置查询条件时，清除物料类型ID并重置树状结构选择

src/views/mes/baseMaterialInfo/index.vue

@@ -1,5 +1,35 @@
 <template>
   <div class="p-2">
+<el-row :gutter="9">
+  <el-col :span="4" :xs="24">
+    <div class="head-container">
+      <el-input
+        v-model="filterBoxName"
+        placeholder="请输入名称"
+        clearable
+        size="small"
+        prefix-icon="el-icon-search"
+        style="margin-bottom: 20px"
+      />
+    </div>
+    <div class="head-container">
+      <div class="tree-container">
+        <el-tree
+          :data="InfoOptions"
+          :props="props"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="matrialTypeId"
+          default-expand-all
+          highlight-current
+          @node-click="handleTreeNodeClick"
+        />
+      </div>
+    </div>
+  </el-col>
+
+  <el-col :span="20" :xs="24">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -78,7 +108,7 @@
                 <el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
             </el-form-item>-->
-<!--            <el-form-item label="删除标识(0否 1是)" prop="deletedFlag">
+<!--            <el-form-item label="删除标识" prop="deletedFlag">
               <el-select v-model="queryParams.deletedFlag" placeholder="请选择删除标识(0否 1是)" clearable >
                 <el-option v-for="dict in deleted_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
@@ -114,7 +144,7 @@
             <el-form-item label="安全库存数量" prop="safeStockAmount">
               <el-input v-model="queryParams.safeStockAmount" placeholder="请输入安全库存数量" clearable @keyup.enter="handleQuery" />
             </el-form-item>-->
-<!--            <el-form-item label="申请标识(1是 0否)" prop="applyFlag">
+<!--            <el-form-item label="申请标识" prop="applyFlag">
               <el-select v-model="queryParams.applyFlag" placeholder="请选择申请标识(1是 0否)" clearable >
                 <el-option v-for="dict in apply_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
@@ -349,8 +379,15 @@
         </el-table-column>
       </el-table>
 
+
+
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
+
+  </el-col>
+
+</el-row>
+
     <!-- 添加或修改物料信息对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="baseMaterialInfoFormRef" :model="form" :rules="rules" label-width="120px">
@@ -883,6 +920,10 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
+  queryParams.value.materialTypeId = undefined; // 清除物料类型ID查询条件（树状结构）
+  if (tree.value) {
+    tree.value.setCurrentKey(null);
+  }
   dateRangeApproveDate.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
@@ -975,7 +1016,39 @@ const getMaterialType = async () => {
   materialTypeList.value = res.data;
 }
 
+//左侧物料类型树
+let InfoOptions = ref([]);
+const getInfoOptions = async () => {
+  const res = await getBaseMaterialTypeList(null);
+  InfoOptions.value = proxy?.handleTree(res.data, "matrialTypeId", "parentId");
+}
+
+//点击左侧物料类型树节点，获取id并赋值给form.value.materialTypeId
+const handleTreeNodeClick = async (data: any) => {
+  queryParams.value.materialTypeId = data.matrialTypeId;
+  handleQuery();
+}
+
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.matrialTypeName.toLowerCase().includes(value.toLowerCase());
+}
+
+const filterBoxName = ref('');
+const props = reactive({
+  children: 'children',
+  label: 'matrialTypeName',
+  value: 'matrialTypeId'
+});
+const tree = ref();
+watch(filterBoxName, (newVal) => {
+  if (tree.value) {
+    tree.value.filter(newVal);
+  }
+});
+
 onMounted(() => {
+  getInfoOptions();
   getList();
 });
 </script>