124 lines
6.4 KiB
JavaScript
124 lines
6.4 KiB
JavaScript
import React from 'react';
|
||
import config from "../../config";
|
||
import { connect } from 'dva';
|
||
import { checkImg } from "../../utils/common";
|
||
import FileViewer from 'react-file-viewer';
|
||
|
||
//传入附件提供查看功能
|
||
//弹窗 listFiles showFile 多附件与单附件查看
|
||
class FileViewerShow extends React.Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
idRadim: '',
|
||
isPageCenter: true,
|
||
data: []
|
||
}
|
||
};
|
||
componentDidMount() {
|
||
if (this.props.data?.listFiles || this.props.data?.showFile)
|
||
this.initInfo(this.props.data);
|
||
}
|
||
|
||
componentWillReceiveProps(NextProps) {
|
||
if (NextProps.data?.key && this.props.data?.key != NextProps.data?.key) {
|
||
if (NextProps.data?.listFiles || NextProps.data?.showFile) {
|
||
this.initInfo(NextProps.data);
|
||
}
|
||
}
|
||
}
|
||
|
||
initInfo(paramInt) {
|
||
if (!paramInt.listFiles && paramInt.showFile) {
|
||
paramInt.listFiles = []
|
||
paramInt.listFiles.push(paramInt.showFile)
|
||
}
|
||
if (paramInt.listFiles && paramInt.listFiles.length > 0) {
|
||
var isPageCenter = true
|
||
var fileName = paramInt.listFiles[0].Nav_ImgFile.FILE_NAME
|
||
if (fileName.indexOf('.doc') > -1 || fileName.indexOf('.docx') > -1 || fileName.indexOf('.xls') > -1 || fileName.indexOf('.xlsx') > -1) {
|
||
isPageCenter = false
|
||
}
|
||
this.setState({
|
||
data: paramInt.listFiles,
|
||
isPageCenter: isPageCenter
|
||
});
|
||
} else {
|
||
//去数据库查找对应的信息
|
||
//暂时不处理
|
||
}
|
||
}
|
||
//显示附件查看
|
||
showFilesView = (listFile, imgHost) => {//FileViewer,
|
||
var result = []
|
||
if (listFile == null || listFile.length < 1) {
|
||
return result
|
||
}
|
||
var listfilesPath = []
|
||
var listfilesType = []
|
||
var listfilesIsImage = []
|
||
var percent = 0.75
|
||
if (window.screen.height < 1000) {
|
||
percent = 0.65
|
||
}
|
||
var height = window.screen.height * percent
|
||
|
||
listFile.forEach(e => {
|
||
listfilesIsImage.push(checkImg(e.Nav_ImgFile.FILE_NAME))
|
||
listfilesPath.push(e.Nav_ImgFile.FILE_PATH)
|
||
if (e.Nav_ImgFile.FILE_TYPE.indexOf('application/msword') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/vnd.openxmlformats-officedocument') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/vnd.ms-excel') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/vnd.openxmlformats') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('application/xml') > -1 || e.Nav_ImgFile.FILE_TYPE.indexOf('text/') > -1) {
|
||
listfilesType.push(e.Nav_ImgFile.FILE_PATH.split('.')[1])
|
||
} else {
|
||
listfilesType.push(e.Nav_ImgFile.FILE_TYPE.split('/')[1])
|
||
}
|
||
});
|
||
|
||
if (listfilesPath == null || listfilesPath.length < 1)
|
||
return result
|
||
|
||
// mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/130.0.0.0 safari/537.36 edg/130.0.0.0
|
||
// mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/109.0.0.0 safari/537.36
|
||
// mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/122.0.6261.95 safari/537.36
|
||
var ua = navigator.userAgent.toLowerCase();
|
||
var isShowdox = true
|
||
if (ua.indexOf('edg') > -1) {
|
||
isShowdox = false
|
||
}
|
||
// 显示思路 图片 img txt iframe 文件 FileViewer 其他 a
|
||
listfilesPath.forEach((item, i) => {
|
||
try {
|
||
result.push(<div style={{ width: '100%', fontSize: 'xx-large', marginBottom: '20px', textAlign: 'center' }} > <a key={i} style={{ color: '##1890ff' }} target="_blank" href={imgHost + listfilesPath[i]}>{listFile[i].Nav_ImgFile.FILE_NAME}</a ></div>)
|
||
if (listfilesIsImage[i] == true) {
|
||
result.push(<a key={i} href={imgHost + listfilesPath[i]} target='_blank' ><img style={{ margin: "0 0 0 5px", maxHeight: height }} src={imgHost + listfilesPath[i]} /></a>)
|
||
} else if (listfilesType[i] == 'txt' || listfilesType[i] == 'json' || (isShowdox && listfilesType[i] == 'doc')) {
|
||
result.push(<div style={{ height: height - 85 }} ><iframe key={i} style={{ height: height - 95, marginLeft: '2%', width: '96%' }} src={imgHost + listfilesPath[i]} ></iframe></div >) //360 浏览器支持 doc edge 对word 兼容性差 需要下载还不会自动加载
|
||
} else if (listfilesType[i] == 'pdf' || listfilesType[i] == 'csv' || listfilesType[i] == 'docx' || listfilesType[i] == 'xls' || listfilesType[i] == 'xlsx' || listfilesType[i] == 'mp4' || listfilesType[i] == 'mp3' || listfilesType[i] == 'webm') {
|
||
// result.push(<FileViewer key={i} style={{ height: height, width: '100%' }} fileType={listfilesType[i]} filePath={imgHost + listfilesPath[i]} />) //onError={handleError} onError={（）=>{this.onError()}}
|
||
result.push(<div style={{ height: height - 80 }} > <FileViewer key={i} style={{ height: height - 90 }} fileType={listfilesType[i]} filePath={imgHost + listfilesPath[i]} errorComponent={() => <div>附件加载失败！</div>} /></div>) //onError={handleError} onError={（）=>{this.onError()}} style={{ height: height - 100 }}
|
||
} else {
|
||
result.splice(0, 1)
|
||
result.push(<a key={i} target="_blank" href={imgHost + listfilesPath[i]}>{listFile[i].Nav_ImgFile.FILE_NAME}</a>)
|
||
}
|
||
} catch (error) {
|
||
}
|
||
})
|
||
return result
|
||
}
|
||
|
||
handleError = () => {
|
||
debugger
|
||
}
|
||
|
||
render() {
|
||
const { data, isPageCenter } = this.state;
|
||
return (
|
||
<div style={{ padding: '10px', minHeight: '500px', textAlign: (isPageCenter ? 'center' : 'left') }}>
|
||
{
|
||
data ? this.showFilesView(data, config.picServerHost) : null
|
||
}
|
||
<div style={{ color: 'lightgray', size: '9px', position: 'absolute', bottom: '10px', left: '20px' }}>如果预览效果不好，请检查浏览器版本不要太低，或者切换别的浏览器，点击标题可以下载对应附件。</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(FileViewerShow); |