CardAdd.tsx

import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Space, Button, Form, Row, Col, Layout, message, Spin } from 'antd';
const { TabPane } = Tabs;

import { connect, history } from 'umi';

import { RA, ResultClear } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack';
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import Line from '@/components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';
import Relationship from '@/components/Relationship/Relationship';
import { useForm } from 'antd/es/form/util';
import { validateMessages } from '@/utils/params';
import styles from './css/index.less';

const module = 'CommunityService';
let communityName: string = '';
const CardAdd = (props: any) => {
  const { dispatch, Result, communityInfo } = props;

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (Result != null) {
      if ((Result.error_code = '0000')) {
        message.success('Operation Success!');
        setLoading(false);
        ResultClear(module, dispatch);
        history.push('/CommercialService/AccessCardApplication');
      } else {
        message.error('Operation Fail!');
        setLoading(false);
        ResultClear(module, dispatch);
      }
    }
  }, [Result]);

  const onFinish = (values: any) => {
    if (!communityName) {
      message.warning('Please enter the complete!');
      return;
    }

    values.communityName = communityName;
    setLoading(true);
    RA(35, values, module, dispatch);
  };

  const extendName = (values: any) => {
    communityName = values;

    RA(32, { communityName: values }, 'User', dispatch);
  };

  useEffect(() => {
    if (communityInfo != null) {
      form.setFieldsValue({
        zipCode:
          communityInfo.data.rows.residentialAddress +
          ' ' +
          communityInfo.data.rows.residentialZipCode,
      });
    }
  }, [communityInfo]);

  useEffect(() => {
    form.resetFields();
  }, []);

  const checkData = (rule: any, value: any, callback: any) => {
    if (value) {
      if (/^[a-zA-Z0-9]+$/g.test(value)) {
        callback();
      } else {
        callback(new Error('Only numbers and letters can be entered!'));
      }
    }
    callback();
  };

  const checkName = (rule: any, value: any, callback: any) => {
    if (!value || !value.trim()) {
      callback(new Error('*it is required!'));
    }
    callback();
  };
  return (
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
      <TitleBack title={'Apply Card Add'}></TitleBack>

      <Form form={form} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
        <Spin spinning={loading}>
          <Form.Item labelCol={{ span: 3 }} label="Community" style={{ marginBottom: 0 }}>
            <Input.Group compact>
              <Form.Item name="communityName" style={{ marginRight: 20 }}>
                <SearchOptionsCommnity opname={extendName} />
              </Form.Item>
              <Form.Item
                name="buildNumber"
                style={{ marginRight: 16 }}
                className={styles.buildNumber}
                rules={[{ required: true, validator: checkData }]}
              >
                <Input style={{ width: 80 }} placeholder={'BLK'} />
              </Form.Item>
              <div style={{ lineHeight: 2, marginRight: 16 }}>#</div>
              <Form.Item
                name="floorNumber"
                style={{ marginRight: 16 }}
                className={styles.floorNumber}
                rules={[{ required: true, validator: checkData }]}
              >
                <Input style={{ width: 80 }} placeholder={'Floor'} />
              </Form.Item>
              <div style={{ lineHeight: 2, marginRight: 16 }}>-</div>
              <Form.Item
                name="roomNumber"
                className={styles.roomNumber}
                rules={[{ required: true, validator: checkData }]}
              >
                <Input style={{ width: 120 }} placeholder={'Room'} />
              </Form.Item>
            </Input.Group>
          </Form.Item>

          <Form.Item
            name="zipCode"
            wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}
            rules={[{ required: true }]}
          >
            <Input
              style={{ width: 580 }}
              placeholder={'Display the address and postcode automatically according to the'}
              disabled
            ></Input>
          </Form.Item>

          <Form.Item labelCol={{ span: 3 }} label="Owner Name" style={{ marginBottom: -40 }}>
            <Input.Group compact>
              <Form.Item
                name="communityOwner"
                style={{ marginRight: 20 }}
                rules={[{ required: true, validator: checkName }]}
              >
                <Input placeholder={'Name'} />
              </Form.Item>
              <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
                <Input hidden={true} />
              </Form.Item>
              <Form.Item name="communityOwnerPhone" style={{ marginRight: 20 }}>
                <Input placeholder={'Phone number'} />
              </Form.Item>
              <Form.Item name="communityOwnerEmail" rules={[{ required: true, type: 'email' }]}>
                <Input placeholder={'Email'} />
              </Form.Item>
            </Input.Group>
          </Form.Item>

          <Line></Line>

          <Form.Item labelCol={{ span: 3 }} label="Applicant" style={{ marginBottom: -40 }}>
            <Input.Group compact>
              <Form.Item
                name="applyName"
                style={{ marginRight: 20 }}
                rules={[{ required: true, validator: checkName }]}
              >
                <Input placeholder={'Name'} />
              </Form.Item>
              <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
                <Input hidden={true} />
              </Form.Item>
              <Form.Item name="applyNamePhone" style={{ marginRight: 20 }}>
                <Input placeholder={'Phone number'} />
              </Form.Item>
              <Form.Item name="applyNameEmail" rules={[{ required: true, type: 'email' }]}>
                <Input placeholder={'Email'} />
              </Form.Item>
            </Input.Group>
          </Form.Item>

          {/* label={"Contact Information"} */}
          <Form.Item labelCol={{ span: 3 }} name="applyRelationOwner" label={'Relationship'}>
            <Relationship />
          </Form.Item>
          <Form.Item
            labelCol={{ span: 3 }}
            name="applyReasonContent"
            label={'Reason'}
            rules={[{ required: true, max: 500 }]}
          >
            <TextArea style={{ width: 400 }}></TextArea>
          </Form.Item>
          <Line></Line>
          <Form.Item wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Spin>
      </Form>
    </div>
  );
};

function map(state: any) {
  const { Result } = state[module];
  const { communityInfo } = state.User;
  return { Result, communityInfo };
}
export default connect(map)(CardAdd);