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

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/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/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 获取公司信息', {}],
 ];