树筛选 新增不收缩，input触发

src/components/LeftList/LeftList.vue

@@ -5,12 +5,18 @@
       :data="treeData"
       :props="defaultProps"
       :accordion="false"
+      ref="folderTreeRef"
+      :filter-node-method="filterNode"
       node-key="id"
       :default-expand-all="false"
       :default-expanded-keys="curArr"
     >
       <template #default="{ node, data }">
-        <span class="custom-tree-node" @click="checkoutNode(node, data)" @click.right="rightFn(node, data,$event)">
+        <span
+          class="custom-tree-node"
+          @click="checkoutNode(node, data)"
+          @click.right="rightFn(node, data, $event)"
+        >
           <img :src="setImg(data.remark)" alt="" />
           <span class="node_title">{{ node.label }}</span>
           <span class="fileNum">{{
@@ -38,6 +44,7 @@ import { ElMessage } from "element-plus";
 import documents from "@/api/document/document";
 import { getDir } from "@/api/biz/dir.js";
 import { setListImg } from "@/utils/index.js";
+const { proxy } = getCurrentInstance();
 const props = defineProps({
   spaceType: {
     type: Number,
@@ -47,11 +54,16 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  searchFolderTree: {
+    type: String,
+    default: "",
+  },
 });
 const emit = defineEmits(["listfolderClick"]);
 const treeData = ref();
 console.log("treeData", treeData.value);
 const curArr = ref([]); //默认展开一级目录
+const folderTreeRef = ref();
 const defaultProps = ref({
   label: "label",
   value: "id",
@@ -118,43 +130,54 @@ const getTopDir = async () => {
   console.log("topres", res);
   curArr.value.push(res.dirId);
   return;
-  // let userMe;
-  // userMe = [res];
-  // documents
-  //   .getALLdocumentByType(
-  //     {
-  //       parentId: userMe[0].dirId - 0,
-  //       spaceId: userMe[0].spaceId,
-  //       isAsc: "asc",
-  //       orderByColumn: "createTime",
-  //       pageNum: 1,
-  //       pageSize: 999,
-  //     },
-  //     3
-  //   )
-  //   .then((res) => {
-  //     const folderArr = res.rows;
-  //   curArr.value = folderArr.map((item) => {
-  //       const obj = {
-  //         label: item.dirName,
-  //         value: item.dirId,
-  //         remark: "",
-  //         disable: false,
-  //       };
-  //       return obj
-  //     });
-  //     console.log("curArr.value", curArr.value);
-  //   });
 };
-const rightFn = (node, data,e)=>{
+const rightFn = (node, data, e) => {
   console.log("node", node);
   console.log("data", data);
   console.log("e", e);
-}
+};
+/** 通过条件过滤节点  */
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
 watch(
   () => props.ListtreeData,
   (newValue, oldValue) => {
     treeData.value = newValue;
+    // 记录当前展开的节点
+    let nodesMap = folderTreeRef.value?.store.nodesMap;
+    // console.log("nodesMap", nodesMap);
+    let expandedNodes;
+    if (nodesMap) {
+      expandedNodes = Object.keys(nodesMap).filter(
+        (key) => nodesMap[key].expanded
+      );
+    }
+    // console.log("expandedNodes", expandedNodes);
+    // 把这当从服务器拉取数据
+    treeData.value = JSON.parse(JSON.stringify(newValue));
+    // 更新数据后, 有过滤条件的执行过滤, 没有的还原之前的展开状态
+    setTimeout(() => {
+      if (props.searchFolderTree!== "") {
+        folderTreeRef.value?.filter(props.searchFolderTree);
+      } else {
+        expandedNodes.forEach((key) => (nodesMap[key].expanded = true));
+      }
+    }, 0);
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+/** 根据名称筛选部门树 */
+watch(
+  () => props.searchFolderTree,
+  (newValue, oldValue) => {
+    // console.log("watch", newValue);
+    folderTreeRef.value?.filter(newValue);
+    // proxy.$refs["folderTreeRef"].filter(newValue);
   },
   {
     immediate: true,

src/components/ListShow/ListShow.vue

@@ -5,6 +5,7 @@
         <el-input
           v-model="searchFire"
           @keyup.enter="fileBlur"
+          @input="fileBlur"
           class="searchFire"
           size="large"
           placeholder="搜索文件"

src/components/TreeMenu/TreeMenu.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="right_menu"
+    :style="{ left: fileRightXY.left + 'px', top: fileRightXY.top + 'px' }"
+  >
+    <div class="menu_item" @click="openFn">
+      <img src="@/assets/images/textbox.png" alt="" />
+      <span class="shouzhi">重命名</span>
+    </div>
+    <div class="menu_item" v-if="isTop" @click="collectFolder">
+      <img src="@/assets/images/trash.png" alt="" />
+      <span class="shouzhi">删除</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/my-common.scss";
+.right_menu {
+  width: 156px;
+  position: absolute;
+  padding: 8px;
+  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid gray;
+  background-color: #fff;
+  z-index: 10000;
+
+  .menu_item {
+    width: 100%;
+    height: 30px;
+    border-radius: 4px 4px 4px 4px;
+    line-height: 30px;
+    display: flex;
+    margin: 5px auto;
+    align-items: center;
+    font-size: 13px;
+
+    &:hover {
+      background-color: #f5f7f9;
+    }
+
+    span {
+      margin-left: 4px;
+    }
+  }
+}
+</style>

src/views/myfile/MyFile.vue

@@ -16,11 +16,20 @@
                 <!-- 方块点击盒子 -->
                 <div style="height: 75vh;overflow-y: auto;">
                     <div class="searchBox">
-                        <el-input v-model="searchFire" @keyup.enter="fileBlur" class="searchFire" size="large"
-                            placeholder="搜索文件" />
-                        <el-icon class="SearchIcon" @click="fileBlur">
-                            <Search />
-                        </el-icon>
+                        <div v-if="leftShowList == 1" style="width:100%">
+                            <el-input v-model="searchFire" @keyup.enter="fileBlur" class="searchFire" size="large"
+                                placeholder="搜索文件夹" />
+                            <el-icon class="SearchIcon" @click="fileBlur">
+                                <Search />
+                            </el-icon>
+                        </div>
+                         <div v-else style="width:100%">
+                            <el-input v-model="searchFolderTree" @keyup.enter="folderBlur" class="searchFire" size="large"
+                                placeholder="搜索文件" />
+                            <el-icon class="SearchIcon" @click="folderBlur">
+                                <Search />
+                            </el-icon>
+                        </div>
                         <div class="left_changeShow">
                             <img v-if="leftShowList == 1" src="@/assets/images/squre.png" @click="changeLeftShow" alt="">
                             <img v-else src="@/assets/images/Frame_187.png" @click="changeLeftShow" alt="">
@@ -62,7 +71,7 @@
                             </div>
                         </template>
                     </div>
-                    <LeftList v-else :spaceType="3" :ListtreeData="ListtreeData" @listfolderClick="listfolderClick"></LeftList>
+                    <LeftList v-else :spaceType="3" :searchFolderTree="searchFolderTree" :ListtreeData="ListtreeData" @listfolderClick="listfolderClick"></LeftList>
                 </div>
                 <div class="expansion">
                     <div class="top_box">
@@ -781,6 +790,7 @@ export default {
         const leftShowList = ref(localStorage.getItem('leftShowList') ||1)
         const thisFirst = ref()
         const ListtreeData = ref()
+        const searchFolderTree = ref()
         const changeSort = async () => {
             isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
             refreshFile()
@@ -1036,6 +1046,18 @@ export default {
                 });
             }
         }
+        function folderBlur() {
+            console.log('searchFolderTree',searchFolderTree.value);
+            // if (searchFire.value == '') {
+            //     getAllTop()
+            // } else {
+            //     const searchTerm = searchFire.value.trim().toLowerCase(); // 转换为小写字母并去除首尾空格
+            //     fileMenu.value = fileMenu.value.filter(item => {
+            //         const dirName = item.dirName.trim();
+            //         return dirName.includes(searchTerm);
+            //     });
+            // }
+        }
         // 文件名表格每一行点击事件
         function handleRowClick(row, col, e) {
             console.log('row', row);
@@ -2570,7 +2592,9 @@ export default {
             listfolderClick,
             clickPath,
             ListtreeData,
-            getFileTree
+            getFileTree,
+            folderBlur,
+            searchFolderTree
         }
     },
     watch: {