feat:处理预览加载

src/modules/resource-disk/components/FolderList.jsx

@@ -56,7 +56,8 @@ class FolderList extends React.Component {
       nonCompliantFileList: [],       // 不符合上限的文件列表
       parentRights: '',            // 继承父级文件夹权限
       showPreviewModal:false, //是否显示loading
-      previewing:false //是否正在预览
+      previewing:false, //是否正在预览
+      previewStatus:'UPLOAD' //预览文件的生成状态
     }
   }
 
@@ -172,7 +173,8 @@ class FolderList extends React.Component {
           if(!fileVersionId){
             this.setState({
               previewing:true,
-              showPreviewModal:true
+              showPreviewModal:true,
+              previewStatus:'UPLOAD'
             },async ()=>{
                 const uploadSign = await that.getYoZoSign(ossUrl,"UPLOAD");
                 axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`)
@@ -181,14 +183,11 @@ class FolderList extends React.Component {
                   const { previewing }  = that.state;
                   if(previewing){
                     const previewSign = await that.getYoZoSign(response.data.data.fileVersionId,"VIEW");
-                    that.closePreview();
                     const url = `https://eic.yozocloud.cn/api/view/file?fileVersionId=${response.data.data.fileVersionId}&appId=${appId}&sign=${previewSign}`
-                    const a = document.createElement('a');
-                    document.body.appendChild(a);
-                    a.setAttribute('href', url);
-                    a.setAttribute('target', '_blank');
-                    a.click();
-                    document.body.removeChild(a)
+                    that.setState({
+                      previewStatus:'UPLOAD_SUCCESS',
+                      url
+                    })
                   }
                 })
             })
@@ -278,18 +277,12 @@ class FolderList extends React.Component {
     this.handleDataDot(folderFormat);
   }
   cancelPreview = ()=>{
-    // const rightDom = document.querySelector('.right-container');
-    // rightDom.style.zIndex = 1;
+    const rightDom = document.querySelector('.right-container');
+    rightDom.style.zIndex = 1;
     this.setState({
       previewing:false,
-      showPreviewModal:false
-    })
-  }
-  closePreview = ()=>{
-    // const rightDom = document.querySelector('.right-container');
-    // rightDom.style.zIndex = 1;
-    this.setState({
-      showPreviewModal:false
+      showPreviewModal:false,
+      previewStatus:'UPLOAD'
     })
   }
   // 选择文件夹
@@ -779,7 +772,7 @@ class FolderList extends React.Component {
     const {
       currentFolder, currentFile, renameModalData, showSelectFileModal,
       showUploadModal, localFileList, showCopyFileModal, showManagingModal,
-      showPreviewModal
+      showPreviewModal, previewStatus,url  
     } = this.state;
     const {
       selectedFileIds, folderList, showResultPage,
@@ -920,8 +913,8 @@ class FolderList extends React.Component {
             }}
           />
         }
-         { showPreviewModal &&
-          <PreviewFileModal onCancel={()=>this.cancelPreview()} onClose={()=>this.cancelPreview()}/>
+        { showPreviewModal &&
+          <PreviewFileModal onCancel={()=>this.cancelPreview()} previewStatus={previewStatus} url={url}/>
         }
        { this.state.scanFileModal }
        { this.state.chargeModal }

src/modules/resource-disk/modal/PreviewFileModal.jsx

@@ -10,21 +10,44 @@ class PreviewFileModal extends React.Component {
   cancelPreView = ()=>{
     this.props.onCancel();
   }
-  closePreView = ()=>{
-    this.props.onClose();
+  toPreView = (url)=>{
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.setAttribute('href', url);
+    a.setAttribute('target', '_blank');
+    a.click();
+    document.body.removeChild(a);
+    this.props.onCancel();
   }
   render() {
+    const { previewStatus,url} = this.props
     return (
         <div className="preview-modal">
             <div className="preview-modal-content">
-                <div className="load-img-box"><img className="load-img" src="https://image.xiaomaiketang.com/xm/3j32ashQst.png"></img></div>
+                <div className="load-img-box">
+                {previewStatus === "UPLOAD" && 
+                  <img className="load-img" src="https://image.xiaomaiketang.com/xm/3j32ashQst.png"></img>
+                }
+                {previewStatus === "UPLOAD_SUCCESS" && 
+                  <img className="load-img" src="https://image.xiaomaiketang.com/xm/jJRK3bTEdc.png"></img>
+                }
+                </div>
                 <div className="load-text-box">
+                {previewStatus === "UPLOAD" && 
                   <div className="load-text-box-title">预览生成中</div>
-                  <div>可暂时关闭窗口，预览生成后仍会打开文件</div>
+                }
+                {previewStatus === "UPLOAD_SUCCESS" && 
+                  <div className="load-text-box-title">预览生成成功</div>
+                }
                 </div>
                 <div className="operate">
                     <span className="btn cancel-preview-btn" onClick={()=>this.cancelPreView()}>取消预览</span>
-                    <span className="btn close-preview-btn" onClick={()=>this.closePreView()}>暂时关闭</span>
+                    {previewStatus === "UPLOAD" &&
+                     <span className="btn to-preview-btn__disabled to-preview-btn">去查看</span>
+                    }
+                    {previewStatus === "UPLOAD_SUCCESS" &&
+                     <span className="btn to-preview-btn" onClick={()=>this.toPreView(url)}>去查看</span>
+                    }
                 </div>
             </div>
         </div>

src/modules/resource-disk/modal/PreviewFileModal.less

@@ -9,11 +9,11 @@
     background: rgba(0, 0, 0, 0.7);
     .preview-modal-content{
         position:absolute;
-        left:calc(50% - 160px);
+        left:calc(50% - 133px);
         top:calc(50% - 87px);
         color:#FFF;
         text-align:center;
-        width:320px;
+        width:266px;
         height:174px;
         .load-img-box{
             .load-img{
@@ -39,6 +39,11 @@
             .cancel-preview-btn{
                 margin-right:8px;
             }
+            .to-preview-btn__disabled{
+                border:1px solid #E8E8E8;
+                opacity: 0.4;
+                
+            }
 
         }
     }