移动到回收站

dist/static/css/main.css

@@ -4863,7 +4863,7 @@ div.mt-16{
     /*background: #ccc;*/
     display: block;
     width: 16px;
-    height: 16px;
+	height: 16px;
 }
 .el-icon-reseting{
 	background: url(/static/img/icon_16.png) no-repeat 0 -16px;
@@ -5168,9 +5168,9 @@ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     position: relative;
     left: -44px;
 }
-.bghover:hover .top_optionBar{
+/* .bghover:hover .top_optionBar{
   opacity: 1;
-}
+} */
 .helpNodeDetailBox{
 	min-height: calc(100vh - 300px);
     overflow-y: auto;

src/components/app-header/app-header.vue

@@ -35,6 +35,7 @@
             <i
               class="Cicon icon font_family icon-icon_huishouzhan"
               :class="{inRecycle:isInRecycle}"
+              v-if ="showUserCenter"
             />
         </span>
         <user-center v-if="showUserCenter" />

src/views/main_web/workspace/components/recycle-file.vue

@@ -25,14 +25,37 @@
           >
           </div>
           <!-- 右键菜单 -->
-          <div class="contextmenu" v-show="true"
+          <!-- <div class="contextmenu" v-show="true"
           
           >
             <ul class="rightMenu">
               <li class="download" v-if="isClient" @click="clientDownLoad(file)">下载</li>
               <li class="putaway" @click="removeFile(file.id)">放回原处</li>
-              <!-- <li class="delete">彻底删除</li> -->
             </ul>
+          </div> -->
+          <div class="top_btn" v-show="true"
+           @mouseenter="enterSelectBtn" 
+           @mouseleave="leaveSelectBtn"
+              >
+               <div>
+                  <span>
+                    <i 
+                    class="icon iconfont icon_small-icon_small_wenjianshezhi settingIcon"            
+                    :class="{setColor:isEnterBtn}"
+                    ></i>
+                  </span>
+                  <transition name="fade">
+                      <div class="recycleBinMenu" 
+                      v-show="recycleBinMenuShow" 
+                      >
+                        <ul>
+                          <!-- <li class="menu_item download">下载</li> -->
+                          <li class="menu_item putaway" @click="removeFile(file.id)">放回原处</li>
+                          <!-- <li class="menu_item delete">彻底删除</li> -->
+                        </ul>
+                      </div>
+                  </transition>
+               </div>
           </div>
 
           <!-- 右上设置按钮 -->
@@ -113,6 +136,8 @@ export default {
         filePreviewList,
         isFileRightMenuVisible: false,
         isClient: system.isClient,
+        isEnterBtn:false,
+        recycleBinMenuShow:false
       }
     },
     methods:{
@@ -120,58 +145,66 @@ export default {
       fileClick(){
         console.log(12111)
       },
+      /**
+       * 鼠标移入选择图标
+       */
+      enterSelectBtn(){
+        this.isEnterBtn = true;
+        this.recycleBinMenuShow = true;
+      },
+      /**
+       * 鼠标离开选择图标
+       */
+      leaveSelectBtn(){
+        this.isEnterBtn = false;
+        this.recycleBinMenuShow = false;  
+      },
       async removeFile(id){
-        console.log(1111)
           const res = await removeFromRecycleBin(id);
           if(res.Code !== -1){
               this.$notify({
                   type:'success',
                   message:"文件已放回原处。"
               })
+              this.$emit('recycleFile',true);
           }
       },
     /**
      * 客户端下载方法
      */
-    clientDownLoad: function (file) {
+    clientDownLoad: function (file, type) {
       if(!this.isClient) return;
-      // console.log('下载的文件对象', file);
-      const { ipfsCid, archName: fileName, extension, folderId, nodeName, relativePath } = file;
+      console.log('下载的文件对象', file);
+      const { ipfsCid, archName: fileName, extension, folderId } = file;
       const folderMap = this.folderMap;
-      // const { levelId } = folderMap[folderId] || {};
-      const nodeFolderName = nodeName || this.currentNodeFolder.folderName;
+      const { folderName, levelId } = folderMap[folderId] || {};
       const extensionedFileName = `${fileName}${extension ? `.${extension}`:''}`;
-      const isCooperateFile = !!nodeName;
-      const targetFolderName = `${nodeFolderName}${isCooperateFile ? '\\协作文件': ''}`;
-      const dirName = `${targetFolderName}${relativePath ? `\\${relativePath}`:''}`.replace(/\//g, '\\');
-      // const fileStoreKey = `${targetFolderName}\\${extensionedFileName}`;
-      const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder);
-      const errorHandler = () => {
-        this.removeFileLoadingState(file.id);
-      }
-      //this.updateFileLoadState(file, DOWNLOADING, 0);
-      system.downloadFile(ipfsCid, sessionStorage.projName, extensionedFileName, dirName, (resMessage, socketIns) => {
-        //console.log('receive download file message:', resMessage, socketIns);
+      this.updateFileLoadState(file, 0);
+      system.downloadFile(ipfsCid, sessionStorage.projName, extensionedFileName, folderName, (resMessage, socketIns) => {
+        console.log('receive download file message:', resMessage, socketIns);
         // {"size":"11","currentSize":"11","unit":"B","process":100,"hash":""}
         try {
-          const { process, hash } = JSON.parse(resMessage.data);
-          //this.updateFileLoadState(file, DOWNLOADING, process);
+          const { process } = JSON.parse(resMessage.data);
+          this.updateFileLoadState(file, process);
           if(process !== 100) return;
-          this.addLocalFileRecord(fileStoreKey, ipfsCid);
-          this.removeFileLoadingState(file.id);
+          socketIns.close();
+          // file.downloadStatus = 2;
+          // file.isDownload = true;
+          // 注入到文件下载检测表中
+          const key = `${folderName}\\${extensionedFileName}`;
+          this.fileDownloadStatusHash[key] = ipfsCid;
+          this.refreshFileStatus();
+          //notify.success(`${fileName}，下载完成。`);
           this.$notify({
             type:["success","download"],
             title:"文件已下载",
-            message:`${fileName}`
+            message:'${fileName}'
           })
-          socketIns.close();
           // this.$forceUpdate();
         } catch (e) {
           console.error('socket-download-file parse data have error:', e);
-          errorHandler();
-          socketIns.close();
         }
-      }, errorHandler);
+      });
     },
     }
 }
@@ -187,5 +220,43 @@ export default {
 .delete{
   color: #D6243A;
 }
+.recycleBinMenu{
+  margin-top: 9px;
+  width: 92px;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 12px 14px 0px rgba(0, 0, 0, 0.2);
+}
+.menu_item{
+  line-height: 36px;
+  width: 92px;
+  box-sizing: border-box;
+  border: 1px solid #E3E3E3;
+  font-size: 15px;
+
+  
+}
+.menu_item:last-child{
+  border:none;
+}
+.setColor{
+  color: #8C00FF;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+.top_btn{
+	position: absolute;
+    right: 10px;
+    top: 4px;
+    /*background: #ccc;*/
+    display: block;
+    width: 16px;
+	height: 16px;
+	z-index: 1;
+}
 
 </style>

src/views/main_web/workspace/recyclebin.vue

@@ -19,6 +19,7 @@
             v-for="file in fileList"
             :key="file.id"
             :file="file"
+            @recycleFile="isRecycle"
             >
             </recycle-file>
         </div>
@@ -47,6 +48,13 @@ export default {
             const res = await queryFilesFromRecycleBin();
             this.fileList = res;
         },
+        isRecycle(flag){
+            debugger;
+            if(flag){
+                 debugger;
+                this.getRecycleFiles();
+            }
+        }
     }
 
 }