system-copyright-react/src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx

import { useState } from 'react'
import { Button, Form, Upload, message, } from "antd"
import { uploadFileUrl } from '../../../../request/request'
import { UploadOutlined } from '@ant-design/icons';
import './edit-app-files.css'
export default function EditAppFiles(props: any) {
    // 定义允许上传的文件格式
    const ALLOWED_FILE_TYPES = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png'];
    const beforeUpload = (file: File) => {
        const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
        if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
            message.error(`仅支持 ${ALLOWED_FILE_TYPES.join(', ')} 格式的文件`);
            return Upload.LIST_IGNORE;
        }
        return true;
    };
    // 上传文件源码文档列表
    const [upCodeArray, setUpCodeArray] = useState<any>([])
    const [codeDis, setCodeDis] = useState(false)
    const validateCodeFileUpload = (_rule: any, value: any) => {
        if (!value || value.fileList.length === 0) {
            return Promise.reject('请选择上传文件');

        }
        const file = value.fileList[0];
        if (file.status === 'uploading') {
            setCodeDis(true)
            return Promise.reject('文件上传中，请稍候');
        } else if (file.status === 'error') {
            setCodeDis(true)
            setUpCodeArray([])
            return Promise.reject('文件上传失败，请删除后重新上传');

        } else if (file.status !== 'done') {
            setCodeDis(true)
            setUpCodeArray([])

            return Promise.reject('文件上传失败，请删除后重新上传');
        } else if (file.status === 'done') {
            setCodeDis(true)
            return Promise.resolve();
        }
        return Promise.resolve();
    };
    // 上传文件软件文档列表
    const [upSoftArray, setUpSoftArray] = useState<any>([])
    const [softDis, setSoftDis] = useState(false)
    const validateSoftFileUpload = (_rule: any, value: any) => {
        if (!value || value.fileList.length === 0) {
            return Promise.reject('请选择上传文件');

        }
        const file = value.fileList[0];
        if (file.status === 'uploading') {
            setSoftDis(true)
            return Promise.reject('文件上传中，请稍候');
        } else if (file.status === 'error') {
            setSoftDis(true)
            setUpSoftArray([])
            return Promise.reject('文件上传失败，请删除后重新上传');

        } else if (file.status !== 'done') {
            setSoftDis(true)
            setUpSoftArray([])

            return Promise.reject('文件上传失败，请删除后重新上传');
        } else if (file.status === 'done') {
            setSoftDis(true)
            return Promise.resolve();
        }
        return Promise.resolve();
    };

    const token = sessionStorage.getItem('token')
    const height = window.innerHeight - 460;
    const [form] = Form.useForm();
    const handleSubmit = () => {
        // console.log(form);
        props.setEditProcess(4);
        // 调用表单实例的 submit 方法
        form.submit();

    };
    const submitInfo = (values: any) => {
        message.success('提交成功');
        console.log(values);
        props.setEditProcess(3);


    }
    const onFinish = (values: any) => {
        // 处理表单提交逻辑
        console.log('表单提交成功', values);
        submitInfo(values)
        console.log(upCodeArray);
        
    };
    return (
        <div>
            <div className='bigLine'></div>
            <div className='appInfoFormBox' style={{
                height: height,
                justifyContent: 'flex-start',
                flexDirection: 'column',
                marginLeft: '100px',
                paddingBottom: '0'
            }}>
                <div style={{
                    height: '80px',
                }}>
                    <Form form={form} onFinish={onFinish}
                        onFinishFailed={(errorInfo: any) => {
                            const errorMessages = errorInfo.errorFields.map((field: any) => field.errors[0]);
                            if (errorMessages.some((msg: any) => msg.includes('文件上传失败'))) {
                                message.error('文件上传失败，请重新上传');
                            } else if (errorMessages.some((msg: any) => msg.includes('文件上传中'))) {
                                message.error('文件上传中，请稍候');
                            } else if (errorMessages.some((msg: any) => msg.includes('文件状态异常'))) {
                                message.error('文件状态异常，请重新上传');
                            } else {
                                message.error('请完善信息');
                            }
                        }}
                    >
                        <div style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            width: '600px',
                            // background: 'pink'
                        }}>
                            <div className='appInfoFormInput' style={{
                                position: 'relative',
                            }}>
                                <div className='FormInputTitle' style={{
                                }}>源码文档：</div>
                                <div style={{
                                    width: '220px',
                                }}>
                                    <Form.Item name="ym" label="" rules={[
                                        // { required: true, message: '请选上传文件' },
                                        { validator: validateCodeFileUpload }
                                    ]}>
                                        <Upload
                                            name="file"
                                            action={uploadFileUrl()}
                                            defaultFileList={upCodeArray}
                                            onChange={({ fileList }) => {
                                                console.log(fileList);
                                                // console.log(upCodeArray);
                                                
                                            }}
                                            onRemove={() => {
                                                setUpCodeArray([])
                                                setCodeDis(false)
                                            }}
                                            beforeUpload={beforeUpload}
                                            // onChange={handleUploadChange}
                                            headers={{ 'Auth': `Bearer ${token}` }}
                                        >
                                            <Button icon={<UploadOutlined />} style={{
                                                marginTop: '4px'
                                            }}
                                                disabled={codeDis}
                                            >上传附件</Button>
                                        </Upload>
                                    </Form.Item>
                                </div>
                                <a style={{
                                    position: 'absolute',
                                    top: '10px',
                                    left: '240px',
                                    textWrap: 'nowrap'
                                }}>[ 下载 ]</a>
                            </div>
                            <div className='appInfoFormInput' style={{
                                position: 'relative',
                            }}>
                                <div className='FormInputTitle' style={{
                                }}>软件文档：</div>
                                <div style={{
                                    width: '220px',
                                }}>
                                    <Form.Item name="file" label="" rules={[
                                        // { required: true, message: '请上传文件' },
                                        { validator: validateSoftFileUpload }
                                    ]}>
                                        <Upload
                                            name="file"
                                            action={uploadFileUrl()}
                                            defaultFileList={upSoftArray}
                                            onChange={({ fileList }) => {
                                                console.log(fileList);
                                            }}
                                            onRemove={() => {
                                                setUpSoftArray([])
                                                setSoftDis(false)
                                            }}
                                            beforeUpload={beforeUpload}
                                            // onChange={handleUploadChange}
                                            headers={{ 'Auth': `Bearer ${token}` }}

                                        >
                                            <Button icon={<UploadOutlined />} style={{
                                                marginTop: '4px'
                                            }}
                                                disabled={softDis}
                                            >上传附件</Button>
                                        </Upload>
                                    </Form.Item>
                                </div>
                                <a style={{
                                    position: 'absolute',
                                    top: '10px',
                                    left: '240px',
                                    textWrap: 'nowrap'
                                }}>[ 下载 ]</a>
                            </div>
                        </div>



                    </Form>
                </div>
                <div className="fileTextBox">
                    {/* 循环100次 */}
                    {Array.from({ length: 100 }).map((_, index) => (
                        <span style={{
                            lineHeight: '30px',
                            fontSize: '14px',
                        }}

                            key={index}>
                            说明:1嘻嘻嘻啊司机大佬觉得拉家带口垃圾狄拉克
                        </span>
                    ))}

                </div>
            </div>

            <div className='bigLine'></div>
            <div className='nextBtnBxo'>
                <Button
                    style={{
                        width: '235px',
                        height: '46px',
                        borderRadius: '5px',
                    }}
                    onClick={() => {
                        props.setEditProcess(2)
                    }}>上一步</Button>
                <Button
                    style={{
                        width: '235px',
                        height: '46px',
                        borderRadius: '5px',
                        marginLeft: '10px',
                    }}
                    type='primary'
                    onClick={() => {
                        handleSubmit()
                    }}>下一步</Button>

            </div>
        </div>
    )
}