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

import React, { 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 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 = () => {
        post<any>({
            messageApi,
            url: `/api/contract/management/save`,
            body: {
                firstPartyAddress: address,
                firstPartyName: name,
                firstPartyPhone: phone
            },
            onBefore() {

            },
            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() {

            }
        })
      
    }
    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>

    )
}