进度条
This commit is contained in:
parent
78214be4be
commit
20132c3086
|
|
@ -1,19 +1,19 @@
|
||||||
.sharedFilesModel {
|
.sharedFilesModel {
|
||||||
>div:nth-child(1) {
|
> div:nth-child(1) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
>span {
|
> span {
|
||||||
color: #EEEEEE;
|
color: #EEEEEE;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
>div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
>span {
|
> span {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -21,7 +21,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>div:nth-child(2) {
|
> div:nth-child(2) {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.updateDiv {
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.ant-progress .ant-progress-text {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,239 +1,337 @@
|
||||||
import styles from '@/components/SharedFilesModel/index.module.scss'
|
import styles from '@/components/SharedFilesModel/index.module.scss'
|
||||||
import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
|
import {
|
||||||
import { Button, Input, Modal, Pagination, Table, message } from 'antd';
|
DeleteOutlined,
|
||||||
import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
|
ProfileOutlined,
|
||||||
import { PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomFile } from '@/api/Meeting';
|
ReloadOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
VerticalAlignBottomOutlined
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import {Button, Input, message, Modal, Pagination, Progress, Table} from 'antd';
|
||||||
|
import {forwardRef, useEffect, useImperativeHandle, useState} from "react";
|
||||||
|
import {DeleteRoomFile, GetRoomFile, GetRoomFileDwUrl, GetRoomUpFileurl, PostRoomFile} from '@/api/Meeting';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { useLocation } from 'react-router-dom';
|
import {useLocation} from 'react-router-dom';
|
||||||
import { storage } from '@/utils';
|
import {storage} from '@/utils';
|
||||||
const { Column } = Table
|
|
||||||
|
const {Column} = Table
|
||||||
|
|
||||||
const SharedFilesModel = forwardRef((props: any, ref: any) => {
|
const SharedFilesModel = forwardRef((props: any, ref: any) => {
|
||||||
useImperativeHandle(ref, () => ({
|
useImperativeHandle(ref, () => ({
|
||||||
getData: () => {
|
getData: () => {
|
||||||
setIsSharedFilesModel(true)
|
setIsSharedFilesModel(true)
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
const { state } = useLocation();
|
const {state} = useLocation();
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||||
const [showRowSelection, setShowRowSelection] = useState(false);
|
const [showRowSelection, setShowRowSelection] = useState(false);
|
||||||
const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
|
const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
|
||||||
const [user, setUser] = useState<any>({});
|
const [user, setUser] = useState<any>({});
|
||||||
const [fileList, setFileList] = useState({
|
const [fileList, setFileList] = useState({
|
||||||
data: [],
|
data: [],
|
||||||
keyword: '',
|
keyword: '',
|
||||||
total: 0,
|
total: 0,
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
})
|
|
||||||
useEffect(() => {
|
|
||||||
let userInfo = JSON.parse(storage.getItem('user') as string)
|
|
||||||
setUser(userInfo)
|
|
||||||
getRoomFile()
|
|
||||||
}, [fileList.pageIndex]);
|
|
||||||
// 获取共享文件列表
|
|
||||||
const getRoomFile = async (): Promise<void> => {
|
|
||||||
await GetRoomFile({
|
|
||||||
pageIndex: fileList.pageIndex,
|
|
||||||
pageSize: fileList.pageSize,
|
|
||||||
keyword: fileList.keyword,
|
|
||||||
roomId: state.roomId
|
|
||||||
}).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
setFileList({
|
|
||||||
...fileList,
|
|
||||||
data: res.data.items.map((item: any) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
key: item.id,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
total: res.data.total
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
const [uploadProgress, setUploadProgress] = useState(0);
|
||||||
return (
|
useEffect(() => {
|
||||||
<>
|
let userInfo = JSON.parse(storage.getItem('user') as string)
|
||||||
<Modal
|
setUser(userInfo)
|
||||||
title="共享文件"
|
getRoomFile()
|
||||||
open={isSharedFilesModel}
|
}, [fileList.pageIndex]);
|
||||||
footer={null}
|
// 获取共享文件列表
|
||||||
centered
|
const getRoomFile = async (): Promise<void> => {
|
||||||
width={'800px'}
|
await GetRoomFile({
|
||||||
onCancel={() => setIsSharedFilesModel(false)}
|
pageIndex: fileList.pageIndex,
|
||||||
maskClosable
|
pageSize: fileList.pageSize,
|
||||||
>
|
keyword: fileList.keyword,
|
||||||
<div>
|
roomId: state.roomId
|
||||||
<div className={styles.sharedFilesModel}>
|
}).then(res => {
|
||||||
<div>
|
if (res.code === 200) {
|
||||||
<span>共{fileList.total}个文件</span>
|
setFileList({
|
||||||
<div style={{ color: 'white' }}>
|
|
||||||
<Input
|
|
||||||
placeholder="搜索"
|
|
||||||
style={{ width: '200px' }}
|
|
||||||
prefix={<SearchOutlined style={{ color: 'white' }} />}
|
|
||||||
onChange={(e) => {
|
|
||||||
setFileList({
|
|
||||||
...fileList,
|
|
||||||
keyword: e.target.value
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onPressEnter={() => {
|
|
||||||
if (fileList.pageIndex === 1) {
|
|
||||||
getRoomFile()
|
|
||||||
} else {
|
|
||||||
setFileList({
|
|
||||||
...fileList,
|
|
||||||
pageIndex: 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
if (fileList.pageIndex === 1) {
|
|
||||||
getRoomFile()
|
|
||||||
} else {
|
|
||||||
setFileList({
|
|
||||||
...fileList,
|
|
||||||
pageIndex: 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ReloadOutlined title='刷新' onClick={() => {
|
|
||||||
if (fileList.pageIndex === 1) {
|
|
||||||
getRoomFile()
|
|
||||||
} else {
|
|
||||||
setFileList({
|
|
||||||
...fileList,
|
|
||||||
pageIndex: 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}} />
|
|
||||||
<ProfileOutlined title={showRowSelection ? '取消框选' : '显示框选'} onClick={() => {
|
|
||||||
setShowRowSelection(!showRowSelection)
|
|
||||||
}} style={{ color: showRowSelection ? '#5575F2' : 'white' }} />
|
|
||||||
{showRowSelection ? <DeleteOutlined title='删除' onClick={() => {
|
|
||||||
if (selectedRowKeys.length) {
|
|
||||||
DeleteRoomFile(selectedRowKeys).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('删除成功！')
|
|
||||||
getRoomFile()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
message.error('请选择文件！')
|
|
||||||
}
|
|
||||||
}} /> : null}
|
|
||||||
<Button type="primary" style={{ backgroundColor: '#31353A' }}
|
|
||||||
onClick={() => {
|
|
||||||
const file = document.createElement("input") as any;
|
|
||||||
file.accept = "image/*,.doc,.docx,.ppt,.pptx,.xls,.xlsx,application/pdf";
|
|
||||||
file.type = "file";
|
|
||||||
file.onchange = async () => {
|
|
||||||
const fileInfo = file.files[0];
|
|
||||||
const maxSize = 100 * 1024 * 1024; // 100MB in bytes
|
|
||||||
|
|
||||||
if (fileInfo.size > maxSize) {
|
|
||||||
message.error('文件太大！请上传小于100MB的文件。')
|
|
||||||
// 清除文件输入框的值，以便用户可以选择其他文件
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const fileType = fileInfo.name.split('.');
|
|
||||||
const fileTypeName = fileType[fileType.length - 1];
|
|
||||||
await GetRoomUpFileurl(state.channelId, fileTypeName).then(async res => {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("name", fileInfo.name);
|
|
||||||
formData.append("OSSAccessKeyId", res.data.ossAccessKeyId);
|
|
||||||
formData.append("key", res.data.key);
|
|
||||||
formData.append("policy", res.data.policy);
|
|
||||||
formData.append("signature", res.data.signature);
|
|
||||||
formData.append("success_action_status", res.data.success_action_status);
|
|
||||||
formData.append("file", fileInfo);
|
|
||||||
await axios.post(res.data.host, formData, {
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "multipart/form-data",
|
|
||||||
"Authorization": `Bearer ${user.token}`
|
|
||||||
},
|
|
||||||
withCredentials: false
|
|
||||||
})
|
|
||||||
await PostRoomFile({
|
|
||||||
fileUrl: res.data.key,
|
|
||||||
size: fileInfo.size,
|
|
||||||
fileName: fileInfo.name,
|
|
||||||
roomId: state.roomId
|
|
||||||
})
|
|
||||||
getRoomFile()
|
|
||||||
})
|
|
||||||
};
|
|
||||||
file.click();
|
|
||||||
}}
|
|
||||||
>上传</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Table
|
|
||||||
size={'small'}
|
|
||||||
rowSelection={showRowSelection ? {
|
|
||||||
selectedRowKeys,
|
|
||||||
onChange: (newSelectedRowKeys: React.Key[]) => {
|
|
||||||
setSelectedRowKeys(newSelectedRowKeys);
|
|
||||||
}
|
|
||||||
} : undefined}
|
|
||||||
dataSource={fileList.data}
|
|
||||||
pagination={false}
|
|
||||||
scroll={{ y: '40vh' }}
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
|
||||||
<Column title="文件" dataIndex="fileName" key="fileName" width={140} />
|
|
||||||
<Column title="更新时间" dataIndex="modifyTime" key="modifyTime" width={200} />
|
|
||||||
<Column title="大小" render={(item) => (
|
|
||||||
<>
|
|
||||||
<span>{item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'}</span>
|
|
||||||
</>
|
|
||||||
)} />
|
|
||||||
<Column title="上传者" dataIndex="userName" key="userName" />
|
|
||||||
<Column title="下载次数"
|
|
||||||
render={(item) => (
|
|
||||||
<>
|
|
||||||
<span>{item.downloadCount}次</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Column title="操作" render={(item) => (
|
|
||||||
<>
|
|
||||||
<VerticalAlignBottomOutlined title='下载' style={{ color: '#5575F2', cursor: 'pointer' }} onClick={() => {
|
|
||||||
GetRoomFileDwUrl(item.fileUrl, item.id).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
const downloadLink = document.createElement("a");
|
|
||||||
downloadLink.href = res.data;
|
|
||||||
downloadLink.download = item.fileName;
|
|
||||||
downloadLink.click();
|
|
||||||
getRoomFile()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}} />
|
|
||||||
{/* <FolderOutlined title='文件' style={{ color: '#FFA000', cursor: 'pointer' }} /> */}
|
|
||||||
</>
|
|
||||||
)} />
|
|
||||||
</Table>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
|
|
||||||
<Pagination size="small" total={fileList.total} onChange={(e) => {
|
|
||||||
setFileList({
|
|
||||||
...fileList,
|
...fileList,
|
||||||
pageIndex: e
|
data: res.data.items.map((item: any) => {
|
||||||
})
|
return {
|
||||||
}} pageSize={fileList.pageSize} current={fileList.pageIndex} hideOnSinglePage={true} />
|
...item,
|
||||||
</div>
|
key: item.id,
|
||||||
</div>
|
}
|
||||||
</div>
|
}),
|
||||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
|
total: res.data.total
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
title="共享文件"
|
||||||
|
open={isSharedFilesModel}
|
||||||
|
footer={null}
|
||||||
|
centered
|
||||||
|
width={'800px'}
|
||||||
|
onCancel={() => setIsSharedFilesModel(false)}
|
||||||
|
maskClosable
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className={styles.sharedFilesModel}>
|
||||||
|
<div className={styles.updateDiv}>
|
||||||
|
<span>共{fileList.total}个文件</span>
|
||||||
|
<div>
|
||||||
|
<Progress percent={uploadProgress} strokeColor={'green'} trailColor={'#e8e8e8'}
|
||||||
|
percentPosition={{align: 'center', type: 'inner'}}
|
||||||
|
size={{width: 100, height: 20}}/>
|
||||||
|
</div>
|
||||||
|
<div style={{color: 'white'}}>
|
||||||
|
<Input
|
||||||
|
placeholder="搜索"
|
||||||
|
style={{width: '200px'}}
|
||||||
|
prefix={<SearchOutlined style={{color: 'white'}}/>}
|
||||||
|
onChange={(e) => {
|
||||||
|
setFileList({
|
||||||
|
...fileList,
|
||||||
|
keyword: e.target.value
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onPressEnter={() => {
|
||||||
|
if (fileList.pageIndex === 1) {
|
||||||
|
getRoomFile()
|
||||||
|
} else {
|
||||||
|
setFileList({
|
||||||
|
...fileList,
|
||||||
|
pageIndex: 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onBlur={() => {
|
||||||
|
if (fileList.pageIndex === 1) {
|
||||||
|
getRoomFile()
|
||||||
|
} else {
|
||||||
|
setFileList({
|
||||||
|
...fileList,
|
||||||
|
pageIndex: 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ReloadOutlined title='刷新' onClick={() => {
|
||||||
|
if (fileList.pageIndex === 1) {
|
||||||
|
getRoomFile()
|
||||||
|
} else {
|
||||||
|
setFileList({
|
||||||
|
...fileList,
|
||||||
|
pageIndex: 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}}/>
|
||||||
|
<ProfileOutlined title={showRowSelection ? '取消框选' : '显示框选'} onClick={() => {
|
||||||
|
setShowRowSelection(!showRowSelection)
|
||||||
|
}} style={{color: showRowSelection ? '#5575F2' : 'white'}}/>
|
||||||
|
{showRowSelection ? <DeleteOutlined title='删除' onClick={() => {
|
||||||
|
if (selectedRowKeys.length) {
|
||||||
|
DeleteRoomFile(selectedRowKeys).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
message.success('删除成功！')
|
||||||
|
getRoomFile()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
message.error('请选择文件！')
|
||||||
|
}
|
||||||
|
}}/> : null}
|
||||||
|
<Button type="primary" style={{backgroundColor: '#31353A'}}
|
||||||
|
onClick={() => {
|
||||||
|
const file = document.createElement("input") as any;
|
||||||
|
file.accept = "image/*,.doc,.docx,.ppt,.pptx,.xls,.xlsx,application/pdf";
|
||||||
|
file.type = "file";
|
||||||
|
file.onchange = async () => {
|
||||||
|
const fileInfo = file.files[0];
|
||||||
|
const maxSize = 100 * 1024 * 1024; // 100MB in bytes
|
||||||
|
|
||||||
</div>
|
if (fileInfo.size > maxSize) {
|
||||||
</div>
|
message.error('文件太大！请上传小于100MB的文件。')
|
||||||
</Modal>
|
// 清除文件输入框的值，以便用户可以选择其他文件
|
||||||
</>
|
return
|
||||||
)
|
}
|
||||||
|
const fileType = fileInfo.name.split('.');
|
||||||
|
const fileTypeName = fileType[fileType.length - 1];
|
||||||
|
await GetRoomUpFileurl(state.channelId, fileTypeName).then(async res => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("name", fileInfo.name);
|
||||||
|
formData.append("OSSAccessKeyId", res.data.ossAccessKeyId);
|
||||||
|
formData.append("key", res.data.key);
|
||||||
|
formData.append("policy", res.data.policy);
|
||||||
|
formData.append("signature", res.data.signature);
|
||||||
|
formData.append("success_action_status", res.data.success_action_status);
|
||||||
|
formData.append("file", fileInfo);
|
||||||
|
await axios.post(res.data.host, formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
"Authorization": `Bearer ${user.token}`
|
||||||
|
},
|
||||||
|
withCredentials: false,
|
||||||
|
onUploadProgress: (progressEvent: any) => {
|
||||||
|
// 获取上传进度
|
||||||
|
const {loaded, total} = progressEvent;
|
||||||
|
const progress = Math.round((loaded * 100) / total);
|
||||||
|
console.log(`上传进度: ${progress}%`);
|
||||||
|
setUploadProgress(progress)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await PostRoomFile({
|
||||||
|
fileUrl: res.data.key,
|
||||||
|
size: fileInfo.size,
|
||||||
|
fileName: fileInfo.name,
|
||||||
|
roomId: state.roomId
|
||||||
|
})
|
||||||
|
getRoomFile()
|
||||||
|
})
|
||||||
|
};
|
||||||
|
file.click();
|
||||||
|
}}
|
||||||
|
>上传</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Table
|
||||||
|
size={'small'}
|
||||||
|
rowSelection={showRowSelection ? {
|
||||||
|
selectedRowKeys,
|
||||||
|
onChange: (newSelectedRowKeys: React.Key[]) => {
|
||||||
|
setSelectedRowKeys(newSelectedRowKeys);
|
||||||
|
}
|
||||||
|
} : undefined}
|
||||||
|
dataSource={fileList.data}
|
||||||
|
pagination={false}
|
||||||
|
scroll={{y: '40vh'}}
|
||||||
|
style={{width: '100%'}}
|
||||||
|
>
|
||||||
|
<Column title="文件" dataIndex="fileName" key="fileName" width={140}/>
|
||||||
|
<Column title="更新时间" dataIndex="modifyTime" key="modifyTime" width={200}/>
|
||||||
|
<Column title="大小" render={(item) => (
|
||||||
|
<>
|
||||||
|
<span>{item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'}</span>
|
||||||
|
</>
|
||||||
|
)}/>
|
||||||
|
<Column title="上传者" dataIndex="userName" key="userName"/>
|
||||||
|
<Column title="下载次数"
|
||||||
|
render={(item) => (
|
||||||
|
<>
|
||||||
|
<span>{item.downloadCount}次</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Column title="操作" render={(item) => (
|
||||||
|
<>
|
||||||
|
<VerticalAlignBottomOutlined title='下载'
|
||||||
|
style={{color: '#5575F2', cursor: 'pointer'}}
|
||||||
|
onClick={async () => {
|
||||||
|
GetRoomFileDwUrl(item.fileUrl, item.id).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.code === 200) {
|
||||||
|
// const downloadLink = document.createElement("a");
|
||||||
|
// downloadLink.href = res.data;
|
||||||
|
// downloadLink.download = item.fileName;
|
||||||
|
axios({
|
||||||
|
url: res.data,
|
||||||
|
method: 'GET',
|
||||||
|
// headers: {
|
||||||
|
// "Authorization": `Bearer ${user.token}`,
|
||||||
|
// "responseType": 'stream'
|
||||||
|
// },
|
||||||
|
onDownloadProgress: (progressEvent: any) => {
|
||||||
|
const totalLength = item.size;
|
||||||
|
console.log(2222222)
|
||||||
|
if (totalLength !== null) {
|
||||||
|
const percentComplete = (progressEvent.loaded / totalLength * 100).toFixed(2);
|
||||||
|
console.log(`下载进度: ${percentComplete}%`);
|
||||||
|
item.percentComplete = percentComplete
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).then(() => {
|
||||||
|
const downloadLink = document.createElement("a");
|
||||||
|
downloadLink.href = res.data;
|
||||||
|
downloadLink.download = item.fileName;
|
||||||
|
downloadLink.click();
|
||||||
|
getRoomFile()
|
||||||
|
})
|
||||||
|
// downloadLink.click();
|
||||||
|
// getRoomFile()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// const url = "https://wgshare.oss-cn-chengdu.aliyuncs.com/share_file/559167236182085/20421555/b24e2c41f47140308c47cdd77e6305c7.jpg?Expires=1722923931&OSSAccessKeyId=LTAI5tQYVQHkkXxXTmjwiSDv&Signature=eJTWD93ifV2v1R6XCHSOa6j1R%2FE%3D"
|
||||||
|
// axios({
|
||||||
|
// url,
|
||||||
|
// method: 'GET',
|
||||||
|
// // headers: {
|
||||||
|
// // "Authorization": `Bearer ${user.token}`,
|
||||||
|
// // "responseType": 'stream'
|
||||||
|
// // },
|
||||||
|
// onDownloadProgress: (progressEvent: any) => {
|
||||||
|
// const totalLength = item.size;
|
||||||
|
// console.log(2222222)
|
||||||
|
// if (totalLength !== null) {
|
||||||
|
// const percentComplete = (progressEvent.loaded / totalLength * 100).toFixed(2);
|
||||||
|
// console.log(`下载进度: ${percentComplete}%`);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .then((response: any) => {
|
||||||
|
// const downloadLink = document.createElement("a");
|
||||||
|
// downloadLink.href = response.data;
|
||||||
|
// downloadLink.download = item.fileName;
|
||||||
|
// downloadLink.click();
|
||||||
|
// getRoomFile()
|
||||||
|
// })
|
||||||
|
|
||||||
|
// await axios.get(`${import.meta.env.VITE_BASE_URL_API}/room/file-dw-url?fileUrl=${item.fileUrl}&fileId=${item.id}`, {
|
||||||
|
// headers: {
|
||||||
|
// "Authorization": `Bearer ${user.token}`,
|
||||||
|
// "responseType": 'stream'
|
||||||
|
// },
|
||||||
|
// onDownloadProgress: (progressEvent: any) => {
|
||||||
|
// const totalLength = item.size;
|
||||||
|
// const percentComplete = (progressEvent.loaded / totalLength * 100).toFixed(2);
|
||||||
|
// console.log(`下载进度: ${percentComplete}%`);
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// await axios.get(`${import.meta.env.VITE_BASE_URL_API}/room/file-dw-url?fileUrl=${item.fileUrl}&fileId=${item.id}`, {
|
||||||
|
// headers: {
|
||||||
|
// "ResponseType": "blob",
|
||||||
|
// "Authorization": `Bearer ${user.token}`
|
||||||
|
// },
|
||||||
|
// withCredentials: false,
|
||||||
|
// onDownloadProgress: (progressEvent: any) => {
|
||||||
|
// console.log(progressEvent, 33333)
|
||||||
|
// // 获取上传进度
|
||||||
|
// const {loaded, total} = progressEvent;
|
||||||
|
// const progress = Math.round((loaded * 100) / total);
|
||||||
|
// console.log(`下载进度: ${progress}%`);
|
||||||
|
// setUploadProgress(progress)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}}/>
|
||||||
|
{/* <FolderOutlined title='文件' style={{ color: '#FFA000', cursor: 'pointer' }} /> */}
|
||||||
|
</>
|
||||||
|
)}/>
|
||||||
|
</Table>
|
||||||
|
<div style={{display: 'flex', justifyContent: 'center', marginTop: '10px'}}>
|
||||||
|
<Pagination size="small" total={fileList.total} onChange={(e) => {
|
||||||
|
setFileList({
|
||||||
|
...fileList,
|
||||||
|
pageIndex: e
|
||||||
|
})
|
||||||
|
}} pageSize={fileList.pageSize} current={fileList.pageIndex} hideOnSinglePage={true}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end'}}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
export default SharedFilesModel
|
export default SharedFilesModel
|
||||||
Loading…
Reference in New Issue