From c7acf8aa346fb3018d4e18e98dcf62072bcb4a96 Mon Sep 17 00:00:00 2001
From: revive <1664535558@qq.com>
Date: Tue, 8 Dec 2020 11:53:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/css/main.css                    |  2 +
 .../workspace/components/file-item.vue        | 68 +++++++++++++++++--
 src/views/main_web/workspace/service.js       | 11 ++-
 .../main_web/workspace/workspace.new.vue      | 44 ++++++++++++
 4 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/public/static/css/main.css b/public/static/css/main.css
index 45bc6029..433743f8 100644
--- a/public/static/css/main.css
+++ b/public/static/css/main.css
@@ -7436,6 +7436,8 @@ h3.defualth3{
 	transition: 0.2s all linear;
 	padding: 0 10px;
 	font-weight: 400;
+	margin-left: 20px;
+
 }
 h3.defualth3:hover{
 	background-color: rgb(235,235,242);
diff --git a/src/views/main_web/workspace/components/file-item.vue b/src/views/main_web/workspace/components/file-item.vue
index 6efb921c..646ce875 100644
--- a/src/views/main_web/workspace/components/file-item.vue
+++ b/src/views/main_web/workspace/components/file-item.vue
@@ -12,15 +12,17 @@
           <div
             v-if="!oneOf(file.extension, imgExtensionList) && !oneOf(file.extension, VideoExtensionList)"
             class="defultImage-mid"
+            @dblclick="filePreview"
             :class="`${file.extension}-mid ${
               fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask ? 'toumin' : ''
-            }`"
+            } ${!oneOf(file.extension,filePreviewList) ? '':''} ` "
             />
 
           <!-- 图片文件图标 -->
           <div
             v-else-if="oneOf(file.extension, imgExtensionList)"
             class="defultImage-mid img_bg-mid"
+            @dblclick="filePreview"
             :class=" fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask  ? 'toumin' : ''"
           >
             <div class="file_Im gbox-mid">
@@ -30,6 +32,7 @@
           <!-- 视频文件图标 -->
           <div
             v-else
+            @dblclick="filePreview"
             class="defultImage-mid video-mid"
             :class="fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask  ? 'toumin' : ''"
           >
@@ -133,6 +136,7 @@
             </template>
           </template>
 
+
           <!-- 右键菜单 -->
           <div class="contextmenu" v-show="isFileRightMenuVisible"
           :style="{ top: fileRightMenuTop + 'px', left: fileRightMenuLeft + 'px'}"
@@ -144,6 +148,8 @@
               <li v-else class="function-disabled" title="文件工作中无法创建">创建文件副本</li>
               <li v-if="isInWorkFolder && !otherUserIsWorking" @click.stop="deleteFileClick">移动到回收站</li>
               <li v-else class="function-disabled" title="文件工作中无法删除">移动到回收站</li>
+              <li v-if="isInWorkFolder && !otherUserIsWorking && !isClient && oneOf(file.extension,filePreviewList)" @click.stop="filePreview">在线预览</li>
+              <li v-else class="function-disabled">在线预览</li>
             </ul>
           </div>
 
@@ -179,7 +185,7 @@
             v-if="isInWorkFolder && file.createUserId != currentUserId"
             class="yiyunwenjian_infodesc"
             >{{ file.createUserName }} 创建</span>
-          
+
           <!-- 文件状态显示 -->
           <span
             v-if="file.version != 1"
@@ -210,7 +216,12 @@ const RecExtensionList = ["jpg", "png", "bmp", "gif", "jpeg", "txt",
                           "ppt","pptx","excel","xlsx","xls","doc","docx",
                           "word","folder","folder1","folder2"
                           ];
-const VideoExtensionList = ["avi", "mov", "wav","mp4"]
+const VideoExtensionList = ["avi", "mov", "wav","mp4"];
+const office =["doc","docx","ppt","pptx","xls","xlsx"];
+const filePreviewList = ["jpg", "png", "bmp", "gif", "jpeg",
+                          "doc","docx","ppt","pptx","xls","xlsx",
+                          "avi", "mov", "wav","mp4","txt","pdf"
+                        ];
 const oneOf = (target, list) => list.indexOf(target) !== -1
 const { DOWNLOADING, UPLOADING } = LoadingEnum;
 const { WORKING, NOT_WORKING } = FileWorkStatus;
@@ -266,6 +277,8 @@ export default {
       imgExtensionList,
       RecExtensionList,
       VideoExtensionList,
+      office,
+      filePreviewList,
       isFileRightMenuVisible: false,//控制文件右键菜单显示与隐藏
       fileRightMenuLeft: 0,//文件右键菜单位置
       fileRightMenuTop: 0,
@@ -348,7 +361,36 @@ export default {
     deleteFileClick() {
       this.isFileRightMenuVisible = false;
       this.$emit('deleteFileClick', this.file.id, this.file.createUserId, this.file.archName, this.file.ipfsCid);
-    }
+    },
+    filePreview(){
+      //office:1 img/txt:2  vedio:3
+      let type;
+      if(oneOf(this.file.extension,office)){
+        type = 1;
+      }else if(oneOf(this.file.extension,imgExtensionList) 
+      || this.file.extension=='txt'
+      ||this.file.extension=='pdf'){
+        type = 2;
+      }else if(oneOf(this.file.extension,VideoExtensionList)){
+        type = 3;
+      }else{
+        type = 0;
+      }
+      this.$emit('filePreview', this.file.ipfsCid,type);
+    },
+    // async filePreview(file){
+    //   const url = await service.filePreview(sessionStorage.companyId);
+    //   const Url="http://"+url;
+    //   if(!this.isClient && url){
+    //     //const Url="http://2f9he2.natappfree.cc/ipfs/";
+    //     if(oneOf(file.extension,office)){
+    //       const officeApi="http://view.officeapps.live.com/op/view.aspx?src=";
+    //       window.open(officeApi+Url+file.ipfsCid,'');
+    //     }else if(oneOf(file.extension,imgExtensionList) || file.extension=='txt'||file.extension=='pdf'){
+    //       window.open(Url+file.ipfsCid,'')
+    //     }
+    //   }
+    // }
   },
   watch: {
     isFileRightMenuVisible(value) {
@@ -407,5 +449,23 @@ export default {
     background-color: #ecf5ff;
     color:rgb(167,168,183);
   }
+  .filePreview{
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    top: 0;
+    left: 50%;
+    background-color: red;
+  }
+  .gray{
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    
+    filter: grayscale(100%);
+	
+    filter: gray;
+  }
 
 </style>
\ No newline at end of file
diff --git a/src/views/main_web/workspace/service.js b/src/views/main_web/workspace/service.js
index f72203bc..594cddc2 100644
--- a/src/views/main_web/workspace/service.js
+++ b/src/views/main_web/workspace/service.js
@@ -112,4 +112,13 @@ export async function addFile(file) {
 export async function deleteFile(fileId) {
   const res = await fetchApi('file/deleteFile', {fileId});
   return res;
-}
\ No newline at end of file
+}
+
+/**
+ * 预览文件
+ */
+
+ export async function filePreview(companyId){
+  const res = await fetchApi('company/queryFileOnlineUrlByCompanyId', companyId);
+  return res;   
+ }
\ No newline at end of file
diff --git a/src/views/main_web/workspace/workspace.new.vue b/src/views/main_web/workspace/workspace.new.vue
index 710a35a3..9b8c8ab8 100644
--- a/src/views/main_web/workspace/workspace.new.vue
+++ b/src/views/main_web/workspace/workspace.new.vue
@@ -92,6 +92,7 @@
                       :nodeFolder="currentNodeFolder"
                       :currentFolder="currentFolder"
                       :commitFile="commitFile"
+                      @filePreview="filePreview"
                       @dblclick.native="fileClick(file)"
                       @openfileBtnClick="fileClick(file)"
                       @copyFileBtnClick="copyWorkFileBtnClick(file)"
@@ -179,6 +180,7 @@
                       :showFileMilestone="showFileMilestone"
                       :nodeFolder="currentNodeFolder"
                       :currentFolder="currentFolder"
+                      @filePreview="filePreview"
                       @dblclick.native="fileClick(file)"
                       @oneFileRightBtnClick="oneFileRightBtnClick"
                       :localFileHashMap="localFileHashMap"
@@ -221,6 +223,19 @@
       </div>
     </div>
 
+    <!-- 文件在线预览 -->
+    <el-dialog
+    width="900px"
+    :visible.sync="isVideo"
+    :close-on-click-modal="false"
+    @close="videoClose"
+    >
+    <div class="filePreview">
+      <video :src="videoSrc" controls="controls"></video>
+    </div>
+
+    </el-dialog>
+
     <!-- 创建文件夹组 -->
     <el-dialog
       title="创建文件夹"
@@ -326,6 +341,8 @@ export default {
   },
   data(){
     return {
+      videoSrc:'',
+      isVideo:false,
       loading: false, // 不一定用得上
       isClient: system.isClient,
       userId: sessionStorage.userId, // 当前用户id
@@ -425,6 +442,26 @@ export default {
     }
   },
   methods: {
+    //预览文件
+    async filePreview(ipfsCid,type){
+      const url = await services.filePreview(sessionStorage.companyId);
+      const Url="http://"+url;
+      if(type == 1){
+        const officeApi="http://view.officeapps.live.com/op/view.aspx?src=";
+        window.open(officeApi+Url+ipfsCid,'');
+      }else if(type == 2){
+        window.open(Url+ipfsCid,'');
+        }else if(type == 3){
+        this.isVideo=true;
+        this.videoSrc=Url+ipfsCid;        
+      }else{
+        return;
+      }
+    },
+    //
+    videoClose(){
+      this.videoSrc="";
+    },
     // 接收到了一个文件的右键菜单点击事件
     oneFileRightBtnClick(id) {
       this.tempRightFileId = id;
@@ -1235,4 +1272,11 @@ export default {
   ::v-deep .progress-circle svg .el-progress-circle__track {
     stroke: #fff !important;
   }
+  .filePreview{
+    text-align: center;
+    video{
+        width: 820px;
+        height: 600px;
+    }
+  }
 </style>
\ No newline at end of file