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

import { useState } from 'react'
import { Button, Form, Upload, message, Select } from "antd"
import { uploadFileUrl } from '../../../../request/request'
import { UploadOutlined } from '@ant-design/icons';
export default function EditAppDes(props: any) {
    const [upArray, setUpArray] = useState<any>([])
    // 是否禁用上传按钮
    const [disabled, setDisabled] = useState(false);
    const validateFileUpload = (_rule: any, value: any) => {
        if (!value || value.fileList.length === 0) {
            return Promise.reject('请选择上传文件');

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

        } else if (file.status !== 'done') {
            // setDisabled(true)
            setUpArray([])

            return Promise.reject('文件上传失败，请删除后重新上传');
        } else if (file.status === 'done') {
            // setDisabled(true)
            return Promise.resolve();
        }
        return Promise.resolve();
    };
    // 定义允许上传的文件格式
    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 token = sessionStorage.getItem('token')
    const height = window.innerHeight - 460;
    const [form] = Form.useForm();
    const handleSubmit = () => {
        // console.log(form);
        props.setEditProcess(3);
        // 调用表单实例的 submit 方法
        form.submit();

    };

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


    }
    const onFinish = (values: any) => {
        // 处理表单提交逻辑
        console.log('表单提交成功', values);
        submitInfo(values)
    };
    return (
        <div>
            <div className='bigLine'></div>
            <div className='appInfoFormBox' style={{
                height: height,
                justifyContent: 'flex-start',
                marginLeft: '100px',
            }}>

                <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 className='appInfoFormInput'>
                        <div className='FormInputTitle' style={{
                            width: '160px',
                        }}>权力取得方式：</div>
                        <Form.Item name="gettype" label="" rules={[{ required: true, message: '请选择权力取得方式' },

                        ]}>
                            <Select
                                allowClear
                                style={{
                                    width: '300px',
                                    height: '42px',
                                }}

                                options={[
                                    // { value: '', label: '全部项目' },
                                    { value: '1', label: '取得方式1' },
                                    { value: '2', label: '取得方式2' },
                                    { value: '3', label: '取得方式3' },
                                ]}
                                // defaultValue=""
                                placeholder={'请选择权力取得方式'}
                            />
                        </Form.Item>
                    </div>
                    <div className='appInfoFormInput'>
                        <div className='FormInputTitle' style={{
                            width: '160px',
                        }}>权力范围：</div>
                        <Form.Item name="fw" label="" rules={[{ required: true, message: '请选择权力范围' },

                        ]}>
                            <Select
                                allowClear
                                style={{
                                    width: '300px',
                                    height: '42px',
                                }}

                                options={[
                                    { value: '1', label: '全部权力' },
                                    { value: '2', label: '部分权力' },

                                ]}
                                // defaultValue=""
                                placeholder={'请选择权力范围'}
                            />
                        </Form.Item>

                    </div>
                    <div className='appInfoFormInput' >
                        <div className='FormInputTitle' style={{
                            width: '160px',
                        }}>上传其他相关文件：</div>
                        <div style={{
                            maxWidth: '500px',
                        }}>
                            <Form.Item name="file" label=""
                                rules={[
                                    { validator: validateFileUpload }
                                ]}

                            >
                                <Upload
                                    action={uploadFileUrl()}
                                    defaultFileList={upArray}

                                    onChange={({ fileList }) => {
                                        console.log(fileList);

                                    }}
                                    onRemove={() => {
                                        setUpArray([])
                                        setDisabled(false)
                                    }}
                                    headers={{ 'Auth': `Bearer ${token}` }}
                                    beforeUpload={beforeUpload}
                                >
                                    <Button disabled={disabled} icon={<UploadOutlined />} style={{
                                        marginTop: 4
                                    }}>上传附件</Button>
                                </Upload>
                            </Form.Item>
                        </div>
                    </div>



                </Form>

            </div>

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

            </div>
        </div>
    )
}