liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新版本库

Browse Source
This commit is contained in:
ajaxfan
2021-01-16 11:29:42 +08:00
parent b42e0c1ddd
commit ff889c3db4
352 changed files with 39993 additions and 15507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/components/Upload/react-resumable.js vendored
View File

@ -1,5 +1,5 @@
import React from "react";
import { Table, Tag, Space, Progress, Button, Row, Col, Modal } from 'antd';
import { Table, Divider, Space, Tag, Progress, Button, Row, Col, Modal, Steps } from 'antd';
import { PauseOutlined, DeleteOutlined, CaretRightOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import Resumablejs from "./resumable";
import './style.css';
@ -11,12 +11,18 @@ export default class ReactResumableJs extends React.Component {
constructor(props) {
super(props);
this.state = {
fileList: [],
isPaused: false,
isUploading: false,
isSupported: false,
fileList: [],// 任务队列
isPaused: false,// 暂停上传
isUploading: false,// 正在上传
isSupported: false,// 浏览器支持H5分片接口
task: {// 当前执行的任务
id: 0,// 任务id
prograss: 0,// 任务进度
},
timer: 0,// 计时器
};
this.resumable = null;
this.timerInterval;
}
componentDidMount = () => {
@ -43,55 +49,61 @@ export default class ReactResumableJs extends React.Component {
};
render() {
// AntDesign Step组件， 用于指示业务运行阶段
const { Step } = Steps;
const columns = [
{
title: '文件名称',
dataIndex: 'filename',
key: 'filename',
render: text => <b>{text}</b>,
title: '描述',
dataIndex: 'filename',
key: 'filename',
render: text => <b>{text}</b>,
},
{
title: '上传进度',
dataIndex: 'prograss',
key: 'prograss',
responsive: ['lg'],
render: (val, record) => <Progress percent={val} status={ record.error ? "exception" : "active"} />,
title: '进度',
dataIndex: 'prograss',
key: 'prograss',
width: '40%',
responsive: ['lg'],
render: (val, record) => <Progress percent={val} status={record.error ? "exception" : "active"} />,
},
{
title: '动作',
dataIndex: 'action',
key: 'action',
width: '30%',
responsive: ['md'],
render: (text, record) => (
<Space size="middle">
<Button type="dashed" style={{display: !record.pause && !record.complete && !record.error ? '' : 'none'}} icon={<PauseOutlined/>} onClick={() => this.__uploadPause(record.filename)}>暂停上传</Button>
<Button type="dashed" style={{display: record.pause && !record.complete && !record.error ? '' : 'none'}} icon={<CaretRightOutlined/>} onClick={() => this.__uploadResum(record.filename)}>恢复上传</Button>
<Button type="danger" style={{display: record.pause || record.complete || record.error ? '' : 'none'}} icon={<DeleteOutlined/>} onClick={() => this.__removeFile(record.filename)}>移除文件</Button>
</Space>
),
title: '动作',
dataIndex: 'action',
key: 'action',
width: '20%',
responsive: ['md'],
render: (text, record) => {
if (record.uploading) {
return (
<Space size="middle">
<Button type="dashed" style={{ display: !record.pause && !record.complete && !record.error ? '' : 'none' }} icon={<PauseOutlined />} onClick={() => this.__uploadPause(record.filename)}>暂停</Button>
<Button type="dashed" style={{ display: record.pause && !record.complete && !record.error ? '' : 'none' }} icon={<CaretRightOutlined />} onClick={() => this.__uploadResum(record.filename)}>恢复</Button>
<Button type="danger" style={{ display: record.pause || record.error ? '' : 'none' }} icon={<DeleteOutlined />} onClick={() => this.__removeFile(record.filename)}>移除</Button>
</Space>
);
}
},
},
];
];
return (
<>
<Row>
<Col span={24}>
<div id={this.props.dropTargetID} ref={node => this.dropZone = node}>
<div className="resumable-error" style={{display: this.state.isSupported ? 'none' : ''}}>
Your browser, unfortunately, is not supported by Resumable.js. The library requires support for <a href="http://www.w3.org/TR/FileAPI/">the HTML5 File API</a> along with <a href="http://www.w3.org/TR/FileAPI/#normalization-of-params">file slicing</a>.
<div id={this.props.dropTargetID} ref={node => this.dropZone = node} style={{ display: this.state.fileList.length === 0 ? '' : 'none' }}>
<div className="resumable-error" style={{ display: this.state.isSupported ? 'none' : '' }}>
Your browser, unfortunately, is not supported by Resumable.js. The library requires support for <a href="http://www.w3.org/TR/FileAPI/">the HTML5 File API</a> along with <a href="http://www.w3.org/TR/FileAPI/#normalization-of-params">file slicing</a>.
</div>
<div className="resumable-drop" style={{display: this.state.isSupported ? '' : 'none'}}>
文件拖拽到该区域或者
<a className="resumable-browse"
ref={node=> {this.uploader = node; this.dropZone = node;}}
type="file"
id={this.props.uploaderID}
className='btn'
name={this.props.uploaderID + '-upload'}
accept={this.props.fileAccept || '*'}
disabled={this.props.disableInput || false}><u>点击连接添加文件</u></a>
<div className="resumable-drop" style={{ display: this.state.isSupported ? '' : 'none' }}>
文件拖拽到该区域或者
<a className="resumable-browse"
ref={node => { this.uploader = node; this.dropZone = node; }}
type="file"
id={this.props.uploaderID}
className='btn'
name={this.props.uploaderID + '-upload'}
accept={this.props.fileAccept || '*'}
disabled={this.props.disableInput || false}><u>点击链接添加文件</u></a>
</div>
</div>
</Col>
@ -99,13 +111,50 @@ export default class ReactResumableJs extends React.Component {
<Row>
<Col span={24}>
<Table columns={columns} dataSource={[...this.state.fileList]} pagination={false} bordered/>
<center>
<h1>总体作业已用时</h1>
<h2>{(() => {
let _timer = this.state.timer;
let _hour = parseInt(_timer / 3600);
let _minute = parseInt(_timer % 3600 / 60);
let _second = parseInt(_timer % 3600 % 60);
return this.__format(_hour) + ":" + this.__format(_minute) + ":" + this.__format(_second);
})()}</h2>
</center>
</Col>
<Col span={24} style={{ paddingTop: '5px' }}>
<Steps current={this.state.task.id} percent={this.state.task.prograss}>
<Step title="招标文件" description="上传招标文件." />
<Step title="文件解密" description="文件解密处理." />
<Step title="任务完成" description="业务完成." />
</Steps>
</Col>
</Row>
<Divider dashed />
<Row>
<Col span={24}>
<Table columns={columns} dataSource={[...this.state.fileList]} pagination={false} bordered />
</Col>
</Row>
</>
);
}
/**
* 格式化计时器
* @param {*} value
*/
__format(value) {
if (value < 10) {
return '0' + value;
}
return value;
}
/**
* 实例化上传组件
*/
@ -137,14 +186,14 @@ export default class ReactResumableJs extends React.Component {
*/
__fileAddedListener(file) {
// 更新文件队列表单
let _cache = this.state.fileList;
let _cache = this.state.fileList;
_cache.length = 0;
_cache.push({
key: _cache.length + 1,
filename: file.fileName,
uploading: true,
prograss: Math.floor(file.progress()*100),
prograss: Math.floor(file.progress() * 100),
});
// 更新组件状态，进行组件重绘
this.setState({ fileList: _cache });
@ -153,6 +202,9 @@ export default class ReactResumableJs extends React.Component {
} else {
this.resumable.upload();
}
this.timerInterval = setInterval(() => {
this.setState({ timer: this.state.timer + 1 });
}, 1000);
}
/**
@ -164,11 +216,11 @@ export default class ReactResumableJs extends React.Component {
let _cache = this.state.fileList;
let matchedObj = _cache.find((obj) => obj.filename === file.fileName);
if(matchedObj) {
matchedObj.prograss = Math.floor(file.progress()*100);
if (matchedObj) {
matchedObj.prograss = Math.floor(file.progress() * 100);
// 更新组件状态，进行组件重绘
this.setState({ fileList: _cache });
this.setState({ fileList: _cache, task: { id: 0, process: matchedObj.prograss } });
}
}
@ -177,19 +229,40 @@ export default class ReactResumableJs extends React.Component {
* @param {*} file
*/
__fileSuccessListener(file) {
// 更新文件队列表单
let _cache = this.state.fileList;
let matchedObj = _cache.find((obj) => obj.filename === file.fileName);
if(matchedObj) {
matchedObj.complete = true;
// 更新组件状态，进行组件重绘
this.setState({ fileList: _cache });
}
if (matchedObj) {
matchedObj.complete = true;
this.setState({ fileList: _cache });// 更新组件状态，进行组件重绘
}
if (typeof this.props.onUploadSuccess === "function") {
this.props.onUploadSuccess(file, this.resumable);
_cache.length = 0;// 清空已完成的任务条目
this.props.onUploadSuccess(file, _cache, (index, description, percent) => {
let obj = _cache[index];
if (obj) {
obj.prograss = Math.floor(percent);
obj.filename = description;
this.setState({ fileList: _cache, task: { id: 1, prograss: obj.prograss } });
}
// console.log(obj.prograss)
// alert(obj.prograss)
// 确认是否所有任务都已完成
if (obj.prograss >= 100) {
// this.setState({ fileList: [], task: { id: 2, prograss: 100 } });
this.setState({ fileList: [], task: { id: 0, prograss: 0 } });
this.setState({ timer: 0 });
clearInterval(this.timerInterval);
} else if (obj.prograss == 2) {
this.setState({ fileList: [], task: { id: 0, prograss: 0 } });
this.setState({ timer: 0 });
clearInterval(this.timerInterval);
} else {
this.setState({ fileList: _cache, task: { id: 1, prograss: obj.prograss } });
}
});
}
}
@ -202,8 +275,8 @@ export default class ReactResumableJs extends React.Component {
let _cache = this.state.fileList;
let matchedObj = _cache.find((obj) => obj.filename === file.fileName);
if(matchedObj) {
if (matchedObj) {
matchedObj.error = true;
// 更新组件状态，进行组件重绘
this.setState({ fileList: _cache });
@ -222,7 +295,7 @@ export default class ReactResumableJs extends React.Component {
const file = this.resumable.files.find(obj => obj.file.name === filename);
const selfRef = this;
if(!file.isComplete()) {
if (!file.isComplete()) {
const { confirm } = Modal;
confirm({
title: '确定要移除当前任务吗?',
@ -243,9 +316,9 @@ export default class ReactResumableJs extends React.Component {
__handleRemoveFile(filename) {
// 更新文件队列表单
let _cache= this.state.fileList;
let _cache = this.state.fileList;
// 移除指定的元素
_cache.splice(_cache.findIndex((obj) => obj.filename === filename), 1)
_cache.splice(_cache.findIndex((obj) => obj.filename === filename), 1)
// 修改上传列表状态
this.setState({ fileList: _cache });
@ -254,15 +327,15 @@ export default class ReactResumableJs extends React.Component {
/**
* 暂停上传
*/
__uploadPause(filename) {
__uploadPause(filename) {
// 取消选中文件的上传操作
this.resumable.files.find(obj => obj.file.name === filename)._pause = true;
// 更新文件队列表单
let _cache = this.state.fileList;
let matchedObj = _cache.find((obj) => obj.filename === filename);
if(matchedObj) {
if (matchedObj) {
matchedObj.pause = true;
// 更新组件状态，进行组件重绘
this.setState({ fileList: _cache });
@ -272,7 +345,7 @@ export default class ReactResumableJs extends React.Component {
/**
* 恢复上传
*/
__uploadResum(filename) {
__uploadResum(filename) {
let file = this.resumable.files.find(obj => obj.file.name === filename);
// 取消暂停状态
file._pause = false;
@ -282,8 +355,8 @@ export default class ReactResumableJs extends React.Component {
let _cache = this.state.fileList;
let matchedObj = _cache.find((obj) => obj.filename === filename);
if(matchedObj) {
if (matchedObj) {
delete matchedObj.pause;
// 更新组件状态，进行组件重绘
this.setState({ fileList: _cache });
@ -299,33 +372,16 @@ ReactResumableJs.defaultProps = {
uploaderID: 'default-resumable-uploader',
dropTargetID: 'dropTarget',
query: {},
filetypes: [],// 文件扩展名
fileAccept: '*',// 文件头类型
fileAccept: "*",// 文件头类型
maxFileSize: 1204 * 1024 * 1024 * 1024,// max size 1T
onUploadErrorCallback: (file, errorCount) => {
console.log('error', file, errorCount);
},
onFileRemoved: function (file) {
return file;
},
onCancelUpload: function () {
return true;
},
onPauseUpload: function () {
return true;
},
onResumeUpload: function () {
return true;
},
onStartUpload: function () {
return true;
},
onUploadSuccess: function() {
return true;
},
onUploadError: function() {
return true;
},
onUploadErrorCallback: (file, errorCount) => { },
onFileRemoved: file => file,
onCancelUpload: () => true,
onPauseUpload: () => true,
onResumeUpload: () => true,
onStartUpload: () => true,
onUploadSuccess: () => true,
onUploadError: () => true,
disableDragAndDrop: false,// 允许拖拽操作
chunkSize: 5 * 1024 * 1024,// 每个分批那的尺寸 5M
simultaneousUploads: 5,// 同步上传的分片数
@ -337,6 +393,6 @@ ReactResumableJs.defaultProps = {
startButton: null,
pauseButton: null,
previousText: "",
headerObject : {},
headerObject: {},
forceChunkSize: false
};

2279
src/components/Upload/resumable.js
View File

File diff suppressed because it is too large Load Diff

2
src/components/Upload/style.css
View File

@ -1,7 +1,7 @@
/* Uploader: Drag & Drop */
.resumable-error {font-size:14px; font-style:italic;}
.resumable-drop {padding:55px 15px; font-size:18px; text-align:center; color:#666; font-weight:bold;background-color:#eee; border:2px dashed #aaa; border-radius:10px; margin-top:40px; z-index:9999;}
.resumable-drop {padding:55px 15px; font-size:18px; text-align:center; color:#666; font-weight:bold;background-color:#eee; border:2px dashed #aaa; border-radius:10px; z-index:9999;}
.dragover {padding:30px; color:#555; background-color:#ddd; border:1px solid #999;}
/* Uploader: Progress bar */