tsg-web/src/views/sz/szzf/form/index.js

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) => {
            // debugger;
            getFormInfo({ ...values, [fileKey]: fileList, fileIds: fileList.map(item => item.fileId) })
            
            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()
    },[])
    useEffect(() => {
        
        let formType = type
        if (type = 'edit') {
            formType = 2
        }
        if (type == 'view') {
            formType = 1
        }
        if (type == 'save') {
            form.setFieldsValue(formJsonData)
            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}
                                        labelCol={item.labelCol}
                                        rules={[{ required: item.required, message: '请输入' + item.label }]}
                                    >
                                        <Input disabled={type == 'view' || item.disabled} placeholder={item.placeholder} addonAfter={item.addonAfter}/>
                                    </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;