小区新增重构

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

src/components/Form/PdfUpload.tsx

 /*
  * @Author: your name
  * @Date: 2021-02-01 14:54:48
- * @LastEditTime: 2021-02-18 13:54:59
+ * @LastEditTime: 2021-02-18 16:48:37
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\components\Form\PdfUpload.tsx
  */
 import React, { useState } from 'react';
-import { Input, Upload, message, Button, Spin } from 'antd';
+import { Input, Upload, message, Button, Modal, Pagination } from 'antd';
 import {
   LoadingOutlined,
   PlusOutlined,
@@ -15,6 +15,8 @@ import {
   FilePdfOutlined,
 } from '@ant-design/icons';
 
+import PDF from 'react-pdf-js';
+
 interface PriceInputProps {
   value?: any;
   onChange?: any;
@@ -28,9 +30,12 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
   const [idx, setIdx] = useState(0); // 点击的第几个
   const [imgList, setImgList] = useState([] as any); // 列表
 
-  const [PdfUrl, setPdfUrl] = useState(null); //地址
+  const [PdfUrl, setPdfUrl] = useState(null as any); //地址
   const [ModalVisible, setModalVisible] = useState(false); //显示隐藏
 
+  const [numPages, setNumPages] = useState(1 as any); // 总页码数
+  const [pageNumber, setPageNumber] = useState(1); // 当前页码数
+
   // 上传前检测
   function beforeUpload(file: any) {
     const isJpgOrPng = file.type === 'application/pdf' || file.type === 'pdf';
@@ -46,10 +51,11 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
 
   // 上传成功怎么做
   const handleChange = (info: any) => {
-    console.log(info);
+    // console.log(info);
     let { status, response } = info.file;
+
+    // 加载中状态
     if (status === 'uploading') {
-      // setLoading();
       let v = loading;
       v[idx] = true;
       setLoading([...v]);
@@ -58,8 +64,9 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
       v[idx] = false;
       setLoading([...v]);
     }
+
+    // 上传成功后处理
     if (status === 'done') {
-      console.log('上传成功');
       let { fileName, key, fileUrl } = response.data;
       let list = JSON.parse(JSON.stringify(imgList));
       let obj = {
@@ -73,9 +80,15 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
         message.warning('The current category has been deleted');
         return false;
       } else {
+        // 在判断输入框填了没 ，填了的话去掉提示
+        if (list[parseInt(key)].name !== '') {
+          list[parseInt(key)].tip = false;
+        }
         // 否则添加进去
         list[parseInt(key)].fileList.push(obj);
         setImgList([...list]);
+
+        onChange && onChange(list);
       }
     }
   };
@@ -83,15 +96,29 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
   // 新增的按钮
   const add = () => {
     let list = JSON.parse(JSON.stringify(imgList));
-    let item = {
-      id: Math.floor(Math.random() * 100),
-      name: '',
-      fileList: [],
-      tip: false,
-      loading: false,
-      message: '123',
-    };
-    list.push(item);
+    let valve = false; // 控制阀
+    for (let i in list) {
+      if (list[i].name == '' || list[i].fileList.length == 0) {
+        list[i].tip = true;
+        valve = true;
+      } else {
+        list[i].tip = false;
+      }
+    }
+
+    if (!valve) {
+      let item = {
+        id: Math.floor(Math.random() * 100),
+        name: '',
+        fileList: [],
+        tip: false,
+        message: 'Required',
+      };
+      list.push(item);
+
+      onChange && onChange(list);
+    }
+
     setImgList([...list]);
   };
 
@@ -99,7 +126,10 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
   const del = (index: any) => {
     let list = JSON.parse(JSON.stringify(imgList));
     list.splice(index, 1);
+
     setImgList([...list]);
+
+    onChange && onChange(list);
   };
 
   //携带数据 、 传递给后台加 key
@@ -110,45 +140,110 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
 
   // 点击预览
   const handlePreview = async (file: any) => {
+    // console.log(file);
     setPdfUrl(file);
     setModalVisible(true);
   };
 
+  // 点击删除
+  const onRemove = (e: any) => {
+    let list = JSON.parse(JSON.stringify(imgList));
+    for (let i in list) {
+      let ary = list[i].fileList;
+      for (let v in ary) {
+        if (ary[v].name == e.name) {
+          ary.splice(v, 1);
+        }
+      }
+    }
+    setImgList([...list]);
+
+    onChange && onChange(list);
+  };
+
   // 点击上传记录index
   const opens = (i: any) => {
     setIdx(i);
   };
 
+  // 上传pdf的图标
   const icons = () => {
     return <FilePdfOutlined />;
   };
 
+  //隐藏框
+  const handleCancel = () => {
+    setModalVisible(false);
+    // 还原页码数
+    setNumPages(1);
+    setPageNumber(1);
+  };
+
+  // pdf 总页数
+  const onDocumentLoadSuccess = (pages: any) => {
+    setNumPages(pages);
+  };
+
+  // 切换pdf 总数
+  const onChangePage = (page: any) => {
+    setPageNumber(page);
+  };
+
+  // 输入框
+  const inpChange = (e: any) => {
+    let { id, value } = e.target;
+    let list = JSON.parse(JSON.stringify(imgList));
+    list[id].name = value;
+
+    // 在判断上传文件了没 ，上传了的话去掉提示
+    if (list[id].fileList.length > 0) {
+      list[id].tip = false;
+    }
+
+    // console.log(list);
+    setImgList([...list]);
+
+    onChange && onChange(list);
+  };
+
   return (
     <>
       {imgList.map((item: any, index: any) => {
         return (
           <div className="pdf" key={index}>
             <div className={item.tip ? 'inpt ant-form-item-has-error' : 'inpt'}>
-              <Input placeholder="Basic usage" className="pdf-input" />
+              <Input
+                placeholder="Basic usage"
+                className="pdf-input"
+                onChange={inpChange}
+                id={index}
+                value={item.name}
+              />
               {item.tip ? <span className="tips">{item.message}</span> : null}
             </div>
-            <div className={item.tip ? 'pdf-div ant-upload-list-item-error' : 'pdf-div'}>
+            <div
+              className={item.tip ? 'pdf-div ant-upload-list-item-error' : 'pdf-div'}
+              onClick={() => opens(index)}
+              // key={Math.random()}
+            >
               <Upload
                 className="avatar-uploader"
                 accept=".pdf"
                 action={action != null ? action : '/tos/community/pdf/upload'}
                 data={() => updeta(index)} // 携带数据
                 name="file"
-                listType="picture-card"
+                listType="picture-card" // 展现方式
                 fileList={item.fileList}
+                onChange={handleChange} //上传文件改变时的状态
                 onPreview={handlePreview} // 预览
                 beforeUpload={beforeUpload} //上传前检测
-                onChange={handleChange}
-                id={index}
-                iconRender={icons}
+                onRemove={onRemove}
+                // id={index}
+
+                iconRender={icons} // 上传成功后的图标
               >
                 {item.fileList && item.fileList.length >= 5 ? null : (
-                  <div onClick={() => opens(index)}>
+                  <div>
                     {loading[index] ? <LoadingOutlined /> : <PlusOutlined />}
                     {/* <PlusOutlined></PlusOutlined> */}
                     <div style={{ marginTop: 8 }}>Upload</div>
@@ -181,6 +276,30 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
       )}
 
       {/* 弹出层 */}
+      <Modal
+        title={PdfUrl != null ? PdfUrl.name : 'File Preview'}
+        visible={ModalVisible}
+        width={650}
+        onCancel={handleCancel}
+        style={{ textAlign: 'center' }}
+        footer={null}
+      >
+        <>
+          <PDF
+            file={PdfUrl ? PdfUrl.url : null}
+            page={pageNumber}
+            scale={1}
+            onDocumentComplete={onDocumentLoadSuccess}
+          />
+          <Pagination
+            style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
+            simple
+            current={pageNumber}
+            total={numPages * 10}
+            onChange={onChangePage}
+          />
+        </>
+      </Modal>
     </>
   );
 };

src/components/Form/zip.less

@@ -6,6 +6,7 @@
 }
 
 // pdf上传
+
 .pdf {
   margin-bottom: 15px;
   display: flex;
@@ -58,3 +59,11 @@
   height: 80px;
   border-radius: 2px;
 }
+
+.ant-form-item-has-error {
+  .pdf-div {
+    .ant-upload {
+      border-color: #f00;
+    }
+  }
+}

src/utils/params.ts

 /*
  * @Author: your name
  * @Date: 2020-11-19 20:34:18
- * @LastEditTime: 2021-01-28 15:34:25
+ * @LastEditTime: 2021-02-18 16:50:47
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\utils\params.ts
@@ -95,4 +95,5 @@ export const requestList = [
   ['/tos/community/facilities/get/detail', '60 获取小区设施详情', {}],
   ['/tos/bookingService/delete', '61 设施删除', {}],
   ['/tos/community/download/excel', '62 关闭小区后获取当前小区预约需要退费的表格', {}],
+  ['/tos/tosCommunity/saveCommunity', '63 新建小区PDF版本', {}],
 ];