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

import {useState} from 'react'
import {post, Axios, get} from "../../util/AjaxUtils.ts";
import useMessage from "antd/es/message/useMessage";
import {
    Form,
    Modal,
    Input, Button
} from 'antd';
import ContractText from '../ContractText/ContractText'
import {useDispatch} from 'react-redux'

export default function ContractModal(props: any) {
    const [messageApi, messageApiHolder] = useMessage();
    const [modalOpen, setModalOpen] = useState(false)
    const [form] = Form.useForm<any>();
    const [name, setName] = useState(''); // 甲方姓名状态
    const [phone, setPhone] = useState(''); // 电话状态
    const [address, setAddress] = useState(''); // 地址状态
    const [isSaving, setIsSaving] = useState(false);
    const onFinish = (values: any) => {
        setName(values.name);
        setPhone(values.phone);
        setAddress(values.address);
        setModalOpen(true)
    }
    const dispath = useDispatch()
    const getContractArray = (page: any) => {
        get({
            messageApi,
            url: `/api/contract/management/listpage/self`,
            config: {
                params: {
                    page: page,
                    rows: 10
                }
            },
            onSuccess(data: any) {
                console.log(data);
                dispath({
                    type: 'upContractArray',
                    val: data.data.rows
                })
                dispath({
                    type: 'upContractTotal',
                    val: data.data.total
                })
                // setContractArray(data.data.rows)

            }
        })
    }
    const downContract = () => {
        if (isSaving) {
            return;
        }
        post<any>({
            messageApi,
            url: `/api/contract/management/save`,
            body: {
                firstPartyAddress: address,
                firstPartyName: name,
                firstPartyPhone: phone
            },
            onBefore() {
                setIsSaving(true);
            },
            onSuccess(data) {
                // console.log(data.data.data);
                // console.log('成功');
                const contractManagementId = data.data.data
                window.open(`${Axios.defaults?.baseURL}/api/contract/management/download/${contractManagementId}`)
                getContractArray(1)
                setModalOpen(false)
                props.closeModal()
            },
            onFinally() {
                setIsSaving(false);
            }
        })

    }
    return (
        <div>
            {messageApiHolder}
            <Form
                name="Form"
                form={form}
                onFinish={onFinish}
                initialValues={{softWare: ''}}
                style={{maxWidth: 600, marginTop: 20}}
            >
                <div className='refunModal-item'>
                    <div className='refunModal-title'>
                        甲方名称<span className='refunModal-red'>*</span>
                    </div>
                    <div className='refunInput'>

                        <Form.Item
                            name="name"
                            rules={[{required: true, message: '请输入甲方姓名!'}]}
                        >
                            <Input style={{
                                width: 405,
                                height: 46,
                                background: '#FFF',
                                color: 'black'
                            }}
                                   placeholder="甲方姓名"
                            >
                            </Input>

                        </Form.Item>


                    </div>
                </div>
                <div className='refunModal-item'>
                    <div className='refunModal-title'>
                        联系电话<span className='refunModal-red'>*</span>
                    </div>
                    <div className='refunInput'>

                        <Form.Item
                            name="phone"
                            rules={[
                                {required: true, message: '请输入联系电话!'},
                                // {
                                //     pattern: /^1[3456789]\d{9}$/,
                                //     message: '请输入正确的手机号码',
                                // },
                            ]}
                        >
                            <Input
                                style={{

                                    width: 405,
                                    height: 46,
                                    background: '#FFF',
                                    color: 'black'
                                }}
                                placeholder="联系电话"
                            >
                            </Input>

                        </Form.Item>


                    </div>
                </div>
                <div className='refunModal-item'>
                    <div className='refunModal-title'>
                        联系地址<span className='refunModal-red'>*</span>
                    </div>
                    <div className='refunInput'>

                        <Form.Item
                            name="address"
                            rules={[{required: true, message: '请输入联系地址!'}]}
                        >
                            <Input style={{
                                width: 405,
                                height: 46,
                                background: '#FFF',
                                color: 'black'
                            }}
                                   placeholder="联系地址"
                            >
                            </Input>

                        </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>
            <Modal
                title="合同预览"
                destroyOnClose={true}
                open={modalOpen}
                footer={null}
                maskClosable={false} // 禁止通过点击蒙层关闭
                onCancel={() => {
                    setModalOpen(false)
                }}
                okButtonProps={{style: {background: 'red', color: 'white'}}}
                width={850}
                centered

            >
                <div className='contract'>
                    <ContractText name={name} phone={phone} address={address}></ContractText>
                </div>
                <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: 20}}>
                    <Button type="primary" onClick={
                        downContract
                    }>合同下载</Button>
                </div>
            </Modal>
        </div>

    )
}