313 lines
14 KiB
JavaScript
313 lines
14 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import { TreeSelect, Table, Tag, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image,Radio } from 'antd';
|
||
import './ddForm.less'
|
||
import dayjs from 'dayjs'
|
||
import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
|
||
import apiurl from '../../../../service/apiurl';
|
||
import { httpgetExport, httppostAddfile } from '../../../../utils/request';
|
||
import { exportFile } from '../../../../utils/tools';
|
||
|
||
// import apiUrl from '../../service/apiurl'
|
||
import PdfView from './pdfView'
|
||
const { RangePicker } = DatePicker;
|
||
const { TextArea } = Input;
|
||
|
||
const baseUrl = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||
|
||
const FormZdy = ({ fileKey,typeName = "ddForm", formJson, getFormInfo, type, formJsonData, typeUpload = 'dispatch', isModalOpen, fileType, footer = true, uploadUrl,TableZdyProps,downloadUrl,
|
||
onSave }) => {
|
||
const [fileList, setFileList] = useState([])
|
||
const [fileListUp, setFileLisUp] = useState([])
|
||
const [url, setUrl] = useState('')
|
||
const [isModal, setIsModal] = useState(false)
|
||
|
||
|
||
//
|
||
const [form] = Form.useForm();
|
||
|
||
// function onDocumentLoadSuccess({ numPages }) {
|
||
// setRenderNumPages(numPages);
|
||
// }
|
||
const onFinish = (e) => {
|
||
}
|
||
const getInfo = () => {
|
||
form.validateFields().then((values) => {
|
||
getFormInfo({ ...values, [fileKey]: fileList, fileIds: fileList.map(item => item.fileId) })
|
||
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) => {
|
||
debugger;
|
||
let arr = fileList.filter(item => item.fileId !== 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;
|
||
}
|
||
},
|
||
customRequest(e) {
|
||
setFileLisUp([...fileListUp, e.file])
|
||
httppostAddfile(uploadUrl, 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(item.previewUrl)
|
||
setIsModal(true)
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* @description 文件下载
|
||
* @param {String} params 文件fileId
|
||
*/
|
||
const download = async(id, name) => {
|
||
var extension = name?.split('.').pop().toLowerCase();
|
||
httpgetExport(downloadUrl+id).then(res => {
|
||
exportFile(name,res.data)
|
||
})
|
||
}
|
||
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?.[fileKey]) {
|
||
setFileList(formJsonData[fileKey])
|
||
}
|
||
|
||
console.log(formJsonData, formJson);
|
||
//
|
||
|
||
}
|
||
|
||
return () => {
|
||
setFileList([])
|
||
}
|
||
|
||
}, [type, formJsonData, isModalOpen])
|
||
|
||
|
||
|
||
return (
|
||
<div style={{ backgroundColor: '#fff', marginTop: 10 }}>
|
||
<Form form={form} name="searchTabel" onFinish={onFinish} className={typeName}>
|
||
<Row>
|
||
{formJson?.map(item => {
|
||
return (
|
||
<Col span={item.span} >
|
||
{item.type == "input" &&
|
||
<Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<Input disabled={type == 'view' || item.disabled} placeholder={item.placeholder} />
|
||
</Form.Item>}
|
||
{item.type == "title" &&
|
||
<Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
|
||
<div className='title'>
|
||
<div className='titleRight'></div>
|
||
{item.content}
|
||
</div>
|
||
</Form.Item>}
|
||
|
||
{item.type == "Select" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<Select disabled={type == 'view'} options={item.options} fieldNames={item.fieldNames} />
|
||
</Form.Item>}
|
||
{item.type == "Radio" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<Radio.Group disabled={type == 'view'} options={item.options}/>
|
||
</Form.Item>}
|
||
|
||
{/* {item.type == "Select" && <Select disabled={type == 1} options={item.options} />} */}
|
||
|
||
{item.type == "Switch" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<Switch defaultChecked onChange={onChange} disabled={type == 'view'} />
|
||
</Form.Item>}
|
||
|
||
{/* {item.type == "Switch" && <Switch defaultChecked onChange={onChange} disabled={type == 1} />} */}
|
||
|
||
{item.type == "DatePicker" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
{/* {formJsonData[item.key]} */}
|
||
<DatePicker disabled={type == 'view'} style={{ width: "100%" }} picker={item.picker}/>
|
||
</Form.Item>}
|
||
|
||
{/* {item.type == "DatePicker" && <DatePicker disabled={type == 1} style={{ width: "100%" }} />} */}
|
||
|
||
{item.type == "TextArea" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<TextArea rows={4} disabled={type == 'view'} />
|
||
</Form.Item>}
|
||
{/* {item.type == "TextArea" && <TextArea rows={4} disabled={type == 1} />} */}
|
||
|
||
{item.type == "RangePicker" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<RangePicker disabled={type == 'view'} />
|
||
</Form.Item>}
|
||
|
||
{item.type == "TreeSelect" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
<TreeSelect
|
||
showSearch
|
||
style={{ width: '100%' }}
|
||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||
placeholder="Please select"
|
||
allowClear
|
||
fieldNames={item.fieldNames}
|
||
treeData={item.treeData}
|
||
treeCheckable={item.multiple}
|
||
/>
|
||
|
||
</Form.Item>}
|
||
|
||
{/* {item.type == "RangePicker" &&
|
||
<RangePicker disabled={type == 'view'} />} */}
|
||
{item.type == "upload" && <Form.Item
|
||
label={item.label}
|
||
name={item.key}
|
||
rules={[{ required: item.required, message: '请输入' + item.label }]}
|
||
>
|
||
|
||
<>
|
||
{type !== 'view' && <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 className='flex' >
|
||
{fileList?.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)} />}
|
||
<VerticalAlignBottomOutlined onClick={() => download(item.fileId, item.fileName)} />
|
||
</div>
|
||
})}
|
||
</div>
|
||
</>
|
||
</Form.Item>}
|
||
</Col>
|
||
)
|
||
})}
|
||
</Row>
|
||
</Form >
|
||
{TableZdyProps}
|
||
{
|
||
type !== 'view' && <div className="flex flex-end" style={{ marginTop: 10, justifyContent: "flex-end" }}>
|
||
<Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
|
||
<Button type="primary" onClick={getInfo}>确定</Button>
|
||
</div>
|
||
}
|
||
<PdfView url={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/rescue/goods/file/download/${url}`)}`} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
|
||
|
||
|
||
</div >
|
||
);
|
||
}
|
||
|
||
|
||
export default FormZdy; |