公告完成

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

config/config.ts

@@ -260,6 +260,8 @@ export default defineConfig({
                         './CommunityManagement/CommunityAnnouncement/CommunityAnnouncement',
                     },
                     { path: './Add', component: './CommunityManagement/CommunityAnnouncement/Add' },
+                    { path: './Edit', component: './CommunityManagement/CommunityAnnouncement/Add' },
+                    { path: './Detail', component: './CommunityManagement/CommunityAnnouncement/Detail' },
                   ],
                 },
                 {

src/components/PictureOptions/PictureOptionsRow.tsx

@@ -33,6 +33,7 @@ const PictureOptionsRow = (props: any) => {
       setLimitNum(limitNums);
     }
   }, [limitNums]);
+
   useEffect(() => {
     if (value != null) {
       var tmp = value;
@@ -57,13 +58,13 @@ const PictureOptionsRow = (props: any) => {
   }, [value]);
 
   useEffect(() => {
-    if (props.disabled) {
+    // if (props.disabled) {
       if (props.defaultValue != null) {
         var tmp = props.defaultValue;
         var result = new Array();
         var resultToInside = new Array();
-        console.log('组件');
-        console.log(tmp);
+        // console.log('组件');
+        // console.log(tmp);
 
         tmp.map((item: any, index: any) => {
           if (item.name == null) {
@@ -75,7 +76,7 @@ const PictureOptionsRow = (props: any) => {
         });
         setFileList(result);
       }
-    }
+  //   }
   }, [props.defaultValue]);
 
   // useEffect(() => {

src/components/SearchOptions/SearchOptionsCommnity.tsx

@@ -4,7 +4,7 @@ import SearchOptions from './SearchOptions';
 import SearchOptionsTow from './SearchOptionsTow';
 
 const SearchOptionsCommnity = (props: any) => {
-  const { dispatch, CommunityList, opname, defaultName } = props;
+  const { dispatch, CommunityList, opname, defaultName , SearchOptionsCommnity } = props;
   const tosCommunityget = (values: any) => {
     dispatch({ type: 'Init/tosCommunityget', playload: values });
   };
@@ -40,6 +40,7 @@ const SearchOptionsCommnity = (props: any) => {
   );
 };
 function mapStateToProps(state: any) {
+  // console.log(state)
   const { CommunityList } = state.Init;
   return {
     CommunityList,

src/components/SearchOptions/SearchOptionsTow.tsx

@@ -17,7 +17,9 @@ const SearchOptionsTow = (porps: any) => {
     <div>
       <Select
         showSearch
-        style={{ width: 200 }}
+        allowClear
+        mode="multiple"
+        style={{ width: 320 }}
         placeholder="Community Name"
         optionFilterProp="children"
         onChange={onChange}

src/components/SelectCommunity/index.tsx

@@ -5,19 +5,26 @@ import { connect } from 'umi'
 
 const index = (props:any) => {
 
-  const {dispatch, CommunityList,value,onChange } = props;
+  const {dispatch, CommunityList,value,onChange , checklist} = props;
+
+  // console.log(props)
+
   const tosCommunityget = (values:any) => {dispatch({type: 'Init/tosCommunityget',playload:values})};  
   useEffect(() => {
     if (CommunityList == null) {
       tosCommunityget(null)
     }    
   }, []); 
+  // 给已选值默认  如果有默认就传递默认 否则传递列表数据
   useEffect(() => {
-    if (CommunityList != null) {
+    if (checklist != null) {
+      onChange({ index:1,value: checklist})
+    }else{
       onChange({ index:1,value: CommunityList})
-    }    
-  }, [CommunityList]);
+    }
+  }, [checklist]);
 
+  // 点击选择的时候传递给子组件 已选列表
   const printContent = (values:any) => {
     onChange({ index:CommunityList.length==values.length?1:0,value: values})
   }
@@ -25,7 +32,7 @@ const index = (props:any) => {
     <>
           {
             CommunityList != null ?
-            <SelectOptions  list={CommunityList.sort()} show={true} onSubmit={printContent} />:  
+            <SelectOptions  list={CommunityList.sort()} checklist={checklist} show={true} onSubmit={printContent} />:  
             null
           }
              

src/components/SelectOptions/index.jsx

@@ -4,12 +4,11 @@ import { Table, Tag, Space, Button, Radio, Row, Col, Input, Checkbox } from 'ant
 import { connect } from 'dva';
 import { gray } from 'chalk';
 
-import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
+import { StarOutlined, StarFilled, StarTwoTone , DownOutlined, UpOutlined } from '@ant-design/icons';
 import { indexOf } from 'lodash';
 
 import { useIntl, getLocale } from 'umi';
 
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
 var ArrayToPingYin = require('./ArrayToPingYin');
 const CheckboxGroup = Checkbox.Group;
 const menuListNormal = [
@@ -59,7 +58,8 @@ class SelectOptions extends React.Component {
   constructor(props) {
     super(props);
     const { list, dispatch, checklist } = this.props;
-
+    // console.log(list)
+    // console.log(checklist)
     if (list == null) {
       //console.error("组件错误:没有数据导入")
     }
@@ -76,18 +76,19 @@ class SelectOptions extends React.Component {
         lastValue: null,
       };
     } else {
-      console.log(checklist);
+      // console.log(checklist);
       this.state = {
         menuList: ArrayToPingYin.get(list),
         checkedListOptions: list,
         checkedList: checklist,
-        indeterminate: false,
-        checkAll: true,
+        indeterminate: list.sort().toString() == checklist.sort().toString() ? false : true,    // 多选框 总框的  状态   
+        checkAll: list.sort().toString() == checklist.sort().toString() ? true : false,       // 判断传递来的小区是不是全选
         checkNone: false,
         resultList: checklist,
         flag: false,
         lastValue: null,
       };
+
     }
   }
   componentDidUpdate() {
@@ -134,6 +135,7 @@ class SelectOptions extends React.Component {
     // console.log("初始化2")
   }
 
+  // 展开收起
   hideAndexpand = () => {
     if (this.state.componetVisible == this.state.selectoptionsOpen) {
       this.setState({ componetVisible: this.state.selectoptionsPutItAway });
@@ -141,6 +143,7 @@ class SelectOptions extends React.Component {
       this.setState({ componetVisible: this.state.selectoptionsOpen });
     }
   };
+  // 多选框改变的回调
   onChangeValue = (checkedList) => {
     if (this.props.single != null) {
       var tmp;
@@ -182,6 +185,7 @@ class SelectOptions extends React.Component {
       this.props.onSubmit(difference);
     }
   };
+  // 全选
   onCheckAllChange = (e) => {
     this.setState({
       checkedList: this.props.list,
@@ -192,6 +196,7 @@ class SelectOptions extends React.Component {
     });
     this.props.onSubmit(this.props.list);
   };
+  // 全不选
   onCheckAllChangeOver = (e) => {
     this.setState({
       checkedList: [],
@@ -202,12 +207,14 @@ class SelectOptions extends React.Component {
     });
     this.props.onSubmit([]);
   };
+  // 索引 -- 全部点击
   itemSelectAll = (e) => {
     this.setState({
       checkedListOptions: this.props.list,
       checkedList: this.state.resultList,
     });
   };
+  // 索引 -- 单个点击
   itemSelect = (item, e) => {
     var arraylist = this.props.list;
     var array = ArrayToPingYin.get(this.props.list);
@@ -225,6 +232,7 @@ class SelectOptions extends React.Component {
     });
   };
 
+  // 小区内部搜索框
   getSearchValue = (item, e) => {
     var list = this.props.list;
     var tempAarry = new Array();
@@ -241,6 +249,7 @@ class SelectOptions extends React.Component {
   render() {
     return (
       <div style={{ marginBottom: 14 }}>
+        {/* 是否展开 */}
         {this.state.componetVisible == this.state.selectoptionsOpen ? (
           <>
             <div style={{ width: '100%', height: 48, position: 'relative' }}>
@@ -291,11 +300,14 @@ class SelectOptions extends React.Component {
             </div>
             <div style={{ width: '100%', backgroundColor: '#eeeeee', userSelect: 'none' }}>
               <div style={{ width: '100%', height: 30, position: 'relative' }}>
+
+                {/* a-z 索引 */}
                 <div style={{ fontSize: 14, position: 'absolute' }}>
                   <a style={{ marginLeft: 16 }} onClick={this.itemSelectAll.bind(this)}>
                     {this.state.selectoptionsAll}
                   </a>
                   {menuListNormal.map((item, index) => {
+                   
                     if (this.state.menuList.indexOf(item) > -1) {
                       return (
                         <a
@@ -315,6 +327,7 @@ class SelectOptions extends React.Component {
                     }
                   })}
                 </div>
+                {/* 全选全不选 */}
                 {this.props.single != null ? null : (
                   <>
                     <Checkbox
@@ -335,6 +348,7 @@ class SelectOptions extends React.Component {
                   </>
                 )}
               </div>
+              {/* 小区列表 */}
               <div style={{ width: '100%', paddingLeft: 12, paddingRight: 12 }}>
                 <div
                   style={{
@@ -350,8 +364,8 @@ class SelectOptions extends React.Component {
                     style={{ width: 200, margin: '10px' }}
                   />
                   <CheckboxGroup
-                    options={this.state.checkedListOptions}
-                    value={this.state.checkedList}
+                    options={this.state.checkedListOptions}     // 所有数组
+                    value={this.state.checkedList}              // 选中的数组
                     onChange={this.onChangeValue}
                     style={{ marginLeft: 10 }}
                   />

src/models/CommunityManagement/CommunityAnnouncement.ts

@@ -9,10 +9,10 @@ import { printf } from '@/utils/log';
 export default {
   namespace: 'CommunityAnnouncement',
   state: {
-    Data: null,
-    Result: null,
-    DataSave: null,
-    DataSaveDetail: null,
+    Data: null,         //公告列表
+    Result: null,       //新增、编辑保存成功信息
+    DataSave: null,          // 列表内容
+    DataSaveDetail: {pageNum: 1},     // 页码
   },
 
   reducers: {
@@ -22,11 +22,15 @@ export default {
     returnResult(state, { Result }) {
       return { ...state, Result };
     },
-    returnDataSave(state, { DataSave }) {
+    returnDataSave(state, { playload }) {
+      console.log(playload)
+      let DataSave = playload.DataSave
       return { ...state, DataSave };
     },
-    returnDataSaveDetail(state, { DataSaveDetail }) {
-      return { ...state, DataSaveDetail };
+    returnDataSaveDetail(state, {playload}) {
+      // console.log(playload.DataSaveDetail)
+      let DataSaveDetail = playload.DataSaveDetail
+      return { ...state, DataSaveDetail};
     },
   },
 
@@ -66,9 +70,12 @@ export default {
       yield put({ type: 'returnResult', tmp });
     },
 
-    *SA({ playload }, { call, put }) {
-      var DataSave = playload;
-      yield put({ type: 'returnDataSave', DataSave });
+    *SA({ playload }, {  put }) {
+      console.log(playload)
+      // 这里传递两个值来。 一个是修改同步的方法   一个是修改值的名称   一个是修改 的数据
+      yield put({ type: playload.Method , playload:{
+        [playload.DefaultName]:playload.Data
+      }});
     },
   },
 };

src/pages/CommunityManagement/CommunityAnnouncement/Add.tsx

@@ -6,13 +6,13 @@ import { connect, history } from 'umi';
 
 import { RA } from '@/utils/method';
 import TitleBack from '@/components/TitleBack/TitleBack';
-import FileUpload from '@/components/FileUpload/FileUpload';
+// import FileUpload from '@/components/FileUpload/FileUpload';
 import { validateMessages } from '@/utils/params';
 import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow';
 import TextArea from 'antd/lib/input/TextArea';
 import SelectCommunity from '@/components/SelectCommunity';
-import Line from '@/components/Line/Line';
-import TimeComfirm from '@/components/TimeComfirm/TimeComfirm';
+// import Line from '@/components/Line/Line';
+// import TimeComfirm from '@/components/TimeComfirm/TimeComfirm';
 
 import './ann.less';
 import { Notice } from '@/utils/tip';
@@ -21,22 +21,39 @@ import moment from 'moment';
 
 const module = 'CommunityAnnouncement';
 const Add = (props: any) => {
-  const { dispatch, Result, loading } = props;
+  const { dispatch, Result, loading , DataSave } = props;
   const formRef = useRef(null);
+  const [form] = Form.useForm();
 
+  // 默认附件值
+  const defaultImg = [{
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  }]
+
+  const [DefaultImage, setDefaultImage] = useState([] as any);
+
+  // 监听传递过来的值
   useEffect(() => {
-    //   var obj = {
-    //     "noticTitle":"Garden公告",
-    //     // "communityNum":"珠江丽景小区",
-    //     "noticText":"今晚晚上停水4小时",
-    //     "noticScope":"1",
-    //     "noticStartTime":"2020-07-01 12:30:00",
-    //     "noticEndTime":"2020-08-01 9:30:00",
-    //     "file":["A.jpg"]
-    //   }
-    //  formRef.current.setFieldsValue(obj)
-  }, []);
+    if (DataSave != null) {
+      console.log(moment(DataSave.noticStartTime))
+      // 赋值
+      form.setFieldsValue({
+        noticTitle:DataSave.noticTitlel,
+        noticText:DataSave.noticText,
+        // noticStartTime:moment(DataSave.noticStartTime),
+        // noticEndTime:DataSave.noticEndTime?moment(DataSave.noticEndTime, 'YYYY-MM-DD HH:mm:ss'):'',
+      })
 
+      // 图片
+      setDefaultImage(defaultImg);
+    }
+  }, [DataSave]);
+
+  
+  // 监听是不是提交成功
   useEffect(() => {
     if (Result != null) {
       dispatch({
@@ -47,10 +64,14 @@ const Add = (props: any) => {
     }
   }, [Result]);
 
+  // 提交
   const onFinish = (values: any) => {
     console.log(values);
     var tmp = values;
-    tmp.creatorId = getCookie('id');
+    if(DataSave != null){
+      tmp.id = DataSave.id;       // 如果是修改传递的 修改ID 
+    }
+    tmp.creatorId = getCookie('id');     // 管理员 ID  
     tmp.communityNum = values.community.value;
     tmp.noticScope = '' + values.community.index;
     delete tmp.community;
@@ -73,20 +94,21 @@ const Add = (props: any) => {
     <>
       <Spin spinning={loading}>
         <div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}>
-          <TitleBack title="Add Announcement"></TitleBack>
+          <TitleBack title={DataSave == null ? 'Add Announcement' : "Edit Announcement"}></TitleBack>
 
           <Form
             ref={formRef}
+            form={form}
             // {...layout}
             name="nest-messages"
             onFinish={onFinish}
             validateMessages={validateMessages}
           >
             <Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}>
-              <SelectCommunity />
+              <SelectCommunity checklist = {DataSave == null ? null : DataSave.communityNum.split(",")} />
             </Form.Item>
             <Form.Item
-              name={'noticTitle'}
+              name='noticTitle'
               className="diyItem"
               label="Notice Title"
               rules={Notice[1]}
@@ -94,7 +116,7 @@ const Add = (props: any) => {
               <Input style={{ width: 200 }} placeholder="Please input the notice title" />
             </Form.Item>
             <Form.Item
-              name={'noticText'}
+              name='noticText'
               className="diyItem"
               label="Notice Content"
               rules={Notice[2]}
@@ -112,6 +134,7 @@ const Add = (props: any) => {
                   imageType: 'tosNotice',
                 }}
                 limitNums={1}
+                defaultValue = { DefaultImage }
               />
             </Form.Item>
             <Form.Item
@@ -139,8 +162,9 @@ const Add = (props: any) => {
 };
 
 function map(state: any) {
-  const { Result } = state[module];
+  // console.log(state)
+  const { Result, DataSave } = state[module];
   const loading = state.loading.models.CommunityAnnouncement;
-  return { Result, loading };
+  return { Result, loading , DataSave };
 }
 export default connect(map)(Add);

src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx

@@ -5,7 +5,7 @@ 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 { RA, SA } from '@/utils/method';
 // import { objectColumns } from '@/utils/string';
 import { timestampToTime3, timestampToTime } from '@/utils/time';
 import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
@@ -28,7 +28,14 @@ import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommn
 
 const module = 'CommunityAnnouncement';
 const CommunityAnnouncement = (props: any) => {
-  const { dispatch, Data, curString, userListLoading } = props;
+  const { dispatch, Data, curString, userListLoading, DataSaveDetail } = props;
+
+  // 先清空 其他信息  
+  useEffect(() => {
+    dispatch({ type: module + '/returnDataSave', playload: { DataSave: null } });
+    dispatch({ type: module + '/returnDataSaveDetail', playload: { DataSaveDetail: null } });
+  }, [1]);
+
 
   // 表头
   const columns = [
@@ -53,7 +60,7 @@ const CommunityAnnouncement = (props: any) => {
       dataIndex: 'noticStartTime',
       render: (record: any) => (
         <Space size="middle">
-          {record != null ? moment(record.noticEndTime).format('YYYY-MM-DD') : null}
+          {record != null ? moment(record.noticEndTime).format('YYYY-MM-DD HH:mm:ss') : null}
         </Space>
       ),
     },
@@ -63,13 +70,13 @@ const CommunityAnnouncement = (props: any) => {
       render: function (text: any) {
         switch (text) {
           case 1:
-            return <Tag color="green">发布中</Tag>;
+            return <Tag color="green">Publishing</Tag>;   // 发布中
             break;
           case 0:
-            return <Tag color="red">已过期</Tag>;
+            return <Tag color="red">Expired</Tag>;   // 已过期
             break;
           default:
-            return <Tag color="cyan">等待发布</Tag>;
+            return <Tag color="cyan">Waiting for release</Tag>;   // 等待发布
             break;
         }
       },
@@ -78,42 +85,53 @@ const CommunityAnnouncement = (props: any) => {
       title: 'Actions',
       render: (text: any, record: any) => (
         <Space size="middle">
-          <a
-            onClick={() => {
-              goToAdd(1);
-            }}
-          >
+          <Button type="link" onClick={() => {goToAdd(1, record);}}>
+            Edit
+          </Button>
+          <Button type="link" onClick={() => {goToAdd(2, record);}}>
             Detail
-          </a>
+          </Button>
         </Space>
       ),
     },
   ];
-  // 页面进来加载
-  useEffect(() => {
+
+  // 分业数据
+  const DetailPage = (page: any) => {
     let data = {
-      communityNum: '',
-      noticTitlel: '',
-      creator: '',
-      pageNum: 5,
+      Method: 'returnDataSaveDetail',
+      DefaultName: "DataSaveDetail",
+      Data: page
     };
-    request(data);
-  }, [1]);
+    return data;
+  }
+
+  // 分页数据一改变就发起请求
+  useEffect(() => {
+    if (DataSaveDetail != null) {
+      request(DataSaveDetail);
+    }
+  }, [DataSaveDetail]);
 
   // 数据请求
   const request = (data: any) => {
-    console.log(data);
     RA(25, data, module, dispatch);
   };
 
-  //
-
   // 跳转到新增或编辑
-  function goToAdd(num: any) {
-    if (num == 1) {
-      console.log('编辑');
+  function goToAdd(num: any, record: any) {
+    if (num == 0) {
+      history.push('./CommunityAnnouncement/Add');
+    }else if (num == 1) {
+      // 传递列表信息
+      dispatch({ type: module + '/returnDataSave', playload: { DataSave: record } });
+      history.push('./CommunityAnnouncement/Edit');
+    }else if (num == 2) {
+      // 传递列表信息
+      dispatch({ type: module + '/returnDataSave', playload: { DataSave: record } });
+      history.push('./CommunityAnnouncement/Detail');
     }
-    history.push('./CommunityAnnouncement/Add');
+    
   }
 
   const [form] = Form.useForm();
@@ -121,31 +139,27 @@ const CommunityAnnouncement = (props: any) => {
   // 重置
   const onReset = () => {
     form.resetFields();
-    let payload = {
-      index: 19,
-      page: {
-        pageNum: 1,
-      },
+    let page = {
+      noticTitlel: '',
+      creator: '',
+      pageNum: 1,
     };
-    // requst(payload);
+    // 把内容存进去
+    SA(DetailPage(page), module, dispatch)
   };
 
   // 表单提交
   const onFinishContract = (value: any) => {
-    // console.log(value)
-    if (!value.communityName && !value.contractNumber && !value.contractTitle) {
+    console.log(value)
+    if (!value.communityNumList && !value.noticTitlel && !value.creator) {
       message.error('Please enter one of them!');
     } else {
-      console.log(value);
-      let payload = {
-        index: 19,
-        page: {
-          pageNum: 1,
-          contractNumber: value.contractNumber,
-          contractTitle: value.contractTitle,
-          communityName: value.communityName,
-        },
-      };
+      // 要看是哪里分页 
+      let mlist = { ...value }
+      mlist.communityNumList = value.communityNumList
+      mlist.pageNum = 1;
+      // 把内容存进去
+      SA(DetailPage(mlist), module, dispatch)
       // requst(payload);
     }
   };
@@ -153,13 +167,17 @@ const CommunityAnnouncement = (props: any) => {
   // 选择小区名字并赋值
   const opname = (value: any) => {
     form.setFieldsValue({
-      communityName: value,
+      communityNumList: value,
     });
   };
 
   // 页面切换
   const paginationHandler = (page: number, pageSize?: number) => {
-    dispatch({});
+    // 要看是哪里分页 
+    let mlist = { ...DataSaveDetail }
+    mlist.pageNum = page;
+    // 把内容存进去
+    SA(DetailPage(mlist), module, dispatch)
   };
 
   return (
@@ -172,17 +190,17 @@ const CommunityAnnouncement = (props: any) => {
           name="contract"
           onFinish={onFinishContract}
         >
-          <Form.Item name="communityName">
+          <Form.Item name="communityNumList">
             <SearchOptionsCommnity
               // ubmit={extendName}
               opname={opname}
             />
           </Form.Item>
-          <Form.Item name="contractNumber">
-            <Input allowClear placeholder="Contract Number" />
+          <Form.Item name="noticTitlel">
+            <Input allowClear placeholder="Announcement Title" />
           </Form.Item>
-          <Form.Item name="contractTitle">
-            <Input allowClear placeholder="Contract Title" />
+          <Form.Item name="creator">
+            <Input allowClear placeholder="Announcement Publisher" />
           </Form.Item>
           <Form.Item>
             <Button
@@ -207,65 +225,56 @@ const CommunityAnnouncement = (props: any) => {
         </Form>
       </div>
       <div style={{ width: '100%', paddingLeft: 10, paddingRight: 10, backgroundColor: '#ffffff' }}>
-        {Data ? (
-          <div>
-            <ProTable
-              loading={userListLoading}
-              rowKey="id"
-              dataSource={Data.rows}
-              columns={columns}
-              pagination={false} // 隐藏默认分页
-              search={false}
-              toolBarRender={() => [
-                <Button
-                  key="3"
-                  type="primary"
-                  onClick={() => {
-                    goToAdd(0);
-                  }}
-                >
-                  <PlusOutlined />
+
+        <ProTable
+          loading={userListLoading}
+          rowKey="id"
+          dataSource={Data ? Data.rows : []}
+          columns={columns}
+          pagination={false} // 隐藏默认分页
+          search={false}
+          toolBarRender={() => [
+            <Button
+              key="3"
+              type="primary"
+              onClick={() => {
+                goToAdd(0, {});
+              }}
+            >
+              <PlusOutlined />
                   Create New Announcement
                 </Button>,
-              ]}
-              options={{
-                density: true,
-                fullScreen: true,
-                reload: () => {
-                  // resetHandler();
-                },
-                setting: false,
-              }}
-              headerTitle="Announcement list"
-            />
-          </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>
-        ) : (
-          ''
-        )}
+          ]}
+          options={{
+            density: true,
+            fullScreen: true,
+            reload: () => {
+              onReset();
+            },
+            setting: false,
+          }}
+          headerTitle="Announcement list"
+        />
+        <div style={{ textAlign: 'right', padding: 10 }}>
+          <Pagination
+            current={Data ? Data.page.currentPage : 0}
+            total={Data ? Data.page.totalRow : 0}
+            onChange={paginationHandler}
+            pageSizeOptions={['15']}
+            // showSizeChanger={false}
+            pageSize={Data ? Data.page.curPageSize : 10}
+          />
+        </div>
       </div>
     </>
   );
 };
 
 function map(state: any) {
-  console.log(state);
+  // console.log(state[module]);
   const userListLoading = state.loading.models.CommunityAnnouncement;
-  const Data = state.CommunityAnnouncement.Data;
-  return { Data, userListLoading };
+  const { Data, DataSaveDetail } = state[module];
+  return { Data, userListLoading, DataSaveDetail };
 }
 export default connect(map)(CommunityAnnouncement);
 

src/pages/CommunityManagement/CommunityAnnouncement/Detail.tsx

+import React, { useState, useEffect } from 'react';
+import { connect, history } from 'umi';
+import { Button, Row, Col, Descriptions, Image, Badge ,Tag} from 'antd';
+import { LeftOutlined, EyeOutlined, } from '@ant-design/icons';
+import './ann.less';
+import moment from 'moment';
+import imgs from '@/assets/logo_icon_bg.png';
+
+const module = 'CommunityAnnouncement';
+
+const Detail = (props: any) => {
+    const { dispatch, loading, DataSave } = props;
+
+    // 返回
+    const goToReturn = () => {
+        history.go(-1);
+    };
+
+    // 监听传递过来的值
+    useEffect(() => {
+        if (DataSave == null) {
+            history.push('/CommunityManagement/CommunityAnnouncement');
+        } 
+    }, [DataSave]);
+
+    return (
+        <>
+        {DataSave != null ?
+            <div className="form">
+                {/* 头部 */}
+                <h3>
+                    <EyeOutlined />
+                    &nbsp;Notice Details
+                    <div className="back">
+                        <Button onClick={goToReturn}>
+                            <LeftOutlined /> Back
+                        </Button>
+                    </div>
+                </h3>
+                <hr />
+                {/* 内容 */}
+                <Row>
+                    <Col span={12}>
+                        <Descriptions title="Notice Info" layout="vertical" bordered>
+                            <Descriptions.Item label="Title：" span={2}>{DataSave.noticTitlel}</Descriptions.Item>
+                            <Descriptions.Item label="Publisher：">{DataSave.creator}</Descriptions.Item>
+                            <Descriptions.Item label="Effective Dates：">2020-11-02 09:00:00</Descriptions.Item>
+                            <Descriptions.Item label="Expiration Date：">2020-11-08 09:00:00</Descriptions.Item>
+                            <Descriptions.Item label="NoticScope：" span={3}>
+                                <Badge status="processing" text="Publishing" />
+                            </Descriptions.Item>
+                            <Descriptions.Item label="Effective Community：" span={3}>
+                                <Tag color="#e10">小区1</Tag>
+                                <Tag color="#e20">小区1</Tag>
+                                <Tag color="#e30">小区1</Tag>
+                                <Tag color="#e40">小区1</Tag>
+                                <Tag color="#e50">小区1</Tag>
+                                <Tag color="#e60">小区1</Tag>
+                                <Tag color="#e70">小区1</Tag>
+                            </Descriptions.Item>
+                            <Descriptions.Item label="Notice Content：" span={3}>
+                                <p>{DataSave.noticText}</p>
+                            </Descriptions.Item>
+                        </Descriptions>
+                    </Col>
+                    <Col span={12} style={{ textAlign: 'center' }}>
+                        <div className='famg'>
+                            <div>
+                                <Image
+                                    width={200}
+                                    src={imgs}
+                                />
+                                <p>Enclosure</p>
+                            </div>
+                        </div>
+                        
+                    </Col>
+                </Row>
+
+            </div>
+            : ''
+        }
+
+
+
+
+        </>
+    )
+}
+
+
+function map(state: any) {
+    // console.log(state)
+    const { DataSave } = state[module];
+    const loading = state.loading.models.CommunityAnnouncement;
+    return { loading, DataSave };
+}
+export default connect(map)(Detail);
\ No newline at end of file

src/pages/CommunityManagement/CommunityAnnouncement/ann.css

+.ann-title {
+  line-height: 45px;
+}
+.diyItem {
+  margin-bottom: 20px;
+}
+.diyItem .ant-form-item-label label {
+  min-width: 120px;
+  text-align: right;
+}
+hr {
+  border: 0;
+  height: 1px;
+  background: #eee;
+  margin-bottom: 20px;
+}
+.form {
+  padding: 20px;
+  border: 1px solid #efefef;
+  border-radius: 3px;
+  background: #fff;
+  box-shadow: 0 1px 1px #ccc;
+}
+.form h3 {
+  margin-bottom: 30px;
+  position: relative;
+  line-height: 35px;
+}
+.form h3 .back {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-bottom: 20px;
+  background: #fff;
+}
+.form .famg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.form .famg div {
+  padding: 10% 0;
+}
+.form .famg span {
+  margin: 10px auto;
+}

src/pages/CommunityManagement/CommunityAnnouncement/ann.less

 .ann-title {
   line-height: 45px;
 }
+
 .diyItem {
   margin-bottom: 20px;
+
   .ant-form-item-label {
     label {
-      min-width: 120px;
+      min-width : 120px;
       text-align: right;
     }
   }
 }
+
 hr {
-  border: 0;
-  height: 1px;
-  background: #eee;
+  border       : 0;
+  height       : 1px;
+  background   : #eee;
   margin-bottom: 20px;
 }
+
+// bianji
+.form {
+  padding      : 20px;
+  border       : 1px solid #efefef;
+  border-radius: 3px;
+  background   : #fff;
+  box-shadow   : 0 1px 1px #ccc;
+
+  h3 {
+    margin-bottom: 30px;
+    position     : relative;
+    line-height  : 35px;
+
+    .back {
+      position     : absolute;
+      right        : 0;
+      top          : 0;
+      margin-bottom: 20px;
+      background   : #fff;
+    }
+  }
+
+  .famg {
+    display        : flex;
+    justify-content: center;
+    align-items    : center;
+    div{
+      padding:10% 0;
+    }
+    span {
+      margin: 10px auto;
+    }
+  }
+
+}
\ No newline at end of file