Commit 93a133a8 authored by cellee's avatar cellee

小区新增重构

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent ff46bff4
/*
* @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>
</>
);
};
......
......@@ -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;
}
}
}
/*
* @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版本', {}],
];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment