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,post } 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()
        console.log(refunArray);
        post<any>({
            messageApi,
            url: `/api/proj/refund/apply/save`,
            body: {
                projId: values.title,
                refundReason: values.other,
                refundVoucher: refunArray.join(', ')
            },
            onBefore() {
                
            },
            onSuccess() {
                messageApi.success('提交成功')
            
            },
            onFinally() {
                
            }
        })
    };
    // 获取未退款项目
    const getRefunData = () => {
        get({
            messageApi,
            url: `/api/proj/refund/apply/list-proj-unapply/self`,
            // config: {
            //     params: {

            //     }
            // },
            onBefore() {


            },
            onSuccess(data: any) {
                console.log(data);
                const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({
                    value: item.projId,
                    label: item.projName
                }))
                setRefunDataArray(newArray)

            },
            onFinally() {


            },
        })
    }
    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={refunDataArray}
                            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"
                        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>
    )
}