修复bug 以及在线预览

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

src/declaration.d.ts

 declare module 'react-file-viewer';
+declare module 'react-pdf';

src/pages/AccountManagement/account/Account.tsx

@@ -290,27 +290,6 @@ const Account = (props: any) => {
           />
         </div>
       </div>
-
-      {/* 确认关闭账号 */}
-      <Modal
-        title="Operation Tips"
-        visible={over}
-        okText={'Confirm'}
-        cancelText={'Cancel'}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        confirmLoading={loading}
-      >
-        {accountName != null ? (
-          <p>
-            Are You Sure To{' '}
-            <span style={{ color: 'red' }}>{accountName.userStatus != 1 ? 'Close' : 'Open'}</span>{' '}
-            The Account '<span style={{ color: 'red' }}> {accountName.tosUserName} </span>' ?
-          </p>
-        ) : (
-          ''
-        )}
-      </Modal>
     </>
   );
 };

src/pages/AccountManagement/account/AccountEdit.tsx

 import React, { useState, useEffect, useRef } from 'react';
-import { Form, Input, Button, Spin, message, Descriptions, Checkbox, Tree, Radio } from 'antd';
+import { Form, Input, Button, Spin, message, Descriptions, Modal, Tree, Radio } from 'antd';
 import { connect, history } from 'umi';
 import { SearchOutlined, PoweroffOutlined, EditOutlined, LeftOutlined } from '@ant-design/icons';
 import { getCookie } from '@/utils/method';
@@ -33,6 +33,9 @@ const Account = (props: any) => {
   // 已选小区
   const [ServiceCell, setServiceCell] = useState(null as any);
 
+  const [over, setOver] = useState(false); // 关闭账号确认弹窗
+  const [accountName, setaccountName] = useState(null as any); // 弹窗账号信息
+
   // 表单标识
   const [form] = Form.useForm();
   const formRef = useRef(null);
@@ -110,6 +113,25 @@ const Account = (props: any) => {
     }
   }, [Permission]);
 
+  // 监听改变状态提交结果
+  useEffect(() => {
+    if (Result != null) {
+      // console.log('改变取消弹窗重新加载，在清空结果');
+      // let obj = {
+      //   userStatus: accountName.userStatus == 0 ? 1 : 0,
+      //   userID: accountName.tosUserId,
+      // };
+      // RA(52, obj);
+      message.success('Successful Operation !');
+      setOver(false);
+      // 清除结果
+      dispatch({ type: 'Account/ResultClear' });
+      dispatch({ type: 'Account/ReData' });
+      // 退回列表
+      history.push('/AccountManagement/account');
+    }
+  }, [Result]);
+
   // 保存提交
   const onFinishContract = async (value: any) => {
     // console.log(value);
@@ -133,7 +155,7 @@ const Account = (props: any) => {
       value.creatorId = getCookie('id'); //新建者ID
       delete value.community;
       // console.log(value);
-
+      value.id = DataSave.id;
       // 另传权限
       let obj = {
         userName: value.tosUserName,
@@ -195,7 +217,28 @@ const Account = (props: any) => {
   const keyup_tool = (value: any) => {
     return getNumber(value.replace(/[^\d^\.]+/g, ''));
   };
-  // 选择小区名字并赋值
+  // 停用账号弹窗
+  const lockS = () => {
+    setOver(true);
+    setaccountName(DataSave);
+    console.log(DataSave);
+  };
+
+  // 关闭弹窗
+  const handleCancel = (e: any) => {
+    setOver(false);
+  };
+
+  // 弹窗 提交确认账号打开关闭
+  const handleOk = (e: any) => {
+    //
+    let obj = {
+      userStatus: accountName.userStatus == 0 ? 1 : 0,
+      userID: accountName.tosUserId,
+    };
+    RA(52, obj, module, dispatch);
+    // setOver(false);
+  };
 
   return (
     <Spin spinning={loading}>
@@ -204,7 +247,7 @@ const Account = (props: any) => {
           <EditOutlined />
           &nbsp; Edit Account
           <div className="back">
-            <Button type="primary" danger style={{ marginRight: 15 }}>
+            <Button type="primary" danger style={{ marginRight: 15 }} onClick={lockS}>
               <PoweroffOutlined />
               Close Account
             </Button>
@@ -301,6 +344,26 @@ const Account = (props: any) => {
           </div>
         </Form>
       </div>
+      {/* 确认关闭账号 */}
+      <Modal
+        title="Operation Tips"
+        visible={over}
+        okText={'Confirm'}
+        cancelText={'Cancel'}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        confirmLoading={loading}
+      >
+        {accountName != null ? (
+          <p>
+            Are You Sure To{' '}
+            <span style={{ color: 'red' }}>{accountName.userStatus != 1 ? 'Close' : 'Open'}</span>{' '}
+            The Account '<span style={{ color: 'red' }}> {accountName.tosUserName} </span>' ?
+          </p>
+        ) : (
+          ''
+        )}
+      </Modal>
     </Spin>
   );
 };

src/pages/CommunityManagement/FacilityBookings/Bookings.tsx

@@ -319,6 +319,7 @@ const Bookings = (props: any) => {
                     style={{ width: 200 }}
                     placeholder="Name Of Subscriber"
                     disabled={prohibit}
+                    maxLength={30}
                   />
                 </Form.Item>
               </div>

src/pages/CommunityManagement/FacilityBookings/Facility.tsx

@@ -306,7 +306,7 @@ const Facility = (props: any) => {
             {/* 设施名称 以及费用 */}
             <Input.Group>
               <Form.Item label="Facility" name="facilityName" rules={NewFaci[1]}>
-                <Input placeholder="Facility Name" disabled={facilityDetail} />
+                <Input placeholder="Facility Name" disabled={facilityDetail} maxLength={30} />
               </Form.Item>
               <Form.Item label="Fee($)" name="communityManagerFee" rules={NewFaci[2]}>
                 {/* <span className="divIconMoney">$</span> */}

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 { stringSplit } 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: '.doc,.docx,.jpg,.png,.pdf',
+    action: '/tos/image/upload',
+    data: { imageType: 'tosContract', extends: comtyName },
+    fileList: fileList,
+    onChange: ({ file }: { file: any }) => {
+      if (file.status === 'uploading') {
+        setimgLoad(true);
+      }
+      if (file.status == 'done') {
+        message.success(file.name + ' Upload Successful !');
+        setFileList([...fileList, file]);
+        // 添加到表单
+        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);
+  };
+
+  // 切换pdf 总数
+  const onChangePage = (page: any) => {
+    setPageNumber(page);
+  };
+
+  // 文件上传判断
+  function beforeUpload(file: any) {
+    // 文件大小判断
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('Image must smaller than 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="list_1">
+                <div className="item_1">
+                  <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="item_1">
+                  <Form.Item
+                    name="contractPartyA"
+                    label="Contract Party A"
+                    rules={[{ required: true, message: `${tipList[1]}` }]}
+                  >
+                    <Input style={{ width: 200 }} 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: 200 }} 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: 200 }} 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="File Preview"
+            visible={tipModal}
+            width={800}
+            onCancel={handleCancel}
+            style={{ textAlign: 'center' }}
+            footer={null}
+          >
+            {fileInfo != null ? (
+              fileInfo.type == 'pdf' ? (
+                // pdf 换一种
+                <>
+                  <PDF
+                    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={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

@@ -31,6 +31,9 @@ import { tipList } from '@/utils/tip';
 
 import FileViewer from 'react-file-viewer';
 import PDF from 'react-pdf-js';
+
+import { Document, Page } from 'react-pdf';
+
 import { stringSplit } from '@/utils/string';
 
 const ContractContent = (props: any) => {
@@ -242,8 +245,14 @@ const ContractContent = (props: any) => {
   };
 
   // pdf 总页数
-  const onDocumentLoadSuccess = (pages: any) => {
-    setNumPages(pages);
+  // const onDocumentLoadSuccess = (pages: any) => {
+  //   setNumPages(pages);
+  //   setNumPages()
+  // };
+
+  const onDocumentLoadSuccess = ({ numPages }: any) => {
+    //numPages是总页数
+    setNumPages(numPages);
   };
 
   // 切换pdf 总数
@@ -458,12 +467,34 @@ const ContractContent = (props: any) => {
               fileInfo.type == 'pdf' ? (
                 // pdf 换一种
                 <>
-                  <PDF
+                  {/* <PDF
                     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}
+                  /> */}
+
+                  <Document
+                    // file={stringSplit(fileInfo.url, 'm/cash')} //文档地址
+                    file={stringSplit(fileInfo.url, 'm/cash')} //文档地址
+                    onLoadSuccess={onDocumentLoadSuccess}
+                    scale={1.25}
+                  >
+                    <Page
+                      key={numPages}
+                      defaultCurrent={numPages} //当前页页码
+                      pageNumber={pageNumber}
+                      scale={1.25}
+                      // width={800}
+                    />
+                  </Document>
                   <Pagination
                     style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
                     simple