树右键菜单，操作后回显，star收藏

src/components/LeftList/LeftList.vue

@@ -6,6 +6,8 @@
       :props="defaultProps"
       :accordion="false"
       ref="folderTreeRef"
+      :highlight-current="true"
+      :current-node-key="curNode"
       :filter-node-method="filterNode"
       node-key="id"
       :default-expand-all="false"
@@ -59,11 +61,13 @@ const props = defineProps({
     default: "",
   },
 });
-const emit = defineEmits(["listfolderClick"]);
+const emit = defineEmits(["listfolderClick",'treeRClick']);
 const treeData = ref();
 console.log("treeData", treeData.value);
 const curArr = ref([]); //默认展开一级目录
 const folderTreeRef = ref();
+const curNode = ref()
+const topId = ref()//顶层的id
 const defaultProps = ref({
   label: "label",
   value: "id",
@@ -94,7 +98,9 @@ function getFileTree() {
 }
 const checkoutNode = async (node, data) => {
   // console.log("treeData", treeData.value);
-  console.log("node", node);
+  // console.log("node", node);
+  curNode.value = node.data.id
+  // console.log("curNode.value", curNode.value);
   // console.log("data", data);
   let thisNode;
   function getLevel2(nodes) {
@@ -129,12 +135,15 @@ const getTopDir = async () => {
   const res = await documents.getTop(3);
   console.log("topres", res);
   curArr.value.push(res.dirId);
+  topId.value = res.dirId
   return;
 };
-const rightFn = (node, data, e) => {
+const rightFn =async (node, data, e) => {
   console.log("node", node);
   console.log("data", data);
   console.log("e", e);
+  const res = await getDir(data.id);
+  emit('treeRClick',res.data,null,e)
 };
 /** 通过条件过滤节点  */
 const filterNode = (value, data) => {
@@ -148,13 +157,16 @@ watch(
     // 记录当前展开的节点
     let nodesMap = folderTreeRef.value?.store.nodesMap;
     // console.log("nodesMap", nodesMap);
-    let expandedNodes;
+    // console.log("curNode.value", curNode.value);
+    let expandedNodes = [];
     if (nodesMap) {
       expandedNodes = Object.keys(nodesMap).filter(
         (key) => nodesMap[key].expanded
       );
+    }else{
+      expandedNodes.push(topId.value)
     }
-    // console.log("expandedNodes", expandedNodes);
+    console.log("expandedNodes", expandedNodes);
     // 把这当从服务器拉取数据
     treeData.value = JSON.parse(JSON.stringify(newValue));
     // 更新数据后, 有过滤条件的执行过滤, 没有的还原之前的展开状态
@@ -164,6 +176,7 @@ watch(
       } else {
         expandedNodes.forEach((key) => (nodesMap[key].expanded = true));
       }
+      folderTreeRef.value?.setCurrentKey(curNode.value)
     }, 0);
   },
   {

src/components/ListShow/ListShow.vue

@@ -38,9 +38,23 @@
         ref="container"
         @row-contextmenu="rightClick"
       >
-        <el-table-column label="名称">
+        <el-table-column label="名称" :show-overflow-tooltip="true">
           <template #default="scope">
             <div class="flie_name">
+              <el-icon
+                v-if="scope.row.isFavorite == 'N'"
+                @click.stop="collect(scope.row, false)"
+                style="margin-right: 7px"
+              >
+                <Star />
+              </el-icon>
+              <img
+                v-else
+                @click.stop="dCollect(scope.row, false)"
+                src="../../assets/images/yellowstar.png"
+                alt=""
+                style="margin-right: 5px"
+              />
               <img
                 class="table_icon"
                 :src="setIcon(scope.row.fileType)"
@@ -89,7 +103,7 @@ const props = defineProps({
     default: () => [],
   },
 });
-const emit = defineEmits(["handleRowClick"]);
+const emit = defineEmits(["handleRowClick",'delCollect','collectByStar']);
 // 切换搜索分类
 const changeSearchType = (name) => {
   let baseDataObj = props.fileList;
@@ -118,8 +132,14 @@ const fileBlur = () => {
   });
 };
 
-const rightClick = (row, col, e)=>{
-  emit('handleRowClick',row,null,e)
+const rightClick = (row, col, e) => {
+  emit("handleRowClick", row, null, e);
+};
+const collect = (row, bool)=>{
+  emit('collectByStar',row,bool)
+}
+const dCollect = (row, bool)=>{
+  emit('delCollect',row,bool)
 }
 
 //工具函数

src/components/TreeMenu/TreeMenu.vue

@@ -1,33 +1,68 @@
 <template>
   <div
     class="right_menu"
-    :style="{ left: fileRightXY.left + 'px', top: fileRightXY.top + 'px' }"
+    :style="{ left: props.xz + 'px', top: props.yz + 'px' }"
   >
-    <div class="menu_item" @click="openFn">
-      <img src="@/assets/images/textbox.png" alt="" />
+    <div class="menu_item" @click="reNameFn">
+      <!-- <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="" />
+    <div class="menu_item" @click="openFn">
+      <!-- <img src="@/assets/images/textbox.png" alt="" /> -->
+      <span class="shouzhi">编辑</span>
+    </div>
+    <div class="menu_item" @click="delFn">
+      <!-- <img src="@/assets/images/trash.png" alt="" /> -->
       <span class="shouzhi">删除</span>
     </div>
   </div>
 </template>
 
 <script setup>
+import {
+  ref,
+  computed,
+  reactive,
+  defineComponent,
+  watch,
+  toRaw,
+  onMounted,
+  defineExpose,
+  onDeactivated,
+} from "vue";
+import { ElMessage } from "element-plus";
+const props = defineProps({
+  xz: {
+    type: Number,
+    default: 0,
+  },
+  yz: {
+    type: Number,
+    default: 0,
+  },
+});
+const emit = defineEmits(["restName",'delName']);
+const reNameFn = ()=>{
+    console.log(1);
+    emit('restName')
+}
+const delFn = ()=>{
+    emit('delName')
+}
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/styles/my-common.scss";
 .right_menu {
-  width: 156px;
+  width: 120px !important;
   position: absolute;
   padding: 8px;
   box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
   border-radius: 4px 4px 4px 4px;
-  border: 1px solid gray;
+//   border: 1px solid gray;
   background-color: #fff;
   z-index: 10000;
+  text-align: center !important;
 
   .menu_item {
     width: 100%;

src/views/myfile/MyFile.vue

@@ -71,7 +71,7 @@
                             </div>
                         </template>
                     </div>
-                    <LeftList v-else :spaceType="3" :searchFolderTree="searchFolderTree" :ListtreeData="ListtreeData" @listfolderClick="listfolderClick"></LeftList>
+                    <LeftList v-else :spaceType="3" @treeRClick="treeRClick" :searchFolderTree="searchFolderTree" :ListtreeData="ListtreeData" @listfolderClick="listfolderClick"></LeftList>
                 </div>
                 <div class="expansion">
                     <div class="top_box">
@@ -382,7 +382,7 @@
                             </div>
                         </div>
                     </div>
-                    <ListShow v-show="leftShowList == 0" :fileList="fileList" @handleRowClick="handleRowClick"></ListShow>
+                    <ListShow v-show="leftShowList == 0" :fileList="fileList" @delCollect="delCollect" @collectByStar="collectByStar" @handleRowClick="handleRowClick"></ListShow>
 
                 </div>
             </div>
@@ -513,6 +513,7 @@
     </div>
     <!-- 扫描文件移动到 -->
     <MoveTo v-if="openScanMove" :spaceType='3' :scanFileArr="scanFileArr" :thisFolder="thisFolder" :openScanMove="openScanMove" @closeOpenScanMove='closeOpenScanMove'></MoveTo>
+    <TreeMenu v-show="showTreeMenu" @restName="restName" @delName="delName" :xz="xz" :yz="yz"></TreeMenu>
 </template>
 
 <script>
@@ -568,6 +569,7 @@ import elTableInfiniteScroll from 'el-table-infinite-scroll'
 import { getLevel } from '@/api/level/level.js';
 import { listInfo,selectInfo ,getFileByScanerId} from '@/api/scanner/info.js';
 import { getConfigKey } from "@/api/system/config.js"
+import TreeMenu from '@/components/TreeMenu/TreeMenu.vue'
 
 export default {
     directives: {
@@ -791,6 +793,7 @@ export default {
         const thisFirst = ref()
         const ListtreeData = ref()
         const searchFolderTree = ref()
+        const showTreeMenu = ref(false)
         const changeSort = async () => {
             isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
             refreshFile()
@@ -1082,6 +1085,18 @@ export default {
                 cliCC.value = true
             }
         }
+        // 树节点右键事件
+        function treeRClick(row, col, e) {
+            console.log('row', row);
+            // isFolder.value = "N"
+            clickRow.value = row
+            e.preventDefault();
+            e.stopPropagation();
+            xz.value = e.pageX
+            yz.value = e.pageY
+            showTreeMenu.value = true
+          
+        }
         // 申请扩容
         async function askApply() {
             const res = await fileSpace.querySpace(impSpaceId.value)
@@ -1501,9 +1516,11 @@ export default {
             }
         }
         function delName(row, num) {
+            row = row ? row : clickRow.value
             documents.delDocument(row.dirId).then(res => {
                 if (res.code === 200) {
                     getAllTop()
+                    getSpaceList()
                     ElMessage({
                         message: "删除成功",
                         type: "success"
@@ -1826,6 +1843,11 @@ export default {
             // console.log("close");
             folderVisible.value = false;
         };
+         // 关闭tree右键菜单
+        const closeTreeRMenu = () => {
+            // console.log("close");
+            showTreeMenu.value = false;
+        };
         // 文件夹收藏事件
         const collectFolder = () => {
             // console.log('clickRow',clickRow.value);
@@ -2304,6 +2326,7 @@ export default {
             changePageSizeFn()
             window.addEventListener("click", closeRMenu, true);
             window.addEventListener("click", mouseClick, true);
+            window.addEventListener("click", closeTreeRMenu, true);
             console.log('leftShowList',leftShowList.value);
             console.log('onMounted');
         })
@@ -2594,7 +2617,10 @@ export default {
             ListtreeData,
             getFileTree,
             folderBlur,
-            searchFolderTree
+            searchFolderTree,
+            treeRClick,
+            showTreeMenu,
+            closeTreeRMenu
         }
     },
     watch: {
@@ -2618,7 +2644,8 @@ export default {
         ScanFile,
         MoveTo,
         LeftList,
-        ListShow
+        ListShow,
+        TreeMenu
     },
 }
 
@@ -2881,7 +2908,7 @@ p {
     background-color: white;
     border: 1px solid gray;
     border-radius: 4px;
-    z-index: 3;
+    z-index: 3000;
     overflow-y: auto;
     // font-size: 16px;
 }
@@ -2893,7 +2920,7 @@ p {
     background-color: white;
     border: 1px solid gray;
     border-radius: 4px;
-    z-index: 100;
+    z-index: 1000;
     overflow-y: auto;
 }