设施管理界面重做，修复小区新增编辑bug，修复小区公告bug

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

src/components/BackButton/BackButton.tsx

@@ -30,7 +30,9 @@ const BackButton = (props: any) => {
   return (
     <>
       {url != null ? (
-        <Button onClick={goToReturnByParam}>Back</Button>
+        <Button onClick={goToReturnByParam}>
+          <LeftOutlined /> Back
+        </Button>
       ) : (
         <Button onClick={goToReturn}>
           <LeftOutlined />

src/components/Facilitys/Facilitys.tsx

+import React, { useState, useEffect, useRef } from 'react';
+import './index.less';
+import { Input, Button, Upload, Form, Select } from 'antd';
+const { Option } = Select;
+import { PlusOutlined } from '@ant-design/icons';
+import { Link, useIntl, connect, Dispatch, history } from 'umi';
+
+const Facilitys = (props: any) => {
+  //
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div className="ant-upload-text">Upload</div>
+    </div>
+  );
+
+  // 列表
+  const fileList: any = [];
+  return (
+    <>
+      <Form.List
+        name="names"
+        rules={[
+          {
+            validator: async (_, names) => {
+              // if (!names || names.length < 2) {
+              //   return Promise.reject(new Error('At least 2 passengers'));
+              // }
+            },
+          },
+        ]}
+      >
+        {(fields, { add, remove }, { errors }) => (
+          <>
+            {fields.map((field, index) => (
+              <Form.Item required={false} key={field.key}>
+                {/* 每一个上传的组件 */}
+                <div className="test">
+                  <div className="diy-box">
+                    <Upload
+                      fileList={fileList}
+                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                      listType="picture-card"
+                      style={{ display: 'inline-block', width: '110px' }}
+                      // onPreview={this.handlePreview}
+                      // onChange={this.handleChange}
+                    >
+                      {fileList.length >= 1 ? null : uploadButton}
+                    </Upload>
+
+                    <div className="name">
+                      <Form.Item
+                        label="Facility name"
+                        name="username"
+                        rules={[{ required: true, message: 'Please input your username!' }]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <div className="over">
+                        {fields.length > 1 ? (
+                          <Button type="link" onClick={() => remove(field.name)}>
+                            Delete
+                          </Button>
+                        ) : null}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Form.Item>
+            ))}
+            <Form.Item>
+              <Button
+                type="dashed"
+                onClick={() => add()}
+                style={{ width: '100px', height: '100px' }}
+                icon={<PlusOutlined />}
+              ></Button>
+              <Form.ErrorList errors={errors} />
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </>
+  );
+};
+
+export default Facilitys;

src/components/Facilitys/index.less

+.ant-form-item-control-input-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+.test {
+  width: 240px;
+  display: inline-block;
+  margin-right: 20px;
+  .ant-upload-picture-card-wrapper {
+    width: 110px;
+  }
+  .diy-box {
+    width: 210px;
+    display: flex;
+    justify-content: space-between;
+    .name {
+      width: 100px;
+      display: inline-block;
+      margin-left: 10px;
+      .ant-form-item {
+        margin-bottom: 5px;
+      }
+    }
+    .over {
+      text-align: center;
+    }
+  }
+}

src/components/PictureOptions/PictureOptionsRow.tsx

@@ -59,24 +59,24 @@ const PictureOptionsRow = (props: any) => {
 
   useEffect(() => {
     // if (props.disabled) {
-      if (props.defaultValue != null) {
-        var tmp = props.defaultValue;
-        var result = new Array();
-        var resultToInside = new Array();
-        // console.log('组件');
-        // console.log(tmp);
+    if (props.defaultValue != null) {
+      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;
-          }
-          result.push(item);
-          resultToInside.push(item.name);
-        });
-        setFileList(result);
-      }
-  //   }
+      tmp.map((item: any, index: any) => {
+        if (item.name == null) {
+          item.name = getUrlPicName(item.url);
+          item.uid = index;
+        }
+        result.push(item);
+        resultToInside.push(item.name);
+      });
+      setFileList(result);
+    }
+    //   }
   }, [props.defaultValue]);
 
   // useEffect(() => {
@@ -111,6 +111,9 @@ const PictureOptionsRow = (props: any) => {
   };
 
   const handleChange = ({ file, fileList }) => {
+    // 给传递的附加名字
+    props.data.fileName = fileList[0].name;
+    console.log(props.data);
     console.log(fileList);
     let tmp = fileList;
     setFileList(tmp.filter((file) => !!file.status || file.status == null));

src/models/CommunityManagement/CommunityAnnouncement.ts

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

src/pages/CommunityManagement/CellList/Adds.tsx

@@ -9,6 +9,7 @@ import { history } from 'umi';
 import { village } from '@/utils/tip';
 
 import moment from 'moment';
+import { parseInt } from 'lodash';
 
 const { RangePicker } = TimePicker;
 
@@ -18,8 +19,6 @@ interface objc {}
 const Adds = (props: any) => {
   const { Data, dispatch, loading, Result } = props;
 
-  console.log(loading);
-
   const [form] = Form.useForm();
 
   //物业费选择
@@ -68,7 +67,10 @@ const Adds = (props: any) => {
       form.setFieldsValue({
         // 必填的
         des: {
-          residentialZipCode: Data.residentialZipCode,
+          residentialZipCode: Data.residentialZipCode.substring(
+            Data.residentialZipCode.length - 6,
+            Data.residentialZipCode.length,
+          ),
           residentialAddress: Data.residentialAddress,
           residentialName: Data.residentialName,
         },
@@ -311,7 +313,11 @@ const Adds = (props: any) => {
                 </Form.Item>
 
                 <Form.Item name={['des', 'residentialAddress']} noStyle rules={village[0] as any}>
-                  <Input style={{ width: '360px' }} placeholder="Please enter community adds" />
+                  <Input
+                    style={{ width: '360px' }}
+                    placeholder="Please enter community adds"
+                    disabled={codeStrat}
+                  />
                 </Form.Item>
 
                 <div className="li">

src/pages/CommunityManagement/CellList/Details.tsx

@@ -164,7 +164,11 @@ const Detail = (props: any) => {
                 <div className="item">
                   <label>Community Address：</label>
                   <span>
-                    {detailData.rows.residentialAddress}&nbsp;{detailData.rows.residentialZipCode}{' '}
+                    {detailData.rows.residentialAddress}&nbsp;
+                    {detailData.rows.residentialZipCode.substring(
+                      detailData.rows.residentialZipCode.length - 6,
+                      detailData.rows.residentialZipCode.length,
+                    )}{' '}
                   </span>
                 </div>
                 {/* ---------- */}

src/pages/CommunityManagement/CommunityAnnouncement/Add.tsx

@@ -4,7 +4,7 @@ const { TabPane } = Tabs;
 
 import { connect, history } from 'umi';
 
-import { RA } from '@/utils/method';
+import { RA, SA } from '@/utils/method';
 import TitleBack from '@/components/TitleBack/TitleBack';
 // import FileUpload from '@/components/FileUpload/FileUpload';
 import { validateMessages } from '@/utils/params';
@@ -13,7 +13,7 @@ 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 imgs from '@/assets/logo_icon_bg.png';
 import './ann.less';
 import { Notice } from '@/utils/tip';
 import { getCookie } from '@/utils/method';
@@ -21,67 +21,97 @@ import moment from 'moment';
 
 const module = 'CommunityAnnouncement';
 const Add = (props: any) => {
-  const { dispatch, Result, loading , DataSave } = props;
+  const { dispatch, Result, loading, DataSave, ImgSrc } = 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);
+  console.log(ImgSrc);
 
   // 监听传递过来的值
   useEffect(() => {
     if (DataSave != null) {
-      console.log(moment(DataSave.noticStartTime))
+      // let tim = DataSave.noticStartTime.time;
       // 赋值
       form.setFieldsValue({
-        noticTitle:DataSave.noticTitlel,
-        noticText:DataSave.noticText,
-        // noticStartTime:moment(DataSave.noticStartTime),
+        noticTitle: DataSave.noticTitlel,
+        noticText: DataSave.noticText,
+        // noticStartTime: moment(tim).format('YYYY-MM-DD'),
         // noticEndTime:DataSave.noticEndTime?moment(DataSave.noticEndTime, 'YYYY-MM-DD HH:mm:ss'):'',
-      })
+      });
 
-      // 图片
-      setDefaultImage(defaultImg);
+      // 发起请求图片
+      let msg = {
+        type: 'tosCommunityNoticePreview',
+        fileName: DataSave.noticImageName,
+      };
+      RA(47, msg, module, dispatch);
     }
   }, [DataSave]);
 
-  
+  // 图片地址
+  const [ImageSrc, setImageSrc] = useState([] as any);
+
+  // 监听图片状态  ImgSrc
+  useEffect(() => {
+    if (ImgSrc != null) {
+      let imgUrl = [
+        {
+          uid: '-1',
+          name: 'image.png',
+          status: 'done',
+          url: ImgSrc,
+        },
+      ];
+      setImageSrc(imgUrl);
+    }
+  }, [ImgSrc]);
+
   // 监听是不是提交成功
   useEffect(() => {
     if (Result != null) {
+      // 移除传递来的信息
       dispatch({
         type: `${module}/ResultRemove`,
       });
+      // 重新刷新页面
+      let page = {
+        noticTitlel: '',
+        creator: '',
+        pageNum: 1,
+      };
+      // 把内容存进去
+      SA(DetailPage(page), module, dispatch);
       message.success('Released Successfully');
       history.push('/CommunityManagement/CommunityAnnouncement');
     }
   }, [Result]);
 
+  // 分业数据
+  const DetailPage = (page: any) => {
+    let data = {
+      Method: 'returnDataSaveDetail',
+      DefaultName: 'DataSaveDetail',
+      Data: page,
+    };
+    return data;
+  };
+
   // 提交
   const onFinish = (values: any) => {
-    console.log(values);
+    // console.log(values);
     var tmp = values;
-    if(DataSave != null){
-      tmp.id = DataSave.id;       // 如果是修改传递的 修改ID 
+    if (DataSave != null) {
+      tmp.id = DataSave.id; // 如果是修改传递的 修改ID
     }
-    tmp.creatorId = getCookie('id');     // 管理员 ID  
+    tmp.creatorId = getCookie('id'); // 管理员 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);
+    tmp.noticStartTime = values.noticStartTime.format('YYYY-MM-DD');
+    tmp.noticEndTime = values.noticEndTime ? values.noticEndTime.format('YYYY-MM-DD') : null;
+    // console.log(tmp);
     RA(28, tmp, module, dispatch);
   };
 
@@ -94,7 +124,9 @@ const Add = (props: any) => {
     <>
       <Spin spinning={loading}>
         <div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}>
-          <TitleBack title={DataSave == null ? 'Add Announcement' : "Edit Announcement"}></TitleBack>
+          <TitleBack
+            title={DataSave == null ? 'Add Announcement' : 'Edit Announcement'}
+          ></TitleBack>
 
           <Form
             ref={formRef}
@@ -105,18 +137,15 @@ const Add = (props: any) => {
             validateMessages={validateMessages}
           >
             <Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}>
-              <SelectCommunity checklist = {DataSave == null ? null : DataSave.communityNum.split(",")} />
+              <SelectCommunity
+                checklist={DataSave == null ? null : DataSave.communityNum.split(',')}
+              />
             </Form.Item>
-            <Form.Item
-              name='noticTitle'
-              className="diyItem"
-              label="Notice Title"
-              rules={Notice[1]}
-            >
+            <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'
+              name="noticText"
               className="diyItem"
               label="Notice Content"
               rules={Notice[2]}
@@ -134,7 +163,7 @@ const Add = (props: any) => {
                   imageType: 'tosNotice',
                 }}
                 limitNums={1}
-                defaultValue = { DefaultImage }
+                defaultValue={ImageSrc}
               />
             </Form.Item>
             <Form.Item
@@ -143,10 +172,18 @@ const Add = (props: any) => {
               label="Effective Dates"
               rules={Notice[3]}
             >
-              <DatePicker showTime placeholder="Effective Dates" disabledDate={disabledDate} />
+              <DatePicker
+                style={{ width: 200 }}
+                placeholder="Effective Dates"
+                disabledDate={disabledDate}
+              />
             </Form.Item>
             <Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}>
-              <DatePicker showTime placeholder="Expiration Dates" disabledDate={disabledDate} />
+              <DatePicker
+                style={{ width: 200 }}
+                placeholder="Expiration Dates"
+                disabledDate={disabledDate}
+              />
             </Form.Item>
             <hr />
             <Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}>
@@ -162,9 +199,8 @@ const Add = (props: any) => {
 };
 
 function map(state: any) {
-  // console.log(state)
-  const { Result, DataSave } = state[module];
+  const { Result, DataSave, ImgSrc } = state[module];
   const loading = state.loading.models.CommunityAnnouncement;
-  return { Result, loading , DataSave };
+  return { Result, loading, DataSave, ImgSrc };
 }
 export default connect(map)(Add);

src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx

@@ -34,14 +34,15 @@ const CommunityAnnouncement = (props: any) => {
   useEffect(() => {
     dispatch({ type: module + '/returnDataSave', playload: { DataSave: null } });
     dispatch({ type: module + '/returnDataSaveDetail', playload: { DataSaveDetail: null } });
+    dispatch({ type: module + '/returnImg', playload: { DataSaveDetail: null } });
   }, [1]);
 
   // 表头
-  const columns = [
+  const columns: any = [
     {
       title: 'Community',
       dataIndex: 'communityNum',
-      width: 400,
+      width: 240,
       ellipsis: {
         showTitle: false,
       },
@@ -59,19 +60,19 @@ const CommunityAnnouncement = (props: any) => {
       dataIndex: 'noticStartTime',
       render: (record: any) => (
         <Space size="middle">
-          {record != null ? moment(record.noticEndTime).format('YYYY-MM-DD HH:mm:ss') : null}
+          {record != null ? moment(record.time).format('YYYY-MM-DD') : null}
         </Space>
       ),
     },
     {
       title: 'NoticScope',
-      dataIndex: 'noticScope',
+      dataIndex: 'noticStatus',
       render: function (text: any) {
         switch (text) {
           case 1:
             return <Tag color="green">Publishing</Tag>; // 发布中
             break;
-          case 0:
+          case 2:
             return <Tag color="red">Expired</Tag>; // 已过期
             break;
           default:
@@ -158,7 +159,7 @@ const CommunityAnnouncement = (props: any) => {
 
   // 表单提交
   const onFinishContract = (value: any) => {
-    console.log(value);
+    // console.log(value);
     if (!value.communityNumList && !value.noticTitlel && !value.creator) {
       message.error('Please enter one of them!');
     } else {
@@ -202,7 +203,7 @@ const CommunityAnnouncement = (props: any) => {
             <SearchOptionsCommnity
               // ubmit={extendName}
               opname={opname}
-              type={1}
+              type={1} // 单选还是多选  单选就直接去掉
             />
           </Form.Item>
           <Form.Item name="noticTitlel">

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 { Button, Row, Col, Descriptions, Image, Badge, Tag, Spin } from 'antd';
+import { LeftOutlined, EyeOutlined } from '@ant-design/icons';
 import './ann.less';
 import moment from 'moment';
 import imgs from '@/assets/logo_icon_bg.png';
+import { RA } from '@/utils/method';
+import { getDetailCommunityList } from '@/services/tosUser';
 
 const module = 'CommunityAnnouncement';
 
 const Detail = (props: any) => {
-    const { dispatch, loading, DataSave } = props;
+  const { dispatch, loading, DataSave, ImgSrc } = props;
 
-    // 返回
-    const goToReturn = () => {
-        history.go(-1);
-    };
+  // 返回
+  const goToReturn = () => {
+    history.go(-1);
+  };
 
-    // 监听传递过来的值
-    useEffect(() => {
-        if (DataSave == null) {
-            history.push('/CommunityManagement/CommunityAnnouncement');
-        } 
-    }, [DataSave]);
+  // 监听传递过来的值
+  useEffect(() => {
+    if (DataSave == null) {
+      history.push('/CommunityManagement/CommunityAnnouncement');
+    } else {
+      // 发起请求图片地址
+      let msg = {
+        // userToken: '',
+        // type: ans.substr(ans.lastIndexOf('.') + 1),
+        type: 'tosCommunityNoticePreview',
+        fileName: DataSave.noticImageName,
+      };
+      RA(47, msg, module, dispatch);
+    }
+  }, [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>
-            : ''
-        }
+  // 图片地址
+  const [ImageSrc, setImageSrc] = useState(imgs);
 
+  // 监听图片状态  ImgSrc
+  useEffect(() => {
+    if (ImgSrc != null) {
+      setImageSrc(ImgSrc);
+    }
+  }, [ImgSrc]);
 
+  // 状态返回
+  function hanFunStart(start: any) {
+    switch (start) {
+      case 1:
+        return <Badge status="success" text="Publishing" />;
+        //  <Tag color="green">Publishing</Tag>; // 发布中
+        break;
+      case 2:
+        return <Badge status="error" text="Expired" />; // 已过期
+        break;
+      default:
+        return <Badge status="processing" text="Waiting for release" />; // 等待发布
+        break;
+    }
+  }
 
+  //小区返回
+  function CommunityLists(list: any) {
+    let listBack = list.split(',').map((item: any, index: any) => {
+      let last: number = parseInt(index % 10);
+      return (
+        <Tag color={`#${last}b0`} style={{ marginBottom: 3 }} key={index}>
+          {item}
+        </Tag>
+      );
+    });
+    return listBack;
+  }
 
-        </>
-    )
-}
-
+  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：">
+                  {moment(DataSave.noticStartTime.time).format('YYYY-MM-DD')}
+                </Descriptions.Item>
+                {/* 结束时间 */}
+                <Descriptions.Item label="Expiration Date：">
+                  {DataSave.noticEndTime != null
+                    ? moment(DataSave.noticEndTime.time).format('YYYY-MM-DD')
+                    : 'Permanent'}
+                </Descriptions.Item>
+                {/* 状态 */}
+                <Descriptions.Item label="NoticScope：" span={3}>
+                  {hanFunStart(DataSave.noticStatus)}
+                </Descriptions.Item>
+                {/* 生效小区 */}
+                <Descriptions.Item label="Effective Community：" span={3}>
+                  {CommunityLists(DataSave.communityNum)}
+                </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>
+                  <Spin spinning={loading}>
+                    <Image width={200} src={ImageSrc} />
+                  </Spin>
+                  <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 };
+  // console.log(state);
+  const { DataSave, ImgSrc } = state[module];
+  const loading = state.loading.models.CommunityAnnouncement;
+  return { loading, DataSave, ImgSrc };
 }
-export default connect(map)(Detail);
\ No newline at end of file
+export default connect(map)(Detail);

src/pages/CommunityManagement/FacilityBookings/css/index.less

@@ -2,279 +2,316 @@
 
 //基石
 .base {
-    width: 100%;
-    background-color: #ffffff;
-    padding: 34px;
-    min-width: 1020px;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 16px;
+  margin-bottom: 15px;
 }
 
 //头部组件
-.box{
-    width: 100%;
-    height: 64px;
-    position: relative;
-}
-.item1{
-    position: absolute;
-    width: 180px;
-    text-align: center;
-    border-left: 5px solid rgba(24,144,255,1);
-    font-family:'Source Han Sans CN';
-    font-size: 18px;
-    font-weight: 600;
-    color: #000000;
+.box {
+  width: 100%;
+  height: 64px;
+  position: relative;
+}
+.item1 {
+  position: absolute;
+  width: 180px;
+  text-align: center;
+  border-left: 5px solid rgba(24, 144, 255, 1);
+  font-family: 'Source Han Sans CN';
+  font-size: 18px;
+  font-weight: 600;
+  color: #000000;
+}
+.item3 {
+  width: 80px;
+  height: 32px;
+  position: absolute;
+  right: 0;
 
-}
-.item3{
-    width:80px;
-    height: 32px;
-    position: absolute;
-    right: 0;
-
-    outline: none;
-    background:none;
-    cursor: pointer;
+  outline: none;
+  background: none;
+  cursor: pointer;
 
-    border:1px solid rgba(217,217,217,1);
-    border-radius:2px;
+  border: 1px solid rgba(217, 217, 217, 1);
+  border-radius: 2px;
 }
 
-.box1{
-    width: 100%;
-    height: 34px;
-    position: relative;
-    margin-bottom: 28px;
+.box1 {
+  width: 100%;
+  height: 34px;
+  position: relative;
+  margin-bottom: 28px;
 }
-.box1item1{
-    position: absolute;
+.box1item1 {
+  position: absolute;
 }
-.box1item2{
-    position: absolute;
-    left: 139px;
+.box1item2 {
+  position: absolute;
+  left: 139px;
 }
 
-
-.box2{
-    width: 100%;
-    height: 34px;
-    position: relative;
-    margin-bottom: 28px;
+.box2 {
+  width: 100%;
+  height: 34px;
+  position: relative;
+  margin-bottom: 28px;
 }
-.box2item1{
-    position: absolute;
+.box2item1 {
+  position: absolute;
 }
-.box2item2{
-    position: absolute;
-    left: 139px;
+.box2item2 {
+  position: absolute;
+  left: 139px;
 }
-.box2item3{
-    position: absolute;
-    left: 407px;
+.box2item3 {
+  position: absolute;
+  left: 407px;
 }
-.box2item4{
-    position: absolute;
-    left: 565px;
+.box2item4 {
+  position: absolute;
+  left: 565px;
 }
-.box2item5{
-    position: absolute;
-    left: 713px;
+.box2item5 {
+  position: absolute;
+  left: 713px;
 }
-.box2item6{
-    position: absolute;
-    left: 778px;
+.box2item6 {
+  position: absolute;
+  left: 778px;
 }
 
-
-.box3{
-    position: relative;
-    margin-bottom: 28px;    
+.box3 {
+  position: relative;
+  margin-bottom: 28px;
 }
 
-.box3item1{
-    position: absolute;
+.box3item1 {
+  position: absolute;
 }
 
-.box3item2{
-    padding-left: 160px;
+.box3item2 {
+  padding-left: 160px;
 }
-.box3group1{
-    width: 266px;
-    height: 100px;     
+.box3group1 {
+  width: 266px;
+  height: 100px;
 }
 
-.box4{
-    position: relative;
+.box4 {
+  position: relative;
 }
-.box4item1{
-    position: absolute;
+.box4item1 {
+  position: absolute;
 }
 
-.box4item2{
-    padding-left: 160px;
+.box4item2 {
+  padding-left: 160px;
 }
 
-.ulist{
-	float:left;
-    width:100%;
-	padding:0;
-	margin:0;
-    list-style-type:none;
+.ulist {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+.llist {
+  display: inline;
+}
+.alist {
+  float: left;
+  width: 160px;
+}
+.alist1 {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+.alist2 {
+  float: left;
+  width: 326px;
+  margin-bottom: 20px;
+  z-index: 1;
 }
-.llist{
-    display:inline;
-}
-.alist{
-    float:left;
-    width: 160px;
-}
-.alist1{
 
-    position: relative;
-    width: 100px;
-    height: 100px;
-}
-.alist2{
-    float: left;
-    width: 326px;    
-    margin-bottom: 20px;
-    z-index: 1;
+.alist2box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.alist2boxitem1 {
+  position: absolute;
+  top: -100px;
+  left: 127px;
+}
+.alist2boxitem2 {
+  position: absolute;
+  top: -100px;
+  left: 180px;
+}
+.alist2boxitem3 {
+  position: absolute;
+  top: -40px;
+  left: 216px;
+}
+.alist2boxNone {
+  color: #ffffff;
+  moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.alist2box{
-    width: 100%;
-    height: 100%;
-    position: relative;  
-}
-.alist2boxitem1{
-    position: absolute;
-    top: -100px;
-    left: 127px;
-}
-.alist2boxitem2{
-    position: absolute;
-    top: -100px;
-    left: 180px;
-}
-.alist2boxitem3{
-    position: absolute;
-    top: -40px;
-    left: 216px;
-}
-.alist2boxNone{
-    color: #ffffff;
-    moz-user-select: -moz-none; 
-    -moz-user-select: none; 
-    -o-user-select:none; 
-    -khtml-user-select:none; 
-    -webkit-user-select:none; 
-    -ms-user-select:none; 
-    user-select:none;
-}
-
-.alist3{
-    z-index: 10;
-    cursor: pointer;
-    float: left;
-    width: 100px;
-    height: 100px;
-    line-height: 100px;
-    background-color: rgba(244,244,244,1);
-    text-align: center;
+.alist3 {
+  z-index: 10;
+  cursor: pointer;
+  float: left;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  background-color: rgba(244, 244, 244, 1);
+  text-align: center;
 }
 
 // 线栏
-.line{
-    width: 100%;
-    height: 1px;
-    border-top: 1px solid rgba(217,217,217,1);
-    margin-top: 28px;
-    margin-bottom: 28px;
+.line {
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid rgba(217, 217, 217, 1);
+  margin-top: 28px;
+  margin-bottom: 28px;
 }
 
-.box5{
-    position: relative;
-    width: 100%;
-    height: 34px;
-    margin-bottom: 28px;
+.box5 {
+  position: relative;
+  width: 100%;
+  height: 34px;
+  margin-bottom: 28px;
 }
-.box5item1{
-    position: absolute;
+.box5item1 {
+  position: absolute;
 }
-.box5item2{
-    position: absolute;
-    left: 186px;
+.box5item2 {
+  position: absolute;
+  left: 186px;
 }
 
-.box6{
-    position: relative;
-    line-height: 34px;
-    width: 100%;
-    height: 34px;
-    margin-bottom: 32px;
+.box6 {
+  position: relative;
+  line-height: 34px;
+  width: 100%;
+  height: 34px;
+  margin-bottom: 32px;
 }
-.box6item1{
-    position: absolute;    
+.box6item1 {
+  position: absolute;
 }
-.box6item2{
-    position: absolute;
-    left: 186px;
+.box6item2 {
+  position: absolute;
+  left: 186px;
 }
-.box6item3{
-    position: absolute;
-    left: 276px;
+.box6item3 {
+  position: absolute;
+  left: 276px;
 }
-.box6item4{
-    position: absolute;
-    left: 478px;
+.box6item4 {
+  position: absolute;
+  left: 478px;
 }
-.box6item5{
-    position: absolute;
-    left: 569px;
+.box6item5 {
+  position: absolute;
+  left: 569px;
 }
-.box6item6{
-    position: absolute;
-    left: 794px;
+.box6item6 {
+  position: absolute;
+  left: 794px;
 }
-.box6item7{
-    position: absolute;
-    left: 885px;
+.box6item7 {
+  position: absolute;
+  left: 885px;
 }
 
-
-.box7{
-    position: relative;
-    width: 100%;
-    height: 34px;
-    margin-bottom: 28px;
+.box7 {
+  position: relative;
+  width: 100%;
+  height: 34px;
+  margin-bottom: 28px;
 }
-.box7item1{
-    position: absolute;
-    left: 186px;
+.box7item1 {
+  position: absolute;
+  left: 186px;
 }
-.box7item2{
-    position: absolute;
-    left: 323px;
+.box7item2 {
+  position: absolute;
+  left: 323px;
 }
 
-.box8{
-    position: relative;
-    width: 100%;
-    height: 34px;
+.box8 {
+  position: relative;
+  width: 100%;
+  height: 34px;
 }
-.box8item1{
-    position: absolute;
+.box8item1 {
+  position: absolute;
 }
-.box8item2{
-    position: absolute;
-    left: 346px;
+.box8item2 {
+  position: absolute;
+  left: 346px;
 }
-.box8item3{
-    position: absolute;
-    left: 462px;
-    color: rgba(217,217,217,1);
+.box8item3 {
+  position: absolute;
+  left: 462px;
+  color: rgba(217, 217, 217, 1);
 }
-.box8item4{
-    position: absolute;
-    left: 502px;
+.box8item4 {
+  position: absolute;
+  left: 502px;
+}
+
+// 自定义
+.ant-tabs > .ant-tabs-nav,
+.ant-tabs > div > .ant-tabs-nav {
+  margin: 0;
+}
+hr {
+  border: 0;
+  height: 1px;
+  background: #eee;
+  margin-bottom: 24px;
+}
+.ant-input-group {
+  display: flex;
+  .ant-form-item {
+    margin-right: 20px;
+  }
+}
+.diyspan {
+  display: inline-block;
+  margin: 0 10px;
+}
+.diyp {
+  margin-bottom: 24px;
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+}
+.ant-input-prefix,
+.ant-input-suffix {
+  color: #888;
 }
 
+.ant-form-item-required,
+.ant-form-item-label > label {
+  min-width: 100px;
+  text-align: right;
+}
+
+.ant-form-item-control-input-content {
+  display: flex;
+  flex-wrap: wrap;
+}

src/utils/tip.ts

@@ -12,7 +12,7 @@ export const tipList = [
 
 // 小区提示
 export const village = [
-  [{ required: true, message: ' ' }],
+  [{ required: true, message: 'Please select community' }],
   [{ required: true, message: 'Please select working hours !' }],
   [{ required: true, message: 'Please enter the community administrator !' }],
   [{ required: true, message: 'Please enter the phone number and email address !' }],
@@ -21,8 +21,14 @@ export const village = [
 
 //公告提示
 export const Notice = [
-  [{ required: true, message: '小区' }],
-  [{ required: true, message: '标题' }],
-  [{ required: true, message: '内容' }],
-  [{ required: true, message: '日期' }],
+  [{ required: true, message: 'Please select community' }],
+  [{ required: true, message: 'Please input the notice title.' }],
+  [{ required: true, message: 'Please input the announcement content.' }],
+  [{ required: true, message: 'Please choose the effective time of the announcement.' }],
 ];
+
+// 时间
+export const Time = {
+  hour: [1, 2],
+  minute: [],
+};