tsg-web/src/views/sz/szzf/ajdj/bajz.js

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';

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:9102/test.by-lyf.tmp"

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 getInfo = () => {
        form.validateFields().then((values) => {
            getFormInfo({ ...values, ...fileListHj })
            form.resetFields()
            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) {

                httppostAddfile(uploadUrl, e).then(res => {
                    if(fileListHj[keys]){
                        fileListHj[keys].push(res.data)
                    }else{
                        fileListHj[keys]=[]
                        fileListHj[keys].push(res.data)
                    }
                    
                    setFileHj({ ...fileListHj })
                })
            }
        }
    };
    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 = (id, name) => {
        httpgetExport(downloadUrl+id).then(res => {
            exportFile(name,res.data)
        })
    }
    const onFinish = () => {

    }
    useEffect(() => {
        setFileHj(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 />
                    </Form.Item>
                </Col>
                <Col span={10}>
                    <Form.Item
                        label='保管地点'
                        name='storageLocation'
                    >
                        <Input />
                    </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'
                        >
                            <Dragger {...props(item1.key)}>
                                <p className="ant-upload-drag-icon">
                                    <InboxOutlined />
                                </p>
                                <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</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}>确定</Button>
            </div>
        </Form >

    )
}

export default Page