预览组件重做，bug修复

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

src/components/PictureOptions/PictureOptionsRow.tsx

 import React, { useState, useEffect } from 'react';
 
 import { Upload, Modal, message } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
 
 function getBase64(file: File) {
   return new Promise((resolve, reject) => {
@@ -12,12 +12,6 @@ function getBase64(file: File) {
   });
 }
 
-const uploadButton = (
-  <div>
-    <PlusOutlined />
-    <div className="ant-upload-text">Upload</div>
-  </div>
-);
 import { getUrlPicName } from '../../utils/string';
 const PictureOptionsRow = (props: any) => {
   const { value, onChange, limitNums } = props;
@@ -27,6 +21,8 @@ const PictureOptionsRow = (props: any) => {
   const [limitNum, setLimitNum] = useState(5);
   const handleCancel = () => setPreviewVisible(false);
 
+  const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
+
   useEffect(() => {
     if (limitNums != null) {
       setLimitNum(limitNums);
@@ -74,28 +70,13 @@ const PictureOptionsRow = (props: any) => {
     //   }
   }, [props.defaultValue]);
 
-  // useEffect(() => {
-  //   if (props.disabled) {
-  //     if (value != null) {
-  //       var tmp = value
-  //       var result = new Array()
-  //       var resultToInside = new Array()
-  //       console.log("图片集使用表单组件");
-  //       console.log(tmp)
-  //       if (tmp.url != null) {
-  //         tmp.map((item: any, index: any) => {
-  //           if (item.name == null) {
-  //             item.name = getUrlPicName(item.url)
-  //             item.uid = index
-  //           }
-  //           result.push(item)
-  //           resultToInside.push(item.name)
-  //         })
-  //         setFileList(result)
-  //       }
-  //     }
-  //   }
-  // }, [value])
+  // 加载logo
+  const uploadButton = (
+    <div>
+      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
+      <div className="ant-upload-text">Upload</div>
+    </div>
+  );
 
   const handlePreview = async (file: any) => {
     if (!file.url && !file.preview) {
@@ -108,13 +89,20 @@ const PictureOptionsRow = (props: any) => {
   const handleChange = ({ file, fileList }: any) => {
     // 给传递的附加名字
     // props.data.fileName = fileList[0].name;
-    let tmp = fileList;
-    setFileList(tmp.filter((file: any) => !!file.status || file.status == null));
-    var result = new Array();
-    fileList.map((item: { name: string }, index: number) => {
-      result.push(item.name);
-    });
-    onChange(result);
+
+    file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
+
+    if (file.status == 'done') {
+      let tmp = fileList.filter((file: any) => {
+        return file.status == 'done';
+      });
+      setFileList(tmp);
+      var result = new Array();
+      tmp.map((item: { name: string }, index: number) => {
+        result.push(item.name);
+      });
+      onChange(result);
+    }
   };
   function beforeUpload(file: any) {
     // 文件类型判断
@@ -123,10 +111,9 @@ const PictureOptionsRow = (props: any) => {
     if (!isJpgOrPng) {
       message.error('You can only upload JPG/PNG file!');
     }
-    // 文件大小判断
-    const isLt2M = file.size / 1024 / 1024 <= 2;
+    const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
-      message.error('Image must be less than or equal to 2MB!');
+      message.error('Image must smaller than 2MB!');
     }
     return isJpgOrPng && isLt2M;
   }
@@ -148,6 +135,7 @@ const PictureOptionsRow = (props: any) => {
       </Upload>
       <Modal
         title="Preview"
+        width={640}
         footer={null}
         visible={previewVisible}
         onOk={handleCancel}

src/components/PreView/PreViewTow.tsx

@@ -15,7 +15,7 @@ import FileViewer from 'react-file-viewer';
 import { stringSplit } from '@/utils/string';
 
 const PreView = (props: any) => {
-  const { OpenUrl, loading } = props;
+  const { OpenUrl, loading, dispatch } = props;
 
   const [Icon, setIcon] = useState(null as any); // 图标显示哪一个控制
   const [ModalTip, setModalTip] = useState(false); // 弹窗控制
@@ -25,7 +25,6 @@ const PreView = (props: any) => {
 
   // 图标显示判断
   useEffect(() => {
-    console.log(OpenUrl);
     if (OpenUrl) {
       OpenUrl.type == 'pdf' ? setIcon(IconPdf) : setIcon(IconImg);
     } else {
@@ -36,6 +35,8 @@ const PreView = (props: any) => {
   //点击预览
   const opens = () => {
     setModalTip(true);
+    // 每次关闭预览都要清掉弹窗图片信息   -- 防止编辑打开页面直接弹出窗口
+    // dispatch({ type: 'CellList/urlRemove' });
   };
 
   // 隐藏弹窗
@@ -90,7 +91,8 @@ const PreView = (props: any) => {
               {OpenUrl != null && OpenUrl.type == 'pdf' ? (
                 <>
                   <PDF
-                    file={OpenUrl ? stringSplit(OpenUrl.url, 'm/cash') : ''}
+                    // file={OpenUrl ? stringSplit(OpenUrl.url, 'm/cash') : ''}
+                    file={OpenUrl ? OpenUrl : ''}
                     page={pageNumber}
                     scale={1.25}
                     onDocumentComplete={onDocumentLoadSuccess}

src/components/PreView/index.tsx

@@ -27,7 +27,6 @@ const PreView = (props: any) => {
 
   // 图标显示判断
   useEffect(() => {
-    console.log(OpenUrl);
     if (OpenUrl) {
       OpenUrl.match(/\.([^\.]+)$/)[1].toLowerCase() == 'pdf' ? setIcon(IconPdf) : setIcon(IconImg);
     } else {
@@ -59,6 +58,8 @@ const PreView = (props: any) => {
       extends: CellList.detailData.rows.residentialName,
     };
     RA(47, msg, module, dispatch);
+    // 每次关闭预览都要清掉弹窗图片信息   -- 防止编辑打开页面直接弹出窗口
+    dispatch({ type: 'CellList/urlRemove' });
   };
 
   // 隐藏弹窗
@@ -115,7 +116,8 @@ const PreView = (props: any) => {
           {ModalInfo != null && ModalInfo.type == 'pdf' ? (
             <>
               <PDF
-                file={ModalInfo ? stringSplit(ModalInfo.url, 'm/cash') : ''}
+                // file={ModalInfo ? stringSplit(ModalInfo.url, 'm/cash') : ''}
+                file={ModalInfo ? ModalInfo.url : ''}
                 page={pageNumber}
                 onDocumentComplete={onDocumentLoadSuccess}
               />

src/models/CommunityManagement/CellList.ts

@@ -28,7 +28,6 @@ export default {
       return { ...state, Result };
     },
     returnDataSave(state, { DataSave }) {
-      console.log(DataSave);
       return { ...state, DataSave };
     },
     returnDataSaveDetail(state, { detailData }) {
@@ -60,7 +59,6 @@ export default {
         printf(playload, resp);
         message.error(`${resp.error_code}:${resp.error_msg}`);
       } else {
-        console.log('成功？');
         switch (playload.index) {
           case 24:
             {
@@ -118,8 +116,8 @@ export default {
     },
 
     *urlRemove({}, { put }) {
-      let nus = null;
-      yield put({ type: 'returnImgurl', nus });
+      let imgUrl = null;
+      yield put({ type: 'returnImgurl', imgUrl });
     },
 
     *comRemove({}, { put }) {

src/pages/CommunityManagement/CellList/Adds.tsx

@@ -69,7 +69,6 @@ const Adds = (props: any) => {
   useEffect(() => {
     // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
     if (Data) {
-      console.log(Data);
       // 返回列表
       form.setFieldsValue({
         // 必填的
@@ -109,7 +108,7 @@ const Adds = (props: any) => {
       setcodeStrat(true);
       setTipMain('Binding Content Already Exists, Cannot Be Modified！');
     } else {
-      console.log('新建');
+      // console.log('新建');
     }
   }, [Data]);
 
@@ -123,7 +122,6 @@ const Adds = (props: any) => {
         type: imgUrl.name.match(/\.([^\.]+)$/)[1].toLowerCase(),
         url: imgUrl.url,
       };
-      console.log(info);
       setpreviewImage(info);
       setpreviewVisible(true);
       // openDows(imgUrl.url, imgUrl.name);
@@ -155,7 +153,7 @@ const Adds = (props: any) => {
     // 文件大小判断
     const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
-      message.error('Image must smaller than 2MB!');
+      message.error('File must be less than or equal to 2MB!');
     }
     return isLt2M;
   }
@@ -244,9 +242,10 @@ const Adds = (props: any) => {
   const onFinish = (values: any) => {
     let { residentialZipCode, residentialAddress, residentialName } = values.des;
     let tel = values.info.tel;
-
-    if (residentialZipCode.length < 6) {
-      message.error('Please Enter 6-digit Zip Code！');
+    if (values.residentialManagerUserName.length < 2) {
+      message.error('Please Enter 2-digit Zip Code！');
+    } 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 {
@@ -286,7 +285,7 @@ const Adds = (props: any) => {
       obj.residentialHotlineName = values.help.residentialHotlineName
         ? undeFi(values.help.residentialHotlineName)
         : 'Community Hotline';
-      obj.residentialHotline = values.help.residentialHotlineName
+      obj.residentialHotline = values.help.residentialHotline
         ? undeFi(values.help.residentialHotline)
         : values.info.tel;
       // 编辑的时候 为空 判断
@@ -307,6 +306,7 @@ const Adds = (props: any) => {
     if (Data) {
       obj.id = Data.id;
     }
+    console.log(values);
     console.log(obj);
     // 上传
     RA(29, obj, 'CellList', dispatch);
@@ -314,7 +314,6 @@ const Adds = (props: any) => {
 
   // 返回
   const goToReturn = () => {
-    // console.log(fileList)
     history.go(-1);
   };
 
@@ -404,6 +403,7 @@ const Adds = (props: any) => {
             wrapperCol={{ span: 18 }}
             layout="horizontal"
             labelAlign="left"
+            scrollToFirstError={true}
           >
             <Form.Item label="Community Name" name="des" rules={[{ required: false }]}>
               <Input.Group compact>
@@ -632,7 +632,6 @@ const Adds = (props: any) => {
 
 // export default Adds;
 function map(state: any) {
-  // console.log(state);
   const Data = state.CellList.DataSave;
   const { imgUrl } = state.CellList;
   const loading = state.loading.models.CellList ? state.loading.models.CellList : false;

src/pages/CommunityManagement/CellList/CellList.tsx

@@ -89,7 +89,6 @@ const CellLists = (props: any) => {
   // 监听是否有数据
   useEffect(() => {
     if (village == null) {
-      console.log(term);
       RA(48, term, module, dispatch);
     }
   }, [village]);
@@ -99,15 +98,16 @@ const CellLists = (props: any) => {
   };
   const goToAdd = () => {
     SA(null, module, dispatch); // 清空之前传递的数据
+    dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
     history.push('/CommunityManagement/CellList/Add');
   };
   const goToEdit = (values: any, e: any) => {
-    // console.log(values);
+    dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
     SA(values, module, dispatch);
     history.push('/CommunityManagement/CellList/Add');
   };
   const goToDetail = (values: any, e: any) => {
-    // console.log(values);
+    dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
     SA(values, module, dispatch);
     history.push('/CommunityManagement/CellList/Detail');
   };
@@ -115,7 +115,6 @@ const CellLists = (props: any) => {
   // 点击搜索
 
   const CallBackTitleSearch = (comment: any) => {
-    console.log(comment);
     if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
       let obj = {
         residentialManagerUserName: comment.label,
@@ -205,7 +204,6 @@ const CellLists = (props: any) => {
 };
 
 function map(state: any) {
-  console.log(state);
   const loading = state.loading.models.CellList;
   const { Data, curString, village } = state[module];
   return { Data, loading, curString, village };

src/pages/CommunityManagement/CommunityAnnouncement/Add.tsx

@@ -125,7 +125,7 @@ const Add = (props: any) => {
     tmp.noticEndTime = values.noticEndTime ? values.noticEndTime.format('YYYY-MM-DD') : null;
     delete tmp.community;
     delete tmp.file;
-    // RA(28, tmp, module, dispatch);
+    RA(28, tmp, module, dispatch);
   };
 
   // 设置之前时间不能选择

src/pages/ContractManagement/Contract.tsx

@@ -82,8 +82,8 @@ const Contract = (props: any) => {
     { title: 'Community Name', dataIndex: 'communityName' }, // 小区名
     { title: 'Contacts', dataIndex: 'communityAccount' }, // 联系人
     { title: 'Phone', dataIndex: 'communityPhone' }, // 联系电话
-    { title: 'Valid Start Date', dataIndex: 'contractValidStartDate' }, // 生效时间
-    { title: 'Valid End Date', dataIndex: 'contractValidEndDate' }, // 到期时间
+    { title: 'Start Date', dataIndex: 'contractValidStartDate' }, // 生效时间
+    { title: 'End Date', dataIndex: 'contractValidEndDate' }, // 到期时间
     // { title: "Contract File", dataIndex: 'contractFileName' },  // 附件
     {
       title: 'Actions',

src/pages/ContractManagement/ContractContent.tsx

@@ -164,7 +164,7 @@ const ContractContent = (props: any) => {
 
   // 上传文件设置
   const uploadProps = {
-    accept: '.doc,.docx,.jpg,.png,.pdf',
+    accept: '.docx,.jpg,.png,.pdf',
     action: '/tos/image/upload',
     data: { imageType: 'tosContract', extends: comtyName },
     fileList: fileList,
@@ -309,24 +309,24 @@ const ContractContent = (props: any) => {
             // 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="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" />
+                    <Input style={{ width: 300 }} placeholder="Contract Party A" />
                   </Form.Item>
                 </div>
                 <div className="item_1">
@@ -335,7 +335,7 @@ const ContractContent = (props: any) => {
                     label="Contract Party B"
                     rules={[{ required: true, message: `${tipList[2]}` }]}
                   >
-                    <Input style={{ width: 200 }} placeholder="Contract Party B" />
+                    <Input style={{ width: 300 }} placeholder="Contract Party B" />
                   </Form.Item>
                 </div>
               </div>
@@ -364,7 +364,7 @@ const ContractContent = (props: any) => {
                   label="Contract Title"
                   rules={[{ required: true, message: `${tipList[4]}` }]}
                 >
-                  <Input style={{ width: 200 }} placeholder="Contract Title" />
+                  <Input style={{ width: 500 }} placeholder="Contract Title" />
                 </Form.Item>
               </div>
 
@@ -478,28 +478,6 @@ const ContractContent = (props: any) => {
                     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
-                    defaultCurrent={pageNumber}
-                    total={numPages * 10}
-                    onChange={onChangePage}
-                  /> */}
                 </>
               ) : fileInfo.type == 'jpg' || fileInfo.type == 'png' ? (
                 // 图片用指定格式

src/pages/ContractManagement/ContractDetail.tsx

@@ -162,7 +162,7 @@ const ContractContent = (props: any) => {
 
   // 上传文件设置
   const uploadProps = {
-    accept: '.doc,.docx,.jpg,.png,.pdf',
+    accept: '.docx,.jpg,.png,.pdf',
     action: '/tos/image/upload',
     data: { imageType: 'tosContract', extends: comtyName },
     fileList: fileList,
@@ -272,24 +272,24 @@ const ContractContent = (props: any) => {
             // 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 }} disabled placeholder="Contract Number" />
+                </Form.Item>
+              </div>
               {/* 合同编号、甲方、乙方 */}
               <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 }} disabled 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 }} disabled placeholder="Contract Party A" />
+                    <Input style={{ width: 300 }} disabled placeholder="Contract Party A" />
                   </Form.Item>
                 </div>
                 <div className="item_1">
@@ -298,7 +298,7 @@ const ContractContent = (props: any) => {
                     label="Contract Party B"
                     rules={[{ required: true, message: `${tipList[2]}` }]}
                   >
-                    <Input style={{ width: 200 }} disabled placeholder="Contract Party B" />
+                    <Input style={{ width: 300 }} disabled placeholder="Contract Party B" />
                   </Form.Item>
                 </div>
               </div>
@@ -328,7 +328,7 @@ const ContractContent = (props: any) => {
                   label="Contract Title"
                   rules={[{ required: true, message: `${tipList[4]}` }]}
                 >
-                  <Input style={{ width: 200 }} disabled placeholder="Contract Title" />
+                  <Input style={{ width: 500 }} disabled placeholder="Contract Title" />
                 </Form.Item>
               </div>
 
@@ -429,7 +429,8 @@ const ContractContent = (props: any) => {
                 // pdf 换一种
                 <>
                   <PDF
-                    file={stringSplit(fileInfo.url, 'm/cash')}
+                    // file={stringSplit(fileInfo.url, 'm/cash')}
+                    file={fileInfo.url}
                     page={pageNumber}
                     scale={1.25}
                     onDocumentComplete={onDocumentLoadSuccess}
@@ -453,7 +454,8 @@ const ContractContent = (props: any) => {
               ) : (
                 <FileViewer
                   fileType={fileInfo.type}
-                  filePath={stringSplit(fileInfo.url, 'm/cash')}
+                  // filePath={stringSplit(fileInfo.url, 'm/cash')}
+                  filePath={fileInfo.url}
                 />
               )
             ) : (