文件状态标识未加载完成时显示loding蒙版

src/views/main_web/index/index.vue

@@ -421,7 +421,9 @@ export default {
       }
       this.$router.push({
         name: "workspace",
-      });
+      }).catch(err => {
+        console.log(err);
+      })
       sessionStorage.pageName = "workspace";
     },
     /**

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

@@ -1,12 +1,18 @@
 <template>
-  <div>
-    <el-tooltip 
+  <div @dblclick="dblclickFile">
+    <el-tooltip
       :content="`${file.modifyName} 正在编辑中`"
       :disabled="!(isInWorkFolder && otherUserIsWorking)"
       placement="right"
       effect="light"
     >
-      <div class="yiyun_wenjian_list"  @contextmenu.prevent.stop="fileRightBtnClick">
+      <div class="yiyun_wenjian_list loding-mask-parent"  
+          :class="{'yiyun_wenjian_list_add': !isLocalIpfsCidValidate}"
+          @contextmenu.prevent.stop="fileRightBtnClick">
+        <!-- 文件状态未加载出来时的loading 蒙版 -->
+        <div class="set-loding-mask-position">
+          <div v-loading="!isLocalIpfsCidValidate" class="downloadIcon"></div>
+        </div>
         <div>
           <!-- 非图片文件图标 -->
           <div
@@ -83,7 +89,7 @@
                 <div class="minifont">上传中 {{loadingState.loadProgress}}</div>
               </span> -->
             </div>
-
+       
             <!-- 左上角图标 -->
             <template v-if="fileInLocal && !fileIsLoading">
               <!-- 灰色感叹号 -->
@@ -193,6 +199,7 @@
           <span v-if="loadingState.type === UPLOADING" class="yiyunwenjian_infodesc">{{`${loadingState.loadSize || '--'} ${loadingState.loadUnit || ''} / ${loadingState.totalSize || '--'} ${loadingState.unit || ''}`}}</span>
         </div>
       </div>
+
     </el-tooltip>
   </div>
 </template>
@@ -283,8 +290,11 @@ export default {
       const { file, currentFolder } = this;
       return file.folderId === this.nodeFolder.id;
     },
+    isLocalIpfsCidValidate() {
+      return !!this.localFileHashMap;
+    },
     localIpfsCid() {
-      return this.localFileHashMap[this.fileStoreKey];
+      return this.localFileHashMap && this.localFileHashMap[this.fileStoreKey];
     },
     isWorking() {
       return this.file.workStatus === WORKING;
@@ -324,15 +334,23 @@ export default {
   },
   methods: {
     oneOf,
+    dblclickFile() {
+      if(this.isLocalIpfsCidValidate) {
+        this.$emit('dblclickFile');
+      }
+    },
     fileRightBtnClick(e) {
-      this.isFileRightMenuVisible = true;
-      this.fileRightMenuLeft = e.offsetX;
-      if(e.target === this.domFileName) {
-        this.fileRightMenuTop = e.offsetY + this.downLoadIconHeight;
-      } else {
-        this.fileRightMenuTop = e.offsetY
+      console.log(this.isLocalIpfsCidValidate);
+      if(this.isLocalIpfsCidValidate) {
+        this.isFileRightMenuVisible = true;
+        this.fileRightMenuLeft = e.offsetX;
+        if(e.target === this.domFileName) {
+          this.fileRightMenuTop = e.offsetY + this.downLoadIconHeight;
+        } else {
+          this.fileRightMenuTop = e.offsetY
+        }
+        this.$emit('oneFileRightBtnClick', this.file.id);
       }
-      this.$emit('oneFileRightBtnClick', this.file.id);
     },
     closeFileRightMenu() {
       this.isFileRightMenuVisible = false;
@@ -360,7 +378,7 @@ export default {
     },
     tempRightFileId(val) {
       this.isFileRightMenuVisible = (val === this.file.id);
-    }
+    },
   }
 };
 </script>
@@ -408,4 +426,36 @@ export default {
     color:rgb(167,168,183);
   }
 
+
+</style>
+
+<style>
+  .loding-mask-parent {
+    position: relative;
+  }
+/* 设置蒙版的位置 */
+  .set-loding-mask-position {
+    position: absolute;
+    left:0;
+    top:0;
+    bottom:0;
+    right:0;
+  }
+  /* 当有loding蒙版的时候 原来文件hover背景变灰覆盖 */
+  .yiyun_wenjian_list_add:hover {
+    background-color: transparent !important;
+    cursor: default;
+  }
+/* 加载蒙版的样式 */
+  .loding-mask-parent .el-loading-mask {
+    border-radius: 8px;
+    background-color: rgba(255,255, 255, .15);
+  } 
+  /* 旋转的svg */
+  .loding-mask-parent .el-loading-spinner svg {
+    position: relative;
+  }
+  .loding-mask-parent .el-loading-spinner {
+    margin-top: -18px !important;
+  }
 </style>

src/views/main_web/workspace/workspace.new.vue

@@ -46,7 +46,7 @@
                   class="section_item section_item_aside_fl"
                 >
                   <span
-                    class="yiyun_text-title-workspace mr-20 ml-8"
+                    class="yiyun_text-title-workspace mr-20 ml-8" 
                   >
                     <el-breadcrumb class="folder_breadcrumb" separator-class="el-icon-arrow-right">
                       <el-breadcrumb-item @click.native="clickBreadcrumb(-1, 0)">工作文件</el-breadcrumb-item>
@@ -94,7 +94,7 @@
                       :nodeFolder="currentNodeFolder"
                       :currentFolder="currentFolder"
                       :commitFile="commitFile"
-                      @dblclick.native="fileClick(file)"
+                      @dblclickFile="fileClick(file)"
                       @openfileBtnClick="fileClick(file)"
                       @copyFileBtnClick="copyWorkFileBtnClick(file)"
                       @oneFileRightBtnClick="oneFileRightBtnClick"
@@ -213,7 +213,7 @@
                       :showFileMilestone="showFileMilestone"
                       :nodeFolder="currentNodeFolder"
                       :currentFolder="currentFolder"
-                      @dblclick.native="fileClick(file)"
+                      @dblclickFile="fileClick(file)"
                       @oneFileRightBtnClick="oneFileRightBtnClick"
                       :localFileHashMap="localFileHashMap"
                       :loadingState="localFileLoadStateMap[file.id]"
@@ -429,7 +429,7 @@ export default {
 
       neibianju: "neibianju", // 协作文件槽样式
       showadow: false,
-      localFileHashMap: {}, // { `${节点名称}\\${文件名称}.${文件扩展名}`: `${ipfsCid}` }
+      localFileHashMap: null, // { `${节点名称}\\${文件名称}.${文件扩展名}`: `${ipfsCid}` }
       /**
        * 文件本地加载状态表
        * 格式: {
@@ -471,7 +471,8 @@ export default {
 
     this.socketIns = system.entryProject(
       sessionStorage.projName, sessionStorage.userId,
-      this.onSocketFileChangeDetected.bind(this), (localWorkspacePrefix) => { this.localWorkspacePrefix = localWorkspacePrefix;},
+      this.onSocketFileChangeDetected.bind(this),
+       (localWorkspacePrefix) => { this.localWorkspacePrefix = localWorkspacePrefix;},
       errorEvent => { notify.error('本地网关通讯失败'); }
     );
     this.intervalTask();
@@ -492,7 +493,7 @@ export default {
   computed: {
     // 当前节点文件夹在节点文件夹数组中的顺序
     nowFolderIndex() {
-      return this.nodeFolders.indexOf(this.currentNodeFolder);
+      return this.nodeFolders && this.nodeFolders.indexOf(this.currentNodeFolder);
     },
     // 当前节点文件夹的名称
     nowFolderName() {
@@ -514,7 +515,7 @@ export default {
     },
     // 删除文件夹 递归删除文件夹下面的所有文件
     deleteFolderClick(id) {
-      const { subFolderList, workFileList, subFolderMap, userId, localFileHashMap, reverseLocalFileHashMap } = this;
+      const { isClient, subFolderList, workFileList, subFolderMap, userId, localFileHashMap, reverseLocalFileHashMap } = this;
       const deleteFolderName = subFolderMap[id].folderName;
       const thisApp = this;
       const totalDeleteFileLists = [];
@@ -541,7 +542,7 @@ export default {
             // 删除文件夹
             let counter = 0;
             totalDeleteFileLists.forEach(async delFile => {
-              delete localFileHashMap[reverseLocalFileHashMap[delFile.ipfsCid]];
+             isClient && delete localFileHashMap[reverseLocalFileHashMap[delFile.ipfsCid]];
               const res = await services.deleteFile(delFile.id);
               counter = res.Code == 0 ? counter+1 : counter;
               if(counter == totalNum) {
@@ -1041,7 +1042,6 @@ export default {
      * }
      */
     async clientUpload(filePaths) { // uploadTask
-      console.log('filePaths');
       const tasksGroup = await Promise.all(filePaths.map(path => system.analyzeSystemPath(path)));
       const uploadTasks = flatten(tasksGroup);
       const { folderName, levelId, id: folderId } = this.currentNodeFolder;