CardAdd.tsx 7.2 KB
Newer Older
1 2
import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Space, Button, Form, Row, Col, Layout, message, Spin } from 'antd';
maple's avatar
maple committed
3 4
const { TabPane } = Tabs;

5
import { connect, history } from 'umi';
maple's avatar
maple committed
6 7 8 9 10 11 12

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';
13
import { useForm } from 'antd/es/form/util';
Sixiang_Zzb's avatar
Sixiang_Zzb committed
14 15 16
import { validateMessages } from '@/utils/params';
import styles from './css/index.less';

17
const module = 'CommunityService';
Sixiang_Zzb's avatar
Sixiang_Zzb committed
18
let communityName: string = '';
19
const CardAdd = (props: any) => {
20
  const { dispatch, Result, communityInfo } = props;
maple's avatar
maple committed
21

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

maple's avatar
maple committed
25 26
  useEffect(() => {
    if (Result != null) {
27 28 29 30
      if ((Result.error_code = '0000')) {
        message.success('Operation Success!');
        setLoading(false);
        ResultClear(module, dispatch);
Sixiang_Zzb's avatar
Sixiang_Zzb committed
31
        history.push('/CommercialService/AccessCardApplication');
maple's avatar
maple committed
32
      } else {
33 34 35
        message.error('Operation Fail!');
        setLoading(false);
        ResultClear(module, dispatch);
36
      }
maple's avatar
maple committed
37
    }
38
  }, [Result]);
39 40

  const onFinish = (values: any) => {
Sixiang_Zzb's avatar
Sixiang_Zzb committed
41 42 43 44
    if (!communityName) {
      message.warning('Please enter the complete!');
      return;
    }
45

Sixiang_Zzb's avatar
Sixiang_Zzb committed
46
    values.communityName = communityName;
47
    setLoading(true);
maple's avatar
maple committed
48
    RA(35, values, module, dispatch);
49
  };
50

51
  const extendName = (values: any) => {
Sixiang_Zzb's avatar
Sixiang_Zzb committed
52 53
    communityName = values;

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

57 58 59 60
  useEffect(() => {
    if (communityInfo != null) {
      form.setFieldsValue({
        zipCode:
61 62 63
          communityInfo.data.rows.residentialAddress +
          ' ' +
          communityInfo.data.rows.residentialZipCode,
64 65 66
      });
    }
  }, [communityInfo]);
67

Sixiang_Zzb's avatar
Sixiang_Zzb committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
  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();
  };
maple's avatar
maple committed
89
  return (
90
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
91
      <TitleBack title={'Apply Card Add'}></TitleBack>
maple's avatar
maple committed
92

Sixiang_Zzb's avatar
Sixiang_Zzb committed
93
      <Form form={form} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
94 95 96
        <Spin spinning={loading}>
          <Form.Item labelCol={{ span: 3 }} label="Community" style={{ marginBottom: 0 }}>
            <Input.Group compact>
97 98 99 100 101 102
              <Form.Item name="communityName" style={{ marginRight: 20 }}>
                <SearchOptionsCommnity opname={extendName} />
              </Form.Item>
              <Form.Item
                name="buildNumber"
                style={{ marginRight: 16 }}
Sixiang_Zzb's avatar
Sixiang_Zzb committed
103 104
                className={styles.buildNumber}
                rules={[{ required: true, validator: checkData }]}
105
              >
Sixiang_Zzb's avatar
Sixiang_Zzb committed
106
                <Input style={{ width: 80 }} placeholder={'BLK'} />
107
              </Form.Item>
108
              <div style={{ lineHeight: 2, marginRight: 16 }}>#</div>
109 110 111
              <Form.Item
                name="floorNumber"
                style={{ marginRight: 16 }}
Sixiang_Zzb's avatar
Sixiang_Zzb committed
112 113
                className={styles.floorNumber}
                rules={[{ required: true, validator: checkData }]}
114 115 116
              >
                <Input style={{ width: 80 }} placeholder={'Floor'} />
              </Form.Item>
117
              <div style={{ lineHeight: 2, marginRight: 16 }}>-</div>
Sixiang_Zzb's avatar
Sixiang_Zzb committed
118 119 120 121 122
              <Form.Item
                name="roomNumber"
                className={styles.roomNumber}
                rules={[{ required: true, validator: checkData }]}
              >
123 124
                <Input style={{ width: 120 }} placeholder={'Room'} />
              </Form.Item>
maple's avatar
maple committed
125
            </Input.Group>
126 127
          </Form.Item>

Sixiang_Zzb's avatar
Sixiang_Zzb committed
128 129 130 131 132
          <Form.Item
            name="zipCode"
            wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}
            rules={[{ required: true }]}
          >
133 134 135 136 137 138
            <Input
              style={{ width: 580 }}
              placeholder={'Display the address and postcode automatically according to the'}
              disabled
            ></Input>
          </Form.Item>
139

Sixiang_Zzb's avatar
Sixiang_Zzb committed
140
          <Form.Item labelCol={{ span: 3 }} label="Owner Name" style={{ marginBottom: -40 }}>
141
            <Input.Group compact>
142 143 144
              <Form.Item
                name="communityOwner"
                style={{ marginRight: 20 }}
Sixiang_Zzb's avatar
Sixiang_Zzb committed
145
                rules={[{ required: true, validator: checkName }]}
146 147 148
              >
                <Input placeholder={'Name'} />
              </Form.Item>
Sixiang_Zzb's avatar
Sixiang_Zzb committed
149
              <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
150 151
                <Input hidden={true} />
              </Form.Item>
Sixiang_Zzb's avatar
Sixiang_Zzb committed
152
              <Form.Item name="communityOwnerPhone" style={{ marginRight: 20 }}>
153 154
                <Input placeholder={'Phone number'} />
              </Form.Item>
Sixiang_Zzb's avatar
Sixiang_Zzb committed
155
              <Form.Item name="communityOwnerEmail" rules={[{ required: true, type: 'email' }]}>
156 157
                <Input placeholder={'Email'} />
              </Form.Item>
maple's avatar
maple committed
158
            </Input.Group>
159
          </Form.Item>
maple's avatar
maple committed
160

161
          <Line></Line>
maple's avatar
maple committed
162

163 164
          <Form.Item labelCol={{ span: 3 }} label="Applicant" style={{ marginBottom: -40 }}>
            <Input.Group compact>
165
              <Form.Item
Sixiang_Zzb's avatar
Sixiang_Zzb committed
166
                name="applyName"
167
                style={{ marginRight: 20 }}
Sixiang_Zzb's avatar
Sixiang_Zzb committed
168
                rules={[{ required: true, validator: checkName }]}
169
              >
Sixiang_Zzb's avatar
Sixiang_Zzb committed
170
                <Input placeholder={'Name'} />
171
              </Form.Item>
Sixiang_Zzb's avatar
Sixiang_Zzb committed
172 173 174 175
              <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
                <Input hidden={true} />
              </Form.Item>
              <Form.Item name="applyNamePhone" style={{ marginRight: 20 }}>
176 177
                <Input placeholder={'Phone number'} />
              </Form.Item>
Sixiang_Zzb's avatar
Sixiang_Zzb committed
178
              <Form.Item name="applyNameEmail" rules={[{ required: true, type: 'email' }]}>
179 180
                <Input placeholder={'Email'} />
              </Form.Item>
maple's avatar
maple committed
181
            </Input.Group>
182 183 184
          </Form.Item>

          {/* label={"Contact Information"} */}
185 186 187
          <Form.Item labelCol={{ span: 3 }} name="applyRelationOwner" label={'Relationship'}>
            <Relationship />
          </Form.Item>
188 189 190 191 192 193
          <Form.Item
            labelCol={{ span: 3 }}
            name="applyReasonContent"
            label={'Reason'}
            rules={[{ required: true, max: 500 }]}
          >
194 195
            <TextArea style={{ width: 400 }}></TextArea>
          </Form.Item>
196
          <Line></Line>
197 198 199 200 201
          <Form.Item wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
202
        </Spin>
maple's avatar
maple committed
203 204 205 206 207
      </Form>
    </div>
  );
};

208
function map(state: any) {
209 210 211
  const { Result } = state[module];
  const { communityInfo } = state.User;
  return { Result, communityInfo };
maple's avatar
maple committed
212
}
213
export default connect(map)(CardAdd);