diff --git a/src/components/Form/FileUpload/fileView.js b/src/components/Form/FileUpload/fileView.js new file mode 100644 index 000000000..5683b731b --- /dev/null +++ b/src/components/Form/FileUpload/fileView.js @@ -0,0 +1,104 @@ +import React, { useState, useEffect, useRef } from 'react' +import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd'; +import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons'; +import moment from 'moment' +import apiurl from '../../../service/apiurl'; +import PdfView from './pdfView'; +// import './index.less' +const FileView = ({mode, fileList, setFileList}) => { + const childRef = useRef(null); + + + const download = (params) => { + let downloadLink = document.createElement("a"); + downloadLink.href = process.env.REACT_APP_API_URL+apiurl.file.download+params + downloadLink.download = `${params.fileName}`; + downloadLink.style.display = "none"; + // 将链接添加到页面中 + document.body.appendChild(downloadLink); + // 模拟点击事件，开始下载 + downloadLink.click(); + } + + const deleteFile = (fileId) => { + let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId); + setFileList(filterFile) + } + + const viewPdf = (params) => { + if (childRef.current) { + childRef.current.callChildMethod(params); + } + } + + return ( + <> + + { + fileList.map(file=>( + +
+
+ { + (()=>{ + if(file.name.indexOf('.doc') > -1){ + return ( +
{ download(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ ) + }else if(file.name.indexOf('.pdf') > -1){ + return ( +
{ viewPdf(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ ) + }else if(file.name.indexOf('.zip') > -1){ + return ( +
{ download(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ ) + }else if(file.name.indexOf('.xls') > -1){ + return ( +
{ download(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ ) + }else{ + return ( + + ) + } + })() + } + {file.name} +
+
{ + deleteFile(file.response?.data?.fileId) + }}> + +
+
+ + )) + } + + + + ) +} + +export default FileView diff --git a/src/components/Form/FileUpload/index.js b/src/components/Form/FileUpload/index.js new file mode 100644 index 000000000..024f964a3 --- /dev/null +++ b/src/components/Form/FileUpload/index.js @@ -0,0 +1,81 @@ +import React, { useState, useEffect } from 'react' +import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd'; +import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons'; +import moment from 'moment' +import FileView from './fileView'; +import apiurl from '../../../service/apiurl'; +// import './index.less' + +const { RangePicker } = DatePicker +const { Dragger } = Upload; +const url = "http://223.75.53.141:9100/gs-tsg" + +const FileUpload = ({mode, fileNum=1, value, onChange}) => { + const [fileList, setFileList] = useState([]) //上传文件列表 + const [loading, setLoading] = useState(false) + console.log(1111111,fileList); + + + const fileChange = (info) => { + if (info.file.status === "done") { + setLoading(false); + } + if (info.file.status === "uploading") { + setLoading(true); + } + if (info.file.status === "error") { + message.error("文件上传失败") + setLoading(false); + } + setFileList(info.fileList) + } + + useEffect(() => { + if (mode != 'save' ) { + const imgFile = value?.map(o => ({ + name: o.fileName, + response: { + data: { + filePath: o.filePath, + fileId: o.fileId + } + }, + })) + setFileList(imgFile) + } + }, []) + + useEffect(()=>{ + if(onChange && fileList){ + let oldFiles = fileList.map(item => (item.response?.data??item)) + onChange(oldFiles) + } + },[fileList]) + + + return ( + <> + { + mode!=='view' && + { console.log(info.dataTransfer.files); }} + fileList={fileList} + disabled={loading} + maxCount={fileNum} + // onSuccess={handleSuccess} + > +

点击或拖拽文件到此区域上传

+

+ 支持扩展名：.doc .docx .xls .pdf .jpg .png .ppt +

+ + } + + + ) +} + +export default FileUpload diff --git a/src/components/Form/FileUpload/pdfView.js b/src/components/Form/FileUpload/pdfView.js new file mode 100644 index 000000000..3fe5337a2 --- /dev/null +++ b/src/components/Form/FileUpload/pdfView.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react' +import { Modal } from 'antd'; +import apiurl from '../../../service/apiurl'; +const PdfView = forwardRef((props,ref) => { + const [pdfViewOPen, setPdfViewOPen] = useState(false) + const [iframeSrc, setIframeSrc] = useState('') + + useImperativeHandle(ref, () => ({ + callChildMethod: showPdf + })); + + const showPdf = (url) => { + setIframeSrc(url) + setPdfViewOPen(true) + }; + + + + return ( + <> + { + setPdfViewOPen(false) + setIframeSrc('') + }} + > +