|
|
|
@ -1,5 +1,7 @@ |
|
|
|
import React, {useState, useEffect} from 'react' |
|
|
|
import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table } from 'antd' |
|
|
|
import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table, message, Pagination } from 'antd' |
|
|
|
import { dictionary } from "@/config/common" |
|
|
|
import ajax from "@/services" |
|
|
|
import './index.scss' |
|
|
|
|
|
|
|
function DownloadModal (props) { |
|
|
|
@ -21,21 +23,182 @@ function DownloadModal (props) { |
|
|
|
|
|
|
|
const tableColumns = [ |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
width: 60, |
|
|
|
title: '文件名', |
|
|
|
width: 200, |
|
|
|
align: 'center', |
|
|
|
render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1 |
|
|
|
dataIndex: 'name' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '进度', |
|
|
|
width: 200, |
|
|
|
align: 'center', |
|
|
|
dataIndex: 'progress', |
|
|
|
render: (progress) => ((progress || 0) * 100) + '%' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '文件大小', |
|
|
|
width: 200, |
|
|
|
align: 'center', |
|
|
|
dataIndex: 'size' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '排队位置', |
|
|
|
width: 150, |
|
|
|
align: 'center', |
|
|
|
dataIndex: 'queue' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '状态', |
|
|
|
width: 100, |
|
|
|
align: 'center', |
|
|
|
dataIndex: 'status', |
|
|
|
render: (status) => { |
|
|
|
if (status == 1) { |
|
|
|
return ( |
|
|
|
<div className="download-status-1" style={{color: '#3AA9FF'}}>导出中</div> |
|
|
|
) |
|
|
|
} else if (status == 2) { |
|
|
|
return ( |
|
|
|
<div className="download-status-2" style={{color: '#2ADC41'}}>已完成</div> |
|
|
|
) |
|
|
|
} else if (status == 3) { |
|
|
|
return ( |
|
|
|
<div className="download-status-3">等待中</div> |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '创建时间', |
|
|
|
width: 200, |
|
|
|
align: 'center', |
|
|
|
dataIndex: 'create_time' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "操作", |
|
|
|
// width: 60, |
|
|
|
align: 'center', |
|
|
|
render: (text, record, index) => { |
|
|
|
return ( |
|
|
|
<div className='download-list-action'> |
|
|
|
{ |
|
|
|
record.status == 2 ? ( |
|
|
|
<div className="download-btn-download" style={{color: '#3AA9FF'}} onClick={() => handleDownload(record.url)}>下载</div> |
|
|
|
) : null |
|
|
|
} |
|
|
|
<div className="download-btn-del" style={{color: '#EC5761'}} onClick={() => handleDel(record)}>删除</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
const paginationProps = { |
|
|
|
className: "pagination-common", |
|
|
|
showQuickJumper: true, |
|
|
|
showSizeChanger: true, |
|
|
|
current: formData.pn, |
|
|
|
total: resultData?.total, |
|
|
|
pageSize: formData.length, |
|
|
|
pageSizeOptions: dictionary.pageSizeOptions, |
|
|
|
onChange: (current, size) => { |
|
|
|
setFormData({ |
|
|
|
...formData, |
|
|
|
...{ pn: current == formData.pn ? 1 : current, length: size } |
|
|
|
}) |
|
|
|
ajaxGetDownloadList({ |
|
|
|
...formData, |
|
|
|
...{ pn: current == formData.pn ? 1 : current, length: size } |
|
|
|
}) |
|
|
|
}, |
|
|
|
onShowSizeChange: (current, size) => { |
|
|
|
setFormData({ |
|
|
|
...formData, |
|
|
|
...{ pn: current == formData.pn ? 1 : current, length: size } |
|
|
|
}) |
|
|
|
ajaxGetDownloadList({ |
|
|
|
...formData, |
|
|
|
...{ pn: current == formData.pn ? 1 : current, length: size } |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleDownload = (url) => { |
|
|
|
window.open(url) |
|
|
|
} |
|
|
|
|
|
|
|
const ajaxGetDownloadList = (params=formData) => { |
|
|
|
ajax.getDownloadList(params).then(e => { |
|
|
|
if (e.status == 20000 && e.data.list.length) { |
|
|
|
setResultDate({ |
|
|
|
list: [...e.data.list], |
|
|
|
total: e.data.total |
|
|
|
}) |
|
|
|
} else { |
|
|
|
setResultDate({ |
|
|
|
list: [], |
|
|
|
total: 0 |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const ajaxDownloadDel = (id) => { |
|
|
|
return new Promise((resolved, rejected) => { |
|
|
|
ajax.delDownload({id: id}).then(e => { |
|
|
|
if (e.status == 20000) { |
|
|
|
resolved(e.message) |
|
|
|
} else { |
|
|
|
message.error(e.message) |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
message.error(err) |
|
|
|
rejected(err) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const handleDel = (data) => { |
|
|
|
Modal.confirm({ |
|
|
|
title: `确认删除`, |
|
|
|
content: `是否确认删除文件 ${data.name}？`, |
|
|
|
onOk: () => { |
|
|
|
ajaxDownloadDel(data.id).then(msg => { |
|
|
|
ajaxGetDownloadList() |
|
|
|
message.success('下载任务删除成功') |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const handleTabChange = (v) => { |
|
|
|
setFormData({ |
|
|
|
...formData, |
|
|
|
type: v, |
|
|
|
pn: 1 |
|
|
|
}) |
|
|
|
ajaxGetDownloadList({ |
|
|
|
...formData, |
|
|
|
type: v, |
|
|
|
pn: 1 |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (visible) { |
|
|
|
setFormData({ |
|
|
|
type: '0', |
|
|
|
pn: 1, |
|
|
|
length: 20 |
|
|
|
}) |
|
|
|
ajaxGetDownloadList({ |
|
|
|
type: '0', |
|
|
|
pn: 1, |
|
|
|
length: 20 |
|
|
|
}) |
|
|
|
} |
|
|
|
}, [visible]) |
|
|
|
|
|
|
|
return ( |
|
|
|
<Modal |
|
|
|
open={visible} |
|
|
|
@ -53,7 +216,7 @@ function DownloadModal (props) { |
|
|
|
<div className="modal-export-content"> |
|
|
|
<div className="export-tabs-wrapper"> |
|
|
|
<Tabs |
|
|
|
defaultActiveKey="1" |
|
|
|
defaultActiveKey="0" |
|
|
|
onChange={handleTabChange} |
|
|
|
items={[ |
|
|
|
{ label: `全部`, key: '0' }, |
|
|
|
@ -69,11 +232,13 @@ function DownloadModal (props) { |
|
|
|
dataSource={resultData?.list || []} |
|
|
|
columns={tableColumns} |
|
|
|
pagination={false} |
|
|
|
scroll={{y: 'calc(100% - 50px)'}} |
|
|
|
// scroll={} |
|
|
|
loading={loading} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="export-pagination-wrapper"></div> |
|
|
|
<div className="export-pagination-wrapper"> |
|
|
|
<Pagination {...paginationProps} className="pagination-common" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
|
