Skip to content

X
xiaomai-cloud-class-web
Commit f8aaa9b4 by zhangleyuan
Options

feat:处理预览加载

parent 24b32840
Showing with 49 additions and 28 deletions
src/modules/resource-disk/components/FolderList.jsx
...@@ -56,7 +56,8 @@ class FolderList extends React.Component { ...@@ -56,7 +56,8 @@ class FolderList extends React.Component {
nonCompliantFileList: [], // 不符合上限的文件列表 nonCompliantFileList: [], // 不符合上限的文件列表
parentRights: '', // 继承父级文件夹权限 parentRights: '', // 继承父级文件夹权限
showPreviewModal:false, //是否显示loading showPreviewModal:false, //是否显示loading
previewing:false //是否正在预览 previewing:false, //是否正在预览
previewStatus:'UPLOAD' //预览文件的生成状态
} }
} }
...@@ -172,7 +173,8 @@ class FolderList extends React.Component { ...@@ -172,7 +173,8 @@ class FolderList extends React.Component {
if(!fileVersionId){ if(!fileVersionId){
this.setState({ this.setState({
previewing:true, previewing:true,
showPreviewModal:true showPreviewModal:true,
previewStatus:'UPLOAD'
},async ()=>{ },async ()=>{
const uploadSign = await that.getYoZoSign(ossUrl,"UPLOAD"); const uploadSign = await that.getYoZoSign(ossUrl,"UPLOAD");
axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`) axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`)
...@@ -181,14 +183,11 @@ class FolderList extends React.Component { ...@@ -181,14 +183,11 @@ class FolderList extends React.Component {
const { previewing } = that.state; const { previewing } = that.state;
if(previewing){ if(previewing){
const previewSign = await that.getYoZoSign(response.data.data.fileVersionId,"VIEW"); 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 url = `https://eic.yozocloud.cn/api/view/file?fileVersionId=${response.data.data.fileVersionId}&appId=${appId}&sign=${previewSign}`
const a = document.createElement('a'); that.setState({
document.body.appendChild(a); previewStatus:'UPLOAD_SUCCESS',
a.setAttribute('href', url); url
a.setAttribute('target', '_blank'); })
a.click();
document.body.removeChild(a)
} }
}) })
}) })
...@@ -278,18 +277,12 @@ class FolderList extends React.Component { ...@@ -278,18 +277,12 @@ class FolderList extends React.Component {
this.handleDataDot(folderFormat); this.handleDataDot(folderFormat);
} }
cancelPreview = ()=>{ cancelPreview = ()=>{
// const rightDom = document.querySelector('.right-container'); const rightDom = document.querySelector('.right-container');
// rightDom.style.zIndex = 1; rightDom.style.zIndex = 1;
this.setState({ this.setState({
previewing:false, previewing:false,
showPreviewModal:false showPreviewModal:false,
}) previewStatus:'UPLOAD'
}
closePreview = ()=>{
// const rightDom = document.querySelector('.right-container');
// rightDom.style.zIndex = 1;
this.setState({
showPreviewModal:false
}) })
} }
// 选择文件夹 // 选择文件夹
...@@ -779,7 +772,7 @@ class FolderList extends React.Component { ...@@ -779,7 +772,7 @@ class FolderList extends React.Component {
const { const {
currentFolder, currentFile, renameModalData, showSelectFileModal, currentFolder, currentFile, renameModalData, showSelectFileModal,
showUploadModal, localFileList, showCopyFileModal, showManagingModal, showUploadModal, localFileList, showCopyFileModal, showManagingModal,
showPreviewModal showPreviewModal, previewStatus,url
} = this.state; } = this.state;
const { const {
selectedFileIds, folderList, showResultPage, selectedFileIds, folderList, showResultPage,
...@@ -921,7 +914,7 @@ class FolderList extends React.Component { ...@@ -921,7 +914,7 @@ class FolderList extends React.Component {
/> />
} }
{ showPreviewModal && { showPreviewModal &&
<PreviewFileModal onCancel={()=>this.cancelPreview()} onClose={()=>this.cancelPreview()}/> <PreviewFileModal onCancel={()=>this.cancelPreview()} previewStatus={previewStatus} url={url}/>
} }
{ this.state.scanFileModal } { this.state.scanFileModal }
{ this.state.chargeModal } { this.state.chargeModal }
......
src/modules/resource-disk/modal/PreviewFileModal.jsx
...@@ -10,21 +10,44 @@ class PreviewFileModal extends React.Component { ...@@ -10,21 +10,44 @@ class PreviewFileModal extends React.Component {
cancelPreView = ()=>{ cancelPreView = ()=>{
this.props.onCancel(); this.props.onCancel();
} }
closePreView = ()=>{ toPreView = (url)=>{
this.props.onClose(); 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() { render() {
const { previewStatus,url} = this.props
return ( return (
<div className="preview-modal"> <div className="preview-modal">
<div className="preview-modal-content"> <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"> <div className="load-text-box">
{previewStatus === "UPLOAD" &&
<div className="load-text-box-title">预览生成中</div> <div className="load-text-box-title">预览生成中</div>
<div>可暂时关闭窗口，预览生成后仍会打开文件</div> }
{previewStatus === "UPLOAD_SUCCESS" &&
<div className="load-text-box-title">预览生成成功</div>
}
</div> </div>
<div className="operate"> <div className="operate">
<span className="btn cancel-preview-btn" onClick={()=>this.cancelPreView()}>取消预览</span> <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> </div>
</div> </div>
......
src/modules/resource-disk/modal/PreviewFileModal.less
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
.preview-modal-content{ .preview-modal-content{
position:absolute; position:absolute;
left:calc(50% - 160px); left:calc(50% - 133px);
top:calc(50% - 87px); top:calc(50% - 87px);
color:#FFF; color:#FFF;
text-align:center; text-align:center;
width:320px; width:266px;
height:174px; height:174px;
.load-img-box{ .load-img-box{
.load-img{ .load-img{
...@@ -39,6 +39,11 @@ ...@@ -39,6 +39,11 @@
.cancel-preview-btn{ .cancel-preview-btn{
margin-right:8px; margin-right:8px;
} }
.to-preview-btn__disabled{
border:1px solid #E8E8E8;
opacity: 0.4;
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment