221 lines
9.7 KiB
JavaScript
221 lines
9.7 KiB
JavaScript
|
import React, { useEffect, useState, useRef } from 'react';
|
|||
|
|
import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
|
|||
|
|
import './ddForm.less'
|
|||
|
|
import dayjs from 'dayjs'
|
|||
|
|
import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'
|
|||
|
|
import { httpPostFile } from '../../../../utils/request';
|
|||
|
|
import apiUrl from '../../../../service/apiurl'
|
|||
|
|
import PdfView from './pdfView'
|
|||
|
|
const { RangePicker } = DatePicker;
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
|
|||
|
|
const baseUrl = "http://local.gunshiiot.com:18083/gunshiApp/xintankou"
|
|||
|
|
|
|||
|
|
const FormZdy = ({ typeName = "ddForm", formJson, getFormInfo, type, formJsonData, typeUpload = 'dispatch', isModalOpen,fileType,footer=true }) => {
|
|||
|
|
const [fileList, setFileList] = useState([])
|
|||
|
|
const [fileListUp, setFileLisUp] = useState([])
|
|||
|
|
const [url, setUrl] = useState('')
|
|||
|
|
const [isModal, setIsModal] = useState(false)
|
|||
|
|
|
|||
|
|
|
|||
|
|
// debugger;
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
|
|||
|
|
// function onDocumentLoadSuccess({ numPages }) {
|
|||
|
|
// setRenderNumPages(numPages);
|
|||
|
|
// }
|
|||
|
|
const onFinish = (e) => {
|
|||
|
|
}
|
|||
|
|
const getInfo = () => {
|
|||
|
|
form.validateFields().then((values) => {
|
|||
|
|
getFormInfo({ ...values, files: fileList, fileIds: fileList.map(item => item.id) })
|
|||
|
|
form.resetFields()
|
|||
|
|
setFileList([])
|
|||
|
|
}).catch((errorInfo) => {
|
|||
|
|
console.log(errorInfo, 'error');
|
|||
|
|
})
|
|||
|
|
//
|
|||
|
|
}
|
|||
|
|
const cancel = () => {
|
|||
|
|
getFormInfo(false)
|
|||
|
|
form.resetFields()
|
|||
|
|
setFileList([])
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const { Dragger } = Upload;
|
|||
|
|
// const preView = (e) => {
|
|||
|
|
// window.open('http://local.gunshiiot.com:18083/xintankou/api/file/preview/104')
|
|||
|
|
// }
|
|||
|
|
const deleteFile = (e) => {
|
|||
|
|
let arr = fileList.filter(item => item.id !== e)
|
|||
|
|
setFileList(arr)
|
|||
|
|
}
|
|||
|
|
const props = {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onChange(e) {
|
|||
|
|
setFileLisUp([...fileListUp, e.file])
|
|||
|
|
httpPostFile(apiUrl.service.uploadFile.uploadUrl + "?group=" + typeUpload, e).then(res => {
|
|||
|
|
setFileList([...fileList, res.data])
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const onChange = () => { }
|
|||
|
|
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.name) == 'pdf') {
|
|||
|
|
// window.open(baseUrl + item.previewUrl)
|
|||
|
|
setUrl(`${`http://local.gunshiiot.com:18083/xintankou`}/static/pdf/web/viewer.html?file=${encodeURIComponent(`http://local.gunshiiot.com:18083/gunshiApp/xintankou/${item.previewUrl}`)}`)
|
|||
|
|
setIsModal(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 文件下载
|
|||
|
|
* @param {String} params 文件fileId
|
|||
|
|
*/
|
|||
|
|
const download = (id,name) => {
|
|||
|
|
let downloadLink = document.createElement("a");
|
|||
|
|
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xintankou/api/file/download/${id}`;
|
|||
|
|
downloadLink.download = `${name}`;
|
|||
|
|
downloadLink.style.display = "none";
|
|||
|
|
// 将链接添加到页面中
|
|||
|
|
document.body.appendChild(downloadLink);
|
|||
|
|
|
|||
|
|
// 模拟点击事件，开始下载
|
|||
|
|
downloadLink.click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
form.resetFields()
|
|||
|
|
let formType = type
|
|||
|
|
if(type='edit'){
|
|||
|
|
formType=2
|
|||
|
|
}
|
|||
|
|
if(type == 'view'){
|
|||
|
|
formType =1
|
|||
|
|
}
|
|||
|
|
if(type=='save'){
|
|||
|
|
formType =0
|
|||
|
|
}
|
|||
|
|
if (formType == 1 || formType == 2 || formType == 3) {
|
|||
|
|
form.setFieldsValue(formJsonData)
|
|||
|
|
if (formJsonData?.files) {
|
|||
|
|
setFileList(formJsonData.files)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
return () => {
|
|||
|
|
setFileList([])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, [type, formJsonData, isModalOpen])
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ backgroundColor: '#fff' }}>
|
|||
|
|
<Form form={form} name="searchTabel" onFinish={onFinish} className={typeName}>
|
|||
|
|
<Row>
|
|||
|
|
{formJson.map(item => {
|
|||
|
|
return (
|
|||
|
|
<Col span={item.span} >
|
|||
|
|
<Form.Item
|
|||
|
|
label={item.label}
|
|||
|
|
name={item.key}
|
|||
|
|
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
|||
|
|
className={item.type == 'empty'?'empty':'noempty'}
|
|||
|
|
>
|
|||
|
|
{item.type == "input" && <Input disabled={type == 1 || item.disabled} placeholder={item.placeholder} />}
|
|||
|
|
{item.type == "Select" && <Select disabled={type == 1} options={item.options} />}
|
|||
|
|
{item.type == "empty" && <Input disabled={item.type == "empty" ? true : false} />}
|
|||
|
|
{item.type == "Switch" && <Switch defaultChecked onChange={onChange} disabled={type == 1} />}
|
|||
|
|
{item.type == "DatePicker" && <DatePicker disabled={type == 1} style={{width:"100%"}} />}
|
|||
|
|
{item.type == "TextArea" && <TextArea rows={4} disabled={type == 1} />}
|
|||
|
|
{item.type == "Radio" &&<Radio.Group options={item.options} />}
|
|||
|
|
{item.type == "RangePicker" &&
|
|||
|
|
<RangePicker disabled={type=='view'} />}
|
|||
|
|
{item.type == "upload" &&
|
|||
|
|
<>
|
|||
|
|
{type !== 1 && <Dragger {...props}>
|
|||
|
|
<p className="ant-upload-drag-icon">
|
|||
|
|
<InboxOutlined />
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{fileType == "pic" ? <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</p>: <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>}
|
|||
|
|
|
|||
|
|
</Dragger>}
|
|||
|
|
<div>
|
|||
|
|
{fileList?.map((item) => {
|
|||
|
|
return <div className='flex align-center' style={{ minHeight: "50px", fontSize: 14,columnGap:10, cursor: checkMediaType(item.name) == 'image' || checkMediaType(item.name) == 'pdf'?'pointer':"not-allowed" }}>
|
|||
|
|
<div style={{width:40,height:40,display:"flex",alignItems:'center'}}>
|
|||
|
|
{checkMediaType(item.name) == 'image' && <Image
|
|||
|
|
height={40}
|
|||
|
|
src={baseUrl + item.previewUrl}
|
|||
|
|
/>}
|
|||
|
|
{
|
|||
|
|
checkMediaType(item.name) !== 'image' &&
|
|||
|
|
<span >{checkMediaType(item.name)?.toUpperCase()}</span>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span onClick={() => preView(item)}>{item.name}</span>
|
|||
|
|
{type==2&&<DeleteOutlined onClick={() => deleteFile(item.id)} />}
|
|||
|
|
<VerticalAlignBottomOutlined onClick={() => download(item.id,item.name)} />
|
|||
|
|
</div>
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</>}
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</Row>
|
|||
|
|
</Form >
|
|||
|
|
{type !== 1 &&<div className="flex flex-end" style={{ marginTop: 10 }}>
|
|||
|
|
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
|
|||
|
|
<Button type="primary" onClick={getInfo}>确定</Button>
|
|||
|
|
</div>}
|
|||
|
|
<PdfView url={url} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default FormZdy;
|