xgd_system/src/pages/MachineManage/MachineRegister/components/AddModal.tsx

import React, { useEffect, useState, useRef } from 'react';
import { Modal, Form, Input,message,DatePicker } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { addPasswordDeviceInfo } from '@/services/device';

interface PageProps {
  title?: string;
  visibility: boolean;
  onCancel: () => void;
  onOk: () => void;
}

const AddModal = ({
  title = "提示",
  visibility = false,
  onCancel,
  onOk,
  ...props
}: PageProps) => {
  const [form] = Form.useForm();
  const passwordDeviceInfo= {
    "belongCryptoSystem": "string",
    "communicationAddressType": "string",
    "createTime": "string",
    "deviceAliases": "string",
    "equipmentDeploymentLocation": "string",
    "equipmentManagementUnit": "string",
    "equipmentManufacturer": "string",
    "equipmentType": "string",
    "equipmentUserUnit": "string",
    "id": 0,
    "isolatorExternalNetworkIp": "string",
    "memo": "string",
    "passwordDeviceNumber": "string",
    "passwordDeviceSerialNumber": "string",
    "passwordEntityIdentifier": "string",
    "registrationDate": "string",
    "superiorEquipmentNumber": "string",
    "sysType": "string",
    "updateTime": "string"
  };

  const onFinish = (values: any) => {
    values.registrationDate=values['registrationDate'].format('YYYY-MM-DD'),
    addPasswordDeviceInfo({...values,passwordDeviceInfo}).then((res) => {
      if (res?.result == "success") {
        message.success('新增成功');
        form.resetFields();
      } else {
        message.error(res?.errorMsg);
      }
    })
  };

  return (
    <>
      <Modal
        title={title}
        open={visibility}
        centered
        width={1200}
        onCancel={onCancel}
        footer={null}
        maskClosable={false}
      >
        <Form
          onFinish={onFinish}
          form={form}
          style={{maxHeight:'500px',overflow:'auto'}}
        >
          <Form.Item name="belongCryptoSystem" label="所属密码系统">
            <Input placeholder="请输入所属密码系统" />
          </Form.Item>
          <Form.Item name="equipmentType" label="所属设备类型">
            <Input placeholder="请输入所属设备类型" />
          </Form.Item>
          <div style={{ display: 'flex' }}>
            <Form.Item name="passwordEntityIdentifier" label="密码实体标识" rules={[{ required: true, message: '请选择密码实体标识' },]}>
              <Input placeholder="请选择密码实体标识" />
            </Form.Item>
            {/* <ButtonComp text={'选择'} style={{ marginLeft: '20px' }} onClick={() => { }} /> */}
          </div>
          <div style={{ display: 'flex' }}>
            <Form.Item name="passwordDeviceSerialNumber" label="密码设备序号" rules={[{ required: true, message: '请选择密码设备序号' },]}>
              <Input placeholder="请输入密码设备序号" />
            </Form.Item>
            <div style={{ marginLeft: '20px' }}>（如0000001）</div>
          </div>
          <Form.Item name="passwordDeviceNumber" label="密码设备编号" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请输入密码设备编号" />
          </Form.Item>
          <Form.Item name="superiorEquipmentNumber" label="上级设备编号" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请输入上级设备编号" />
          </Form.Item>
          <Form.Item name="equipmentUserUnit" label="设备使用单位" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请输入设备使用单位" />
          </Form.Item>
          <Form.Item name="equipmentDeploymentLocation" label="设备部署地点" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请输入设备部署地点" />
          </Form.Item>
          <Form.Item name="equipmentManagementUnit" label="设备管理单位" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请选择设备管理单位" />
          </Form.Item>
          <Form.Item name="communicationAddressType" label="通信地址类型" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请选择通信地址类型" />
          </Form.Item>
          <Form.Item name="isolatorExternalNetworkIp" label="隔离器外网IP" rules={[{ required: true, message: '请选择密码设备序号' },]}>
            <Input placeholder="请输入隔离器外网IP" />
          </Form.Item>
          <Form.Item name="equipmentManufacturer" label="设备生产厂商（可空）">
            <Input placeholder="请选择设备生产厂商" />
          </Form.Item>
          <Form.Item name="deviceAliases" label="设备别名（可空）">
            <Input placeholder="请选择设备别名" />
          </Form.Item>
          <Form.Item name="memo" label="备注信息（可空）">
            <Input placeholder="请输入备注信息" />
          </Form.Item>
          <Form.Item name="registrationDate" label="注册日期（可空）">
            <DatePicker />
          </Form.Item>
        </Form>
        <div className='flex_jE mt20'>
          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={()=>{
            form.submit();
            // onOk();
          }} />
          <ButtonComp type="cancel" text={'取消'} onClick={onCancel} />
        </div>
      </Modal>

    </>
  );
};

export default AddModal;