新建编辑小区 附件上传预览重做更新，文案修复

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

src/models/CommunityManagement/CellList.ts

@@ -76,7 +76,12 @@ export default {
             {
               let Result = resp;
               yield put({ type: 'returnResult', Result });
-
+              // 新增成功清空Data 用来刷新最新数据
+              let Data = null;
+              let village = null;
+              yield put({ type: 'returnPage', Data });
+              yield put({ type: 'returnVillage', village });
+              // 提示跳转
               message.success(`Information saved successfully!`);
               history.push('/CommunityManagement/CellList');
             }

src/pages/CommunityManagement/CellList/Adds.tsx

 import React, { useState, useEffect } from 'react';
 import { connect } from 'dva';
+import { LeftOutlined, EditOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import {
-  LeftOutlined,
-  EditOutlined,
-  UploadOutlined,
-  LinkOutlined,
-  PlusOutlined,
-} from '@ant-design/icons';
-import { Form, Input, Button, TimePicker, Checkbox, Upload, message, Spin } from 'antd';
+  Form,
+  Input,
+  Image,
+  Button,
+  TimePicker,
+  Checkbox,
+  Upload,
+  message,
+  Spin,
+  Modal,
+  Pagination,
+} from 'antd';
 // 样式
 import './celllist.less';
 import { RA, ResultClear } from '@/utils/method';
@@ -18,13 +24,18 @@ import moment from 'moment';
 import { getNumber } from '@/utils/string'; // 正则
 import imgs from '@/assets/logo_icon_bg.png';
 
+import FileViewer from 'react-file-viewer';
+import PDF from 'react-pdf-js';
+
 const { RangePicker } = TimePicker;
 
 // 接口申明
 interface objc {}
 
 const Adds = (props: any) => {
-  const { Data, dispatch, loading, Result } = props;
+  const module = 'CellList';
+
+  const { Data, dispatch, loading, Result, imgUrl } = props;
 
   const [form] = Form.useForm();
 
@@ -34,20 +45,26 @@ const Adds = (props: any) => {
     { label: 'Offline Payment', value: '1' },
   ];
 
-  // 表单物业费提交值
-  const [PropertyFee, setPropertyFee] = useState(['1']);
-  // 楼巴上传列表
-  const [loubaUpload, setLouba] = useState([] as any);
-  // 物业办事指南列表
-  const [guideUpload, setGuide] = useState([] as any);
-  // 保质期服务列表
-  const [periodUpload, setPeriod] = useState([] as any);
+  const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值
+
+  const [loubaUpload, setLouba] = useState([] as any); // 楼巴上传列表
+  const [guideUpload, setGuide] = useState([] as any); // 物业办事指南列表
+  const [periodUpload, setPeriod] = useState([] as any); // 保质期服务列表
 
   // 监听用户填写小区名   以及后续禁止输入  提示信息
   const [codename, setCodeName] = useState('');
   const [codeStrat, setcodeStrat] = useState(false);
   const [tipMain, setTipMain] = useState('');
 
+  const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏
+  const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息
+
+  //pdf 页码内容
+  const [numPages, setNumPages] = useState(1 as any); // 总页码数
+  const [pageNumber, setPageNumber] = useState(1); // 当前页码数
+
+  const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
+
   // 赋值
   useEffect(() => {
     // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
@@ -96,12 +113,31 @@ const Adds = (props: any) => {
     }
   }, [Data]);
 
-  // 返回上传格式 和 地址
-  function backUpload(str: string, index: number, url?: any) {
+  // 监听编辑预览是否获取到地址以及发生改变
+  useEffect(() => {
+    if (imgUrl != null) {
+      let info = {
+        uid: '1',
+        name: imgUrl.name,
+        status: 'done',
+        type: imgUrl.name.match(/\.([^\.]+)$/)[1].toLowerCase(),
+        url: imgUrl.url,
+      };
+      console.log(info);
+      setpreviewImage(info);
+      setpreviewVisible(true);
+      // openDows(imgUrl.url, imgUrl.name);
+    }
+  }, [imgUrl]);
+
+  // 编辑  返回上传格式 和 地址
+  function backUpload(str: any, index: number, url?: any) {
     let a = {
       uid: str + index,
       name: str,
-      url: url ? url : imgs,
+      status: 'done',
+      type: str.match(/\.([^\.]+)$/)[1].toLowerCase(),
+      url: 'Transfer', // 需要调取接口
     };
     return a;
   }
@@ -114,13 +150,36 @@ const Adds = (props: any) => {
     data: { imageType: 'tosCreateCommunity', extends: codename },
   };
 
+  // 文件上传判断
+  function beforeUpload(file: any) {
+    // 文件大小判断
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('Image must smaller than 2MB!');
+    }
+    return isLt2M;
+  }
+
+  // 上传返回格式
+  function BackFormat(name: any, url: any) {
+    let imgs = [
+      {
+        uid: '-1',
+        name: name,
+        status: 'done',
+        type: name.match(/\.([^\.]+)$/)[1].toLowerCase(),
+        url: url,
+      },
+    ];
+    return imgs;
+  }
+
   // 楼巴上传
   const upload1 = {
-    onChange({ file, fileList }: any) {
-      console.log(file);
-      console.log(fileList);
+    onChange({ file }: any) {
+      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
       if (file.status === 'done') {
-        setLouba(fileList);
+        setLouba(BackFormat(file.name, file.response.data));
         setcodeStrat(true);
         setTipMain('Binding Content Already Exists, Cannot Be Modified！');
       }
@@ -128,11 +187,13 @@ const Adds = (props: any) => {
       uploadMsg(file);
     },
   };
+
   // 指南上传
   const upload2 = {
     onChange({ file, fileList }: any) {
+      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
       if (file.status === 'done') {
-        setGuide(fileList);
+        setGuide(BackFormat(file.name, file.response.data));
         setcodeStrat(true);
         setTipMain('Binding Content Already Exists, Cannot Be Modified！');
       }
@@ -144,8 +205,9 @@ const Adds = (props: any) => {
   // 保质期上传
   const upload3 = {
     onChange({ file, fileList }: any) {
+      file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
       if (file.status === 'done') {
-        setPeriod(fileList);
+        setPeriod(BackFormat(file.name, file.response.data));
         setcodeStrat(true);
         setTipMain('Binding Content Already Exists, Cannot Be Modified！');
       }
@@ -275,11 +337,52 @@ const Adds = (props: any) => {
   // 上传按钮
   const uploadButton = (
     <div>
-      <PlusOutlined />
+      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
       <div style={{ marginTop: 8 }}>Upload</div>
     </div>
   );
 
+  // 文件预览
+  const handlePreview = async (file: any) => {
+    if (file.url == 'Transfer') {
+      // 这是编辑的预览， 需要发送一个请求
+      let msg = {
+        // userToken: '',
+        // type: ans.substr(ans.lastIndexOf('.') + 1),
+        type: 'tosCommunityFileService',
+        fileName: file.name,
+        extends: Data.residentialName,
+      };
+      RA(47, msg, module, dispatch);
+    } else {
+      setpreviewImage(file);
+      setpreviewVisible(true);
+    }
+  };
+
+  // 点击移除图片
+  const handRemove = (key: any) => {
+    key == 1 ? setLouba([]) : key == 2 ? setGuide([]) : setPeriod([]);
+  };
+
+  // 点击遮罩回调
+  const handleCancel = () => {
+    setpreviewVisible(false);
+    // 每次关闭预览都要清掉弹窗图片信息   -- 防止编辑打开页面直接弹出窗口
+    setpreviewImage({});
+    dispatch({ type: module + '/urlRemove' });
+  };
+
+  // pdf 总页数
+  const onDocumentLoadSuccess = (pages: any) => {
+    setNumPages(pages);
+  };
+
+  // 切换pdf 总数
+  const onChangePage = (page: any) => {
+    setPageNumber(page);
+  };
+
   return (
     <>
       <Spin spinning={loading} tip="loading..." size="large">
@@ -370,9 +473,6 @@ const Adds = (props: any) => {
               rules={village[6] as any}
             >
               <Input style={{ width: '160px' }} placeholder="Contacts" maxLength={30} />
-              {/* <Button type="text">
-            <PlusCircleOutlined style={{ fontSize: '18px', color: '#08c' }} />
-          </Button> */}
             </Form.Item>
 
             <Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
@@ -382,15 +482,6 @@ const Adds = (props: any) => {
               <Checkbox onChange={onChange} checked>
                 Offline Payment
               </Checkbox>
-              {/* <Checkbox.Group
-                options={plainOptions}
-                defaultValue={PropertyFee}
-                onChange={onChange}
-              /> */}
-
-              {/* <div className="tip capi">
-                <span>*</span>There will be a service charge for online payment
-              </div> */}
             </Form.Item>
 
             <hr />
@@ -405,8 +496,11 @@ const Adds = (props: any) => {
                 {...uploads}
                 {...upload1}
                 fileList={loubaUpload}
+                beforeUpload={beforeUpload}
                 listType="picture-card"
                 disabled={codename == '' ? true : false}
+                onPreview={() => handlePreview(loubaUpload[0])} // 预览
+                onRemove={() => handRemove(1)} //移除
               >
                 {loubaUpload.length >= 1 ? null : uploadButton}
               </Upload>
@@ -421,8 +515,11 @@ const Adds = (props: any) => {
                 {...uploads}
                 {...upload2}
                 fileList={guideUpload}
+                beforeUpload={beforeUpload}
                 listType="picture-card"
                 disabled={codename == '' ? true : false}
+                onPreview={() => handlePreview(guideUpload[0])} // 预览
+                onRemove={() => handRemove(2)} //移除
               >
                 {guideUpload.length >= 1 ? null : uploadButton}
               </Upload>
@@ -441,8 +538,11 @@ const Adds = (props: any) => {
                 {...uploads}
                 {...upload3}
                 fileList={periodUpload}
+                beforeUpload={beforeUpload}
                 listType="picture-card"
                 disabled={codename == '' ? true : false}
+                onPreview={() => handlePreview(periodUpload[0])} // 预览
+                onRemove={() => handRemove(3)} //移除
               >
                 {periodUpload.length >= 1 ? null : uploadButton}
               </Upload>
@@ -482,6 +582,49 @@ const Adds = (props: any) => {
             </Form.Item>
           </Form>
         </div>
+
+        {/* 附件预览 */}
+        <Modal
+          title={previewImage != null ? previewImage.name : 'File Preview'}
+          visible={previewVisible}
+          width={800}
+          onCancel={handleCancel}
+          style={{ textAlign: 'center' }}
+          footer={null}
+        >
+          {previewImage != null ? (
+            previewImage.type == 'pdf' ? (
+              // pdf 换一种
+              <>
+                <PDF
+                  file={previewImage.url}
+                  page={pageNumber}
+                  scale={1.25}
+                  onDocumentComplete={onDocumentLoadSuccess}
+                />
+                <Pagination
+                  style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
+                  simple
+                  defaultCurrent={pageNumber}
+                  total={numPages * 10}
+                  onChange={onChangePage}
+                />
+              </>
+            ) : previewImage.type == 'jpg' || previewImage.type == 'png' ? (
+              // 图片用指定格式
+
+              <Image
+                src={previewImage.url}
+                preview={false}
+                style={{ margin: '0 auto', textAlign: 'center' }}
+              />
+            ) : (
+              <FileViewer fileType={previewImage.type} filePath={previewImage.url} />
+            )
+          ) : (
+            ''
+          )}
+        </Modal>
       </Spin>
     </>
   );
@@ -491,8 +634,9 @@ const Adds = (props: any) => {
 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;
   const { Result } = state.CellList;
-  return { Data, loading, Result };
+  return { Data, loading, Result, imgUrl };
 }
 export default connect(map)(Adds);

src/pages/CommunityManagement/CellList/CellList.tsx

@@ -119,7 +119,7 @@ const CellLists = (props: any) => {
     if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
       let obj = {
         residentialManagerUserName: comment.label,
-        communityNameList: comment.communityName,
+        communityNameList: comment.communityName.length > 0 ? comment.communityName : null, // 如果为空就返回null  否则后台不好判断
         pageNum: 1,
       };
       setTerm(obj); // 存进搜索条件
@@ -205,6 +205,7 @@ 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/CellList/Details.tsx

@@ -197,7 +197,7 @@ const Detail = (props: any) => {
 
                 {/* ---------- */}
                 <div className="item">
-                  <label>Administrators：</label>
+                  <label>Administrator：</label>
                   <span>{detailData.rows.residentialManagerUserName}</span>
                 </div>
                 {/* ---------- */}
@@ -213,7 +213,7 @@ const Detail = (props: any) => {
             <div className="celBox">
               <div className="list-item">
                 <div className="item">
-                  <label>Louba Timetable：</label>
+                  <label>Shuttle Bus Timetable：</label>
                   <PreView OpenUrl={detailData.rows.balouscheduleUrl}></PreView>
                 </div>
                 {/* ---------- */}
@@ -223,7 +223,7 @@ const Detail = (props: any) => {
                 </div>
                 {/* ---------- */}
                 <div className="item">
-                  <label>Shelf Life Service：</label>
+                  <label>Warranty Period Service：</label>
                   <PreView OpenUrl={detailData.rows.lifeServiceUrl}></PreView>
                 </div>
               </div>