回收站界面增加右键还原文件

src/views/main_web/recycle/components/item-list.vue

@@ -9,6 +9,7 @@
         :checked="selectedKeyMap[node.id]"
         @check="check"
         :indent="indent"
+        @open-menu="openFileMenu"
       />
       <list-folder-item
         v-else 
@@ -18,6 +19,7 @@
         @check="check"
         :selectedKeyMap="selectedKeyMap"
         :indent="indent"
+        @open-menu="openFileMenu"
       />
     </template>
   </div>
@@ -40,6 +42,9 @@ export default {
   methods: {
     check(node) {
       this.$emit('check', node);
+    },
+    openFileMenu(e, file) {
+      this.$emit('open-menu', e, file);
     }
   }
 }

src/views/main_web/recycle/components/list-file-item.vue

@@ -1,26 +1,28 @@
 <template>
-  <div class="list-file-item">
-    <div class="list-file-item-cell">
-      <el-checkbox v-show="!readOnly" :value="!!checked" @change="onCheckChange" class="list-file-item-checkbox"  />
-      <span :title="fileName">{{fileName}}</span>
+    <div class="list-file-item" @contextmenu.prevent.stop="onRightClick">
+      <div class="list-file-item-cell">
+        <el-checkbox v-show="!readOnly" :value="!!checked" @change="onCheckChange" class="list-file-item-checkbox"  />
+        <span :title="fileName">{{fileName}}</span>
+      </div>
+      <div class="list-file-item-cell">
+        <span>V{{file.version}}</span>
+      </div>
+      <!-- <div class="list-file-item-cell" >
+        <span>V{{file.version}}</span>
+      </div> -->
+      <div class="list-file-item-cell" >
+        <span>{{file.modifyName}}</span>
+      </div>
+      <div class="list-file-item-cell">
+        <span>{{file.modifyTime | formatTime}}</span>
+      </div>
+      <div class="list-file-item-cell">
+        <span></span>
+      </div>
+      
+      <!-- <div class="list-file-item-cell" :style="{ flex: '90' }"></div> -->
     </div>
-    <div class="list-file-item-cell">
-      <span>V{{file.version}}</span>
-    </div>
-    <!-- <div class="list-file-item-cell" >
-      <span>V{{file.version}}</span>
-    </div> -->
-    <div class="list-file-item-cell" >
-      <span>{{file.modifyName}}</span>
-    </div>
-    <div class="list-file-item-cell">
-      <span>{{file.modifyTime | formatTime}}</span>
-    </div>
-    <div class="list-file-item-cell">
-      <span></span>
-    </div>
-    <!-- <div class="list-file-item-cell" :style="{ flex: '90' }"></div> -->
-  </div>
+  
 </template>
 
 <script>
@@ -45,6 +47,11 @@ export default {
       return dayjs(v).format('YYYY年MM月DD日 A HH:mm');
     }
   },
+  data() {
+    return {
+      menuStyle: { left: 0, top: 0 },
+    }
+  },
   computed: {
     fileName(){
       const file = this.file;
@@ -63,6 +70,9 @@ export default {
   methods: {
     onCheckChange(){
       this.$emit('check', this.file);
+    },
+    onRightClick(e) {
+      this.$emit('open-menu', e, this.file);
     }
   }
 }

src/views/main_web/recycle/components/list-folder-item.vue

@@ -46,6 +46,7 @@
       :readOnly="readOnly"
       :selectedKeyMap="selectedKeyMap"
       :indent="indent + 1"
+      @open-menu="openFileMenu"
     />
   </div>
 </template>
@@ -76,6 +77,9 @@ export default {
     check(node) {
       this.$emit("check", node);
     },
+    openFileMenu(e, file) {
+      this.$emit('open-menu', e, file);
+    }
   },
 };
 

src/views/main_web/recycle/index.vue

@@ -68,6 +68,7 @@
             :readOnly="!selectable"
             :selectedKeyMap="selectedKeyMap"
             @check="toggleCheck"
+            @open-menu="openFileMenu"
           />
         </div>
         <div
@@ -114,6 +115,16 @@
         >确定转移</el-button>
       </span>
     </el-dialog>
+
+    <div
+      class="contextmenu file-right-menu"
+      v-if="fileMenuKey"
+      :style="fileMenuStyle"
+    >
+      <ul class="rightMenu">
+        <li @click.stop="recoverFiles(fileMenuKey)">返回原处</li>
+      </ul>
+    </div>
   </div>
 </template>
 <script>
@@ -123,7 +134,11 @@ import CollapseUnit from "./components/collapse-unit.vue";
 import ProjectCollapseUnit from "./components/project-collapse-unit";
 import ItemList from "./components/item-list";
 import { VirtualFolder } from "../workspace/helper";
-import { firstCharToLowerCase, firstCharToUpperCase, notify } from "@/utils/tool";
+import {
+  firstCharToLowerCase,
+  firstCharToUpperCase,
+  notify,
+} from "@/utils/tool";
 import { wrapErrorHint } from "@/utils/request";
 export default {
   components: {
@@ -134,6 +149,12 @@ export default {
   },
   mounted() {
     this.fetchProjectList();
+    document.body.addEventListener('click', this.closeFileMenu);
+    document.body.addEventListener('contextmenu', this.closeFileMenu);
+  },
+  destroyed() {
+    document.body.removeEventListener('click', this.closeFileMenu);
+    document.body.removeEventListener('contextmenu', this.closeFileMenu);
   },
   data() {
     return {
@@ -150,21 +171,25 @@ export default {
 
       chooseNodeModalVisible: false,
       choosedNode: {},
+      fileMenuStyle: {},
+      fileMenuKey: undefined,
     };
   },
   watch: {
     selectedProject(project) {
       this.fetchProjectRemovedFiles(project.id);
       this.selectable = false;
+      this.fileMenuKey = undefined;
     },
     selectable() {
       this.selectedKeyMap = {};
+      this.fileMenuKey = undefined;
     },
     chooseNodeModalVisible(flag) {
-      if(!flag) {
+      if (!flag) {
         this.choosedNode = {};
       }
-    }
+    },
   },
   computed: {
     canShowButton() {
@@ -175,13 +200,29 @@ export default {
     searchForFile() {
       debugger;
     },
+    openFileMenu(e, file) {
+      if(this.selectable || this.selectedProject.deleted) { return; }
+      console.log(e, file);
+      this.fileMenuKey=file.id;
+      const left = e.clientX - (window.innerWidth - e.clientX < 200 ? 100 : 0);
+      const top = e.clientY - (window.innerHeight - e.clientY < 200 ? 100 : 0);
+      this.fileMenuStyle = {
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    },
+    closeFileMenu() {
+      this.fileMenuKey = undefined;
+    },
     async fetchProjectList() {
       const res = await this.$fetchApi("project/queryAllProjectListByUserId", {
         userId: this.userId,
       });
       const [aliveProjectList, removedProjectList] = (res.Data || []).reduce(
         (arr, upperProject) => {
-          if(!upperProject.HasFile) { return arr; }
+          if (!upperProject.HasFile) {
+            return arr;
+          }
           const project = firstCharToLowerCase(upperProject);
           if (project.nodeFolder) {
             project.nodeFolder = project.nodeFolder.map(firstCharToLowerCase);
@@ -200,9 +241,11 @@ export default {
         : removedProjectList.length
         ? removedProjectList[0]
         : {};
-      if(sessionStorage.projId) {
-        const mayExistProject = aliveProjectList.find(proj => proj.id === sessionStorage.projId);
-        if(mayExistProject) {
+      if (sessionStorage.projId) {
+        const mayExistProject = aliveProjectList.find(
+          (proj) => proj.id === sessionStorage.projId
+        );
+        if (mayExistProject) {
           this.selectedProject = mayExistProject;
         }
       }
@@ -216,15 +259,20 @@ export default {
         { projectId }
       );
 
-      const [fileTreeList, fileList] = (res.Data || []).reduce((arr, topNode) => {
-        if (topNode.ProjArchives) {
-          arr[0] = arr[0].concat(
-            resolveFileListToTree(topNode.ProjArchives, topNode.FolderName)
-          );
-          arr[1] = arr[1].concat(topNode.ProjArchives.map(firstCharToLowerCase));
-        }
-        return arr;
-      }, [[], []]);
+      const [fileTreeList, fileList] = (res.Data || []).reduce(
+        (arr, topNode) => {
+          if (topNode.ProjArchives) {
+            arr[0] = arr[0].concat(
+              resolveFileListToTree(topNode.ProjArchives, topNode.FolderName)
+            );
+            arr[1] = arr[1].concat(
+              topNode.ProjArchives.map(firstCharToLowerCase)
+            );
+          }
+          return arr;
+        },
+        [[], []]
+      );
       this.currentFileList = fileList;
       this.rightPanelItemList = fileTreeList;
     },
@@ -247,9 +295,10 @@ export default {
         this.selectedKeyMap = { ...tempMap, ...stateMap };
       }
     },
-    async recoverFiles() {
+    async recoverFiles(fileId) {
+      this.fileMenuKey = undefined;
       const project = this.selectedProject;
-      const fileIds = Object.keys(this.selectedKeyMap).filter((fileId) => {
+      const fileIds = fileId ? [fileId]: Object.keys(this.selectedKeyMap).filter((fileId) => {
         return this.selectedKeyMap[fileId];
       });
       const res = await this.$fetchApi("file/removeFromRecycleBin", {
@@ -266,22 +315,24 @@ export default {
       const { currentFileList, selectedKeyMap, choosedNode } = this;
       const { id: folderId, levelId: folderLevelId, projId } = choosedNode;
       const createFileList = currentFileList.reduce((list, file) => {
-        if(!selectedKeyMap[file.id]) return list;
+        if (!selectedKeyMap[file.id]) return list;
         const iFile = {
-          ...file, 
+          ...file,
           folderId,
           folderLevelId,
           projId,
-        }
+        };
         delete iFile.id;
         list.push(firstCharToUpperCase(iFile));
         return list;
       }, []);
-      const res = await this.$fetchApi('file/batchAddFile', {
+      const res = await this.$fetchApi("file/batchAddFile", {
         ProjArchiveTbs: createFileList,
       });
       wrapErrorHint(res);
-      if(res.Code !== 0) { return; }
+      if (res.Code !== 0) {
+        return;
+      }
       notify.success("文件拷贝成功");
       this.fetchProjectRemovedFiles(this.selectedProject.id);
       this.chooseNodeModalVisible = false;
@@ -347,12 +398,6 @@ function resolveFileListToTree(upperFileList, nodeName) {
 
   return headList;
 }
-function recursionEvery(list, checkedMap) {
-  return list.every((node) => {
-    if (node.nodeType === "file") return checkedMap[node.id];
-    return recursionEvery(node.children, checkedMap);
-  });
-}
 </script>
 
 <style lang="scss" scoped>
@@ -543,4 +588,9 @@ function recursionEvery(list, checkedMap) {
     overflow: auto;
   }
 }
+.file-right-menu {
+  position: fixed;
+  width: 100px;
+  text-align: center;
+}
 </style>