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

// import React from 'react'
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";
import { getMenuActive } from '../../util/cache.ts'
import { useDispatch } from 'react-redux'
const { TextArea } = Input;
export default function CorrectionModal(props: any) {
    const [messageApi, contextHolder] = message.useMessage();
    // 上传附件
    const [correctionArray, setCorrectionArray] = useState<string[]>([]);
    // const [selectedReason, setSelectedReason] = useState(''); //选择原因

    // const handleReasonChange = (value: any) => {
    //     setSelectedReason(value);
    // };
    // 获取当前选择类型
    const type = getMenuActive() == 'Correction-PENDING' ? 'PENDING' : getMenuActive() == 'Correction-APPROVED' ? 'APPROVED' : getMenuActive() == 'Correction-REJECTED' ? 'REJECTED' : getMenuActive() == 'Correction-CANCELED' ? 'CANCELED' : ''
    const dispath = useDispatch()
    const [correctionDataArray, setCorrectionDataArray] = useState<any[]>([]) //未退款项目
    const [isDisabled,setIsDisabled] = useState(false) //提交按钮是否禁用
    // 提交表单
    const onFinish = (values: any) => {
        // console.log('Form values:', values);

        // console.log(refunArray);


        post<any>({
            messageApi,
            url: `/api/proj/correction/apply/save`,
            body: {
                projId: values.title,
                correctionReason: values.other,
                correctionVoucher: correctionArray.join(','),
                correctionType:values.correctionType
            },
            onBefore() {
                setIsDisabled(true)
            },
            onSuccess() {
                messageApi.success('提交成功')
                setIsDisabled(true)
                setTimeout(() => {
                    props.closeModal()
                
                }, 500)
                if (type === 'PENDING') {
                    getData()

                }

            },
            onFinally() {
                setIsDisabled(false)
            }
        })
    };
    const getData = () => {
        get({
            messageApi,
            url: `/api/proj/correction/apply/listpage`,
            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
            config: {
                params: {
                    page: 1,
                    rows: 20,
                    applyStatus: type
                }
            },
            onSuccess(data: any) {
                // console.log('更新');

                dispath({
                    type: 'upCorrectionArray',
                    val: data.data.rows
                })
                dispath({
                    type: 'upCorrectionTotal',
                    val: data.data.total
                })
            }
        })
    }
    // 获取未补正项目
    const getCorrectionData = () => {
        get({
            messageApi,
            url: `/api/proj/correction/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
                }))
                setCorrectionDataArray(newArray)

            },
            onFinally() {


            },
        })
    }
    useEffect(() => {
        getCorrectionData()
        // console.log(type);

    }, [])
    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={correctionDataArray}
                            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="correctionType"
                        // label="退款软著"
                        rules={[{ required: true, message: '请选择类型' }]}
                    >
                        <Select
                            placeholder="选择类型"
                            options={[
                                { value: 'MANUAL', label: '操作手册' },
                                { value: 'CODE', 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"
                        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') {
                                    correctionArray.push(e.file.response.data.fileId);
                                    setCorrectionArray(correctionArray);
                                }
                                if (e.file.status === 'removed') {
                                    const idArray = correctionArray.filter(item => item != e.file.response.data.fileId);
                                    setCorrectionArray(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
                        }}
                        disabled={isDisabled}
                        >
                            提交申请
                        </Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}