system-copyright-react/src/components/RefunModal/RefunModal.tsx

import { useEffect, useState } from 'react'
import './RefunModal.css'
import { Form, Select, Button, Upload, message, Input } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { uploadImageUrl, DevUserId,get } from "../../util/AjaxUtils.ts";
const { TextArea } = Input;

export default function RefunModal(props:any) {
    const [messageApi, contextHolder] = message.useMessage();
    // 上传附件
    const [refunArray, setRefunArray] = useState<string[]>([]);
    const [selectedReason, setSelectedReason] = useState(''); //选择原因

    const handleReasonChange = (value: any) => {
        setSelectedReason(value);
    };
    // const [refunDataArray,setRefunDataArray] = useState<any[]>([]) //未退款项目
    // 提交表单
    const onFinish = (values: any) => {
        console.log('Form values:', values);
        props.closeModal()
    };
    // 获取未退款项目
    const getRefunData = () => {
        get({
            messageApi,
            url: `/api/proj/refund/apply/list-proj-unapply/self`,
            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
            onSuccess({data}) {
                console.log(data);
                
            }
        })
    }
    useEffect(()=>{
        getRefunData()
    },[])
    return (
        <div className='refunModal'>
            {contextHolder}
            <Form
                name="Form"
                onFinish={onFinish}
                initialValues={{ softWare: '' }}
                style={{ maxWidth: 600 }}
            >
                <div className='refunModal-item'>
                    <div className='refunModal-title'>
                        退款软著<span className='refunModal-red'>*</span>
                    </div>
                    <Form.Item
                        name="title"
                        // label="退款软著"
                        rules={[{ required: true, message: '请选择一个软著!' }]}
                    >
                        <Select
                            showSearch
                            placeholder="选择需要退款的软著"
                            filterOption={(input, option) =>
                                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                            options={[
                                { value: '嘻嘻系统', label: '嘻嘻系统' },
                                { value: '呵呵系统', label: '呵呵系统' },
                                { value: '哈哈系统', label: '哈哈系统' },
                                { value: '哈嘎嘎系统', label: '哈嘎嘎系统' },
                                { value: '哈嘻嘻嘎嘎系统', label: '哈嘻嘻嘎嘎系统' },
                            ]}
                            style={{
                                width: 405,
                                height: 46,
                            }}
                        />
                    </Form.Item>
                </div>
                <div className='refunModal-item'>
                    <div className='refunModal-title'>
                        退款原因<span className='refunModal-red'>*</span>
                    </div>
                    <Form.Item
                        name="reason"
                        // label="退款软著"
                        rules={[{ required: true, message: '请选择退款原因' }]}
                    >
                        <Select
                            placeholder="选择退款原因"
                            options={[
                                { value: '没钱', label: '没钱' },
                                { value: '不想买', label: '不想买' },
                                { value: '其他', label: '其他' },
                            ]}
                            style={{
                                width: 405,
                                height: 46,
                            }}
                            onChange={handleReasonChange}
                        />
                    </Form.Item>
                </div>
                {selectedReason === '其他' && (
                    <div className='refunModal-item'>
                        <div className='refunModal-title'>
                            其他<span className='refunModal-red'>*</span>
                        </div>
                        <Form.Item
                            name="other"
                            rules={[{ required: true, message: '请输入退款原因' }]}
                        >
                            <TextArea
                                placeholder="其他退款原因"
                                style={{ height: 120, resize: 'none', width: 405 }}
                            />
                        </Form.Item>
                    </div>
                )}
                {/* <div className='refunModal-item' >
                    <div className='refunModal-title'>
                        其他<span className='refunModal-red'>*</span>
                    </div>
                    <Form.Item
                        name="other"
                        // label="退款软著"
                        rules={[{ required: true, message: '请输入退款原因' }]}
                    >
                        <TextArea
                            // showCount
                            // maxLength={100}
                            placeholder="其他退款原因"
                            style={{ height: 120, resize: 'none', width: 405, }}
                        />
                    </Form.Item>
                </div> */}
                <div className='refunModal-item'>
                    <div className='refunModal-title'>
                        退款凭证<span className='refunModal-red'>*</span>
                    </div>
                    <div style={{ width: 405, }}>
                        <Form.Item
                            name="img"
                            // label="退款软著"
                            valuePropName="fileList"
                            getValueFromEvent={(e: any) => {
                                if (e.file.status === 'done') {
                                    refunArray.push(e.file.response.data.fileId);
                                    setRefunArray(refunArray);
                                }
                                if (e.file.status === 'removed') {
                                    const idArray = refunArray.filter(item => item != e.file.response.data.fileId);
                                    setRefunArray(idArray);
                                }
                                return e.fileList;
                            }}
                            rules={[{ required: true, message: '请上传凭证' }]}
                        >
                            <Upload
                                name="image"
                                action={uploadImageUrl()}
                                headers={{ 'X-USER-ID': DevUserId }}
                                beforeUpload={(file) => {
                                    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                                    if (!isJpgOrPng) {
                                        message.error('只能上传 JPG/PNG 格式文件!');
                                        return Upload.LIST_IGNORE; // 不允许上传非
                                    }
                                    return isJpgOrPng;
                                }}
                            // listType="picture-card"
                            >

                                <Button icon={<UploadOutlined />} style={{ marginTop: 2 }}>上传凭证图片</Button>
                            </Upload>
                        </Form.Item>
                    </div>
                </div>

                <Form.Item>
                    <div className='refunModal-btn'>
                        <Button type="primary" htmlType="submit" style={{
                            width: 273,
                            height: 52
                        }}>
                            提交申请
                        </Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}