小区公告

Signed-off-by: cellee <893264950@qq.com>

src/components/BackButton/BackButton.tsx

 import React from 'react';
 import styles from './index.less';
+import { LeftOutlined } from '@ant-design/icons';
 
-import {Button } from 'antd';
+import { Button } from 'antd';
 import { Link, useIntl, connect, Dispatch, history } from 'umi';
 
-import { URL } from '@/utils/method'
-
-const module2="History"
-const BackButton = (props:any) => {
-
-  const { history_url, dispatch } = props
+import { URL } from '@/utils/method';
 
+const module2 = 'History';
+const BackButton = (props: any) => {
+  const { history_url, dispatch } = props;
 
   const url = props.url;
   const goToReturn = () => {
     // history.back()
-    URL({ pathname: history.location.pathname ,status:0}, module2, dispatch)
-    console.log("这里的地址为")
-    console.log(history.location.pathname)
-    history.go(-1)
-  }
+    URL({ pathname: history.location.pathname, status: 0 }, module2, dispatch);
+    console.log('这里的地址为');
+    console.log(history.location.pathname);
+    history.go(-1);
+  };
   const goToReturnByParam = () => {
-    if (url == "none") {
-      props.backFunction()
+    if (url == 'none') {
+      props.backFunction();
     } else {
-      console.log("跳转页面" + url)
-      history.push(url)
-    }
+      console.log('跳转页面' + url);
+      history.push(url);
     }
+  };
   return (
     <>
-      {
-        url != null ?
-          <Button onClick={goToReturnByParam}>Back</Button>:<Button onClick={goToReturn}>Back</Button>        
-      }
+      {url != null ? (
+        <Button onClick={goToReturnByParam}>Back</Button>
+      ) : (
+        <Button onClick={goToReturn}>
+          <LeftOutlined />
+          Back
+        </Button>
+      )}
     </>
-    )
-    
+  );
 };
-function mapStateToProps(state:any) {
-  const { history_url} = state.History;  
+function mapStateToProps(state: any) {
+  const { history_url } = state.History;
   return {
     history_url,
   };

src/components/PictureOptions/PictureOptionsRow.tsx

 import React, { useState, useEffect } from 'react';
 import styles from './index.less';
 
-
-import { Upload, Modal,Row,Col,Input,List,Card, Button,message } from 'antd';
-import { PlusOutlined,PictureFilled } from '@ant-design/icons';
-
+import { Upload, Modal, Row, Col, Input, List, Card, Button, message } from 'antd';
+import { PlusOutlined, PictureFilled } from '@ant-design/icons';
 
 function getBase64(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
+    reader.onerror = (error) => reject(error);
   });
 }
 
@@ -23,57 +21,62 @@ const uploadButton = (
 );
 import { getUrlPicName } from '../../utils/string';
 const PictureOptionsRow = (props: any) => {
-
-  const {value, onChange} = props;
-  const [fileList, setFileList] = useState([])
-  const [previewVisible, setPreviewVisible] = useState(false)
-  const [previewImage, setPreviewImage] = useState('')
-  const [limitNum,setLimitNum]=useState(5)
+  const { value, onChange, limitNums } = props;
+  const [fileList, setFileList] = useState([]);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [limitNum, setLimitNum] = useState(5);
   const handleCancel = () => setPreviewVisible(false);
 
   useEffect(() => {
-    if (value!=null) {
-      var tmp = value   
-      var result = new Array()
-      var resultToInside = new Array()   
-      if (tmp.length > 0 && typeof (tmp[0]) != "string") {//输入输出
+    if (limitNums != null) {
+      setLimitNum(limitNums);
+    }
+  }, [limitNums]);
+  useEffect(() => {
+    if (value != null) {
+      var tmp = value;
+      var result = new Array();
+      var resultToInside = new Array();
+      if (tmp.length > 0 && typeof tmp[0] != 'string') {
+        //输入输出
         tmp.map((item: any, index: any) => {
           if (item.name == null) {
-            item.name = getUrlPicName(item.url)
-            item.uid = index
+            item.name = getUrlPicName(item.url);
+            item.uid = index;
           }
-          result.push(item)
-          resultToInside.push(item.name)
-        })
-        setFileList(result)
-        console.log("图片集最初组件");
+          result.push(item);
+          resultToInside.push(item.name);
+        });
+        setFileList(result);
+        console.log('图片集最初组件');
         console.log(resultToInside);
-        onChange(resultToInside)
+        onChange(resultToInside);
       }
     }
-  }, [value])
+  }, [value]);
 
   useEffect(() => {
     if (props.disabled) {
       if (props.defaultValue != null) {
-        var tmp = props.defaultValue
-        var result = new Array()
-        var resultToInside = new Array()
-        console.log("组件");
+        var tmp = props.defaultValue;
+        var result = new Array();
+        var resultToInside = new Array();
+        console.log('组件');
         console.log(tmp);
 
         tmp.map((item: any, index: any) => {
           if (item.name == null) {
-            item.name = getUrlPicName(item.url)
-            item.uid = index
+            item.name = getUrlPicName(item.url);
+            item.uid = index;
           }
-          result.push(item)
-          resultToInside.push(item.name)
-        })
-        setFileList(result)
+          result.push(item);
+          resultToInside.push(item.name);
+        });
+        setFileList(result);
       }
     }
-  }, [props.defaultValue])
+  }, [props.defaultValue]);
 
   // useEffect(() => {
   //   if (props.disabled) {
@@ -98,40 +101,40 @@ const PictureOptionsRow = (props: any) => {
   //   }
   // }, [value])
 
-  const handlePreview = async file => {
+  const handlePreview = async (file) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj);
     }
-    setPreviewImage(file.url || file.preview)
-    setPreviewVisible(true)
-  }
+    setPreviewImage(file.url || file.preview);
+    setPreviewVisible(true);
+  };
 
   const handleChange = ({ file, fileList }) => {
     console.log(fileList);
-    let tmp = fileList    
-    setFileList(tmp.filter(file => !!file.status||file.status==null))
-    var result=new Array()
+    let tmp = fileList;
+    setFileList(tmp.filter((file) => !!file.status || file.status == null));
+    var result = new Array();
     fileList.map((item, index) => {
-      result.push(item.name)
-    })
-    console.log("该过程图片发生改变");
+      result.push(item.name);
+    });
+    console.log('该过程图片发生改变');
 
-    onChange(result)
-  }
-  const beforeUpload=( file:any) => {
+    onChange(result);
+  };
+  const beforeUpload = (file: any) => {
     if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg') {
-      return true
+      return true;
     } else {
       message.error(`${file.name} is not a png/jpeg/jpg file`);
-      return false
-    }
+      return false;
     }
+  };
 
   return (
     <div>
       <Upload
         accept=".png,.jpg,.jpeg"
-          action={props.action != null ? props.action : "/tos/image/upload"}
+        action={props.action != null ? props.action : '/tos/image/upload'}
         listType="picture-card"
         data={props.data}
         fileList={fileList}
@@ -140,22 +143,19 @@ const PictureOptionsRow = (props: any) => {
         disabled={props.disabled}
         beforeUpload={beforeUpload}
       >
-          {fileList.length >= limitNum ? null : (props.disabled?null:uploadButton)}
+        {fileList.length >= limitNum ? null : props.disabled ? null : uploadButton}
       </Upload>
       <Modal
+        title="Preview"
+        footer={null}
         visible={previewVisible}
         onOk={handleCancel}
         onCancel={handleCancel}
       >
         <img alt="example" style={{ width: '100%' }} src={previewImage} />
       </Modal>
-
     </div>
   );
 };
 
 export default PictureOptionsRow;
-
-
-
-

src/components/TimeComfirm/TimeComfirm.tsx

@@ -3,28 +3,27 @@ import { DatePicker } from 'antd';
 import { MomentToTime, TimeToMoment2 } from '@/utils/time';
 import moment from 'moment';
 
-
-const TimeComfirm = (props:any) => {
-
-  const { value, onChange } = props
+const TimeComfirm = (props: any) => {
+  const { value, onChange } = props;
 
   const [val, setVal] = useState(null);
   useEffect(() => {
     if (value != null) {
-      setVal(TimeToMoment2(value))
+      setVal(TimeToMoment2(value));
     }
-  },[value])
+  }, [value]);
   const onsubmit = (values: any) => {
-    onChange(MomentToTime(values))    
-  }
+    onChange(MomentToTime(values));
+  };
   return (
     <>
-      {
-        val != null ?
-          <><DatePicker showTime defaultValue={val} onOk={onsubmit} /></> :
+      {val != null ? (
+        <>
+          <DatePicker showTime defaultValue={val} onOk={onsubmit} />
+        </>
+      ) : (
         <DatePicker showTime onOk={onsubmit} />
-      }
-      
+      )}
     </>
   );
 };

src/components/TitleBack/TitleBack.tsx

@@ -3,28 +3,31 @@ import styles from './index.less';
 
 import BackButton from '../BackButton/BackButton';
 import TitleGet from '../TitleGet/TitleGet';
-
 const TitleBack = (props: any) => {
   //   <TitleBack sublist={['Handle Status : '+CurDataDetail.status,'Create Time : '+CurDataDetail.time]} title={headTitle} />
 
   const backData = (values: any) => {
-    props.titleBack(values)
-  }
+    props.titleBack(values);
+  };
   return (
     <>
-      <div className={styles.item0}><TitleGet title={props.title} /></div>
-      {
-        props.sublist != null && props.title == "Edit Owner Infomation"
-          ?
-          (props.sublist).map((item: any, index: any) => {
+      <div className={styles.item0}>
+        <TitleGet title={props.title} />
+      </div>
+      {props.sublist != null && props.title == 'Edit Owner Infomation' ? (
+        props.sublist.map((item: any, index: any) => {
           return (
-              <div key={index} className={styles.item1}>{item}</div>
-            )
+            <div key={index} className={styles.item1}>
+              {item}
+            </div>
+          );
         })
-          :
+      ) : (
         <></>
-      }
-      <div className={styles.item2}><BackButton backFunction={backData} url={props.url} /></div>
+      )}
+      <div className={styles.item2}>
+        <BackButton backFunction={backData} url={props.url} />
+      </div>
       <div className={styles.clear0}></div>
     </>
   );

src/components/TitleBack/index.less

 //头部组件
-.item0{
+.item0 {
   float: left;
 }
 
-.item1{
+.item1 {
   float: left;
   margin-left: 16px;
   line-height: 34px;
 }
-.item2{
+.item2 {
   float: right;
 }
 
-.clear{
+.clear {
   clear: both;
 }
-.clear0{
+.clear0 {
   .clear();
-    margin-bottom: 35px;
+  margin-bottom: 30px;
 }

src/components/TitleSearch/TitleSearch.tsx

 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useIntl, connect, Dispatch, history } from 'umi';
 
-import {SearchOutlined} from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 
 import { Input, Row, Col, Form, Select, Button, DatePicker } from 'antd';
 const { Option } = Select;
@@ -133,7 +133,7 @@ const TitleSearch = (props: any) => {
           {/* 小区列表的管理员姓名搜索 */}
           {username != null ? (
             <Col key={'username_' + username[0]}>
-              <Form.Item name={username[0]}>
+              <Form.Item name={username[0]} style={{ marginBottom: 15 }}>
                 <Input placeholder={username[1]} allowClear />
               </Form.Item>
             </Col>
@@ -186,7 +186,7 @@ const TitleSearch = (props: any) => {
               />
             ) : null}
 
-            <Form.Item>
+            <Form.Item style={{ marginBottom: 5 }}>
               <Button
                 type="primary"
                 htmlType="submit"

src/models/CommunityManagement/CommunityAnnouncement.ts

@@ -2,7 +2,7 @@ import * as service from '../../services/tos';
 import { message } from 'antd';
 import { Link, useIntl, connect, Dispatch, history } from 'umi';
 
-import { routerRedux } from 'dva/router'
+import { routerRedux } from 'dva/router';
 
 import { printf } from '@/utils/log';
 
@@ -12,62 +12,63 @@ export default {
     Data: null,
     Result: null,
     DataSave: null,
-    DataSaveDetail:null,
+    DataSaveDetail: null,
   },
 
   reducers: {
-    returnPage(state, { Data}) {
+    returnPage(state, { Data }) {
       return { ...state, Data };
     },
-    returnResult(state, { Result}) {
-      return { ...state, Result};
+    returnResult(state, { Result }) {
+      return { ...state, Result };
     },
     returnDataSave(state, { DataSave }) {
-      return {...state,DataSave}
+      return { ...state, DataSave };
     },
     returnDataSaveDetail(state, { DataSaveDetail }) {
-      return {...state,DataSaveDetail}
+      return { ...state, DataSaveDetail };
     },
   },
 
   effects: {
-    
     //标准请求
     *RA({ playload }, { call, put }) {
- 
       const resp = yield call(service.RA, playload);
-      console.log(resp)
+      console.log(resp);
 
-      if (resp.error_code != "0000") {
-        printf(playload, resp)
+      if (resp.error_code != '0000') {
+        printf(playload, resp);
       }
 
       switch (playload.index) {
-        case 25: {
+        case 25:
+          {
             let Data = resp.data;
             yield put({ type: 'returnPage', Data });
-        } break;
-        case 28: {            
-
+          }
+          break;
+        case 28:
+          {
             let Result = resp;
             yield put({ type: 'returnResult', Result });
-          
-          } break;
-
           }
+          break;
+      }
+    },
 
+    *ResultClear({}, { put }) {
+      var Result = null;
+      yield put({ type: 'returnResult', Result });
     },
 
-    *ResultClear({ }, { put }) {
-      var tmp=null
-      yield put({type: 'returnResult', tmp} )
+    *ResultRemove({}, { put }) {
+      var tmp = null;
+      yield put({ type: 'returnResult', tmp });
     },
 
     *SA({ playload }, { call, put }) {
-      var DataSave = playload
-      yield put({type: 'returnDataSave', DataSave} )
+      var DataSave = playload;
+      yield put({ type: 'returnDataSave', DataSave });
     },
-
   },
-
 };

src/pages/CommunityManagement/CellList/Adds.tsx

@@ -13,7 +13,7 @@ import moment from 'moment';
 const { RangePicker } = TimePicker;
 
 // 接口申明
-interface objc { }
+interface objc {}
 
 const Adds = (props: any) => {
   const { Data, dispatch, loading, Result } = props;
@@ -28,7 +28,6 @@ const Adds = (props: any) => {
     { label: 'Offline Payment', value: '1' },
   ];
 
-
   // 表单物业费提交值
   const [PropertyFee, setPropertyFee] = useState(['1']);
   // 楼巴上传列表
@@ -89,7 +88,7 @@ const Adds = (props: any) => {
           time: [
             moment(Data.residentialHotlineServieStartTime, 'HH:mm'),
             moment(Data.residentialHotlineServieEndTime, 'HH:mm'),
-          ]
+          ],
         },
       });
       // 上传
@@ -204,11 +203,11 @@ const Adds = (props: any) => {
   const onFinish = (values: any) => {
     let { residentialZipCode, residentialAddress, residentialName } = values.des;
     if (residentialZipCode.length < 6) {
-      message.error('Please Enter 6-digit Zip Code！')
+      message.error('Please Enter 6-digit Zip Code！');
     } else {
-      onUpDate(values)
-    }
+      onUpDate(values);
     }
+  };
 
   // 表单提交
   function onUpDate(values: any) {
@@ -218,7 +217,7 @@ const Adds = (props: any) => {
     obj.propertyFee = PropertyFee;
     // 小区信息;
     let { residentialZipCode, residentialAddress, residentialName } = values.des;
-    obj.residentialZipCode = residentialZipCode;
+    obj.residentialZipCode = `SINGAPORE${residentialZipCode}`;
     obj.residentialAddress = residentialAddress;
     obj.residentialName = residentialName;
 
@@ -238,8 +237,12 @@ const Adds = (props: any) => {
     // 小区热线
     // 表单结构存在数据不存在情况， 所以要多判断一次
     if (values.help) {
-      obj.residentialHotlineName = values.help.residentialHotlineName ? undeFi(values.help.residentialHotlineName) : values.info.tel;
-      obj.residentialHotline = values.help.residentialHotlineName ? undeFi(values.help.residentialHotline) : values.info.tel;
+      obj.residentialHotlineName = values.help.residentialHotlineName
+        ? undeFi(values.help.residentialHotlineName)
+        : values.info.tel;
+      obj.residentialHotline = values.help.residentialHotlineName
+        ? undeFi(values.help.residentialHotline)
+        : values.info.tel;
       // 编辑的时候 为空 判断
       if (values.help.time) {
         obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm');
@@ -261,7 +264,7 @@ const Adds = (props: any) => {
     }
     // 上传
     RA(29, obj, 'CellList', dispatch);
-  };
+  }
 
   // 返回
   const goToReturn = () => {
@@ -279,7 +282,7 @@ const Adds = (props: any) => {
     <>
       <Spin spinning={loading} tip="信息提交中..." size="large">
         <div className="form">
-          <h3 className='capi'>
+          <h3 className="capi">
             <EditOutlined />
             &nbsp; {Data ? 'edit' : 'establish'} community
             <div className="back">
@@ -331,7 +334,7 @@ const Adds = (props: any) => {
             </Form.Item>
 
             <Form.Item label="Working Hours" name="workingHours" rules={village[1] as any}>
-              <RangePicker format="HH:mm" placeholder={['Start Time','End Time']} />
+              <RangePicker format="HH:mm" placeholder={['Start Time', 'End Time']} />
             </Form.Item>
 
             <Form.Item label="Community Telephone" name="info" rules={village[3] as any}>
@@ -436,7 +439,7 @@ const Adds = (props: any) => {
                 </Form.Item>
 
                 <Form.Item name={['help', 'time']} noStyle>
-                  <RangePicker format="HH:mm"  placeholder={['Start Time','End Time']} />
+                  <RangePicker format="HH:mm" placeholder={['Start Time', 'End Time']} />
                 </Form.Item>
               </Input.Group>
             </Form.Item>

src/pages/CommunityManagement/CellList/Details.tsx

@@ -57,8 +57,8 @@ const Detail = (props: any) => {
 
   //物业费选择
   const plainOptions = [
-    { label: '线上缴费', value: '0', disabled: true },
-    { label: '线下缴费', value: '1', disabled: true },
+    { label: 'Online Payment', value: '0', disabled: true },
+    { label: 'Offline Payment', value: '1', disabled: true },
   ];
   // 关闭提示框
   const [ModelFee, setModelFee] = useState(false);

src/pages/CommunityManagement/CellList/celllist.less

@@ -2,9 +2,9 @@ li {
   list-style: none;
 }
 .contop {
-  padding: 20px;
+  padding: 16px;
   background: #fff;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 .listbox {
   width: 100%;
@@ -148,8 +148,8 @@ img {
 .capi {
   text-transform: capitalize;
 }
-.pages{
+.pages {
   background: #fff;
   text-align: right;
-  padding: 10px ;
+  padding: 10px;
 }

src/pages/CommunityManagement/CommunityAnnouncement/Add.tsx

-import React, { useState, useEffect,useRef } from 'react';
-import { Input ,Tabs,message,Form, Button} from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { Input, Tabs, message, Form, Button, DatePicker, Spin } from 'antd';
 const { TabPane } = Tabs;
 
-import {connect} from 'umi';
+import { connect, history } from 'umi';
 
-const layout = {
-  labelCol: { span: 2},
-  // wrapperCol: { span: 8 },
-};
-
-import { RA, ResultClear } from '@/utils/method';
+import { RA } from '@/utils/method';
 import TitleBack from '@/components/TitleBack/TitleBack';
 import FileUpload from '@/components/FileUpload/FileUpload';
 import { validateMessages } from '@/utils/params';
@@ -19,12 +14,15 @@ import SelectCommunity from '@/components/SelectCommunity';
 import Line from '@/components/Line/Line';
 import TimeComfirm from '@/components/TimeComfirm/TimeComfirm';
 
+import './ann.less';
+import { Notice } from '@/utils/tip';
+import { getCookie } from '@/utils/method';
+import moment from 'moment';
 
-const module="CommunityAnnouncement"
-const Add = (props:any) => {
-
-  const { dispatch, Result } = props;
-  const formRef = useRef(null)
+const module = 'CommunityAnnouncement';
+const Add = (props: any) => {
+  const { dispatch, Result, loading } = props;
+  const formRef = useRef(null);
 
   useEffect(() => {
     //   var obj = {
@@ -37,66 +35,112 @@ const Add = (props:any) => {
     //     "file":["A.jpg"]
     //   }
     //  formRef.current.setFieldsValue(obj)
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (Result != null) {
-      console.log("页面结果")
-      console.log(Result)
-      if (Result.error_code == undefined) {
-        console.log("服务器有问题")
-        message.error("服务器有问题，请求失败",5)
+      dispatch({
+        type: `${module}/ResultRemove`,
+      });
+      message.success('Released Successfully');
+      history.push('/CommunityManagement/CommunityAnnouncement');
     }
-      if (Result.error_code == "0000") {
-        ResultClear(module,dispatch)
-        history.go(-1)
+  }, [Result]);
+
+  const onFinish = (values: any) => {
+    console.log(values);
+    var tmp = values;
+    tmp.creatorId = getCookie('id');
+    tmp.communityNum = values.community.value;
+    tmp.noticScope = '' + values.community.index;
+    delete tmp.community;
+    // 文件名
+    tmp.noticImageName = values.file ? values.file[0] : null;
+    tmp.noticStartTime = values.noticStartTime.format('YYYY-MM-DD HH:mm:ss');
+    tmp.noticEndTime = values.noticEndTime
+      ? values.noticEndTime.format('YYYY-MM-DD HH:mm:ss')
+      : null;
+    console.log(tmp);
+    RA(28, tmp, module, dispatch);
+  };
+
+  // 设置之前时间不能选择
+  function disabledDate(current: any) {
+    return current && current <= moment().subtract(1, 'days').endOf('day');
   }
-    }
-  }, [Result])
-
-  const onFinish = ((values: any) => {
-    var tmp = values
-     tmp.communityNum = values.community.value
-     tmp.noticScope= ""+values.community.index
-    // "communityNum":["珠江丽景小区一期","A4"],
-    // "noticText":"今晚晚上停水4小时",
-    // "noticScope":"1",
-    delete  tmp.community 
-    console.log(tmp)
-    RA(28,values, module, dispatch);
-  })
 
   return (
-    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>     
-
-      <TitleBack title="Add Announcement" ></TitleBack>
-      
-      <Form ref={formRef} {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
-  
-        
-      <Form.Item name={"community"} label="服务小区" rules={[]}><SelectCommunity /></Form.Item>
-      <Form.Item name={"noticTitle"} label="公告标题" rules={[]}><Input style={{width: 200}}  /></Form.Item>
-      <Form.Item name={"noticText"} label="公告内容" rules={[]}><TextArea  style={{width: 400,height:100}}  /></Form.Item>
+    <>
+      <Spin spinning={loading}>
+        <div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}>
+          <TitleBack title="Add Announcement"></TitleBack>
+
+          <Form
+            ref={formRef}
+            // {...layout}
+            name="nest-messages"
+            onFinish={onFinish}
+            validateMessages={validateMessages}
+          >
+            <Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}>
+              <SelectCommunity />
+            </Form.Item>
+            <Form.Item
+              name={'noticTitle'}
+              className="diyItem"
+              label="Notice Title"
+              rules={Notice[1]}
+            >
+              <Input style={{ width: 200 }} placeholder="Please input the notice title" />
+            </Form.Item>
+            <Form.Item
+              name={'noticText'}
+              className="diyItem"
+              label="Notice Content"
+              rules={Notice[2]}
+            >
+              <TextArea
+                style={{ width: 400, height: 100 }}
+                placeholder="Please input the announcement content"
+              />
+            </Form.Item>
 
-        <Form.Item style={{ display: 'inline-block', width: '200', marginLeft: 100 }} name={"file"}>
+            <Form.Item name={'file'} className="diyItem" label=" " colon={false}>
               <PictureOptionsRow
                 action="/tos/image/upload"
                 data={{
                   imageType: 'tosNotice',
                 }}
+                limitNums={1}
               />
             </Form.Item>
-        <Form.Item name={"noticStartTime"} label="生效日期" rules={[]}><TimeComfirm /></Form.Item>
-        <Form.Item name={"noticEndTime"} label="结束日期" rules={[]}><TimeComfirm /></Form.Item>
-        <Line></Line>
-        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 2 }}><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
+            <Form.Item
+              name="noticStartTime"
+              className="diyItem"
+              label="Effective Dates"
+              rules={Notice[3]}
+            >
+              <DatePicker showTime placeholder="Effective Dates" disabledDate={disabledDate} />
+            </Form.Item>
+            <Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}>
+              <DatePicker showTime placeholder="Expiration Dates" disabledDate={disabledDate} />
+            </Form.Item>
+            <hr />
+            <Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                Submit
+              </Button>
+            </Form.Item>
           </Form>
         </div>
+      </Spin>
+    </>
   );
 };
 
-function map(state:any) {
-  const { Result} = state[module]
-  return { Result}
+function map(state: any) {
+  const { Result } = state[module];
+  const loading = state.loading.models.CommunityAnnouncement;
+  return { Result, loading };
 }
 export default connect(map)(Add);

src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx

 import React, { useState, useEffect } from 'react';
 import { connect, history, useModel, Loading } from 'umi';
-import { Input, Tabs, Table, Space, Button, Tooltip, Form, message } from 'antd';
+import { Input, Tabs, Table, Space, Button, Tooltip, Form, message, Pagination, Tag } from 'antd';
 const { TabPane } = Tabs;
-
+import moment from 'moment';
 import { PlusOutlined, SearchOutlined, ClearOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
-
+import { RA } from '@/utils/method';
 // import { objectColumns } from '@/utils/string';
 import { timestampToTime3, timestampToTime } from '@/utils/time';
 import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
@@ -26,16 +26,14 @@ import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommn
 
 // import { RA } from '@/utils/method';
 
-const goToAdd = () => {
-  history.push('./CommunityAnnouncement/Add');
-};
 const module = 'CommunityAnnouncement';
 const CommunityAnnouncement = (props: any) => {
   const { dispatch, Data, curString, userListLoading } = props;
 
+  // 表头
   const columns = [
     {
-      title: 'community',
+      title: 'Community',
       dataIndex: 'communityNum',
       width: 400,
       ellipsis: {
@@ -46,49 +44,77 @@ const CommunityAnnouncement = (props: any) => {
       title: 'Title',
       dataIndex: 'noticTitlel',
     },
+    {
+      title: 'Publisher',
+      dataIndex: 'creator',
+    },
     {
       title: 'Publish Time',
       dataIndex: 'noticStartTime',
-      render: (text: any, record: any) => (
-        <Space size="middle">{text != null ? timestampToTime(text.time) : null}</Space>
+      render: (record: any) => (
+        <Space size="middle">
+          {record != null ? moment(record.noticEndTime).format('YYYY-MM-DD') : null}
+        </Space>
       ),
     },
     {
-      title: 'noticScope',
+      title: 'NoticScope',
       dataIndex: 'noticScope',
+      render: function (text: any) {
+        switch (text) {
+          case 1:
+            return <Tag color="green">发布中</Tag>;
+            break;
+          case 0:
+            return <Tag color="red">已过期</Tag>;
+            break;
+          default:
+            return <Tag color="cyan">等待发布</Tag>;
+            break;
+        }
+      },
     },
     {
       title: 'Actions',
       render: (text: any, record: any) => (
         <Space size="middle">
-          <a>Detail</a>
+          <a
+            onClick={() => {
+              goToAdd(1);
+            }}
+          >
+            Detail
+          </a>
         </Space>
       ),
     },
   ];
+  // 页面进来加载
   useEffect(() => {
-    RA(25, { communityNum: '', noticTitlel: '', pageNum: 1 }, module, dispatch);
+    let data = {
+      communityNum: '',
+      noticTitlel: '',
+      creator: '',
+      pageNum: 5,
+    };
+    request(data);
   }, [1]);
 
-  //
-
-  const RA = (index: any, values: any) => {
-    dispatch({
-      type: 'FacilityBookings/RA',
-      playload: { index: index, body: values },
-    });
+  // 数据请求
+  const request = (data: any) => {
+    console.log(data);
+    RA(25, data, module, dispatch);
   };
 
-  const SA = (values: any) => {
-    dispatch({ type: 'FacilityBookings/SA', playload: values });
-  };
-  const QA = (values: any) => {
-    dispatch({ type: 'FacilityBookings/QA', playload: values });
-  };
+  //
 
-  const CA = () => {
-    dispatch({ type: 'FacilityBookings/CA', playload: null });
-  };
+  // 跳转到新增或编辑
+  function goToAdd(num: any) {
+    if (num == 1) {
+      console.log('编辑');
+    }
+    history.push('./CommunityAnnouncement/Add');
+  }
 
   const [form] = Form.useForm();
 
@@ -130,6 +156,12 @@ const CommunityAnnouncement = (props: any) => {
       communityName: value,
     });
   };
+
+  // 页面切换
+  const paginationHandler = (page: number, pageSize?: number) => {
+    dispatch({});
+  };
+
   return (
     <>
       <div style={{ width: '100%', padding: 20, marginBottom: 15, backgroundColor: '#ffffff' }}>
@@ -174,8 +206,9 @@ const CommunityAnnouncement = (props: any) => {
           </Form.Item>
         </Form>
       </div>
-      <div style={{ width: '100%', padding: 10, backgroundColor: '#ffffff' }}>
-        {Data != null ? (
+      <div style={{ width: '100%', paddingLeft: 10, paddingRight: 10, backgroundColor: '#ffffff' }}>
+        {Data ? (
+          <div>
             <ProTable
               loading={userListLoading}
               rowKey="id"
@@ -184,9 +217,15 @@ const CommunityAnnouncement = (props: any) => {
               pagination={false} // 隐藏默认分页
               search={false}
               toolBarRender={() => [
-              <Button key="3" type="primary" onClick={goToAdd}>
+                <Button
+                  key="3"
+                  type="primary"
+                  onClick={() => {
+                    goToAdd(0);
+                  }}
+                >
                   <PlusOutlined />
-                Create new Announcement
+                  Create New Announcement
                 </Button>,
               ]}
               options={{
@@ -199,17 +238,34 @@ const CommunityAnnouncement = (props: any) => {
               }}
               headerTitle="Announcement list"
             />
-        ) : null}
+          </div>
+        ) : (
+          ''
+        )}
+        {Data ? (
+          <div style={{ textAlign: 'right', padding: 10 }}>
+            <Pagination
+              current={Data.page.currentPage}
+              total={Data.page.totalRow}
+              onChange={paginationHandler}
+              pageSizeOptions={['15']}
+              // showSizeChanger={false}
+              pageSize={Data.page.curPageSize}
+            />
+          </div>
+        ) : (
+          ''
+        )}
       </div>
     </>
   );
 };
 
 function map(state: any) {
-  const userListLoading = state.loading.models.FacilityBookings;
-  const Data = state.FacilityBookings.NoticeList;
-  const { curString } = state.FacilityBookings;
-  return { Data, curString, userListLoading };
+  console.log(state);
+  const userListLoading = state.loading.models.CommunityAnnouncement;
+  const Data = state.CommunityAnnouncement.Data;
+  return { Data, userListLoading };
 }
 export default connect(map)(CommunityAnnouncement);
 

src/pages/CommunityManagement/CommunityAnnouncement/ann.less

+.ann-title {
+  line-height: 45px;
+}
+.diyItem {
+  margin-bottom: 20px;
+  .ant-form-item-label {
+    label {
+      min-width: 120px;
+      text-align: right;
+    }
+  }
+}
+hr {
+  border: 0;
+  height: 1px;
+  background: #eee;
+  margin-bottom: 20px;
+}

src/utils/tip.ts

@@ -18,3 +18,11 @@ export const village = [
   [{ required: true, message: 'Please enter the phone number and email address !' }],
   [{ required: true, message: 'Please input the address and name of the community !' }],
 ];
+
+//公告提示
+export const Notice = [
+  [{ required: true, message: '小区' }],
+  [{ required: true, message: '标题' }],
+  [{ required: true, message: '内容' }],
+  [{ required: true, message: '日期' }],
+];