申请住户卡bug处理

src/pages/CommercialService/CardAdd.tsx

@@ -11,11 +11,14 @@ 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 formRef = useRef(null)
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
 
@@ -35,11 +38,18 @@ const CardAdd = (props: any) => {
   }, [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);
   };
 
@@ -47,18 +57,39 @@ const CardAdd = (props: any) => {
     if (communityInfo != null) {
       form.setFieldsValue({
         zipCode:
-          communityInfo.data.rows[0].residentialAddress +
+          communityInfo.data.rows.residentialAddress +
           ' SINGAPORE' +
-          communityInfo.data.rows[0].residentialZipCode,
+          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'}></TitleBack>
 
-      <Form form={form} name="basic" onFinish={onFinish}>
+      <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>
@@ -68,7 +99,8 @@ const CardAdd = (props: any) => {
               <Form.Item
                 name="buildNumber"
                 style={{ marginRight: 16 }}
-                rules={[{ required: true }]}
+                className={styles.buildNumber}
+                rules={[{ required: true, validator: checkData }]}
               >
                 <Input style={{ width: 80 }} placeholder={'Building'} />
               </Form.Item>
@@ -76,18 +108,27 @@ const CardAdd = (props: any) => {
               <Form.Item
                 name="floorNumber"
                 style={{ marginRight: 16 }}
-                rules={[{ required: true }]}
+                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" rules={[{ required: true }]}>
+              <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 }}>
+          <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'}
@@ -95,35 +136,22 @@ const CardAdd = (props: any) => {
             ></Input>
           </Form.Item>
 
-          <Form.Item
-            labelCol={{ span: 3 }}
-            label="Owner Name"
-            style={{ marginBottom: -40 }}
-            rules={[{ required: true }]}
-          >
+          <Form.Item labelCol={{ span: 3 }} label="Owner Name" style={{ marginBottom: -40 }}>
             <Input.Group compact>
               <Form.Item
                 name="communityOwner"
                 style={{ marginRight: 20 }}
-                rules={[{ required: true }]}
+                rules={[{ required: true, validator: checkName }]}
               >
                 <Input placeholder={'Name'} />
               </Form.Item>
-              <Form.Item
-                style={{ marginRight: 20 }}
-                label={'Contact Information'}
-                rules={[{ required: true }]}
-              >
+              <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
                 <Input hidden={true} />
               </Form.Item>
-              <Form.Item
-                name="communityOwnerPhone"
-                style={{ marginRight: 20 }}
-                rules={[{ required: true }]}
-              >
+              <Form.Item name="communityOwnerPhone" style={{ marginRight: 20 }}>
                 <Input placeholder={'Phone number'} />
               </Form.Item>
-              <Form.Item name="communityOwnerEmail" rules={[{ required: true }]}>
+              <Form.Item name="communityOwnerEmail" rules={[{ required: true, type: 'email' }]}>
                 <Input placeholder={'Email'} />
               </Form.Item>
             </Input.Group>
@@ -133,24 +161,20 @@ const CardAdd = (props: any) => {
 
           <Form.Item labelCol={{ span: 3 }} label="Applicant" style={{ marginBottom: -40 }}>
             <Input.Group compact>
-              <Form.Item name="applyName" style={{ marginRight: 20 }} rules={[{ required: true }]}>
-                <Input placeholder={'Name'} />
-              </Form.Item>
               <Form.Item
+                name="applyName"
                 style={{ marginRight: 20 }}
-                label={'Contact Information'}
-                rules={[{ required: true }]}
+                rules={[{ required: true, validator: checkName }]}
               >
-                <Input placeholder={'Phone number'} hidden={true} />
+                <Input placeholder={'Name'} />
               </Form.Item>
-              <Form.Item
-                name="applyNamePhone"
-                style={{ marginRight: 20 }}
-                rules={[{ required: true }]}
-              >
+              <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 }]}>
+              <Form.Item name="applyNameEmail" rules={[{ required: true, type: 'email' }]}>
                 <Input placeholder={'Email'} />
               </Form.Item>
             </Input.Group>

src/pages/CommercialService/CardDetail.tsx

-import React, { useState, useEffect,useRef} from 'react';
-import { Input ,Tabs,Row,Col, Button,Form,Radio,message} from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { Input, Tabs, Row, Col, Button, Form, Radio, message } from 'antd';
 const { TabPane } = Tabs;
 
-import {connect,history} from 'umi';
-
+import { connect, history } from 'umi';
 
 import { RA, getCookie } from '@/utils/method';
 import TitleBack from '@/components/TitleBack/TitleBack';
 import Line from '@/components/Line/Line';
 import TextArea from 'antd/lib/input/TextArea';
-const module="CommunityService"
-const CardDetail = (props:any) => {
-
-  const { dispatch, Data,DataSave,DataSaveDetail } = props;
-  const formRef = useRef(null)
+const module = 'CommunityService';
+const CardDetail = (props: any) => {
+  const { dispatch, Data, DataSave, DataSaveDetail } = props;
+  const formRef = useRef(null);
 
-  useEffect(()=>{
+  useEffect(() => {
     if (DataSaveDetail != null) {
-        console.log(DataSaveDetail)
+      console.log(DataSaveDetail);
     }
-  }, [DataSaveDetail])
+  }, [DataSaveDetail]);
 
-  useEffect(()=>{
+  useEffect(() => {
     if (DataSave != null) {
-      console.log("初始化页面参数")
+      console.log('初始化页面参数');
       console.log(DataSave);
-      RA(36, { id:DataSave.id }, module, dispatch);
-
-/*       apply_name: "jack-小白白"
-      apply_reason_content: "H4sIAAAAAAAAAHuyo/fJnlkAljbS9QYAAAA="
-      apply_relation_owner: 0
-      apply_status: 0
-      build_number: "01"
-      communityId: "7e5c6fd2f4ba497a90e64535df6e9088"
-      community_name: "A4"
-      community_owner: "jack-小白白"
-      community_owner_email: "3290098379@qq.com"
-      create_time: {date: 10, day: 4, hours: 19, minutes: 51, month: 8, …}
-      deleted: 0
-      floor_number: "00"
-      id: "977597589971009536"
-      ownerId: "c4da40676d044487b37e7a1bdc6dd045"
-      room_number: "767"
-      update_time:  */
-      
+      RA(36, { id: DataSave.id }, module, dispatch);
     } else {
-      history.go(-1)
-    }    
-  }, [])
-  
-  const onFinish = (values:any) => {
-
-    var tmp={
-      communityId : DataSave.communityId,
-      id:DataSave.id,
-      ownerId:DataSave.ownerId,
-      applyStatus:values.applyStatus,
-      replyContent:values.replyContent,
-      type:"7"
+      history.go(-1);
     }
-    console.log(tmp)
-    RA(34,tmp,module,dispatch)
+  }, []);
+
+  const onFinish = (values: any) => {
+    var tmp = {
+      communityId: DataSave.communityId,
+      id: DataSave.id,
+      ownerId: DataSave.ownerId,
+      applyStatus: values.applyStatus,
+      replyContent: values.replyContent,
+      type: '7',
+    };
+    console.log(tmp);
+    RA(34, tmp, module, dispatch);
     message.success('Success Operation!');
-    history.push('/CommercialService/AccessCardApplication')
-  }
+    history.push('/CommercialService/AccessCardApplication');
+  };
 
   return (
-    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>  
-      {
-        DataSave != null ? <>
-        <TitleBack sublist={['Status : ' + "1", 'Time : ' + '12']} title="Apply Card" ></TitleBack>        
+    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
+      {DataSave != null ? (
+        <>
+          <TitleBack sublist={['Status : ' + '1', 'Time : ' + '12']} title="Apply Card"></TitleBack>
           <Row gutter={8}>
             <Col>Community:</Col>
-            <Col span={1}>{DataSave.community_name}</Col>         
+            <Col span={3}>{DataSave.community_name}</Col>
             <Col>unit:</Col>
-            <Col>{DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}</Col>   
+            <Col>
+              {DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}
+            </Col>
           </Row>
 
-          <Row gutter={8} style={{marginTop:16}}>      
+          <Row gutter={8} style={{ marginTop: 16 }}>
             <Col>Address:</Col>
-            <Col>{DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}</Col>   
+            <Col>
+              {DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}
+            </Col>
           </Row>
 
-          <Row gutter={8} style={{marginTop:16}}>
+          <Row gutter={8} style={{ marginTop: 16 }}>
             <Col>Owner Name:</Col>
             <Col span={3}>{DataSave.community_owner}</Col>
             <Col>Phone:</Col>
             <Col>13169646231</Col>
           </Row>
           <Line></Line>
-          <Row gutter={8} style={{marginTop:16}}>
+          <Row gutter={8} style={{ marginTop: 16 }}>
             <Col span={3}>Apply Name:</Col>
             <Col span={3}>{DataSave.apply_name}</Col>
             <Col>Phone:</Col>
             <Col>13169646231</Col>
           </Row>
-          <Row gutter={8} style={{marginTop:16}}>
+          <Row gutter={8} style={{ marginTop: 16 }}>
             <Col span={3}>Relationship:</Col>
-            <Col >{DataSave.apply_relation_owner}</Col>         
+            <Col>{DataSave.apply_relation_owner}</Col>
           </Row>
-          <Row gutter={8} style={{marginTop:16}}>
+          <Row gutter={8} style={{ marginTop: 16 }}>
             <Col span={3}>Reason:</Col>
-            <Col><TextArea disabled value={DataSave.apply_reason_content} style={{width:300,height:100,padding:8}}></TextArea></Col>         
+            <Col>
+              <TextArea
+                disabled
+                value={DataSave.apply_reason_content}
+                style={{ width: 300, height: 100, padding: 8 }}
+              ></TextArea>
+            </Col>
           </Row>
           <Line></Line>
 
           <Form ref={formRef} name="basic" onFinish={onFinish}>
-            
-            <Row gutter={8} style={{marginTop:16}}>
+            <Row gutter={8} style={{ marginTop: 16 }}>
               <Col span={3}>Examine:</Col>
-                <Col span={4}><Form.Item name="applyStatus"><Radio.Group ><Radio.Button  value={"1"}>Agree</Radio.Button ><Radio.Button style={{marginLeft:10}} value={"2"}>Refuse</Radio.Button ></Radio.Group></Form.Item></Col>               
+              <Col span={4}>
+                <Form.Item name="applyStatus">
+                  <Radio.Group>
+                    <Radio.Button value={'1'}>Agree</Radio.Button>
+                    <Radio.Button style={{ marginLeft: 10 }} value={'2'}>
+                      Refuse
+                    </Radio.Button>
+                  </Radio.Group>
+                </Form.Item>
+              </Col>
             </Row>
 
-            <Row gutter={8} style={{marginTop:16}}>
+            <Row gutter={8} style={{ marginTop: 16 }}>
               <Col span={3}>Reply:</Col>
-              <Col> <Form.Item name="replyContent"><TextArea style={{width:300,height:100,padding:8}}></TextArea></Form.Item></Col>         
+              <Col>
+                {' '}
+                <Form.Item name="replyContent">
+                  <TextArea style={{ width: 300, height: 100, padding: 8 }}></TextArea>
+                </Form.Item>
+              </Col>
             </Row>
 
-            <Row gutter={8} style={{marginTop:16}}>
+            <Row gutter={8} style={{ marginTop: 16 }}>
               <Col span={3}>Received:</Col>
-                <Col span={4}><Form.Item name="applyStatus"><Radio.Group ><Radio  value={"3"}>Agree</Radio></Radio.Group></Form.Item></Col>               
+              <Col span={4}>
+                <Form.Item name="applyStatus">
+                  <Radio.Group>
+                    <Radio value={'3'}>Agree</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              </Col>
             </Row>
-            <Form.Item ><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+            </Form.Item>
           </Form>
-          
-        </>:null
-      }
-
-
+        </>
+      ) : null}
     </div>
   );
 };
 
-function map(state:any) {
-  const { Data,DataSave,DataSaveDetail} = state[module]
-  return { Data,DataSave,DataSaveDetail}
+function map(state: any) {
+  const { Data, DataSave, DataSaveDetail } = state[module];
+  return { Data, DataSave, DataSaveDetail };
 }
 export default connect(map)(CardDetail);

src/pages/CommercialService/css/index.less

@@ -8,48 +8,84 @@
   min-width: 1020px;
 }
 //头部组件
-.box{
+.box {
   width: 100%;
   height: 64px;
   position: relative;
 }
-.input{
-    width:200px;
-    height:32px;
-    background:none;
+.input {
+  width: 200px;
+  height: 32px;
+  background: none;
   outline: none;
-    border:1px solid rgba(217,217,217,1);
-    border-radius:2px;
-    font-size:14px;
-    font-weight:400;
-    line-height:30px;
+  border: 1px solid rgba(217, 217, 217, 1);
+  border-radius: 2px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 30px;
   text-indent: 19px;
 }
-.item1{
+.item1 {
   .input();
 }
-.item2{
+.item2 {
   .input();
   margin-left: 20px;
 }
-.item4{
+.item4 {
   .input();
   margin-left: 20px;
 }
-.item3{
-    width:80px;
-    height:32px;
-    border:1px solid rgba(24,144,255,1);
-    border-radius:2px;
-    background-color:#e7f4ff;
+.item3 {
+  width: 80px;
+  height: 32px;
+  border: 1px solid rgba(24, 144, 255, 1);
+  border-radius: 2px;
+  background-color: #e7f4ff;
   outline: none;
-    font-size:14px;
-    font-weight:400;
-    color:rgba(24,144,255,1);
-    line-height:30px;
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(24, 144, 255, 1);
+  line-height: 30px;
   cursor: pointer;
   margin-left: 48px;
 }
-.item3:active{
-    background-color:#ffffff;
+.item3:active {
+  background-color: #ffffff;
+}
+
+.buildNumber {
+  :global(.ant-form-item-explain) {
+    position: absolute;
+    top: 34px;
+    left: 33px;
+    width: 260px;
+    z-index: 10;
+    background-color: #fff;
+    min-height: 20px;
+  }
+}
+
+.floorNumber {
+  :global(.ant-form-item-explain) {
+    position: absolute;
+    top: 34px;
+    left: -87px;
+    width: 260px;
+    z-index: 20;
+    background-color: #fff;
+    min-height: 20px;
+  }
+}
+
+.roomNumber {
+  :global(.ant-form-item-explain) {
+    position: absolute;
+    top: 34px;
+    left: -205px;
+    width: 260px;
+    z-index: 30;
+    background-color: #fff;
+    min-height: 20px;
+  }
 }

src/pages/UserManagement/LIFEUserManagement/UsersAdd.tsx

@@ -11,7 +11,6 @@ import { checkParam, RA } from '../../../utils/method';
 import { validateMessages } from '@/utils/params';
 
 const module = 'User';
-let verifyNum = 0;
 const UsersAdd = (props: any) => {
   const { dispatch, communityInfo } = props;
 
@@ -47,9 +46,9 @@ const UsersAdd = (props: any) => {
       if (postman.extend != null) {
         formRef.current.setFieldsValue({
           addressAndpostalCode:
-            communityInfo.data.rows[0].residentialAddress +
+            communityInfo.data.rows.residentialAddress +
             ' SINGAPORE' +
-            communityInfo.data.rows[0].residentialZipCode,
+            communityInfo.data.rows.residentialZipCode,
         });
       }
     }

src/utils/params.ts

@@ -11,6 +11,9 @@ export const validateMessages = {
   number: {
     range: '${label} must be between ${min} and ${max}',
   },
+  phone: {
+    range: 'It has to be an 8 digit number or an 11 digit number!',
+  },
 };
 
 export const requestList = [