新增小区重构、编辑公司信息

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

config/proxy.ts

@@ -96,5 +96,10 @@ export default {
       changeOrigin: true,
       pathRewrite: { '^': '' },
     },
+    // '/tos/': {
+    //   target: 'https://8eqzf3.39nat.com',
+    //   changeOrigin: true,
+    //   pathRewrite: { '^': '' },
+    // },
   },
 };

src/components/Form/PdfUpload.tsx

 /*
  * @Author: your name
  * @Date: 2021-02-01 14:54:48
- * @LastEditTime: 2021-02-18 16:48:37
+ * @LastEditTime: 2021-02-20 15:59:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\components\Form\PdfUpload.tsx
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Input, Upload, message, Button, Modal, Pagination } from 'antd';
 import {
   LoadingOutlined,
@@ -17,15 +17,22 @@ import {
 
 import PDF from 'react-pdf-js';
 
+import './zip.less';
 interface PriceInputProps {
-  value?: any;
+  detailvalue?: any;
   onChange?: any;
   disabled?: any; // 禁用状态
   action?: any; // 传递地址
   data?: any; // 附带数据
 }
 
-const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, action, data }) => {
+const PdfUpload: React.FC<PriceInputProps> = ({
+  detailvalue,
+  onChange,
+  disabled,
+  action,
+  data,
+}) => {
   const [loading, setLoading] = useState([false, false, false, false, false]); // 上传中控制
   const [idx, setIdx] = useState(0); // 点击的第几个
   const [imgList, setImgList] = useState([] as any); // 列表
@@ -36,6 +43,54 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
   const [numPages, setNumPages] = useState(1 as any); // 总页码数
   const [pageNumber, setPageNumber] = useState(1); // 当前页码数
 
+  // 默认值
+  useEffect(() => {
+    if (detailvalue) {
+      let obj = [] as any;
+
+      for (let i in detailvalue) {
+        let item = {
+          id: i,
+          name: detailvalue[i].description,
+          fileList: [
+            {
+              uid: i,
+              name: detailvalue[i].pdfName,
+              status: 'done',
+              url: detailvalue[i].pdfUrl,
+            },
+          ],
+          tip: false,
+          message: 'Required',
+        };
+        // 抽取相同的属性合并
+        if (obj.length > 0) {
+          let filterValue = obj.filter((v: any) => {
+            return v.name == detailvalue[i].description;
+          });
+          if (filterValue.length > 0) {
+            obj.forEach((n: any) => {
+              if (n.name == detailvalue[i].description) {
+                n.fileList.push({
+                  uid: i,
+                  name: detailvalue[i].pdfName,
+                  status: 'done',
+                  url: detailvalue[i].pdfUrl,
+                });
+              }
+            });
+          } else {
+            obj.push(item);
+          }
+        } else {
+          obj.push(item);
+        }
+      }
+      setImgList([...obj]);
+      onChange && onChange(obj);
+    }
+  }, [detailvalue]);
+
   // 上传前检测
   function beforeUpload(file: any) {
     const isJpgOrPng = file.type === 'application/pdf' || file.type === 'pdf';
@@ -124,12 +179,12 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
 
   // 删除的按钮
   const del = (index: any) => {
-    let list = JSON.parse(JSON.stringify(imgList));
-    list.splice(index, 1);
-
-    setImgList([...list]);
-
-    onChange && onChange(list);
+    if (!disabled) {
+      let list = JSON.parse(JSON.stringify(imgList));
+      list.splice(index, 1);
+      setImgList([...list]);
+      onChange && onChange(list);
+    }
   };
 
   //携带数据 、 传递给后台加 key
@@ -218,6 +273,8 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
                 onChange={inpChange}
                 id={index}
                 value={item.name}
+                disabled={disabled}
+                maxLength={30}
               />
               {item.tip ? <span className="tips">{item.message}</span> : null}
             </div>
@@ -241,6 +298,7 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
                 // id={index}
 
                 iconRender={icons} // 上传成功后的图标
+                disabled={disabled}
               >
                 {item.fileList && item.fileList.length >= 5 ? null : (
                   <div>
@@ -250,12 +308,16 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
                   </div>
                 )}
               </Upload>
-              <MinusCircleOutlined
-                className="pdf-icon"
-                onClick={() => {
-                  del(index);
-                }}
-              />
+
+              {/* 可以编辑才能出来 */}
+              {disabled ? null : (
+                <MinusCircleOutlined
+                  className="pdf-icon"
+                  onClick={() => {
+                    del(index);
+                  }}
+                />
+              )}
             </div>
           </div>
         );

src/components/Form/ZipCode.tsx

 /*
  * @Author: your name
  * @Date: 2021-01-30 16:16:41
- * @LastEditTime: 2021-02-01 15:12:24
+ * @LastEditTime: 2021-02-20 11:32:44
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\components\Form\ZipCode.tsx
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Input } from 'antd';
 
 import './zip.less';
@@ -20,22 +20,48 @@ interface PriceValue {
 interface PriceInputProps {
   value?: PriceValue;
   onChange?: (value: PriceValue) => void;
-  insdInps?: any;
+  disabled?: any;
+  LoseFocus?: any;
+  defaultvalue?: any;
 }
 
-const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps }) => {
+// disabled  是否禁止修改   LoseFocus 监听小区名称更改    onChange 数据变化触发表单验证   value  默认值
+const ZipCode: React.FC<PriceInputProps> = ({
+  value = {},
+  onChange,
+  disabled,
+  LoseFocus,
+  defaultvalue,
+}) => {
+  const [details, setDetails] = useState(null as any); // 详情
+
+  useEffect(() => {
+    if (defaultvalue) {
+      setDetails({ ...defaultvalue });
+    }
+  }, [defaultvalue]);
+
   const triggerChange = (changedValue: any) => {
-    console.log(changedValue);
     if (onChange) {
       onChange({ ...value, ...changedValue });
     }
-    if (changedValue.residentialName) {
-      insdInps(changedValue.residentialName);
-    }
   };
 
   const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     triggerChange({ [e.target.name]: e.target.value });
+
+    let obj = {
+      [e.target.name]: e.target.value,
+    };
+
+    if (e.target.name == 'residentialZipCode' && e.target.value.length > 6) {
+      return false;
+    }
+    setDetails({ ...defaultvalue, ...value, ...obj });
+  };
+
+  const onblurs = (v: any) => {
+    LoseFocus(v.target.value);
   };
 
   return (
@@ -49,6 +75,15 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps })
           onChange={onNumberChange}
           style={{ marginRight: '10px', width: 120 }}
           placeholder="6 Postcode"
+          disabled={disabled}
+          value={
+            details && details.residentialZipCode
+              ? details.residentialZipCode.substring(
+                  details.residentialZipCode.length - 6,
+                  details.residentialZipCode.length,
+                )
+              : null
+          }
         />
 
         <Input
@@ -58,6 +93,8 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps })
           onChange={onNumberChange}
           style={{ width: '360px' }}
           placeholder="Please enter community adds"
+          disabled={disabled}
+          value={details ? details.residentialAddress : null}
         />
       </div>
 
@@ -69,7 +106,15 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps })
           onChange={onNumberChange}
           style={{ marginRight: '10px', width: '240px' }}
           placeholder="Please enter community name"
+          onBlur={onblurs}
+          disabled={disabled}
+          value={details ? details.residentialName : null}
         />
+        {disabled ? (
+          <span className="tip">There are attachments and no modifications are allowed.</span>
+        ) : (
+          ''
+        )}
       </div>
     </span>
   );

src/components/Form/zip.less

@@ -5,6 +5,11 @@
   margin-bottom: 5px;
 }
 
+.tip {
+  font-size: 14px;
+  color: #f00;
+}
+
 // pdf上传
 
 .pdf {

src/components/PictureOptions/PictureOptionsRow.tsx

@@ -17,7 +17,7 @@ function getBase64(file: File) {
 import { getUrlPicName } from '../../utils/string';
 import { connect } from 'umi';
 const PictureOptionsRow = (props: any) => {
-  const { value, onChange, limitNums, imgs, loadding, dispatch } = props;
+  const { value, onChange, limitNums, imgs, loadding, dispatch, CommunityValue } = props;
   const [fileList, setFileList] = useState([] as any);
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
@@ -55,6 +55,22 @@ const PictureOptionsRow = (props: any) => {
     }
   }, [value]);
 
+  // 小区的banner
+  useEffect(() => {
+    if (CommunityValue) {
+      let arr = [] as any;
+      let obj = {
+        uid: CommunityValue.id || 0,
+        name: CommunityValue.bannerName || 'lose',
+        status: 'done',
+        url: CommunityValue.bannerUrl,
+      };
+      arr.push(obj);
+      setFileList(arr);
+      onChange && onChange(arr);
+    }
+  }, [CommunityValue]);
+
   useEffect(() => {
     if (imgs != null) {
       setFileList(imgs);

src/models/CommunityManagement/Account.ts

@@ -18,6 +18,8 @@ export default {
     SubResult: null, // 结果
 
     Info: null, // 二级管辖小区和权限
+
+    Means: null,
   },
 
   reducers: {
@@ -26,6 +28,11 @@ export default {
       return { ...state, Info };
     },
 
+    // 公司资料
+    returnMeans(state, { Means }) {
+      return { ...state, Means };
+    },
+
     returnPage(state, { Data }) {
       return { ...state, Data };
     },
@@ -123,6 +130,20 @@ export default {
               yield put({ type: 'returnInfo', Info });
             }
             break;
+
+          case 65: // 编辑公司信息
+            {
+              let Means = null;
+              yield put({ type: 'returnMeans', Means });
+            }
+            break;
+
+          case 66: // 获取公司信息
+            {
+              let Means = resp.data;
+              yield put({ type: 'returnMeans', Means });
+            }
+            break;
         }
       }
     },

src/models/CommunityManagement/CellList.ts

@@ -65,9 +65,9 @@ export default {
             }
             break;
           case 29: // 小区新增编辑
+          case 63: // 小区新增编辑(新接口)
             {
               let Result = resp;
-              yield put({ type: 'returnResult', Result });
               // 新增成功清空Data 用来刷新最新数据
               let Data = null;
               let village = null;
@@ -79,6 +79,7 @@ export default {
             }
             break;
           case 32: // 获取小区详情
+          case 64: // 获取小区详情
             {
               let detailData = resp.data;
               yield put({ type: 'returnDataSaveDetail', detailData });
@@ -133,5 +134,10 @@ export default {
       var DataSave = playload;
       yield put({ type: 'returnDataSave', DataSave });
     },
+
+    *delRemove({ playload }, { call, put }) {
+      var detailData = null;
+      yield put({ type: 'returnDataSaveDetail', detailData });
+    },
   },
 };

src/pages/AccountManagement/CompanyInformation/CompanyInformation.tsx

 /*
  * @Author: your name
  * @Date: 2020-11-19 16:54:53
- * @LastEditTime: 2021-01-30 15:54:42
+ * @LastEditTime: 2021-02-20 18:27:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\pages\AccountManagement\CompanyInformation\CompanyInformation.tsx
  */
 import React, { useState, useEffect } from 'react';
+import { LeftOutlined, EditOutlined } from '@ant-design/icons';
+import { Input, Form, Button, Spin } from 'antd';
+
+import { connect } from 'umi';
+
 import styles from './index.less';
-import { Input, Menu, Table, Space, Pagination, Tooltip, Button } from 'antd';
 
-import { Link, useIntl, connect, Dispatch } from 'umi';
+const CompanyInformation = (props: any) => {
+  const { dispatch, Means, loading } = props;
+
+  const [ModelExcel, setModelExcel] = useState(false); //编辑状态
+
+  //请求
+  const RA = (index: any, values: any) => {
+    dispatch({ type: 'Account/RA', playload: { index: index, body: values } });
+  };
+
+  const [form] = Form.useForm(); // 表单标识
+
+  useEffect(() => {
+    if (Means != null) {
+      form.setFieldsValue({
+        companyName: Means.companyName,
+        companyPhone: Means.companyPhone,
+        companyEmail: Means.companyEmail,
+      });
+    } else {
+      setModelExcel(false);
+      RA(66, {});
+    }
+  }, [Means]);
+
+  // 编辑切换
+  const goToReturn = () => {
+    setModelExcel(!ModelExcel);
+  };
+
+  //表单提交
+  const onFinish = (values: any) => {
+    values.id = Means.id;
+    console.log('Success:', values);
+    RA(65, values);
+  };
 
-const CompanyInformation = () => {
   return (
-    <div className={styles.base}>
-      <div className={styles.box1}>
-        <div className={styles.box1item1}>Management Company :</div>
-        <div style={{ position: 'absolute', left: 160 }}>
-          <p>TOS Pte Ltd</p>
-          {/* <Input style={{ width: 200 }} value="TOS Pte Ltd" /> */}
-        </div>
-        {/* <div className={styles.box1item3}>  <Button>Edit</Button></div>     */}
-      </div>
+    <Spin spinning={loading}>
+      <div className={styles.base}>
+        <div className={styles.box}>
+          <div className={styles.item1}>Company Information</div>
 
-      <div className={styles.box2}>
-        <div className={styles.box2item1}>Contact Number :</div>
-        <div className={styles.box2item2}>
-          <p>67441692</p>
-          {/* <Input style={{ width: 200 }} value="67441692" /> */}
-        </div>
-      </div>
-      <div className={styles.box2}>
-        <div className={styles.box2item1}>Contact Email :</div>
-        <div className={styles.box2item2}>
-          <p>admin.tos@crems.com.sg</p>
-          {/* <Input style={{ width: 200 }} value="admin.tos@crems.com.sg" /> */}
+          {ModelExcel ? (
+            <Button onClick={goToReturn}>
+              <LeftOutlined />
+              Back
+            </Button>
+          ) : (
+            <Button onClick={goToReturn}>
+              <EditOutlined />
+              Edit
+            </Button>
+          )}
         </div>
+
+        <Form name="basic" form={form} onFinish={onFinish}>
+          <div className={styles.box1}>
+            <div className={styles.box1item1}>Management Company :</div>
+            <div style={{ position: 'absolute', left: 160 }}>
+              <p>{Means ? Means.companyName : null}</p>
+              {/* <Input style={{ width: 200 }} value="TOS Pte Ltd" /> */}
+              <Form.Item label="" name="companyName" style={{ display: 'none' }}>
+                <Input value="TOS Pte Ltd" />
+              </Form.Item>
+            </div>
+
+            {/* <div className={styles.box1item3}>  <Button>Edit</Button></div>     */}
+          </div>
+
+          <div className={styles.box2}>
+            <div className={styles.box2item1}>Contact Number :</div>
+            <div className={styles.box2item2}>
+              {ModelExcel ? (
+                <Form.Item
+                  label=""
+                  name="companyPhone"
+                  rules={[{ required: true, message: 'Please input companyPhone!' }]}
+                >
+                  <Input maxLength={11} />
+                </Form.Item>
+              ) : (
+                <p>{Means ? Means.companyPhone : null}</p>
+              )}
+              {/* <Input style={{ width: 200 }} value="67441692" /> */}
+            </div>
+          </div>
+          <div className={styles.box2}>
+            <div className={styles.box2item1}>Contact Email :</div>
+            <div className={styles.box2item2}>
+              {ModelExcel ? (
+                <Form.Item
+                  label=""
+                  name="companyEmail"
+                  rules={[{ required: true, message: 'Please input companyEmail!' }]}
+                >
+                  <Input />
+                </Form.Item>
+              ) : (
+                <p>{Means ? Means.companyEmail : null}</p>
+              )}
+              {/* <Input style={{ width: 200 }} value="admin.tos@crems.com.sg" /> */}
+            </div>
+          </div>
+
+          {ModelExcel ? (
+            <div>
+              <hr></hr>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                Submit
+              </Button>
+            </div>
+          ) : (
+            ''
+          )}
+        </Form>
       </div>
-    </div>
+    </Spin>
   );
 };
 
-export default CompanyInformation;
+const Company = (styte: any) => {
+  const { Means } = styte.Account;
+  const loading = styte.loading.models.Account || false;
+  return {
+    Means,
+    loading,
+  };
+};
+export default connect(Company)(CompanyInformation);

src/pages/AccountManagement/CompanyInformation/index.less

@@ -4,9 +4,28 @@
 .base {
   width: 100%;
   background-color: #ffffff;
-  padding: 30px 30px 10px;
+  padding: 20px;
+  input {
+    width: 240px;
+  }
+}
+.box {
+  width: 100%;
+  height: 34px;
+  position: relative;
+  margin-bottom: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .item1 {
+    text-indent: 15px;
+    border-left: 5px solid rgb(24, 144, 255);
+    font-family: 'Source Han Sans CN';
+    font-size: 18px;
+    font-weight: 600;
+    color: rgb(0, 0, 0);
+  }
 }
-
 .box1 {
   width: 100%;
   height: 34px;
@@ -38,3 +57,10 @@
   position: absolute;
   left: 158px;
 }
+
+hr {
+  border: 0;
+  height: 1px;
+  background: #eee;
+  margin-bottom: 24px;
+}

src/pages/CommunityManagement/CellList/Adds.tsx

 import React, { useState, useEffect } from 'react';
 import { connect } from 'dva';
-import { LeftOutlined, EditOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
-import {
-  Form,
-  Input,
-  Image,
-  Button,
-  TimePicker,
-  Checkbox,
-  Upload,
-  message,
-  Spin,
-  Modal,
-  Pagination,
-} from 'antd';
+import { LeftOutlined, EditOutlined } from '@ant-design/icons';
+import { Form, Input, Button, TimePicker, Checkbox, Spin } from 'antd';
 // 样式
 import './celllist.less';
 import { RA } from '@/utils/method';
@@ -23,84 +11,84 @@ import { village } from '@/utils/tip';
 import moment from 'moment';
 import { getNumber } from '@/utils/string'; // 正则
 
-import FileViewer from 'react-file-viewer';
-import PDF from 'react-pdf-js';
+import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow'; // banner 上传
+import Facilities from '@/components/Form/ZipCode'; // 小区邮编地址名称
+import PdfUpload from '@/components/Form/PdfUpload'; // 多图上传
 
 const { RangePicker } = TimePicker;
 
 const Adds = (props: any) => {
   const module = 'CellList';
 
-  const { Data, dispatch, loading, imgUrl, Result } = props;
+  const { Data, detailData, dispatch, loading, imgUrl, Result } = props;
 
   const [form] = Form.useForm();
 
   const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值
+  const [codename, setCodeName] = useState(null); // 监听用户填写小区名
 
-  const [loubaUpload, setLouba] = useState([] as any); // 楼巴上传列表
-  const [guideUpload, setGuide] = useState([] as any); // 物业办事指南列表
-  const [periodUpload, setPeriod] = useState([] as any); // 保质期服务列表
+  const [tips, setTips] = useState([false, false, false]); // 三个自定义上传的提示
+  const [forms, setForms] = useState(false); // 第三个上传开关
 
-  // 监听用户填写小区名   以及后续禁止输入  提示信息
-  const [codename, setCodeName] = useState('');
-  const [codeStrat, setcodeStrat] = useState(false);
-  const [tipMain, setTipMain] = useState('');
+  const [codeStrat, setcodeStrat] = useState(true); // 是否开放上传      默认没填写不允许
+  const [info, setInfo] = useState(false); // 是否允许更改小区邮编地址名称    默认可以
 
-  const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏
-  const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息
-
-  //pdf 页码内容
-  const [numPages, setNumPages] = useState(1 as any); // 总页码数
-  const [pageNumber, setPageNumber] = useState(1); // 当前页码数
-
-  const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
+  const [banners, setBanners] = useState(null as any); // bannner
 
   // 赋值
   useEffect(() => {
     // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
     if (Data) {
-      // 返回列表
+      //发起请求
+      RA(64, { id: Data.id }, module, dispatch);
+    } else {
+      console.log('新建');
+    }
+  }, [Data]);
+
+  // 详情
+  useEffect(() => {
+    if (Data && detailData) {
+      let { communityData } = detailData;
+
+      // 赋值
       form.setFieldsValue({
-        // 必填的
+        // communityData,
         des: {
-          residentialZipCode: Data.residentialZipCode.substring(
-            Data.residentialZipCode.length - 6,
-            Data.residentialZipCode.length,
+          residentialZipCode: communityData.residentialZipCode.substring(
+            communityData.residentialZipCode.length - 6,
+            communityData.residentialZipCode.length,
           ),
-          residentialAddress: Data.residentialAddress,
-          residentialName: Data.residentialName,
+          residentialAddress: communityData.residentialAddress,
+          residentialName: communityData.residentialName,
         },
-
         workingHours: [
-          moment(Data.residentialStartWorking, 'HH:mm'),
-          moment(Data.residentialEndWorking, 'HH:mm'),
+          moment(communityData.residentialStartWorking, 'HH:mm'),
+          moment(communityData.residentialEndWorking, 'HH:mm'),
         ],
-        info: {
-          tel: Data.residentialPhone,
-          email: Data.residentialEmail,
-        },
-        residentialManagerUserName: Data.residentialManagerUserName,
+        residentialPhone: communityData.residentialPhone,
+        residentialEmail: communityData.residentialEmail,
+        residentialManagerUserName: communityData.residentialManagerUserName,
         help: {
-          residentialHotlineName: Data.residentialHotlineName,
-          residentialHotline: Data.residentialHotline,
+          residentialHotlineName: communityData.residentialHotlineName,
+          residentialHotline: communityData.residentialHotline,
           time: [
-            moment(Data.residentialHotlineServieStartTime, 'HH:mm'),
-            moment(Data.residentialHotlineServieEndTime, 'HH:mm'),
+            moment(communityData.residentialHotlineServieStartTime, 'HH:mm'),
+            moment(communityData.residentialHotlineServieEndTime, 'HH:mm'),
           ],
         },
       });
-      // 上传
-      setLouba(Data.balouscheduleUrl ? [backUpload(Data.balouscheduleUrl, Data.id)] : []);
-      setGuide(Data.serviceGuideUrl ? [backUpload(Data.serviceGuideUrl, Data.id)] : []);
-      // setPeriod(Data.lifeServiceUrl ? [backUpload(Data.lifeServiceUrl, Data.id)] : []);
-      // 小区名 -- 上传需要
-      setCodeName(Data.residentialName);
-      setcodeStrat(true);
-      setTipMain('Binding Content Already Exists, Cannot Be Modified！');
-    } else {
-      // console.log('新建');
+
+      setCodeName(communityData.residentialName); // 小区名 -- 上传需要
+      setInfo(true); // 禁止修改小区基本信息
+      setcodeStrat(false); //开放文件上传
+
+      // 看第三个有值么~ 有的话打开
+      if (detailData.communityFormsPdfList && detailData.communityFormsPdfList.length > 0) {
+        setForms(true);
+      }
     }
-  }, [Data]);
+  }, [detailData]);
 
   // 提交成功与否
   useEffect(() => {
@@ -115,6 +103,8 @@ const Adds = (props: any) => {
     }
   }, [Result, Data]);
 
+  // 监听表单的值
+
   // 监听编辑预览是否获取到地址以及发生改变
   useEffect(() => {
     if (imgUrl != null) {
@@ -131,104 +121,6 @@ const Adds = (props: any) => {
     }
   }, [imgUrl]);
 
-  // 编辑  返回上传格式 和 地址
-  function backUpload(str: any, index: number, url?: any) {
-    let a = {
-      uid: str + index,
-      name: str,
-      status: 'done',
-      type: str.match(/\.([^\.]+)$/)[1].toLowerCase(),
-      url: 'Transfer', // 需要调取接口
-    };
-    return a;
-  }
-
-  // 上传设置
-  const uploads = {
-    name: 'file',
-    accept: '.jpg,.png,.pdf',
-    action: '/tos/image/upload',
-    data: { imageType: 'tosCreateCommunity', extends: codename },
-  };
-
-  // 文件上传判断
-  function beforeUpload(file: any) {
-    // 文件大小判断
-    const isLt2M = file.size / 1024 / 1024 < 2;
-    if (!isLt2M) {
-      message.error('File must be less than or equal to 2MB!');
-    }
-    return isLt2M;
-  }
-
-  // 上传返回格式
-  function BackFormat(name: any, url: any) {
-    let imgs = [
-      {
-        uid: '-1',
-        name: name,
-        status: 'done',
-        type: name.match(/\.([^\.]+)$/)[1].toLowerCase(),
-        url: url,
-      },
-    ];
-    return imgs;
-  }
-
-  // 楼巴上传
-  const upload1 = {
-    onChange({ file }: any) {
-      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
-      if (file.status === 'done') {
-        let data = file.response.data;
-        setLouba(BackFormat(data.imageName, data.url));
-        setcodeStrat(true);
-        setTipMain('Binding Content Already Exists, Cannot Be Modified！');
-      }
-      // 结果
-      uploadMsg(file);
-    },
-  };
-
-  // 指南上传
-  const upload2 = {
-    onChange({ file, fileList }: any) {
-      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
-      if (file.status === 'done') {
-        let data = file.response.data;
-        setGuide(BackFormat(data.imageName, data.url));
-        setcodeStrat(true);
-        setTipMain('Binding Content Already Exists, Cannot Be Modified！');
-      }
-      // 结果
-      uploadMsg(file);
-    },
-  };
-
-  // 保质期上传
-  // const upload3 = {
-  //   onChange({ file }: any) {
-  //     file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
-  //     if (file.status === 'done') {
-  //       let data = file.response.data;
-  //       setPeriod(BackFormat(data.imageName, data.url));
-  //       setcodeStrat(true);
-  //       setTipMain('Binding Content Already Exists, Cannot Be Modified！');
-  //     }
-  //     // 结果
-  //     uploadMsg(file);
-  //   },
-  // };
-
-  // 上传提示
-  function uploadMsg(file: any) {
-    if (file.status === 'done') {
-      // message.success(`${file.name} File Uploaded Successfully`);
-    } else if (file.status === 'error') {
-      message.error(`${file.name} File Upload Failed.`);
-    }
-  }
-
   // 多选选择改变值
   function onChange(checkedValues: any) {
     // 修改选择值
@@ -244,78 +136,99 @@ const Adds = (props: any) => {
     }
   }
 
-  // 表单验证
-  const onFinish = (values: any) => {
-    let { residentialZipCode } = values.des;
-    let tel = values.info.tel;
-    if (values.residentialManagerUserName.length < 2) {
-      message.error('Please Enter 2-digit Administrator Name！');
-    } else if (residentialZipCode.length < 6) {
-      message.error('Please Enter The Correct Name！');
-    } else if (tel.length != 8 && tel.length != 11) {
-      message.error('Incorrect Contact Information！');
+  // 提取pdf地址文件名出来
+  const pickUp = (list: any) => {
+    let newArr = [];
+    // 如果存在
+    if (list) {
+      //循环一次
+      for (let i in list) {
+        // 判断有没有错误
+        if (list[i].name == '' || list[i].fileList.length == 0) {
+          return '错误';
+        } else {
+          let name = list[i].name;
+          let page = list[i].fileList;
+          //再循环拼接
+          for (let v in page) {
+            name += '&' + page[v].name;
+          }
+          newArr.push(name);
+        }
+      }
+      return newArr;
     } else {
-      onUpDate(values);
+      return [];
     }
   };
 
   // 表单提交
-  function onUpDate(values: any) {
-    // 额外判断
-    let obj: any = new Object();
-
-    obj.propertyFee = PropertyFee;
+  function onFinish(values: any) {
+    let mainPdfList = pickUp(values.mainPdfList);
+    let essentialPdfList = pickUp(values.essentialPdfList);
+
+    if (mainPdfList == '错误') {
+      let a = tips;
+      a[0] = true;
+      setTips([...a]);
+      return false;
+    } else if (essentialPdfList == '错误') {
+      let b = tips;
+      b[1] = true;
+      setTips([...b]);
+      return false;
+    }
     // 小区信息;
     let { residentialZipCode, residentialAddress, residentialName } = values.des;
+    values.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
+    values.residentialAddress = residentialAddress;
+    values.residentialName = residentialName;
 
-    obj.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
-    obj.residentialAddress = residentialAddress;
-    obj.residentialName = residentialName;
+    // 支付方式
+    values.propertyFee = PropertyFee.join('');
 
     // 小区时间与管理员
-    obj.residentialManagerUserName = undeFi(values.residentialManagerUserName);
-    obj.residentialStartWorking = values.workingHours[0].format('HH:mm');
-    obj.residentialEndWorking = values.workingHours[1].format('HH:mm');
-    obj.residentialPhone = values.info.tel;
-    obj.residentialEmail = values.info.email;
+    values.residentialManagerUserName = undeFi(values.residentialManagerUserName);
+    values.residentialStartWorking = values.workingHours[0].format('HH:mm');
+    values.residentialEndWorking = values.workingHours[1].format('HH:mm');
 
     // 上传内容
-
-    obj.balouscheduleUrl = undeFi(loubaUpload.map((item: any) => item.name)[0]);
-    obj.serviceGuideUrl = undeFi(guideUpload.map((item: any) => item.name)[0]);
-    // obj.lifeServiceUrl = undeFi(periodUpload.map((item: any) => item.name)[0]);
+    values.bannerUrl = values.bannerUrl ? values.bannerUrl.join('') : null;
+    values.mainPdfList = pickUp(values.mainPdfList);
+    values.essentialPdfList = pickUp(values.essentialPdfList);
+    values.formsPdfList = pickUp(values.formsPdfList);
 
     // 小区热线
-    // 表单结构存在数据不存在情况， 所以要多判断一次
-    if (values.help) {
-      obj.residentialHotlineName = values.help.residentialHotlineName
-        ? undeFi(values.help.residentialHotlineName)
-        : 'Community Hotline';
-      obj.residentialHotline = values.help.residentialHotline
-        ? undeFi(values.help.residentialHotline)
-        : values.info.tel;
-      // 编辑的时候 为空 判断
-      if (values.help.time) {
-        obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm');
-        obj.residentialHotlineServieEndTime = undeFi(values.help.time[1]).format('HH:mm');
-      } else {
-        obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
-        obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
-      }
+    let { residentialHotline, residentialHotlineName, time } = values.help;
+
+    // 没选的话就上面小区联系人和方式
+    values.residentialHotline = residentialHotline
+      ? undeFi(residentialHotline)
+      : values.residentialPhone;
+    values.residentialHotlineName = residentialHotlineName
+      ? undeFi(residentialHotlineName)
+      : values.residentialManagerUserName;
+
+    // 没选的话就上面小区时间
+    if (time) {
+      values.residentialHotlineServieStartTime = undeFi(time[0].format('HH:mm'));
+      values.residentialHotlineServieEndTime = undeFi(time[1].format('HH:mm'));
     } else {
-      obj.residentialHotlineName = values.info.tel;
-      obj.residentialHotline = values.info.tel;
-      obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
-      obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
+      values.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
+      values.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
     }
 
+    delete values.des;
+    delete values.help;
+    delete values.workingHours;
+
     if (Data) {
-      obj.id = Data.id;
+      values.id = Data.id;
     }
+
     console.log(values);
-    console.log(obj);
     // 上传
-    RA(29, obj, 'CellList', dispatch);
+    RA(63, values, module, dispatch);
   }
 
   // 返回
@@ -323,12 +236,6 @@ const Adds = (props: any) => {
     history.go(-1);
   };
 
-  // 小区名输入监听ant
-  function insdInp(value: string) {
-    setCodeName(value);
-    return value;
-  }
-
   // 正则手机号
   const keyup_tool = (value: any) => {
     return getNumber(value.replace(/[^\d^\.]+/g, ''));
@@ -339,53 +246,68 @@ const Adds = (props: any) => {
     e.target.value = keyup_tool(e.target.value);
   };
 
-  // 上传按钮
-  const uploadButton = (
-    <div>
-      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
-      <div style={{ marginTop: 8 }}>Upload</div>
-    </div>
-  );
+  // 邮编小区名字验证
+  const checkPrice = (_: any, value: any) => {
+    //先所有禁止
+    setcodeStrat(true);
 
-  // 文件预览
-  const handlePreview = async (file: any) => {
-    if (file.url == 'Transfer') {
-      // 这是编辑的预览， 需要发送一个请求
-      let msg = {
-        // userToken: '',
-        // type: ans.substr(ans.lastIndexOf('.') + 1),
-        type: 'tosCommunityFileService',
-        fileName: file.name,
-        extends: Data.residentialName,
-      };
-      RA(47, msg, module, dispatch);
-    } else {
-      setpreviewImage(file);
-      setpreviewVisible(true);
+    if (!value) {
+      return Promise.reject('Please fill in the basic information !');
     }
-  };
+    if (!value.residentialZipCode || value.residentialZipCode.trim() == '') {
+      return Promise.reject('Please enter the postcode !');
+    } else if (value.residentialZipCode.length < 6 || !/^\d+$/.test(value.residentialZipCode)) {
+      return Promise.reject('Wrong zip code !');
+    } else if (
+      !value.residentialAddress ||
+      value.residentialAddress.trim() == '' ||
+      value.residentialAddress.length < 2
+    ) {
+      return Promise.reject('Please enter the address of the community !');
+    } else if (!value.residentialName || value.residentialName.trim() == '') {
+      return Promise.reject('Please enter the community name !');
+    } else {
+      // 设置下方可选再打开禁止
+      setcodeStrat(false);
 
-  // 点击移除图片
-  const handRemove = (key: any) => {
-    key == 1 ? setLouba([]) : key == 2 ? setGuide([]) : setPeriod([]);
+      return Promise.resolve();
+    }
   };
 
-  // 点击遮罩回调
-  const handleCancel = () => {
-    setpreviewVisible(false);
-    // 每次关闭预览都要清掉弹窗图片信息   -- 防止编辑打开页面直接弹出窗口
-    setpreviewImage({});
-    dispatch({ type: module + '/urlRemove' });
+  //表单字段更新
+  const onValuesChange = (v: any) => {
+    // console.log(v);
+    if (
+      (v.hasOwnProperty('mainPdfList') &&
+        v.mainPdfList.length > 0 &&
+        v.mainPdfList[0].fileList.length > 0) ||
+      (v.hasOwnProperty('essentialPdfList') &&
+        v.essentialPdfList.length > 0 &&
+        v.essentialPdfList[0].fileList.length > 0) ||
+      (v.hasOwnProperty('formsPdfList') &&
+        v.formsPdfList.length > 0 &&
+        v.formsPdfList[0].fileList.length > 0) ||
+      (v.hasOwnProperty('bannerUrl') && v.bannerUrl.length > 0)
+    ) {
+      // console.log('上传了附件');
+      setInfo(true);
+    }
   };
 
-  // pdf 总页数
-  const onDocumentLoadSuccess = (pages: any) => {
-    setNumPages(pages);
+  // 小区名称离开验证
+  const LoseFocus = (v: any) => {
+    // 判断鼠标离开是不是跟上次储存的小区名是否一致
+    if (v == codename) {
+      // console.log('一致的');
+    } else {
+      // console.log('不一致的');
+      setCodeName(v);
+    }
   };
 
-  // 切换pdf 总数
-  const onChangePage = (page: any) => {
-    setPageNumber(page);
+  // 第三个上传切换
+  const switchs = () => {
+    setForms(!forms);
   };
 
   return (
@@ -410,50 +332,29 @@ const Adds = (props: any) => {
             layout="horizontal"
             labelAlign="left"
             scrollToFirstError={true}
+            onValuesChange={onValuesChange}
           >
+            {/* 小区邮编、地址和名称 */}
             <Form.Item
-              label="Community Name"
               name="des"
-              rules={[{ required: false }]}
+              label="Community Name"
+              rules={[{ validator: checkPrice }]}
+              style={{ marginBottom: 15 }}
               className="must"
             >
-              <Input.Group compact>
-                <Form.Item name={['des', 'residentialZipCode']} noStyle rules={village[0] as any}>
-                  <Input
-                    style={{ marginRight: '10px', width: 120 }}
-                    placeholder="6 Postcode"
-                    maxLength={6}
-                    onKeyUp={keyup_communityManagerFee}
-                  />
-                </Form.Item>
-
-                <Form.Item name={['des', 'residentialAddress']} noStyle rules={village[1] as any}>
-                  <Input
-                    style={{ width: '360px' }}
-                    placeholder="Please enter community adds"
-                    disabled={codeStrat}
-                  />
-                </Form.Item>
-
-                <div className="li">
-                  <Form.Item
-                    name={['des', 'residentialName']}
-                    normalize={insdInp}
-                    noStyle
-                    rules={village[2] as any}
-                  >
-                    <Input
-                      style={{ marginRight: '10px', width: '260px' }}
-                      placeholder="Please enter community name"
-                      disabled={codeStrat}
-                    />
-                  </Form.Item>
-                  {/* 不可修改提示 */}
-                  <span className="redFs">{tipMain}</span>
-                </div>
-              </Input.Group>
+              <Facilities
+                disabled={info}
+                LoseFocus={(v: any) => {
+                  LoseFocus(v);
+                }}
+                defaultvalue={
+                  Data && detailData && Data && detailData.communityData
+                    ? detailData.communityData
+                    : null
+                }
+              />
             </Form.Item>
-
+            {/* 小区时间 */}
             <Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}>
               <RangePicker
                 minuteStep={60}
@@ -461,40 +362,32 @@ const Adds = (props: any) => {
                 placeholder={['Start Time', 'End Time']}
               />
             </Form.Item>
-
+            {/* 小区联系方式 */}
             <Form.Item
+              name="residentialPhone"
               label="Community Telephone"
-              name="info"
-              rules={[{ required: false }]}
-              className="must"
+              rules={village[4] as any}
             >
-              <Input.Group compact>
-                <Form.Item name={['info', 'tel']} noStyle rules={village[4] as any}>
-                  <Input
-                    style={{ marginRight: '10px', width: '160px' }}
-                    placeholder="Please enter phone"
-                    maxLength={11}
-                    onKeyUp={keyup_communityManagerFee}
-                  />
-                </Form.Item>
-                <Button type="text">-</Button>
-                <Form.Item name={['info', 'email']} noStyle rules={village[5] as any}>
-                  <Input
-                    style={{ marginLeft: '10px', width: '180px' }}
-                    placeholder="Please enter email"
-                  />
-                </Form.Item>
-              </Input.Group>
+              <Input
+                style={{ marginRight: '10px', width: '240px' }}
+                placeholder="Please enter phone"
+                maxLength={11}
+                onKeyUp={keyup_communityManagerFee}
+              />
             </Form.Item>
-
+            {/* 小区邮箱 */}
+            <Form.Item name="residentialEmail" label="Community Mailbox" rules={village[5] as any}>
+              <Input style={{ width: '240px' }} placeholder="Please enter email" />
+            </Form.Item>
+            {/* 小区管理员 */}
             <Form.Item
               label="Administrator"
               name="residentialManagerUserName"
               rules={village[6] as any}
             >
-              <Input style={{ width: '160px' }} placeholder="Name" maxLength={30} />
+              <Input style={{ width: '240px' }} placeholder="Please enter name" maxLength={30} />
             </Form.Item>
-
+            {/* 小区缴费方式 */}
             <Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
               <Checkbox onChange={onChange} disabled>
                 Online Payment
@@ -503,80 +396,121 @@ const Adds = (props: any) => {
                 Offline Payment
               </Checkbox>
             </Form.Item>
-
             <hr />
-            {/*  上传部分 */}
-
+            {/*  banner上传部分 */}
             <Form.Item
-              label="Shuttle Bus Timetable"
-              name="balouscheduleFile"
-              style={{ marginBottom: '0', minHeight: 159 }}
+              name={'bannerUrl'}
+              label="Banner:"
+              colon={false}
+              style={{
+                marginBottom: 8,
+              }}
             >
-              <Upload
-                {...uploads}
-                {...upload1}
-                fileList={loubaUpload}
-                beforeUpload={beforeUpload}
-                listType="picture-card"
-                disabled={codename == '' ? true : false}
-                onPreview={() => handlePreview(loubaUpload[0])} // 预览
-                onRemove={() => handRemove(1)} //移除
-              >
-                {loubaUpload.length >= 1 ? null : uploadButton}
-              </Upload>
-              <div className="tip">
-                <span>Support Files：.jpg, .png, .pdf</span>
-              </div>
+              <PictureOptionsRow
+                action="/tos/image/upload"
+                data={{
+                  imageType: 'communityBannerImage',
+                  extends: codename,
+                }}
+                limitNums={1}
+                CommunityValue={Data && detailData && detailData.banner ? detailData.banner : null}
+                // imgs={ImageSrc}
+                // disabled={codeStrat}
+              />
             </Form.Item>
-
-            {/*  上传部分 */}
+            {/* 第一个上传 */}
             <Form.Item
-              label="Property Guide"
-              name="serviceGuideFile"
-              style={{ marginBottom: '0', minHeight: 159 }}
+              name={'mainPdfList'}
+              label="Maintenance Schedule:"
+              colon={false}
+              style={{
+                marginBottom: tips[0] ? 4 : 14,
+              }}
             >
-              <Upload
-                {...uploads}
-                {...upload2}
-                fileList={guideUpload}
-                beforeUpload={beforeUpload}
-                listType="picture-card"
-                disabled={codename == '' ? true : false}
-                onPreview={() => handlePreview(guideUpload[0])} // 预览
-                onRemove={() => handRemove(2)} //移除
-              >
-                {guideUpload.length >= 1 ? null : uploadButton}
-              </Upload>
-              <div className="tip">
-                <span>Support Files：.jpg, .png, .pdf</span>
-              </div>
+              <PdfUpload
+                action="/tos/community/pdf/upload"
+                data={{
+                  type: 'tosCommunityPdf',
+                  extends: codename,
+                }}
+                disabled={codeStrat}
+                detailvalue={
+                  Data && detailData && detailData.communityMainPdfList
+                    ? detailData.communityMainPdfList
+                    : null
+                }
+              ></PdfUpload>
             </Form.Item>
-
-            {/*  上传部分 */}
-            {/* <Form.Item
-              label="Warranty Period Service"
-              name="lifeServiceFile"
-              style={{ marginBottom: '0', minHeight: 159 }}
+            {tips[0] ? (
+              <p style={{ margin: '6px 0 10px 160px', color: '#f00' }}>
+                Please complete or delete the incomplete part !
+              </p>
+            ) : (
+              ''
+            )}
+            {/* 第二个上传 */}
+            <Form.Item
+              name={'essentialPdfList'}
+              label="Essential Information:"
+              colon={false}
+              style={{
+                marginBottom: tips[1] ? 4 : 14,
+              }}
             >
-              <Upload
-                {...uploads}
-                {...upload3}
-                fileList={periodUpload}
-                beforeUpload={beforeUpload}
-                listType="picture-card"
-                disabled={codename == '' ? true : false}
-                onPreview={() => handlePreview(periodUpload[0])} // 预览
-                onRemove={() => handRemove(3)} //移除
-              >
-                {periodUpload.length >= 1 ? null : uploadButton}
-              </Upload>
-              <div className="tip">
-                <span>Support Files：.jpg, .png, .pdf</span>
-              </div>
-            </Form.Item> */}
-
+              <PdfUpload
+                action="/tos/community/pdf/upload"
+                data={{
+                  type: 'tosCommunityPdf',
+                  extends: codename,
+                }}
+                disabled={codeStrat}
+                detailvalue={
+                  Data && detailData && detailData.communityEssentialPdfList
+                    ? detailData.communityEssentialPdfList
+                    : null
+                }
+              ></PdfUpload>
+            </Form.Item>{' '}
+            {tips[1] ? (
+              <p style={{ margin: '6px 0 10px 160px', color: '#f00' }}>
+                Please complete or delete the incomplete part !
+              </p>
+            ) : (
+              ''
+            )}
+            {/* 第三个上传 */}
+            <div className="formBox">
+              {forms ? (
+                <div className="pdfform">
+                  <p style={{ marginBottom: 6 }}>Form</p>
+                  <Form.Item
+                    name={'formsPdfList'}
+                    label=""
+                    colon={false}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <PdfUpload
+                      action="/tos/community/pdf/upload"
+                      data={{
+                        type: 'tosCommunityPdf',
+                        extends: codename,
+                      }}
+                      disabled={codeStrat}
+                      detailvalue={
+                        Data && detailData && detailData.communityFormsPdfList
+                          ? detailData.communityFormsPdfList
+                          : null
+                      }
+                    ></PdfUpload>
+                  </Form.Item>
+                </div>
+              ) : (
+                <div className="acitves">
+                  <Button onClick={switchs}>Form</Button>
+                </div>
+              )}
+            </div>
             <hr />
-
             {/* 帮助中心 */}
             <Form.Item label="Help Center" name="help">
               <Input.Group compact>
@@ -596,7 +530,6 @@ const Adds = (props: any) => {
                 </Form.Item>
               </Input.Group>
             </Form.Item>
-
             <hr />
             {/* 提交 */}
             <Form.Item label="" colon={false}>
@@ -606,49 +539,6 @@ const Adds = (props: any) => {
             </Form.Item>
           </Form>
         </div>
-
-        {/* 附件预览 */}
-        <Modal
-          title={previewImage != null ? previewImage.name : 'File Preview'}
-          visible={previewVisible}
-          width={800}
-          onCancel={handleCancel}
-          style={{ textAlign: 'center' }}
-          footer={null}
-        >
-          {previewImage != null ? (
-            previewImage.type == 'pdf' ? (
-              // pdf 换一种
-              <>
-                <PDF
-                  file={previewImage.url}
-                  page={pageNumber}
-                  scale={1.25}
-                  onDocumentComplete={onDocumentLoadSuccess}
-                />
-                <Pagination
-                  style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
-                  simple
-                  defaultCurrent={pageNumber}
-                  total={numPages * 10}
-                  onChange={onChangePage}
-                />
-              </>
-            ) : previewImage.type == 'jpg' || previewImage.type == 'png' ? (
-              // 图片用指定格式
-
-              <Image
-                src={previewImage.url}
-                preview={false}
-                style={{ margin: '0 auto', textAlign: 'center' }}
-              />
-            ) : (
-              <FileViewer fileType={previewImage.type} filePath={previewImage.url} />
-            )
-          ) : (
-            ''
-          )}
-        </Modal>
       </Spin>
     </>
   );
@@ -657,10 +547,9 @@ const Adds = (props: any) => {
 // export default Adds;
 function map(state: any) {
   // console.log(state);
-
   const Data = state.CellList.DataSave;
-  const { imgUrl, Result } = state.CellList;
+  const { imgUrl, Result, detailData } = state.CellList;
   const loading = state.loading.models.CellList ? state.loading.models.CellList : false;
-  return { Data, loading, Result, imgUrl };
+  return { Data, loading, Result, imgUrl, detailData };
 }
 export default connect(map)(Adds);

src/pages/CommunityManagement/CellList/Adds2.tsx → src/pages/CommunityManagement/CellList/Adds3.tsx

@@ -8,6 +8,7 @@ import {
   Button,
   TimePicker,
   Checkbox,
+  Upload,
   message,
   Spin,
   Modal,
@@ -22,9 +23,8 @@ import { village } from '@/utils/tip';
 import moment from 'moment';
 import { getNumber } from '@/utils/string'; // 正则
 
-import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow'; // banner 上传
-import Facilities from '@/components/Form/ZipCode'; // 小区邮编地址名称
-import PdfUpload from '@/components/Form/PdfUpload'; // 多图上传
+import FileViewer from 'react-file-viewer';
+import PDF from 'react-pdf-js';
 
 const { RangePicker } = TimePicker;
 
@@ -37,22 +37,23 @@ const Adds = (props: any) => {
 
   const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值
 
-  // 监听用户填写小区名   以及后续禁止输入  提示信息
-  const [codename, setCodeName] = useState(null);
-
-  const [tips, setTips] = useState([false, false, false]); // 三个自定义上传的提示
+  const [loubaUpload, setLouba] = useState([] as any); // 楼巴上传列表
+  const [guideUpload, setGuide] = useState([] as any); // 物业办事指南列表
+  const [periodUpload, setPeriod] = useState([] as any); // 保质期服务列表
 
-  // const [codeStrat, setcodeStrat] = useState(false);
-  // const [tipMain, setTipMain] = useState('');
+  // 监听用户填写小区名   以及后续禁止输入  提示信息
+  const [codename, setCodeName] = useState('');
+  const [codeStrat, setcodeStrat] = useState(false);
+  const [tipMain, setTipMain] = useState('');
 
-  // const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏
-  // const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息
+  const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏
+  const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息
 
-  // //pdf 页码内容
-  // const [numPages, setNumPages] = useState(1 as any); // 总页码数
-  // const [pageNumber, setPageNumber] = useState(1); // 当前页码数
+  //pdf 页码内容
+  const [numPages, setNumPages] = useState(1 as any); // 总页码数
+  const [pageNumber, setPageNumber] = useState(1); // 当前页码数
 
-  // const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
+  const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
 
   // 赋值
   useEffect(() => {
@@ -89,13 +90,13 @@ const Adds = (props: any) => {
         },
       });
       // 上传
-      // setLouba(Data.balouscheduleUrl ? [backUpload(Data.balouscheduleUrl, Data.id)] : []);
-      // setGuide(Data.serviceGuideUrl ? [backUpload(Data.serviceGuideUrl, Data.id)] : []);
+      setLouba(Data.balouscheduleUrl ? [backUpload(Data.balouscheduleUrl, Data.id)] : []);
+      setGuide(Data.serviceGuideUrl ? [backUpload(Data.serviceGuideUrl, Data.id)] : []);
       // setPeriod(Data.lifeServiceUrl ? [backUpload(Data.lifeServiceUrl, Data.id)] : []);
       // 小区名 -- 上传需要
       setCodeName(Data.residentialName);
-      // setcodeStrat(true);
-      // setTipMain('Binding Content Already Exists, Cannot Be Modified！');
+      setcodeStrat(true);
+      setTipMain('Binding Content Already Exists, Cannot Be Modified！');
     } else {
       // console.log('新建');
     }
@@ -130,6 +131,104 @@ const Adds = (props: any) => {
     }
   }, [imgUrl]);
 
+  // 编辑  返回上传格式 和 地址
+  function backUpload(str: any, index: number, url?: any) {
+    let a = {
+      uid: str + index,
+      name: str,
+      status: 'done',
+      type: str.match(/\.([^\.]+)$/)[1].toLowerCase(),
+      url: 'Transfer', // 需要调取接口
+    };
+    return a;
+  }
+
+  // 上传设置
+  const uploads = {
+    name: 'file',
+    accept: '.jpg,.png,.pdf',
+    action: '/tos/image/upload',
+    data: { imageType: 'tosCreateCommunity', extends: codename },
+  };
+
+  // 文件上传判断
+  function beforeUpload(file: any) {
+    // 文件大小判断
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('File must be less than or equal to 2MB!');
+    }
+    return isLt2M;
+  }
+
+  // 上传返回格式
+  function BackFormat(name: any, url: any) {
+    let imgs = [
+      {
+        uid: '-1',
+        name: name,
+        status: 'done',
+        type: name.match(/\.([^\.]+)$/)[1].toLowerCase(),
+        url: url,
+      },
+    ];
+    return imgs;
+  }
+
+  // 楼巴上传
+  const upload1 = {
+    onChange({ file }: any) {
+      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
+      if (file.status === 'done') {
+        let data = file.response.data;
+        setLouba(BackFormat(data.imageName, data.url));
+        setcodeStrat(true);
+        setTipMain('Binding Content Already Exists, Cannot Be Modified！');
+      }
+      // 结果
+      uploadMsg(file);
+    },
+  };
+
+  // 指南上传
+  const upload2 = {
+    onChange({ file, fileList }: any) {
+      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
+      if (file.status === 'done') {
+        let data = file.response.data;
+        setGuide(BackFormat(data.imageName, data.url));
+        setcodeStrat(true);
+        setTipMain('Binding Content Already Exists, Cannot Be Modified！');
+      }
+      // 结果
+      uploadMsg(file);
+    },
+  };
+
+  // 保质期上传
+  // const upload3 = {
+  //   onChange({ file }: any) {
+  //     file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
+  //     if (file.status === 'done') {
+  //       let data = file.response.data;
+  //       setPeriod(BackFormat(data.imageName, data.url));
+  //       setcodeStrat(true);
+  //       setTipMain('Binding Content Already Exists, Cannot Be Modified！');
+  //     }
+  //     // 结果
+  //     uploadMsg(file);
+  //   },
+  // };
+
+  // 上传提示
+  function uploadMsg(file: any) {
+    if (file.status === 'done') {
+      // message.success(`${file.name} File Uploaded Successfully`);
+    } else if (file.status === 'error') {
+      message.error(`${file.name} File Upload Failed.`);
+    }
+  }
+
   // 多选选择改变值
   function onChange(checkedValues: any) {
     // 修改选择值
@@ -145,98 +244,78 @@ const Adds = (props: any) => {
     }
   }
 
-  // 提取pdf地址文件名出来
-  const pickUp = (list: any) => {
-    let newArr = [];
-    // 如果存在
-    if (list) {
-      //循环一次
-      for (let i in list) {
-        // 判断有没有错误
-        if (list[i].name == '' || list[i].fileList.length == 0) {
-          return '错误';
-        } else {
-          let name = list[i].name;
-          let page = list[i].fileList;
-          //再循环拼接
-          for (let v in page) {
-            name += '&' + page[v].name;
-          }
-          newArr.push(name);
-        }
-      }
-      return newArr;
+  // 表单验证
+  const onFinish = (values: any) => {
+    let { residentialZipCode } = values.des;
+    let tel = values.info.tel;
+    if (values.residentialManagerUserName.length < 2) {
+      message.error('Please Enter 2-digit Administrator Name！');
+    } else if (residentialZipCode.length < 6) {
+      message.error('Please Enter The Correct Name！');
+    } else if (tel.length != 8 && tel.length != 11) {
+      message.error('Incorrect Contact Information！');
     } else {
-      return null;
+      onUpDate(values);
     }
   };
 
   // 表单提交
-  function onFinish(values: any) {
-    let mainPdfList = pickUp(values.mainPdfList);
-    let essentialPdfList = pickUp(values.essentialPdfList);
-
-    if (mainPdfList == '错误') {
-      let a = tips;
-      a[0] = true;
-      setTips([...a]);
-      return false;
-    } else if (essentialPdfList == '错误') {
-      let b = tips;
-      b[1] = true;
-      setTips([...b]);
-      return false;
-    }
+  function onUpDate(values: any) {
+    // 额外判断
+    let obj: any = new Object();
+
+    obj.propertyFee = PropertyFee;
     // 小区信息;
     let { residentialZipCode, residentialAddress, residentialName } = values.des;
-    values.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
-    values.residentialAddress = residentialAddress;
-    values.residentialName = residentialName;
 
-    // 支付方式
-    values.propertyFee = PropertyFee.join('');
+    obj.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
+    obj.residentialAddress = residentialAddress;
+    obj.residentialName = residentialName;
 
     // 小区时间与管理员
-    values.residentialManagerUserName = undeFi(values.residentialManagerUserName);
-    values.residentialStartWorking = values.workingHours[0].format('HH:mm');
-    values.residentialEndWorking = values.workingHours[1].format('HH:mm');
+    obj.residentialManagerUserName = undeFi(values.residentialManagerUserName);
+    obj.residentialStartWorking = values.workingHours[0].format('HH:mm');
+    obj.residentialEndWorking = values.workingHours[1].format('HH:mm');
+    obj.residentialPhone = values.info.tel;
+    obj.residentialEmail = values.info.email;
 
     // 上传内容
-    values.bannerUrl = values.bannerUrl ? values.bannerUrl.join('') : null;
-    values.mainPdfList = pickUp(values.mainPdfList);
-    values.essentialPdfList = pickUp(values.essentialPdfList);
-    // values.formsPdfList = pickUp(values.formsPdfList);
+
+    obj.balouscheduleUrl = undeFi(loubaUpload.map((item: any) => item.name)[0]);
+    obj.serviceGuideUrl = undeFi(guideUpload.map((item: any) => item.name)[0]);
+    // obj.lifeServiceUrl = undeFi(periodUpload.map((item: any) => item.name)[0]);
 
     // 小区热线
-    let { residentialHotline, residentialHotlineName, time } = values.help;
-
-    // 没选的话就上面小区联系人和方式
-    values.residentialHotline = residentialHotline
-      ? undeFi(residentialHotline)
-      : values.residentialPhone;
-    values.residentialHotlineName = residentialHotlineName
-      ? undeFi(residentialHotlineName)
-      : values.residentialManagerUserName;
-
-    // 没选的话就上面小区时间
-    if (time) {
-      values.residentialHotlineServieStartTime = undeFi(time[0].format('HH:mm'));
-      values.residentialHotlineServieEndTime = undeFi(time[1].format('HH:mm'));
+    // 表单结构存在数据不存在情况， 所以要多判断一次
+    if (values.help) {
+      obj.residentialHotlineName = values.help.residentialHotlineName
+        ? undeFi(values.help.residentialHotlineName)
+        : 'Community Hotline';
+      obj.residentialHotline = values.help.residentialHotline
+        ? undeFi(values.help.residentialHotline)
+        : values.info.tel;
+      // 编辑的时候 为空 判断
+      if (values.help.time) {
+        obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm');
+        obj.residentialHotlineServieEndTime = undeFi(values.help.time[1]).format('HH:mm');
+      } else {
+        obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
+        obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
+      }
     } else {
-      values.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
-      values.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
+      obj.residentialHotlineName = values.info.tel;
+      obj.residentialHotline = values.info.tel;
+      obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
+      obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
     }
 
-    delete values.des;
-    delete values.help;
-    delete values.workingHours;
-
     if (Data) {
-      values.id = Data.id;
+      obj.id = Data.id;
     }
     console.log(values);
+    console.log(obj);
     // 上传
-    RA(63, values, 'CellList', dispatch);
+    RA(29, obj, 'CellList', dispatch);
   }
 
   // 返回
@@ -244,11 +323,10 @@ const Adds = (props: any) => {
     history.go(-1);
   };
 
-  // 小区名输入监听赋值
-  function insdInp(value: any) {
-    if (value.trim() != '') {
-      setCodeName(value);
-    }
+  // 小区名输入监听ant
+  function insdInp(value: string) {
+    setCodeName(value);
+    return value;
   }
 
   // 正则手机号
@@ -261,28 +339,55 @@ const Adds = (props: any) => {
     e.target.value = keyup_tool(e.target.value);
   };
 
-  // 邮编小区名字验证
-  const checkPrice = (_: any, value: any) => {
-    if (!value) {
-      return Promise.reject('Please fill in the basic information !');
-    }
-    if (!value.residentialZipCode || value.residentialZipCode.trim() == '') {
-      return Promise.reject('Please enter the postcode !');
-    } else if (value.residentialZipCode.length < 6 || !/^\d+$/.test(value.residentialZipCode)) {
-      return Promise.reject('Wrong zip code !');
-    } else if (
-      !value.residentialAddress ||
-      value.residentialAddress.trim() == '' ||
-      value.residentialAddress.length < 2
-    ) {
-      return Promise.reject('Please enter the address of the community !');
-    } else if (!value.residentialName || value.residentialName.trim() == '') {
-      return Promise.reject('Please enter the community name !');
+  // 上传按钮
+  const uploadButton = (
+    <div>
+      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
+
+  // 文件预览
+  const handlePreview = async (file: any) => {
+    if (file.url == 'Transfer') {
+      // 这是编辑的预览， 需要发送一个请求
+      let msg = {
+        // userToken: '',
+        // type: ans.substr(ans.lastIndexOf('.') + 1),
+        type: 'tosCommunityFileService',
+        fileName: file.name,
+        extends: Data.residentialName,
+      };
+      RA(47, msg, module, dispatch);
     } else {
-      return Promise.resolve();
+      setpreviewImage(file);
+      setpreviewVisible(true);
     }
   };
 
+  // 点击移除图片
+  const handRemove = (key: any) => {
+    key == 1 ? setLouba([]) : key == 2 ? setGuide([]) : setPeriod([]);
+  };
+
+  // 点击遮罩回调
+  const handleCancel = () => {
+    setpreviewVisible(false);
+    // 每次关闭预览都要清掉弹窗图片信息   -- 防止编辑打开页面直接弹出窗口
+    setpreviewImage({});
+    dispatch({ type: module + '/urlRemove' });
+  };
+
+  // pdf 总页数
+  const onDocumentLoadSuccess = (pages: any) => {
+    setNumPages(pages);
+  };
+
+  // 切换pdf 总数
+  const onChangePage = (page: any) => {
+    setPageNumber(page);
+  };
+
   return (
     <>
       <Spin spinning={loading} tip="loading..." size="large">
@@ -306,21 +411,49 @@ const Adds = (props: any) => {
             labelAlign="left"
             scrollToFirstError={true}
           >
-            {/* 小区邮编、地址和名称 */}
             <Form.Item
-              name="des"
               label="Community Name"
-              rules={[{ validator: checkPrice }]}
-              style={{ marginBottom: 15 }}
+              name="des"
+              rules={[{ required: false }]}
               className="must"
             >
-              <Facilities
-                insdInps={(value: any) => {
-                  insdInp(value);
-                }}
-              />
+              <Input.Group compact>
+                <Form.Item name={['des', 'residentialZipCode']} noStyle rules={village[0] as any}>
+                  <Input
+                    style={{ marginRight: '10px', width: 120 }}
+                    placeholder="6 Postcode"
+                    maxLength={6}
+                    onKeyUp={keyup_communityManagerFee}
+                  />
+                </Form.Item>
+
+                <Form.Item name={['des', 'residentialAddress']} noStyle rules={village[1] as any}>
+                  <Input
+                    style={{ width: '360px' }}
+                    placeholder="Please enter community adds"
+                    disabled={codeStrat}
+                  />
+                </Form.Item>
+
+                <div className="li">
+                  <Form.Item
+                    name={['des', 'residentialName']}
+                    normalize={insdInp}
+                    noStyle
+                    rules={village[2] as any}
+                  >
+                    <Input
+                      style={{ marginRight: '10px', width: '260px' }}
+                      placeholder="Please enter community name"
+                      disabled={codeStrat}
+                    />
+                  </Form.Item>
+                  {/* 不可修改提示 */}
+                  <span className="redFs">{tipMain}</span>
+                </div>
+              </Input.Group>
             </Form.Item>
-            {/* 小区时间 */}
+
             <Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}>
               <RangePicker
                 minuteStep={60}
@@ -328,32 +461,40 @@ const Adds = (props: any) => {
                 placeholder={['Start Time', 'End Time']}
               />
             </Form.Item>
-            {/* 小区联系方式 */}
+
             <Form.Item
-              name="residentialPhone"
               label="Community Telephone"
-              rules={village[4] as any}
+              name="info"
+              rules={[{ required: false }]}
+              className="must"
             >
-              <Input
-                style={{ marginRight: '10px', width: '240px' }}
-                placeholder="Please enter phone"
-                maxLength={11}
-                onKeyUp={keyup_communityManagerFee}
-              />
-            </Form.Item>
-            {/* 小区邮箱 */}
-            <Form.Item name="residentialEmail" label="Community Mailbox" rules={village[5] as any}>
-              <Input style={{ width: '240px' }} placeholder="Please enter email" />
+              <Input.Group compact>
+                <Form.Item name={['info', 'tel']} noStyle rules={village[4] as any}>
+                  <Input
+                    style={{ marginRight: '10px', width: '160px' }}
+                    placeholder="Please enter phone"
+                    maxLength={11}
+                    onKeyUp={keyup_communityManagerFee}
+                  />
+                </Form.Item>
+                <Button type="text">-</Button>
+                <Form.Item name={['info', 'email']} noStyle rules={village[5] as any}>
+                  <Input
+                    style={{ marginLeft: '10px', width: '180px' }}
+                    placeholder="Please enter email"
+                  />
+                </Form.Item>
+              </Input.Group>
             </Form.Item>
-            {/* 小区管理员 */}
+
             <Form.Item
               label="Administrator"
               name="residentialManagerUserName"
               rules={village[6] as any}
             >
-              <Input style={{ width: '240px' }} placeholder="Please enter name" maxLength={30} />
+              <Input style={{ width: '160px' }} placeholder="Name" maxLength={30} />
             </Form.Item>
-            {/* 小区缴费方式 */}
+
             <Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
               <Checkbox onChange={onChange} disabled>
                 Online Payment
@@ -362,75 +503,80 @@ const Adds = (props: any) => {
                 Offline Payment
               </Checkbox>
             </Form.Item>
+
             <hr />
-            {/*  banner上传部分 */}
+            {/*  上传部分 */}
+
             <Form.Item
-              name={'bannerUrl'}
-              label="Banner:"
-              colon={false}
-              style={{
-                marginBottom: 8,
-              }}
+              label="Shuttle Bus Timetable"
+              name="balouscheduleFile"
+              style={{ marginBottom: '0', minHeight: 159 }}
             >
-              <PictureOptionsRow
-                action="/tos/image/upload"
-                data={{
-                  imageType: 'communityBannerImage',
-                  // extends: codename,
-                }}
-                limitNums={1}
-                // imgs={ImageSrc}
-              />
+              <Upload
+                {...uploads}
+                {...upload1}
+                fileList={loubaUpload}
+                beforeUpload={beforeUpload}
+                listType="picture-card"
+                disabled={codename == '' ? true : false}
+                onPreview={() => handlePreview(loubaUpload[0])} // 预览
+                onRemove={() => handRemove(1)} //移除
+              >
+                {loubaUpload.length >= 1 ? null : uploadButton}
+              </Upload>
+              <div className="tip">
+                <span>Support Files：.jpg, .png, .pdf</span>
+              </div>
             </Form.Item>
-            {/* 第一个上传 */}
+
+            {/*  上传部分 */}
             <Form.Item
-              name={'mainPdfList'}
-              label="Maintenance Schedule:"
-              colon={false}
-              style={{
-                marginBottom: tips[0] ? 4 : 14,
-              }}
+              label="Property Guide"
+              name="serviceGuideFile"
+              style={{ marginBottom: '0', minHeight: 159 }}
             >
-              <PdfUpload
-                action="/tos/community/pdf/upload"
-                data={{
-                  type: 'tosCommunityPdf',
-                  extends: codename,
-                }}
-              ></PdfUpload>
+              <Upload
+                {...uploads}
+                {...upload2}
+                fileList={guideUpload}
+                beforeUpload={beforeUpload}
+                listType="picture-card"
+                disabled={codename == '' ? true : false}
+                onPreview={() => handlePreview(guideUpload[0])} // 预览
+                onRemove={() => handRemove(2)} //移除
+              >
+                {guideUpload.length >= 1 ? null : uploadButton}
+              </Upload>
+              <div className="tip">
+                <span>Support Files：.jpg, .png, .pdf</span>
+              </div>
             </Form.Item>
-            {tips[0] ? (
-              <p style={{ margin: '6px 0 10px 160px', color: '#f00' }}>
-                Please complete or delete the incomplete part !
-              </p>
-            ) : (
-              ''
-            )}
-            {/* 第二个上传 */}
-            <Form.Item
-              name={'essentialPdfList'}
-              label=" Essential Information:"
-              colon={false}
-              style={{
-                marginBottom: tips[1] ? 4 : 14,
-              }}
+
+            {/*  上传部分 */}
+            {/* <Form.Item
+              label="Warranty Period Service"
+              name="lifeServiceFile"
+              style={{ marginBottom: '0', minHeight: 159 }}
             >
-              <PdfUpload
-                action="/tos/community/pdf/upload"
-                data={{
-                  type: 'tosCommunityPdf',
-                  extends: codename,
-                }}
-              ></PdfUpload>
-            </Form.Item>{' '}
-            {tips[1] ? (
-              <p style={{ margin: '6px 0 10px 160px', color: '#f00' }}>
-                Please complete or delete the incomplete part !
-              </p>
-            ) : (
-              ''
-            )}
+              <Upload
+                {...uploads}
+                {...upload3}
+                fileList={periodUpload}
+                beforeUpload={beforeUpload}
+                listType="picture-card"
+                disabled={codename == '' ? true : false}
+                onPreview={() => handlePreview(periodUpload[0])} // 预览
+                onRemove={() => handRemove(3)} //移除
+              >
+                {periodUpload.length >= 1 ? null : uploadButton}
+              </Upload>
+              <div className="tip">
+                <span>Support Files：.jpg, .png, .pdf</span>
+              </div>
+            </Form.Item> */}
+
             <hr />
+
             {/* 帮助中心 */}
             <Form.Item label="Help Center" name="help">
               <Input.Group compact>
@@ -450,6 +596,7 @@ const Adds = (props: any) => {
                 </Form.Item>
               </Input.Group>
             </Form.Item>
+
             <hr />
             {/* 提交 */}
             <Form.Item label="" colon={false}>
@@ -459,6 +606,49 @@ const Adds = (props: any) => {
             </Form.Item>
           </Form>
         </div>
+
+        {/* 附件预览 */}
+        <Modal
+          title={previewImage != null ? previewImage.name : 'File Preview'}
+          visible={previewVisible}
+          width={800}
+          onCancel={handleCancel}
+          style={{ textAlign: 'center' }}
+          footer={null}
+        >
+          {previewImage != null ? (
+            previewImage.type == 'pdf' ? (
+              // pdf 换一种
+              <>
+                <PDF
+                  file={previewImage.url}
+                  page={pageNumber}
+                  scale={1.25}
+                  onDocumentComplete={onDocumentLoadSuccess}
+                />
+                <Pagination
+                  style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
+                  simple
+                  defaultCurrent={pageNumber}
+                  total={numPages * 10}
+                  onChange={onChangePage}
+                />
+              </>
+            ) : previewImage.type == 'jpg' || previewImage.type == 'png' ? (
+              // 图片用指定格式
+
+              <Image
+                src={previewImage.url}
+                preview={false}
+                style={{ margin: '0 auto', textAlign: 'center' }}
+              />
+            ) : (
+              <FileViewer fileType={previewImage.type} filePath={previewImage.url} />
+            )
+          ) : (
+            ''
+          )}
+        </Modal>
       </Spin>
     </>
   );
@@ -467,6 +657,7 @@ const Adds = (props: any) => {
 // export default Adds;
 function map(state: any) {
   // console.log(state);
+
   const Data = state.CellList.DataSave;
   const { imgUrl, Result } = state.CellList;
   const loading = state.loading.models.CellList ? state.loading.models.CellList : false;

src/pages/CommunityManagement/CellList/CellList.tsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { Space, Button, message, Pagination } from 'antd';
 import { connect, history } from 'umi';
 
-// 图标
-import { PlusOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
 
 import TitleSearch from '@/components/TitleSearch/TitleSearch';
@@ -89,8 +87,9 @@ const CellLists = (props: any) => {
   // 清除操作之前的数据
   const emptys = (data: any, url: any) => {
     dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
-    SA(data, module, dispatch);
+    dispatch({ type: module + '/delRemove' }); // 清掉之前的详情
     dispatch({ type: module + '/ResultClear' }); // 清空之前保存成功的结果
+    SA(data, module, dispatch);
     history.push(url);
   };
 
@@ -198,6 +197,7 @@ function map(state: any) {
   const loading = state.loading.models.CellList;
   const Init = state.Init;
   const { Data, curString, village } = state[module];
+  // console.log(village);
   return { Data, loading, curString, village, Init };
 }
 export default connect(map)(CellLists);

src/pages/CommunityManagement/CellList/Details.tsx

 import React, { useState, useEffect } from 'react';
 import { connect } from 'dva';
-import { LeftOutlined, EyeOutlined, PoweroffOutlined } from '@ant-design/icons';
-import { Modal, Input, Button, Spin, Checkbox, Image, message, Divider, Result } from 'antd';
+import { LeftOutlined, EyeOutlined } from '@ant-design/icons';
+import { Modal, Input, Button, Spin, Checkbox, Image, message, Divider, Result, Form } from 'antd';
 import { history } from 'umi';
 // 样式
 import './celllist.less';
 import { RA } from '@/utils/method';
 import hfor from '@/assets/h5.png';
 
-import PreView from '@/components/PreView';
+import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow'; // banner 上传
+import PdfUpload from '@/components/Form/PdfUpload'; // 多图上传
+
+// import PreView from '@/components/PreView';
 
 import Axios from 'axios';
 import fileDownload from 'js-file-download';
@@ -27,8 +30,10 @@ const Detail = (props: any) => {
   const [ModelResult, setModelResult] = useState(null as any);
 
   useEffect(() => {
+    console.log(DataSave);
     if (DataSave) {
-      RA(32, { id: DataSave.id }, module, dispatch);
+      // 32 老的接口  64 新的接口
+      RA(64, { id: DataSave.id }, module, dispatch);
     } else {
       // 返回列表
       history.push('/CommunityManagement/CellList');
@@ -36,9 +41,8 @@ const Detail = (props: any) => {
   }, [1]);
 
   useEffect(() => {
-    if (detailData == null) {
-      // 返回列表
-      history.push('/CommunityManagement/CellList');
+    if (detailData) {
+      console.log(detailData);
     }
   }, [detailData]);
 
@@ -57,7 +61,7 @@ const Detail = (props: any) => {
       setModelResult(overCom);
 
       // 在删除搜索小区
-      let a = detailData.rows.residentialName; // 当前删除小区
+      let a = detailData.communityData.residentialName; // 当前删除小区
       let c = CommunityList.filter((item: any) => item != a); // 过滤掉
       dispatch({ type: 'Init/delCommunityget', playload: { Result: c } });
 
@@ -115,7 +119,7 @@ const Detail = (props: any) => {
       // type: ans.substr(ans.lastIndexOf('.') + 1),
       type: 'tosCommunityFileService',
       fileName: ans,
-      extends: detailData.rows.residentialName,
+      extends: detailData.communityData.residentialName,
     };
     RA(47, msg, module, dispatch);
 
@@ -135,196 +139,258 @@ const Detail = (props: any) => {
     <>
       {!ModelExcel ? (
         <Spin spinning={loading}>
-          {detailData.rows ? (
-            <div className="form" style={{ width: '100%', minHeight: '20vh' }}>
-              <h3>
-                <EyeOutlined />
-                &nbsp;Community Details
-                <div className="back">
-                  <Button onClick={goToReturn}>
-                    <LeftOutlined />
-                    Back
-                  </Button>
-                </div>
-              </h3>
-
-              <Divider />
-
-              <div className="celBox">
-                {/* 激活码 */}
-                <div className="code">
-                  <li>Community Activation Code</li>
-                  <div
-                    style={{
-                      width: 122,
-                      height: 122,
-                      border: '1px solid #f0f0f0',
-                      margin: '0 auto',
-                    }}
-                  >
-                    <Image width={120} src={detailData.visitorUrl} />
-                  </div>
-                  {/* <Image width={140} src={detailData.visitorUrl} fallback={imgs} /> */}
-                  <li className="lis">{detailData.rows.cdkCode}</li>
-                </div>
-
-                {/* 详情 */}
-                <div className="list-item">
-                  <div className="item">
-                    <label>Community Name：</label>
-                    <span>{detailData.rows.residentialName}</span>
-                  </div>
-                  {/* ---------- */}
-                  <div className="item">
-                    <label>Community Address：</label>
-                    <span>
-                      {detailData.rows.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
-                      {/* 这是去掉 新加坡 英文字段 */}
-                      {detailData.rows.residentialZipCode.substring(
-                        detailData.rows.residentialZipCode.length - 6,
-                        detailData.rows.residentialZipCode.length,
-                      )}{' '}
-                    </span>
+          {detailData && detailData.communityData ? (
+            <>
+              <div className="form" style={{ width: '100%', minHeight: '20vh' }}>
+                <h3>
+                  <EyeOutlined />
+                  &nbsp;Community Details
+                  <div className="back">
+                    <Button onClick={goToReturn}>
+                      <LeftOutlined />
+                      Back
+                    </Button>
                   </div>
-                  {/* ---------- */}
-                  <div className="item">
-                    <label>Working Hours：</label>
-                    <span>
-                      {detailData.rows.residentialStartWorking} -{' '}
-                      {detailData.rows.residentialEndWorking}
-                    </span>
+                </h3>
+
+                <Divider />
+
+                <div className="celBox">
+                  {/* 激活码 */}
+                  <div className="code">
+                    <li>Community Activation Code</li>
+                    <div
+                      style={{
+                        width: 122,
+                        height: 122,
+                        border: '1px solid #f0f0f0',
+                        margin: '0 auto',
+                      }}
+                    >
+                      <Image width={120} src={detailData.visitorUrl} />
+                    </div>
+                    {/* <Image width={140} src={detailData.visitorUrl} fallback={imgs} /> */}
+                    <li className="lis">{detailData.communityData.cdkCode}</li>
                   </div>
-                  {/* ---------- */}
-                  <div className="inst">
+
+                  {/* 详情 */}
+                  <div className="list-item">
                     <div className="item">
-                      <label>Community Telephone：</label>
-                      <span>{detailData.rows.residentialPhone}</span>
+                      <label>Community Name：</label>
+                      <span>{detailData.communityData.residentialName}</span>
                     </div>
+                    {/* ---------- */}
                     <div className="item">
-                      <label>Community Email：</label>
-                      <span>{detailData.rows.residentialEmail}</span>
+                      <label>Community Address：</label>
+                      <span>
+                        {detailData.communityData.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
+                        {/* 这是去掉 新加坡 英文字段 */}
+                        {detailData.communityData.residentialZipCode.substring(
+                          detailData.communityData.residentialZipCode.length - 6,
+                          detailData.communityData.residentialZipCode.length,
+                        )}{' '}
+                      </span>
+                    </div>
+                    {/* ---------- */}
+                    <div className="item">
+                      <label>Working Hours：</label>
+                      <span>
+                        {detailData.communityData.residentialStartWorking} -{' '}
+                        {detailData.communityData.residentialEndWorking}
+                      </span>
+                    </div>
+                    {/* ---------- */}
+                    <div className="inst">
+                      <div className="item">
+                        <label>Community Telephone：</label>
+                        <span>{detailData.communityData.residentialPhone}</span>
+                      </div>
+                      <div className="item">
+                        <label>Community Email：</label>
+                        <span>{detailData.communityData.residentialEmail}</span>
+                      </div>
                     </div>
-                  </div>
 
-                  {/* ---------- */}
-                  <div className="item">
-                    <label>Administrator：</label>
-                    <span>{detailData.rows.residentialManagerUserName}</span>
-                  </div>
-                  {/* ---------- */}
-                  <div className="item" style={{ marginBottom: '0' }}>
-                    <label>Property Fee：</label>
-                    <Checkbox.Group options={plainOptions} defaultValue={['1']} />
+                    {/* ---------- */}
+                    <div className="item">
+                      <label>Administrator：</label>
+                      <span>{detailData.communityData.residentialManagerUserName}</span>
+                    </div>
+                    {/* ---------- */}
+                    <div className="item" style={{ marginBottom: '0' }}>
+                      <label>Property Fee：</label>
+                      <Checkbox.Group options={plainOptions} defaultValue={['1']} />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <Divider />
+                <Divider />
 
-              <div className="celBox">
-                <div className="list-item">
-                  <div className="item">
-                    <label>Shuttle Bus Timetable：</label>
-                    <PreView OpenUrl={detailData.rows.balouscheduleUrl}></PreView>
-                  </div>
-                  {/* ---------- */}
-                  <div className="item">
-                    <label>Property Guide：</label>
-                    <PreView OpenUrl={detailData.rows.serviceGuideUrl}></PreView>
+                {/* 上传的图片组 */}
+                <Form.Item label="Banner :" colon={false} style={{ marginBottom: 14 }}>
+                  <PictureOptionsRow
+                    action="/tos/image/upload"
+                    data={{
+                      imageType: 'communityBannerImage',
+                      // extends: codename,
+                    }}
+                    limitNums={1}
+                    CommunityValue={detailData && detailData.banner ? detailData.banner : null}
+                    // imgs={ImageSrc}
+                    // disabled={codeStrat}
+                  />
+                </Form.Item>
+
+                <Form.Item
+                  label="Maintenance Schedule :"
+                  colon={false}
+                  style={{ marginBottom: 14 }}
+                >
+                  <PdfUpload
+                    action="/tos/community/pdf/upload"
+                    data={{
+                      type: 'tosCommunityPdf',
+                      // extends: codename,
+                    }}
+                    disabled={true}
+                    detailvalue={
+                      detailData && detailData.communityMainPdfList
+                        ? detailData.communityMainPdfList
+                        : null
+                    }
+                  ></PdfUpload>
+                </Form.Item>
+
+                <Form.Item
+                  label="Essential Information :"
+                  colon={false}
+                  style={{ marginBottom: 14 }}
+                >
+                  <PdfUpload
+                    action="/tos/community/pdf/upload"
+                    data={{
+                      type: 'tosCommunityPdf',
+                      // extends: codename,
+                    }}
+                    disabled={true}
+                    detailvalue={
+                      detailData && detailData.communityEssentialPdfList
+                        ? detailData.communityEssentialPdfList
+                        : null
+                    }
+                  ></PdfUpload>
+                </Form.Item>
+
+                <div className="formBox">
+                  <div className="pdfform">
+                    <p style={{ marginBottom: 6 }}>Form</p>
+                    <Form.Item label="" colon={false} style={{ marginBottom: 0 }}>
+                      <PdfUpload
+                        action="/tos/community/pdf/upload"
+                        data={{
+                          type: 'tosCommunityPdf',
+                          // extends: codename,
+                        }}
+                        disabled={true}
+                        detailvalue={
+                          detailData && detailData.communityFormsPdfList
+                            ? detailData.communityFormsPdfList
+                            : null
+                        }
+                      ></PdfUpload>
+                    </Form.Item>
                   </div>
-                  {/* ---------- */}
-                  {/* <div className="item">
-                    <label>Warranty Period Service：</label>
-                    <PreView OpenUrl={detailData.rows.lifeServiceUrl}></PreView>
-                  </div> */}
                 </div>
-              </div>
 
-              <Divider />
-
-              <div className="celBox">
-                <div className="list-item">
-                  <div className="item item_span">
-                    <label>Help Center：</label>
-                    <span>{detailData.rows.residentialHotlineName}</span>
-                    <span>{detailData.rows.residentialHotline}</span>
-                    <span>{detailData.rows.residentialHotlineServieStartTime}</span>
-                    <span>{detailData.rows.residentialHotlineServieStartTime ? '-' : ''}</span>
-                    <span>{detailData.rows.residentialHotlineServieEndTime}</span>
+                <Divider />
+
+                <div className="celBox">
+                  <div className="list-item">
+                    <div className="item item_span">
+                      <label>Help Center：</label>
+                      <span>{detailData.communityData.residentialHotlineName}</span>
+                      <span>{detailData.communityData.residentialHotline}</span>
+                      <span>{detailData.communityData.residentialHotlineServieStartTime}</span>
+                      <span>
+                        {detailData.communityData.residentialHotlineServieStartTime ? '-' : ''}
+                      </span>
+                      <span>{detailData.communityData.residentialHotlineServieEndTime}</span>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <Divider />
+                <Divider />
 
-              <div className="celBox">
-                <div className="list-item">
-                  <div className="item">
-                    <label>Temporary Code：</label>
-                    <Image width={64} src={hfor} />
-                    <Button
-                      type="link"
-                      onClick={() => {
-                        openDows(require('@/assets/h5.png'), 'code.png');
-                      }}
-                    >
-                      Download
-                    </Button>
+                <div className="celBox">
+                  <div className="list-item">
+                    <div className="item">
+                      <label>Temporary Code：</label>
+                      <Image width={64} src={hfor} />
+                      <Button
+                        type="link"
+                        onClick={() => {
+                          openDows(require('@/assets/h5.png'), 'code.png');
+                        }}
+                      >
+                        Download
+                      </Button>
+
+                      <Input
+                        placeholder="Basic usage"
+                        disabled
+                        style={{ width: '280px' }}
+                        value="http://47.74.233.180:8651/tosVisitorNo"
+                      />
+                      <Button
+                        type="link"
+                        onClick={() => {
+                          copy('http://47.74.233.180:8651/tosVisitorNo');
+                        }}
+                      >
+                        Copy
+                      </Button>
+                    </div>
+                  </div>
+                </div>
 
-                    <Input
-                      placeholder="Basic usage"
-                      disabled
-                      style={{ width: '280px' }}
-                      value="http://47.74.233.180:8651/tosVisitorNo"
-                    />
+                {user && user.currentUser.permission.includes('47') ? (
+                  <div>
+                    <Divider />
                     <Button
-                      type="link"
-                      onClick={() => {
-                        copy('http://47.74.233.180:8651/tosVisitorNo');
-                      }}
+                      danger
+                      style={{ marginRight: '15px' }}
+                      loading={false}
+                      onClick={openModel}
                     >
-                      Copy
+                      {' '}
+                      <span className="capi">Close the community</span>
                     </Button>
                   </div>
-                </div>
+                ) : (
+                  ''
+                )}
+
+                {/* 确认关闭框 */}
+                <Modal
+                  title="Are You Sure You Want To Close The Community ?"
+                  visible={ModelFee}
+                  centered={true}
+                  onCancel={handleCancel}
+                  onOk={handleOk}
+                  okText="Yes"
+                  cancelText="No"
+                  okType="danger"
+                  confirmLoading={loading}
+                >
+                  <p className="capi">
+                    Close the community will delete{' '}
+                    <span style={{ color: 'red' }}> all owners </span>
+                    in the community .
+                  </p>
+                  <p className="capi">please operate carefully!</p>
+                </Modal>
               </div>
-
-              {user && user.currentUser.permission.includes('47') ? (
-                <div>
-                  <Divider />
-                  <Button
-                    danger
-                    style={{ marginRight: '15px' }}
-                    loading={false}
-                    onClick={openModel}
-                  >
-                    {' '}
-                    <span className="capi">Close the community</span>
-                  </Button>
-                </div>
-              ) : (
-                ''
-              )}
-
-              {/* 确认关闭框 */}
-              <Modal
-                title="Are You Sure You Want To Close The Community ?"
-                visible={ModelFee}
-                centered={true}
-                onCancel={handleCancel}
-                onOk={handleOk}
-                okText="Yes"
-                cancelText="No"
-                okType="danger"
-                confirmLoading={loading}
-              >
-                <p className="capi">
-                  Close the community will delete <span style={{ color: 'red' }}> all owners </span>
-                  in the community .
-                </p>
-                <p className="capi">please operate carefully!</p>
-              </Modal>
-            </div>
+            </>
           ) : (
             ''
           )}

src/pages/CommunityManagement/CellList/celllist.less

@@ -168,3 +168,14 @@ img {
     }
   }
 }
+
+// 第三个上传
+.formBox {
+  margin: 20px 0 20px 160px;
+  .acitves {
+  }
+  .pdfform {
+    background: #f4f4f4;
+    padding: 15px;
+  }
+}

src/utils/params.ts

 /*
  * @Author: your name
  * @Date: 2020-11-19 20:34:18
- * @LastEditTime: 2021-02-18 16:50:47
+ * @LastEditTime: 2021-02-20 18:14:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\utils\params.ts
@@ -96,4 +96,7 @@ export const requestList = [
   ['/tos/bookingService/delete', '61 设施删除', {}],
   ['/tos/community/download/excel', '62 关闭小区后获取当前小区预约需要退费的表格', {}],
   ['/tos/tosCommunity/saveCommunity', '63 新建小区PDF版本', {}],
+  ['/tos/tosCommunity/get/detail2', '64 获取小区详情（新增）', {}],
+  ['/tos/tosCompany/edit', '65 修改公司信息', {}],
+  ['/tos/tosCompany/get', '66 获取公司信息', {}],
 ];