useReducer的 使用

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

src/layouts/SecurityLayout.tsx

@@ -5,7 +5,7 @@ import { stringify } from 'querystring';
 import { ConnectState } from '@/models/connect';
 import { CurrentUser } from '@/models/user';
 import { getCookie } from '@/utils/method';
-import { Result, Button } from 'antd';
+import { message } from 'antd';
 
 interface SecurityLayoutProps extends ConnectProps {
   loading?: boolean;
@@ -105,6 +105,13 @@ class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayout
 
     const permission = JSON.parse(localStorage.getItem('permission') || '[]');
 
+    // 用户重新打开需要重新登录
+    const tokenLogin = JSON.parse(sessionStorage.getItem('token') || '[]');
+    if (tokenLogin.length == 0) {
+      message.warning('Login Expired !');
+      return <Redirect to={`/user/login`} />;
+    }
+
     let perObj = perList.filter((obj) => {
       return obj.path === location.pathname;
     });

src/models/login.ts

@@ -97,6 +97,9 @@ const Model: LoginModelType = {
         localStorage.setItem('userInfo', JSON.stringify(userMessage));
         localStorage.setItem('permission', JSON.stringify(userMessage.permission));
         console.log('获取到Token:' + getCookie('token'));
+        // 设置 session 登录 token
+        sessionStorage.setItem('token', JSON.stringify(userMessage.token));
+
         yield put({
           type: 'saveToken',
           token: userMessage.token,

src/pages/CommunityManagement/FacilityBookings/BookingDetail.tsx

@@ -152,7 +152,7 @@ const BookingDetail = (props: any) => {
                 {DataSave.communityName}
               </Descriptions.Item>
               <Descriptions.Item label="Booking Facilities">
-                {DataSave.facilityTitle}
+                {DataSave.categoriesName}
               </Descriptions.Item>
               <Descriptions.Item label="Booking Time">
                 {DataSave.subscribeDate} {ExtractTime}

src/pages/ContractManagement/Contract.tsx

@@ -124,11 +124,6 @@ const Contract = (props: any) => {
     RA(19, obj);
   };
 
-  // 刷新
-  const onReset2 = () => {
-    RA(19, term);
-  };
-
   // 表单提交
   const onFinishContract = (value: any) => {
     if (!value.communityName && !value.contractNumber && !value.contractTitle) {
@@ -213,7 +208,7 @@ const Contract = (props: any) => {
             density: false,
             fullScreen: false,
             reload: () => {
-              onReset2();
+              onReset();
             },
             setting: false,
           }}

src/pages/ContractManagement/ContractContent copy.tsx

+import React, { useState, useEffect, useRef } from 'react';
+import styles from './ContractContent.less';
+import {
+  Input,
+  Form,
+  message,
+  Upload,
+  Button,
+  DatePicker,
+  Pagination,
+  Modal,
+  Spin,
+  Image,
+} from 'antd';
+import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Link, useIntl, connect, Dispatch, Loading } from 'umi';
+
+import { RA } from '@/services/tos';
+
+import LINE from '../../components/Line/Line';
+import TextArea from 'antd/lib/input/TextArea';
+
+import moment from 'moment';
+import './ContractContent.less';
+// 配置英文
+import 'moment/locale/en-au';
+import locale from 'antd/es/date-picker/locale/en_US';
+
+import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
+import { tipList } from '@/utils/tip';
+
+import FileViewer from 'react-file-viewer';
+import PDF from 'react-pdf-js';
+
+import { randomString } from '@/utils/string';
+
+const ContractContent = (props: any) => {
+  const { Contract, dispatch, FileImg, loading } = props;
+
+  const { DataSaveDetail } = Contract;
+  const { RangePicker } = DatePicker; // 日期组件
+  const [form] = Form.useForm(); // 表单
+  const RA = (index: any, values: any) => {
+    dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
+  };
+
+  // 设置之前时间不能选择
+  function disabledDate(current: any) {
+    return current && current <= moment().subtract(1, 'days').endOf('day');
+  }
+
+  const [fileList, setFileList] = useState([] as any); // 图片列表
+  const [uploadUp, setUploadUp] = useState(true); // 禁止上传 直到选择了小区后
+  const [comtyName, setComtyName] = useState(null); // 小区名字
+  const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
+  const [tipModal, settipModal] = useState(false); //附件弹窗
+  const [fileInfo, setfileInfo] = useState(null as any); //附件内容
+  //pdf 页码内容
+  const [numPages, setNumPages] = useState(1 as any); // 总页码数
+  const [pageNumber, setPageNumber] = useState(1); // 当前页码数
+
+  const [imgInfo, setimgInfo] = useState(null as any); //本地图片预览
+  const [previewVisible, setPreviewVisible] = useState(false); //本地图片预览弹窗
+
+  const [imgLoad, setimgLoad] = useState(false); //本地图片预览
+
+  useEffect(() => {
+    // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
+    if (DataSaveDetail == null) {
+      // 清空表单
+      form.resetFields();
+    } else {
+      // 发起图片请求
+      let objData = {
+        type: 'tosContractPreview',
+        fileName: DataSaveDetail.contractFileName,
+        extends: DataSaveDetail.communityName,
+      };
+      RA(47, objData);
+
+      // 打开禁止
+      setUploadUp(false);
+
+      // 提示时间
+      let a1 = moment(DataSaveDetail.contractValidEndDate)
+        .subtract(2, 'month')
+        .format('YYYY-MM-DD');
+      let a2 = moment(DataSaveDetail.contractValidEndDate)
+        .subtract(1, 'month')
+        .format('YYYY-MM-DD');
+      setTipTime([a1, a2]);
+
+      // 给到上传绑定
+      setComtyName(DataSaveDetail.communityName);
+      // 表单内容
+      form.setFieldsValue({
+        ...DataSaveDetail,
+        upload: 'ok',
+        time: [
+          moment(DataSaveDetail.contractValidStartDate),
+          moment(DataSaveDetail.contractValidEndDate),
+        ],
+      });
+    }
+  }, [DataSaveDetail]);
+
+  // 监听上传图片列表
+  useEffect(() => {
+    if (FileImg != null) {
+      let obj = new Array();
+      for (var i in FileImg) {
+        let a = {
+          uid: i,
+          name: FileImg[i].fileName,
+          status: 'done',
+          type: FileImg[i].fileName.match(/\.([^\.]+)$/)[1].toLowerCase(),
+          url: FileImg[i].fileUrl,
+        };
+        console.log();
+        obj.push(a);
+      }
+      setFileList([...obj]);
+    } else {
+      setFileList([]);
+    }
+  }, [FileImg]);
+
+  // 监听列表
+  useEffect(() => {
+    if (fileList.length == 0) {
+      form.setFieldsValue['upload'] = null;
+    }
+  }, [fileList]);
+
+  // 返回
+  const goToReturn = () => {
+    // console.log(fileList)
+    history.back();
+  };
+
+  // 提交
+  const onFinish = (values: any) => {
+    // 判断有没有文件
+    if (fileList.length == 0) {
+      message.error('Please upload the attachment!');
+    } else {
+      values.contractValidStartDate = values.time[0].format('YYYY-MM-DD');
+      values.contractValidEndDate = values.time[1].format('YYYY-MM-DD');
+      let data = new Array();
+      for (let i = 0; i < fileList.length; i++) {
+        data.push(fileList[i].name);
+      }
+      values.contractFileNameList = data;
+
+      // 编辑
+      if (DataSaveDetail != null) {
+        values.id = DataSaveDetail.id;
+      }
+
+      RA(27, values);
+      // RA(27, values)
+    }
+  };
+
+  // 上传文件设置
+  const uploadProps = {
+    accept: '.docx,.jpg,.png,.pdf',
+    action: '/tos/image/upload',
+    data: { imageType: 'tosContract', extends: comtyName },
+    fileList: fileList,
+    onChange: ({ file }: { file: any }) => {
+      console.log(file);
+      if (file.status === 'uploading') {
+        setimgLoad(true);
+      }
+      if (file.status === 'error') {
+        message.error(file.name + ' Upload  failed !');
+        setimgLoad(false);
+      }
+      if (file.status === 'done') {
+        message.success(file.name + ' Upload Successful !');
+
+        // 实现在线预览
+        let obj = {
+          uid: randomString(12),
+          name: file.name,
+          status: 'done',
+          type: file.name.match(/\.([^\.]+)$/)[1].toLowerCase(),
+          url: file.response.data,
+        };
+
+        setFileList([...fileList, obj]);
+        // 添加到表单
+        form.setFieldsValue({
+          upload: 'ok',
+        });
+        setimgLoad(false);
+      }
+    },
+  };
+
+  // // 设置提示倒计时
+  const changeTime = (data: any, dateStrings: any) => {
+    if (data != null) {
+      let a1 = moment(data[1]).subtract(2, 'month').format('YYYY-MM-DD');
+      let a2 = moment(data[1]).subtract(1, 'month').format('YYYY-MM-DD');
+      setTipTime([a1, a2]);
+    }
+  };
+
+  // 选择小区名字并赋值
+  const opname = (value: any) => {
+    // 打开上传  如果选择了 小区就打开 否则  禁止上传
+    value ? setUploadUp(false) : setUploadUp(true);
+    // 如果切换了  清掉上传的图片
+    if (value != comtyName) {
+      setFileList([]);
+    }
+    setComtyName(value); // 赋值小区名字 给到上传
+    form.setFieldsValue({
+      communityName: value,
+    });
+  };
+
+  //本地图预览处理
+  function getBase64(file: any) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(error);
+    });
+  }
+
+  //点击预览
+  const onPreviews = async (file: any) => {
+    // 有值的话  就是本地预览
+    if (file.size) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      let info = {
+        previewImage: file.url || file.preview,
+        previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
+      };
+      setPreviewVisible(true); // 弹窗
+      setimgInfo(info); // 图片信息
+    } else {
+      setfileInfo(file); // 设置选择的文件
+      console.log(file);
+      settipModal(true);
+    }
+  };
+
+  // 关闭预览弹窗
+  const handleCancel = () => {
+    settipModal(false);
+  };
+
+  // pdf 总页数
+  const onDocumentLoadSuccess = (pages: any) => {
+    setNumPages(pages);
+  };
+
+  // const onDocumentLoadSuccess = ({ numPages }: any) => {
+  //   //numPages是总页数
+  //   setNumPages(numPages);
+  // };
+
+  // 切换pdf 总数
+  const onChangePage = (page: any) => {
+    setPageNumber(page);
+  };
+
+  // 文件上传判断
+  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;
+  }
+
+  // 移除文件
+  const onRemove = async (file: any) => {
+    let fileListArr = fileList;
+    for (let i in fileListArr) {
+      if (fileListArr[i].uid == file.uid) {
+        fileListArr.splice(i, 1);
+      }
+    }
+    setFileList([...fileListArr]);
+  };
+
+  // 文件上传按钮
+  const uploadButton = (
+    <div>
+      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 5 }}>Upload</div>
+    </div>
+  );
+
+  return (
+    <>
+      <Spin spinning={loading}>
+        <div className={styles.base}>
+          {/* 头部组件 */}
+          <div className={styles.box}>
+            <div className={styles.item1}>{DataSaveDetail ? 'Edit' : 'Add'} Contract</div>
+            <button className={styles.item3} onClick={goToReturn}>
+              <LeftOutlined />
+              Back
+            </button>
+          </div>
+          {/* 表单  initialValues={defForm} */}
+          <Form
+            // ref={formRef}
+            autoComplete="off"
+            form={form}
+            name="basic"
+            initialValues={DataSaveDetail}
+            onFinish={onFinish}
+            // initialValues={defForm}
+          >
+            <div className="contract_box">
+              <div className="list2">
+                <Form.Item
+                  name="contractNumber"
+                  label="Contract Number"
+                  rules={[{ required: true, message: `${tipList[0]}` }]}
+                >
+                  <Input style={{ width: 200 }} placeholder="Contract Number" />
+                </Form.Item>
+              </div>
+              {/* 合同编号、甲方、乙方 */}
+              <div className="list_1">
+                <div className="item_1">
+                  <Form.Item
+                    name="contractPartyA"
+                    label="Contract Party A"
+                    rules={[{ required: true, message: `${tipList[1]}` }]}
+                  >
+                    <Input style={{ width: 300 }} placeholder="Contract Party A" />
+                  </Form.Item>
+                </div>
+                <div className="item_1">
+                  <Form.Item
+                    name="contractPartyB"
+                    label="Contract Party B"
+                    rules={[{ required: true, message: `${tipList[2]}` }]}
+                  >
+                    <Input style={{ width: 300 }} placeholder="Contract Party B" />
+                  </Form.Item>
+                </div>
+              </div>
+              {/* 小区 */}
+              <div className="list2">
+                <div className="main">
+                  <Form.Item
+                    labelAlign="right"
+                    name="communityName"
+                    label="Community Name"
+                    rules={[{ required: true, message: `${tipList[3]}` }]}
+                  >
+                    <SearchOptionsCommnity
+                      defaultName={DataSaveDetail ? DataSaveDetail.communityName : null}
+                      // ubmit={extendName}
+                      opname={opname}
+                    />
+                  </Form.Item>
+                </div>
+              </div>
+              {/* 合同标题 */}
+              <div className="list2">
+                <Form.Item
+                  labelAlign="right"
+                  name="contractTitle"
+                  label="Contract Title"
+                  rules={[{ required: true, message: `${tipList[4]}` }]}
+                >
+                  <Input style={{ width: 500 }} placeholder="Contract Title" />
+                </Form.Item>
+              </div>
+
+              {/* 起止时间 */}
+              <div className="list2">
+                <Form.Item
+                  name="time"
+                  labelAlign="right"
+                  label="Contract Time"
+                  rules={[{ required: true, message: `${tipList[5]}` }]}
+                >
+                  <RangePicker
+                    locale={locale}
+                    defaultValue={DataSaveDetail ? DataSaveDetail.time : null}
+                    // disabledDate={disabledDate}   // 时间限制
+                    placeholder={['Effective Date', 'Expiration Date']}
+                    onChange={changeTime}
+                  />
+                </Form.Item>
+              </div>
+
+              {/* 附件上传 */}
+              <div className="list2">
+                <Form.Item
+                  labelAlign="right"
+                  name="upload"
+                  label="Contract Annex"
+                  rules={[{ required: true, message: `Please upload the attachment!` }]}
+                >
+                  <Upload
+                    {...uploadProps}
+                    listType={'picture-card'}
+                    disabled={uploadUp}
+                    beforeUpload={beforeUpload}
+                    onPreview={onPreviews}
+                    onRemove={onRemove}
+                  >
+                    {fileList.length >= 3 ? null : uploadButton}
+                  </Upload>
+                </Form.Item>
+              </div>
+
+              {/* 合同内容 */}
+              <div className="list2">
+                <div className={styles.box8item2x1}>
+                  <Form.Item
+                    rules={[{ required: true, message: `${tipList[5]}` }]}
+                    label="Contract Remarks"
+                    name="contractRemindContent"
+                    style={{ marginBottom: 0 }}
+                  >
+                    <TextArea
+                      style={{ padding: 8, width: 600 }}
+                      placeholder="Remarks"
+                      showCount={true}
+                      autoSize={{ minRows: 6, maxRows: 6 }}
+                    ></TextArea>
+                  </Form.Item>
+                </div>
+                <div
+                  className={styles.box8item2x2}
+                  style={{ marginLeft: 150, textTransform: 'capitalize' }}
+                >
+                  <p style={{ marginBottom: 0 }}>
+                    The system will send e-mail notification in the{' '}
+                    <span style={{ color: 'red' }}>{tipTime[0]}</span> and{' '}
+                    <span style={{ color: 'red' }}>{tipTime[1]}</span> that the contract is about to
+                    expire !
+                  </p>
+                  <p style={{ marginBottom: 0 }}>
+                    <span style={{ color: 'red' }}>*</span> If the time has passed, it will not be
+                    sent
+                  </p>
+                  {/* <span style={{color:'#f00'}}>&nbsp;{stateTime}</span> */}
+                </div>
+              </div>
+
+              <div>
+                <LINE />
+                <Button type="primary" htmlType="submit" loading={loading}>
+                  Submit
+                </Button>
+              </div>
+            </div>
+          </Form>
+
+          {/* 附件预览 */}
+          <Modal
+            title={fileInfo != null ? fileInfo.name : 'File Preview'}
+            visible={tipModal}
+            width={800}
+            onCancel={handleCancel}
+            style={{ textAlign: 'center' }}
+            footer={null}
+          >
+            {fileInfo != null ? (
+              fileInfo.type == 'pdf' ? (
+                // pdf 换一种
+                <>
+                  <PDF
+                    file={fileInfo.url}
+                    // file={stringSplit(fileInfo.url, 'm/cash')}
+                    page={pageNumber}
+                    scale={1.25}
+                    onDocumentComplete={onDocumentLoadSuccess}
+                  />
+                  <Pagination
+                    style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
+                    simple
+                    defaultCurrent={pageNumber}
+                    total={numPages * 10}
+                    onChange={onChangePage}
+                  />
+                </>
+              ) : fileInfo.type == 'jpg' || fileInfo.type == 'png' ? (
+                // 图片用指定格式
+
+                <Image
+                  src={fileInfo.url}
+                  preview={false}
+                  style={{ margin: '0 auto', textAlign: 'center' }}
+                />
+              ) : (
+                <FileViewer
+                  fileType={fileInfo.type}
+                  filePath={fileInfo.url}
+                  // filePath={stringSplit(fileInfo.url, 'm/cash')}
+                />
+              )
+            ) : (
+              ''
+            )}
+          </Modal>
+
+          {/* 本地附件预览 */}
+          {imgInfo != null ? (
+            <Modal
+              visible={previewVisible}
+              title={imgInfo.previewTitle}
+              footer={null}
+              onCancel={() => {
+                setPreviewVisible(false);
+              }}
+            >
+              <img alt="example" style={{ width: '100%' }} src={imgInfo.previewImage} />
+            </Modal>
+          ) : (
+            ''
+          )}
+        </div>
+      </Spin>
+    </>
+  );
+};
+
+function mapStateToProps(state: any) {
+  const { ContractModel, Contract } = state;
+  const FileImg = Contract.FileImg;
+  const loading = state.loading.models.Contract || false;
+  return {
+    ContractModel,
+    Contract,
+    FileImg,
+    loading,
+  };
+}
+export default connect(mapStateToProps)(ContractContent);

src/pages/ContractManagement/ContractContent.tsx

-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useReducer } from 'react';
 import styles from './ContractContent.less';
 import {
   Input,
@@ -12,19 +12,13 @@ import {
   Spin,
   Image,
 } from 'antd';
+const { TextArea } = Input;
 import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Link, useIntl, connect, Dispatch, Loading } from 'umi';
-
-import { RA } from '@/services/tos';
-
-import LINE from '../../components/Line/Line';
-import TextArea from 'antd/lib/input/TextArea';
+import { connect } from 'umi';
 
+import LINE from '@/components/Line/Line';
 import moment from 'moment';
 import './ContractContent.less';
-// 配置英文
-import 'moment/locale/en-au';
-import locale from 'antd/es/date-picker/locale/en_US';
 
 import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
 import { tipList } from '@/utils/tip';
@@ -34,6 +28,65 @@ import PDF from 'react-pdf-js';
 
 import { randomString } from '@/utils/string';
 
+/******* useState 改造 useReducer   *********/
+
+// 初始值
+const contentState = {
+  fileList: [], // 图片列表
+  uploadUp: true, // 禁止上传 直到选择了小区后
+  comtyName: null, // 已选小区名字
+  tipTime: ['previous month', 'two months'], //时间提示
+  tipModal: false, //附件弹窗
+  fileInfo: null, //附件内容
+  numPages: 1, // pdf 总页码数
+  pageNumber: 1, //  pdf 当前页码数
+  imgInfo: null, //本地图片预览信息
+  previewVisible: false, //本地图片预览弹窗
+  imgLoad: false, //本地图片上传加载
+};
+// 方法
+const contentReducer = (state, action) => {
+  switch (action.type) {
+    case 'setFileList': // 改变图片列表
+      return { ...state, fileList: action.payload };
+
+    case 'setUploadUp': // 附件上传限制
+      return { ...state, uploadUp: action.payload };
+
+    case 'setComtyName': // 小区名字
+      return { ...state, comtyName: action.payload };
+
+    case 'setTipTime': // 时间提示
+      return { ...state, tipTime: action.payload };
+
+    case 'settipModal': // 附件弹窗
+      return { ...state, tipModal: action.payload };
+
+    case 'setfileInfo': // 附件内容
+      return { ...state, fileInfo: action.payload };
+
+    case 'setNumPages': // PDF总页码数
+      return { ...state, numPages: action.payload };
+
+    case 'setPageNumber': // PDF当前页码数
+      return { ...state, pageNumber: action.payload };
+
+    case 'setimgInfo': // 本地图片预览信息
+      return { ...state, imgInfo: action.payload };
+
+    case 'setPreviewVisible': // 本地图片预览弹窗
+      return { ...state, previewVisible: action.payload };
+
+    case 'setimgLoad': // 本地图片上传加载
+      return { ...state, imgLoad: action.payload };
+
+    default:
+      break;
+  }
+};
+
+/******* useState 改造 useReducer   *********/
+
 const ContractContent = (props: any) => {
   const { Contract, dispatch, FileImg, loading } = props;
 
@@ -44,25 +97,8 @@ const ContractContent = (props: any) => {
     dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
   };
 
-  // 设置之前时间不能选择
-  function disabledDate(current: any) {
-    return current && current <= moment().subtract(1, 'days').endOf('day');
-  }
-
-  const [fileList, setFileList] = useState([] as any); // 图片列表
-  const [uploadUp, setUploadUp] = useState(true); // 禁止上传 直到选择了小区后
-  const [comtyName, setComtyName] = useState(null); // 小区名字
-  const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
-  const [tipModal, settipModal] = useState(false); //附件弹窗
-  const [fileInfo, setfileInfo] = useState(null as any); //附件内容
-  //pdf 页码内容
-  const [numPages, setNumPages] = useState(1 as any); // 总页码数
-  const [pageNumber, setPageNumber] = useState(1); // 当前页码数
-
-  const [imgInfo, setimgInfo] = useState(null as any); //本地图片预览
-  const [previewVisible, setPreviewVisible] = useState(false); //本地图片预览弹窗
-
-  const [imgLoad, setimgLoad] = useState(false); //本地图片预览
+  /* 使用 useReducer  */
+  const [state, dispatchs] = useReducer(contentReducer, contentState);
 
   useEffect(() => {
     // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
@@ -79,7 +115,8 @@ const ContractContent = (props: any) => {
       RA(47, objData);
 
       // 打开禁止
-      setUploadUp(false);
+      // setUploadUp(false);
+      dispatchs({ type: 'setUploadUp', payload: false });
 
       // 提示时间
       let a1 = moment(DataSaveDetail.contractValidEndDate)
@@ -88,10 +125,13 @@ const ContractContent = (props: any) => {
       let a2 = moment(DataSaveDetail.contractValidEndDate)
         .subtract(1, 'month')
         .format('YYYY-MM-DD');
-      setTipTime([a1, a2]);
+
+      // setTipTime([a1, a2]);
+      dispatchs({ type: 'setTipTime', payload: [a1, a2] });
 
       // 给到上传绑定
-      setComtyName(DataSaveDetail.communityName);
+      // setComtyName(DataSaveDetail.communityName);
+      dispatchs({ type: 'setComtyName', payload: DataSaveDetail.communityName });
       // 表单内容
       form.setFieldsValue({
         ...DataSaveDetail,
@@ -119,18 +159,20 @@ const ContractContent = (props: any) => {
         console.log();
         obj.push(a);
       }
-      setFileList([...obj]);
+      // setFileList([...obj]);
+      dispatchs({ type: 'setFileList', payload: [...obj] });
     } else {
-      setFileList([]);
+      // setFileList([]);
+      dispatchs({ type: 'setFileList', payload: [] });
     }
   }, [FileImg]);
 
   // 监听列表
   useEffect(() => {
-    if (fileList.length == 0) {
+    if (state.fileList.length == 0) {
       form.setFieldsValue['upload'] = null;
     }
-  }, [fileList]);
+  }, [state.fileList]);
 
   // 返回
   const goToReturn = () => {
@@ -141,14 +183,14 @@ const ContractContent = (props: any) => {
   // 提交
   const onFinish = (values: any) => {
     // 判断有没有文件
-    if (fileList.length == 0) {
+    if (state.fileList.length == 0) {
       message.error('Please upload the attachment!');
     } else {
       values.contractValidStartDate = values.time[0].format('YYYY-MM-DD');
       values.contractValidEndDate = values.time[1].format('YYYY-MM-DD');
       let data = new Array();
-      for (let i = 0; i < fileList.length; i++) {
-        data.push(fileList[i].name);
+      for (let i = 0; i < state.fileList.length; i++) {
+        data.push(state.fileList[i].name);
       }
       values.contractFileNameList = data;
 
@@ -166,16 +208,18 @@ const ContractContent = (props: any) => {
   const uploadProps = {
     accept: '.docx,.jpg,.png,.pdf',
     action: '/tos/image/upload',
-    data: { imageType: 'tosContract', extends: comtyName },
-    fileList: fileList,
+    data: { imageType: 'tosContract', extends: state.comtyName },
+    fileList: state.fileList,
     onChange: ({ file }: { file: any }) => {
       console.log(file);
       if (file.status === 'uploading') {
-        setimgLoad(true);
+        // setimgLoad(true);
+        dispatchs({ type: 'setimgLoad', payload: true });
       }
       if (file.status === 'error') {
         message.error(file.name + ' Upload  failed !');
-        setimgLoad(false);
+        // setimgLoad(false);
+        dispatchs({ type: 'setimgLoad', payload: false });
       }
       if (file.status === 'done') {
         message.success(file.name + ' Upload Successful !');
@@ -189,12 +233,14 @@ const ContractContent = (props: any) => {
           url: file.response.data,
         };
 
-        setFileList([...fileList, obj]);
+        // setFileList([...fileList, obj]);
+        dispatchs({ type: 'setFileList', payload: [...state.fileList, obj] });
         // 添加到表单
         form.setFieldsValue({
           upload: 'ok',
         });
-        setimgLoad(false);
+        // setimgLoad(false);
+        dispatchs({ type: 'setimgLoad', payload: false });
       }
     },
   };
@@ -204,19 +250,25 @@ const ContractContent = (props: any) => {
     if (data != null) {
       let a1 = moment(data[1]).subtract(2, 'month').format('YYYY-MM-DD');
       let a2 = moment(data[1]).subtract(1, 'month').format('YYYY-MM-DD');
-      setTipTime([a1, a2]);
+      // setTipTime([a1, a2]);
+      dispatchs({ type: 'setTipTime', payload: [a1, a2] });
     }
   };
 
   // 选择小区名字并赋值
   const opname = (value: any) => {
     // 打开上传  如果选择了 小区就打开 否则  禁止上传
-    value ? setUploadUp(false) : setUploadUp(true);
+    value
+      ? dispatchs({ type: 'setUploadUp', payload: false })
+      : dispatchs({ type: 'setUploadUp', payload: true });
     // 如果切换了  清掉上传的图片
-    if (value != comtyName) {
-      setFileList([]);
+    if (value != state.comtyName) {
+      // setFileList([]);
+      dispatchs({ type: 'setFileList', payload: [] });
     }
-    setComtyName(value); // 赋值小区名字 给到上传
+    // setComtyName(value); // 赋值小区名字 给到上传
+    dispatchs({ type: 'setComtyName', payload: value });
+
     form.setFieldsValue({
       communityName: value,
     });
@@ -243,23 +295,28 @@ const ContractContent = (props: any) => {
         previewImage: file.url || file.preview,
         previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
       };
-      setPreviewVisible(true); // 弹窗
-      setimgInfo(info); // 图片信息
+      // setPreviewVisible(true); // 弹窗
+      dispatchs({ type: 'setPreviewVisible', payload: true });
+      // setimgInfo(info); // 图片信息
+      dispatchs({ type: 'setimgInfo', payload: info });
     } else {
-      setfileInfo(file); // 设置选择的文件
-      console.log(file);
-      settipModal(true);
+      // setfileInfo(file); // 设置选择的文件
+      // settipModal(true); // 打开弹窗
+      dispatchs({ type: 'setfileInfo', payload: file });
+      dispatchs({ type: 'settipModal', payload: true });
     }
   };
 
   // 关闭预览弹窗
   const handleCancel = () => {
-    settipModal(false);
+    // settipModal(false);
+    dispatchs({ type: 'settipModal', payload: false });
   };
 
   // pdf 总页数
   const onDocumentLoadSuccess = (pages: any) => {
-    setNumPages(pages);
+    // setNumPages(pages);
+    dispatchs({ type: 'setNumPages', payload: pages });
   };
 
   // const onDocumentLoadSuccess = ({ numPages }: any) => {
@@ -269,7 +326,8 @@ const ContractContent = (props: any) => {
 
   // 切换pdf 总数
   const onChangePage = (page: any) => {
-    setPageNumber(page);
+    // setPageNumber(page);
+    dispatchs({ type: 'setPageNumber', payload: page });
   };
 
   // 文件上传判断
@@ -284,19 +342,20 @@ const ContractContent = (props: any) => {
 
   // 移除文件
   const onRemove = async (file: any) => {
-    let fileListArr = fileList;
+    let fileListArr = state.fileList;
     for (let i in fileListArr) {
       if (fileListArr[i].uid == file.uid) {
         fileListArr.splice(i, 1);
       }
     }
-    setFileList([...fileListArr]);
+    // setFileList([...fileListArr]);
+    dispatchs({ type: 'setFileList', payload: [...fileListArr] });
   };
 
   // 文件上传按钮
   const uploadButton = (
     <div>
-      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
+      {state.imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
       <div style={{ marginTop: 5 }}>Upload</div>
     </div>
   );
@@ -392,7 +451,6 @@ const ContractContent = (props: any) => {
                   rules={[{ required: true, message: `${tipList[5]}` }]}
                 >
                   <RangePicker
-                    locale={locale}
                     defaultValue={DataSaveDetail ? DataSaveDetail.time : null}
                     // disabledDate={disabledDate}   // 时间限制
                     placeholder={['Effective Date', 'Expiration Date']}
@@ -412,12 +470,12 @@ const ContractContent = (props: any) => {
                   <Upload
                     {...uploadProps}
                     listType={'picture-card'}
-                    disabled={uploadUp}
+                    disabled={state.uploadUp}
                     beforeUpload={beforeUpload}
                     onPreview={onPreviews}
                     onRemove={onRemove}
                   >
-                    {fileList.length >= 3 ? null : uploadButton}
+                    {state.fileList.length >= 3 ? null : uploadButton}
                   </Upload>
                 </Form.Item>
               </div>
@@ -445,9 +503,9 @@ const ContractContent = (props: any) => {
                 >
                   <p style={{ marginBottom: 0 }}>
                     The system will send e-mail notification in the{' '}
-                    <span style={{ color: 'red' }}>{tipTime[0]}</span> and{' '}
-                    <span style={{ color: 'red' }}>{tipTime[1]}</span> that the contract is about to
-                    expire !
+                    <span style={{ color: 'red' }}>{state.tipTime[0]}</span> and{' '}
+                    <span style={{ color: 'red' }}>{state.tipTime[1]}</span> that the contract is
+                    about to expire !
                   </p>
                   <p style={{ marginBottom: 0 }}>
                     <span style={{ color: 'red' }}>*</span> If the time has passed, it will not be
@@ -468,44 +526,44 @@ const ContractContent = (props: any) => {
 
           {/* 附件预览 */}
           <Modal
-            title={fileInfo != null ? fileInfo.name : 'File Preview'}
-            visible={tipModal}
+            title={state.fileInfo != null ? state.fileInfo.name : 'File Preview'}
+            visible={state.tipModal}
             width={800}
             onCancel={handleCancel}
             style={{ textAlign: 'center' }}
             footer={null}
           >
-            {fileInfo != null ? (
-              fileInfo.type == 'pdf' ? (
+            {state.fileInfo != null ? (
+              state.fileInfo.type == 'pdf' ? (
                 // pdf 换一种
                 <>
                   <PDF
-                    file={fileInfo.url}
+                    file={state.fileInfo.url}
                     // file={stringSplit(fileInfo.url, 'm/cash')}
-                    page={pageNumber}
+                    page={state.pageNumber}
                     scale={1.25}
                     onDocumentComplete={onDocumentLoadSuccess}
                   />
                   <Pagination
                     style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
                     simple
-                    defaultCurrent={pageNumber}
-                    total={numPages * 10}
+                    defaultCurrent={state.pageNumber}
+                    total={state.numPages * 10}
                     onChange={onChangePage}
                   />
                 </>
-              ) : fileInfo.type == 'jpg' || fileInfo.type == 'png' ? (
+              ) : state.fileInfo.type == 'jpg' || state.fileInfo.type == 'png' ? (
                 // 图片用指定格式
 
                 <Image
-                  src={fileInfo.url}
+                  src={state.fileInfo.url}
                   preview={false}
                   style={{ margin: '0 auto', textAlign: 'center' }}
                 />
               ) : (
                 <FileViewer
-                  fileType={fileInfo.type}
-                  filePath={fileInfo.url}
+                  fileType={state.fileInfo.type}
+                  filePath={state.fileInfo.url}
                   // filePath={stringSplit(fileInfo.url, 'm/cash')}
                 />
               )
@@ -515,16 +573,17 @@ const ContractContent = (props: any) => {
           </Modal>
 
           {/* 本地附件预览 */}
-          {imgInfo != null ? (
+          {state.imgInfo != null ? (
             <Modal
-              visible={previewVisible}
-              title={imgInfo.previewTitle}
+              visible={state.previewVisible}
+              title={state.imgInfo.previewTitle}
               footer={null}
               onCancel={() => {
-                setPreviewVisible(false);
+                // setPreviewVisible(false);
+                dispatchs({ type: 'setPreviewVisible', payload: false });
               }}
             >
-              <img alt="example" style={{ width: '100%' }} src={imgInfo.previewImage} />
+              <img alt="example" style={{ width: '100%' }} src={state.imgInfo.previewImage} />
             </Modal>
           ) : (
             ''

src/pages/ContractManagement/ContractDetail.tsx

@@ -5,7 +5,8 @@ import { LeftOutlined } from '@ant-design/icons';
 import { connect, history } from 'umi';
 
 import LINE from '../../components/Line/Line';
-import TextArea from 'antd/lib/input/TextArea';
+
+const { TextArea } = Input;
 
 import PDF from 'react-pdf-js';
 import moment from 'moment';
@@ -119,30 +120,6 @@ const ContractContent = (props: any) => {
     history.go(-1);
   };
 
-  // 提交
-  const onFinish = (values: any) => {
-    // 判断有没有文件
-    if (fileList.length == 0) {
-      message.error('Please upload the attachment!');
-    } else {
-      values.contractValidStartDate = values.time[0].format('YYYY-MM-DD');
-      values.contractValidEndDate = values.time[1].format('YYYY-MM-DD');
-      let data = new Array();
-      for (let i = 0; i < fileList.length; i++) {
-        data.push(fileList[i].name);
-      }
-      values.contractFileNameList = data;
-
-      // 编辑
-      if (DataSaveDetail != null) {
-        values.id = DataSaveDetail.id;
-      }
-
-      RA(27, values);
-      // RA(27, values)
-    }
-  };
-
   // 上传文件设置
   const uploadProps = {
     accept: '.docx,.jpg,.png,.pdf',
@@ -163,30 +140,6 @@ const ContractContent = (props: any) => {
     },
   };
 
-  // // 设置提示倒计时
-  const changeTime = (data: any, dateStrings: any) => {
-    if (data != null) {
-      let a1 = moment(data[1]).subtract(2, 'month').format('YYYY-MM-DD');
-      let a2 = moment(data[1]).subtract(1, 'month').format('YYYY-MM-DD');
-      setTipTime([a1, a2]);
-    }
-    console.log(dateStrings);
-  };
-
-  // 选择小区名字并赋值
-  const opname = (value: any) => {
-    // 打开上传  如果选择了 小区就打开 否则  禁止上传
-    value ? setUploadUp(false) : setUploadUp(true);
-    // 如果切换了  清掉上传的图片
-    if (value != comtyName) {
-      setFileList([]);
-    }
-    setComtyName(value); // 赋值小区名字 给到上传
-    form.setFieldsValue({
-      communityName: value,
-    });
-  };
-
   //本地图预览处理
   function getBase64(file: any) {
     return new Promise((resolve, reject) => {
@@ -251,8 +204,6 @@ const ContractContent = (props: any) => {
             form={form}
             name="basic"
             initialValues={DataSaveDetail}
-            onFinish={onFinish}
-            // initialValues={defForm}
           >
             <div className="contract_box">
               <div className="list2">
@@ -296,8 +247,6 @@ const ContractContent = (props: any) => {
                   >
                     <SearchOptionsCommnity
                       defaultName={DataSaveDetail ? DataSaveDetail.communityName : null}
-                      // ubmit={extendName}
-                      opname={opname}
                       disabled={true}
                     />
                   </Form.Item>
@@ -327,7 +276,6 @@ const ContractContent = (props: any) => {
                     defaultValue={DataSaveDetail ? DataSaveDetail.time : null}
                     disabledDate={disabledDate}
                     placeholder={['Effective Date', 'Expiration Date']}
-                    onChange={changeTime}
                     disabled
                   />
                 </Form.Item>