219 lines
8.4 KiB
JavaScript
219 lines
8.4 KiB
JavaScript
import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
|
||
import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
|
||
import { useForm } from 'antd/lib/form/Form';
|
||
import { useEffect, useState } from 'react';
|
||
import { httpgetExport, httppostAddfile } from '../../../../utils/request';
|
||
import { exportFile } from '../../../../utils/tools';
|
||
import PdfView from './pdfView'
|
||
|
||
const { Dragger } = Upload;
|
||
|
||
const list = [
|
||
{
|
||
type: '立案',
|
||
key: 'files3'
|
||
},
|
||
{
|
||
type: '调查取证',
|
||
key: 'files4'
|
||
},
|
||
{
|
||
type: '审查处理',
|
||
key: 'files5'
|
||
},
|
||
{
|
||
type: '送达执行',
|
||
key: 'files6'
|
||
},
|
||
{
|
||
type: '结案',
|
||
key: 'files7'
|
||
}
|
||
]
|
||
const baseUrl = "http://223.75.53.141:9100/gs-tsg"
|
||
|
||
const Page = ({ uploadUrl, downloadUrl, type, getFormInfo, formJsonData }) => {
|
||
const [form] = Form.useForm();
|
||
const [fileList, setFileList] = useState([])
|
||
const [fileListHj, setFileHj] = useState({'files3': [],'files4': [],'files5': [],'files6': [],'files7': []})
|
||
const [url, setUrl] = useState('')
|
||
const [isModal, setIsModal] = useState(false)
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const getInfo = () => {
|
||
form.validateFields().then((values) => {
|
||
getFormInfo({ ...fileListHj,...values, })
|
||
setFileList([])
|
||
}).catch((errorInfo) => {
|
||
console.log(errorInfo, 'error');
|
||
})
|
||
//
|
||
}
|
||
const cancel = () => {
|
||
getFormInfo(false)
|
||
form.resetFields()
|
||
setFileList([])
|
||
|
||
}
|
||
const deleteFile = (e,key) => {
|
||
fileListHj[key] = fileListHj[key].filter(item => item.fileId !== e)
|
||
setFileHj({ ...fileListHj })
|
||
}
|
||
const props = (keys) => {
|
||
return {
|
||
name: 'file',
|
||
multiple: true,
|
||
fileList: fileList,
|
||
showUploadList: false,
|
||
beforeUpload: (file, fileList) => {
|
||
// if (fileType == "pic" &&
|
||
// (file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
|
||
// message.error('仅支持上传jpg/png/jpeg格式的图片');
|
||
// return false;
|
||
// } else {
|
||
// return true;
|
||
// }
|
||
},
|
||
customRequest(e) {
|
||
setLoading(true);
|
||
httppostAddfile(uploadUrl, e).then(res => {
|
||
|
||
if(fileListHj[keys]){
|
||
fileListHj[keys].push(res.data)
|
||
}else{
|
||
fileListHj[keys]=[]
|
||
fileListHj[keys].push(res.data)
|
||
}
|
||
|
||
setFileHj({ ...fileListHj })
|
||
setLoading(false);
|
||
|
||
})
|
||
}
|
||
}
|
||
};
|
||
function checkMediaType(url) {
|
||
// 创建URL对象
|
||
var link = url;
|
||
// 获取路径的最后一个点之后的内容作为文件扩展名
|
||
var extension = link?.split('.').pop().toLowerCase();
|
||
|
||
// 声明支持的图片和视频文件扩展名
|
||
var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
|
||
var file = ['pdf', 'word', 'xslx', 'xsl', 'txt', "pptx"];
|
||
//
|
||
// 判断文件扩展名是否在图片扩展名数组中
|
||
if (imageExtensions.includes(extension)) {
|
||
return 'image';
|
||
}
|
||
|
||
// 判断文件扩展名是否在视频扩展名数组中
|
||
if (file.includes(extension)) {
|
||
return extension;
|
||
}
|
||
|
||
// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
|
||
return null;
|
||
}
|
||
const preView = (item) => {
|
||
if (checkMediaType(item.fileName) == 'pdf') {
|
||
// window.open(baseUrl + item.previewUrl)
|
||
setUrl(item.fileId)
|
||
setIsModal(true)
|
||
}
|
||
|
||
}
|
||
/**
|
||
* @description 文件下载
|
||
* @param {String} params 文件fileId
|
||
*/
|
||
const download = (id, name) => {
|
||
httpgetExport(downloadUrl+id).then(res => {
|
||
exportFile(name,res.data)
|
||
})
|
||
}
|
||
const onFinish = () => {
|
||
|
||
}
|
||
useEffect(() => {
|
||
|
||
setFileHj(formJsonData)
|
||
form.setFieldsValue(formJsonData)
|
||
}, [])
|
||
return (
|
||
<Form form={form} onFinish={onFinish} >
|
||
<Row>
|
||
<Col span={2}>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<div style={{ width: 3, height: 12, background: '#259def', marginRight: 5 }}></div>
|
||
案卷存档</div>
|
||
</Col>
|
||
<Col span={10}>
|
||
<Form.Item
|
||
label='保管人员'
|
||
name='custodian'
|
||
>
|
||
<Input disabled={type == 'view'}/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={10}>
|
||
<Form.Item
|
||
label='保管地点'
|
||
name='storageLocation'
|
||
>
|
||
<Input disabled={type == 'view'}/>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
{list.map(item1 => (
|
||
<Row>
|
||
<Col span={2}>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<div style={{ width: 3, height: 12, background: '#259def', marginRight: 5 }}></div>
|
||
{item1.type}</div>
|
||
</Col>
|
||
<Col span={22}>
|
||
<Form.Item
|
||
label='附件'
|
||
name='files'
|
||
>
|
||
{type !== 'view' &&<Dragger {...props(item1.key)} disabled={type == 'view'}>
|
||
<p className="ant-upload-drag-icon">
|
||
<InboxOutlined />
|
||
</p>
|
||
<p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
|
||
</Dragger>}
|
||
<div className='flex'>
|
||
{fileListHj?.[item1.key]?.map((item) => {
|
||
return <div className='flex align-center file-item' style={{marginTop:5,marginRight:'3%',width:'30%', minHeight: "50px", fontSize: 14, columnGap: 10, cursor: checkMediaType(item.fileName) == 'image' || checkMediaType(item.fileName) == 'pdf' ? 'pointer' : "not-allowed" }}>
|
||
<div style={{ width: 40, height: 40, display: "flex", alignItems: 'center' }}>
|
||
{checkMediaType(item.fileName) == 'image' && <Image
|
||
height={40}
|
||
src={baseUrl + item.filePath}
|
||
/>}
|
||
{
|
||
checkMediaType(item.fileName) !== 'image' &&
|
||
<span >{checkMediaType(item.fileName)?.toUpperCase()}</span>
|
||
}
|
||
</div>
|
||
|
||
<span onClick={() => preView(item)}>{item.fileName}</span>
|
||
{type !== 'view' && <DeleteOutlined onClick={() => deleteFile(item.fileId,item1.key)} />}
|
||
<VerticalAlignBottomOutlined onClick={() => download(item.fileId, item.fileName)} />
|
||
</div>
|
||
})}
|
||
</div>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>))}
|
||
<div className="flex flex-end" style={{ marginTop: 10, justifyContent: "flex-end" }}>
|
||
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
|
||
<Button type="primary" onClick={getInfo} loading={loading}>确定</Button>
|
||
</div>
|
||
<PdfView url={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/rescue/goods/file/download/${url}`)}`} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
|
||
</Form >
|
||
|
||
)
|
||
}
|
||
|
||
export default Page |